jQueryコードを改善する25のヒント

これはJon Hobbs-Smithによって書かれた記事の翻訳です。 jQueryライブラリーに興味があるのと同じように、私はそれを非常に興味深いと思って、ブログに投稿し、ハブユーザーと共有することにしました。 始める前に、jQueryの専門家ではなく（翻訳されたように）書かれていることに注意してください。エラーが見つかった場合はお知らせください。 それでは始めましょう。

1. Google Codeからライブラリをダウンロードします

Google Codeには、jQueryを含むいくつかの一般的なJavascriptライブラリが保存されており、それらをサイトに接続する方法がいくつかあります。 さらに、ユーザーが以前にGoogleで行ったのと同じ方法でライブラリがロードされているサイトにアクセスした場合、ファイルは通常キャッシュからロードされます。

このために特別に提供されているAPIを介してライブラリをロードできます。




または直接：



接続方法の詳細については、 こちらをご覧ください 。

2.チートシートを使用する

そして、jQueryだけではありません。 ネットワーク上で、多くの言語とA4形式のライブラリ用の非常に多数の便利なチートシートを見つけることができるので、たとえば、印刷してコンピューターの隣の壁に掛けることができます。

これらへのリンクは次のとおりです。
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat-sheet/
http://colorcharge.com/jquery/

さらに、初期の投稿でチートシートについて説明しました 。

3.スクリプトを結合して圧縮する

これはおそらく、Javascriptの主なヒントの1つです。 これは、特に多数のプラグインを使用するプロジェクトに当てはまります。 ほとんどのブラウザは同時にスクリプトファイルを読み込むことができず、順次読み込みではページ全体の全体的な読み込み時間が大幅に増加します。 したがって、すべてのファイルを1つの大きなスクリプトに収集することをお勧めします。

コードを圧縮することを忘れないでください。 ほとんどのプラグインはすでに最小化されています。それ以外の場合、特に数秒しかかからないため、これを行うことをお勧めします。 たとえば、Dean EdwardsのPackerを使用できます。

4. Firebugを使用する

まだインストールしていない場合は、実行するだけです。 HTTPトラフィックの表示やCSSの問題の検出などの素晴らしいことに加えて、このアドオンはスクリプトのエラーを検出するのに役立つ優れたコマンドログを保持します。

ここでは、すべての機能の詳細な説明があります。

非常に便利なのは、アラートを使用せずに画面にメッセージと変数値を表示できる「console.info」と、コードの特定のセクションの実行時間を追跡できる「console.time」です。 それらはすべて非常に使いやすいです。

console.time('create list');

for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}

console.timeEnd('create list');

この場合、意図的に非効率的なコードを意図的に作成しました。 次に、タイマーを使用して改善の効果を示す方法を確認します。

5.セレクターをキャッシュします。

jQueryのセレクターは素晴らしいです。 それらを使用すると、ページ上の要素を選択するのが非常に簡単になりますが、スクリプトで要素を非常に集中的に使用すると、ページの速度が大幅に低下する可能性があります。

常に同じセレクターにアクセスする場合は、パフォーマンスに悪影響を与えることを恐れることなく、単純にメモリーに入力してから好きなだけ使用できます。 次のコードを見てみましょう。

for (i = 0; i < 1000; i++) {
var myList = $('.myList');
myList.append('This is list item ' + i);
}

この単純なコードの実行には、FF3のコンピューターで1066ミリ秒かかりました（IE6で実行するのにかかる時間を想像してください！）。 同じコードを実行しますが、セレクターは1回だけ使用します。

var myList = $('.myList');

for (i = 0; i < 1000; i++) {
myList.append('This is list item ' + i);
}

そして、あなたはどう思いますか？ わずか224ミリ秒で、4倍以上高速ですが、コードを1行だけ移動しました:-)

6. DOM操作を最小限にします。

前のヒントのコードをさらに高速化して、DOMでの作業を最小限に抑えることができます。 .append（）、. prepend（）、. after（）、および.wrap（）などのDOM操作は非常に高価であり、これらを使用するとコードの実行時間が長くなる場合があります。

この場合に必要なのは、文字列連結を使用してリストを作成し、その後.html（）メソッドを1回使用するだけで、コードが著しく高速になります。 例を見てみましょう。

var myList = $('#myList');

for (i=0; i<1000; i++){
myList.append('This is list item ' + i);
}

私のコンピューターでは、216ミリ秒、わずか1/5秒しか実行しませんでしたが、最初にリストを文字列として作成し、次にHTMLメソッドを使用して次のように挿入した場合：

var myList = $('.myList');
var myListItems = '';

for (i = 0; i < 1000; i++) {
myListItems += 'This is list item ' + i + '';
}

myList.html(myListItems);

そのスクリプトはすでに185ミリ秒、31ミリ秒高速で実行されます。 とにかく、それでも時間を節約でき、より複雑なコードの場合、効率はより顕著になります。

7. DOMを使用する前に、すべてを1つの要素にラップします

これがなぜこのように機能するのかを説明することはできませんが、jQueryの専門家がおそらく答えるでしょう。

ポイントは次のとおりです。 最後の例では、.html（）メソッドを使用して、1000個のリストアイテムを1つの順序付けられていないリストアイテムに挿入しました。 挿入する前に最初にそれらをULタグでラップし、次にすでに形成されたリストを別のタグ、たとえばDIVに挿入すると、1000個の要素を挿入するよりもはるかに効率的で高速になります。 すべてが明確になるように例を見てみましょう...

var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
myListItems += '<li>This is list item ' + i + '</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

このようなコードの実行時間はわずか19ミリ秒で、最初の例よりもほぼ50倍高速です。

8.クラスの代わりに識別子を使用する

jQueryでは、クラスセレクターはIDセレクターと同じように便利であるため、それほど一般的ではありません。 ただし、jQueryはgetElementByIDメソッドを使用するため、IDで要素を選択する方が適切です。これは、メソッドの一部ではなく、各ブラウザーにネイティブです。 例を見てみましょう。

前の例を使用しますが、リストの各要素が独自の一意のクラスを持つように少し変更します。 次に、リスト全体を調べて、クラスの各要素に目を向けます。

//
var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
myListItems += '<li class="listItem' + i + '">This is a list item</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

//
for (i = 0; i < 1000; i++) {
var selectedItem = $('.listItem' + i);
}

予想通り、このタスクは私のブラウザーを大幅にロードしました。 その結果、コード実行時間は5066ミリ秒（5秒以上）でした。 次に、コードを変更して、リストの各要素にクラスではなく識別子を与え、その後、IDによって各要素を調べました。

//
var myList = $('.myList');
var myListItems = '<ul>';

for (i = 0; i < 1000; i++) {
myListItems += '<li id="listItem' + i + '">This is a list item</li>';
}

myListItems += '</ul>';
myList.html(myListItems);

//
for (i = 0; i < 1000; i++) {
var selectedItem = $('#listItem' + i);
}

このコードはわずか61ミリ秒で実行されました。 ほぼ100倍高速。

9.セレクターでコンテキストを設定する

デフォルトでは、たとえば$（ '。MyDiv'）などのセレクターを使用すると、検索でDOMの構造全体が分析されます。これは、大きなページでは非常に高価になる可能性があります。

このような場合、セレクターを作成するときに、2番目のパラメーターを設定できることを忘れないでください。

jQuery(, )

コンテキストパラメータを設定することにより、必要な要素を検索する要素を指定します。これにより、jQueryはDOM構造全体を調べる必要がなくなります。

これを実証するには、前の例のコードの最初のブロックを使用します。 1000個の要素を持つ未ソートのリストを作成します。各要素には独自のクラスがあります。 さらに、リスト全体を見て、彼は各クラスに目を向けます。 この方法で各要素をソートするには、この操作に約5秒かかりました。

var selectedItem = $('#listItem' + i);

次に、順序付けられていないリスト内でのみセレクターを実行するコンテキストパラメーターが追加されました。

var selectedItem = $('#listItem' + i, $('.myList'));

このコードの実行には3818ミリ秒かかり、25％高速です。 しかし、私たちは再びコードに小さな変更を加えました。

10.チェーンを使用する

jQueryの最も注目すべき機能の1つは、メソッドチェーンを使用する機能です。 そのため、次の例では、要素のクラスを変更します。

$('myDiv').removeClass('off').addClass('on');

コードが改行でうまく機能することを忘れないでください（jQuery = JavaScriptであるため）。これにより、たとえば次の例のようにコードをより見やすく読みやすくすることができます。

$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css('background' : 'red')
.append(' !');

メソッドのチェーンを使用する習慣は、セレクターを使用する際のコードを削減するのに役立つことは注目に値します。

しかし、それだけではありません。 しかし、いくつかの関数を要素に適用したいが、そのうちの1つが要素の外観を変更した場合は、たとえば次のコードのように...

$('#myTable').find('.firstColumn').css('background','red');

テーブルを選択し、その中のfirstColumnクラスでセルを見つけ、それらを赤で色付けしました。

では、lastColumnクラスのすべてのセルを再び青にペイントしましょう。 find（）メソッドを使用したため、firstColumnクラスを持たないすべての要素をセットから除外したため、このセレクターを再度使用してテーブルの必要な要素を選択する必要があり、メソッドチェーンを続行できません。 幸いなことに、jQueryにはend（）メソッドがあり、次の例のように、前の要素セットに戻ることができます。

$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');

さらに、チェーンで使用できる独自の関数を記述することは、思っているよりはるかに簡単です。 これを行うには、要素でのすべてのアクションの完了後にそれを返すだけで十分です。

$.fn.makeRed = function() {
return $(this).css('background', 'red');
}

$('#myTable').find('.firstColumn').makeRed().append('');

簡単ではないですか？

11. animate（）メソッドについて

jQueryを初めて使い始めたとき、私はslideDown（）やfadeIn（）などの特定のアニメーションメソッドが本当に好きで、その助けにより驚くほどの効果をすばやく簡単に作成できました。 これらの各関数は、非常に機能的で使いやすいanimate（）メソッドに基づいています。

slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},

fadeIn: function(speed, callback){
return this.animate({opacity: "show"}, speed, callback);
}

animate（）メソッドは、さまざまなCSSプロパティをある値から別の値に変更するだけです。 したがって、高さ、幅、透明度、背景色、さまざまなインデントなど、必要なすべてを変更できます。

たとえば、これは、ホバーで要素の高さを100ピクセルに変更することで、メニューを簡単にアニメーション化する方法です。

$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});

他のjQuery関数とは異なり、アニメーションは実行のために自動的にキューに入れられます。 次から次へとアニメーションを開始する場合は、コールバックなしでアニメーションを2回呼び出すだけで十分です。 この例では、幅の変更が終了するとすぐに高さが変更されます。

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
});

アニメーションを並行して実行する場合は、たとえば次の例のように、メソッド呼び出しパラメーターオブジェクトに両方のスタイルを配置します。

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200, "height": 200 }, "slow");
});

プロパティは常に数値でアニメーション化できます。 さらに、 フォントや背景色など、値が数値ではないプロパティのアニメーション化に役立つプラグインをダウンロードできます。

12.イベントの委任

jQueryを使用すると、イベントをDOM要素に非常に簡単にバインドできます。これは素晴らしいことですが、多数のイベントをバインドすることは非合理的です。 イベントの委任を使用すると、多くの状況で必要な結果を達成するために、より少ないイベントをバインドできます。 例を見てみましょう。

$('#myTable TD').click(function(){
$(this).css('background', 'red');
});

単純なクリック機能により、表のセルが赤で色付けされます。 10列50行のテーブルがある場合、イベントを500要素にアタッチしていることがわかります。 しかし、イベントをテーブルにバインドし、テーブルをクリックして赤でペイントするセルを決定できたらどうでしょうか？

これは、イベント委任と呼ばれるものです。 仕組みを見てみましょう。

$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});

「e」には、マウスでクリックされたオブジェクトなど、イベントに関する情報が含まれます。 ユーザーがクリックしたセルを特定するだけです。

さらに、要素の委任には別のプラスもあります。 通常、イベントを任意の要素にバインドすると、これらの要素にバインドされ、それ以上はバインドされません。 ページの作業中に、セレクターにも対応する新しい要素をDOMに追加した場合、ハンドラーはそれらに適用されなくなります。 委任を使用する場合は、イベントバインド後にDOMに好きなだけ要素を追加できます。これらの要素に問題はありません。

13.クラスを使用して状態を保存する

これは、htmlコードブロック情報を保存する最も簡単な方法です。 jQueryは、要素をクラスで操作するのに適しています。したがって、要素の状態に関する情報を保存する必要がある場合は、この目的のために特別なクラスを使用してください。

次の例では、ドロップダウンメニューを作成します。 ボタンクラスのレイヤーをクリックすると、サブメニュー（パネルクラス）は、表示されていない場合はslideDown（）からドロップアウトし、反対に開いている場合はslideUp（）から非表示になります。 それでは、HTMLから始めましょう。

<div class="menuItem expanded">
<div class="button">

</div>
<div class="panel">
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
</ul>
</div>
</div>

とても簡単です！ 次に、サブメニューの状態を保存する特別なクラスを追加します。 結果として、slideUp（）およびslideDown（）を使用してサブメニューを非表示または表示するボタンクラスディーバのクリックハンドラーを記述するだけです。

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.hasClass("expanded")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed")) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});

これは非常に単純な例ですが、特別なクラスを追加して、HTMLコードに関する必要な情報を保存できます。

通常、このアプローチは単純な場合に使用されます。 より複雑な場合は、次のヒントの内容を参照することをお勧めします。

14.組み込みのdata（）メソッドを使用してデータを保存する

何らかの理由で、以下で説明する関数は十分に文書化されていませんが、それでもjQueryにはDOM要素のキーと値の情報を格納するために使用できる組み込みのdata（）メソッドがあります。 その使用例を見てみましょう。

$('#myDiv').data('currentState', 'off');

前のヒントから例を改良できます。 同じHTMLコードを使用しますが、data（）メソッドを使用して情報を保存します。

$('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});

これが良くなることに同意すると思います。 data（）およびremoveData（）メソッドの詳細については、jQueryのドキュメントセクションをご覧ください。

15.セレクターを書く

JQueryには多数の組み込みセレクタがあります。 しかし、jQueryに解決策がない属性に基づいて要素を選択する必要がある場合はどうしますか？

もちろん、最初にクラスをクラスに割り当て、それからこれらの要素にアクセスできます。 ただし、独自のセレクタを作成することはそれほど難しくありません。

例を見てみましょう。

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});

コードの最初のブロックは、高さが100ピクセルを超えるすべての要素を選択するセレクターを作成します。 2番目のブロックは、そのような要素にクリックハンドラーをバインドするために使用されます。 このトピックをさらに発展させることができますが、このツールがどれほど強力であるか既に気づいており、Googleで他の多数の自己記述セレクタを簡単に見つけることができると思います。

16. HTMLを単純化し、ロード時に変更する

タイトルは非常に重要ですが、このヒントはコードの外観を改善し、重量とロード時間を削減し、SEOをある程度支援することができます。 例として次のHTMLコードを見てみましょう。

<div class="fieldOuter">
<div class="inner">
<div class="field"> 1</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span> </span></div>
</div>
</div>
<div class="fieldOuter">
<div class="inner">
<div class="field"> 2</div>
</div>
<div class="errorBar">
<div class="icon"><img src="icon.png" alt="icon" /></div>
<div class="message"><span> </span></div>
</div>
</div>

これはマークアップフォームの例で、わかりやすくするために少し変更されています。 コードがあまり見栄えが良くないことに同意し、フォームサイズが大きいと不快なページが表示されることに同意するでしょう。 同意して、次のコードはより良く見えます。

<div class="field"> 1</div>
<div class="field"> 2</div>
<div class="field"> 3</div>
<div class="field"> 4</div>
<div class="field"> 5</div>

ここで必要なのは、jQueryを使用して、繰り返しコードフラグメントをその場所に返すことだけです。

$(document).ready(function() {
$('.field').before('<div class="fieldOuter"><div class="inner">');
$('.field').after('</div><div class="errorBar"><div class="icon">
<img src="icon.png" alt="icon" /></div><div class="message">
<span> </span></div></div></div>');
});

コードフラグメントの読み込みはページの読み込み時に顕著になる可能性があるため、常にこれを行うことはお勧めできませんが、多くの場合、繰り返しHTMLコードを使用する場合、このヒントはページの重量を減らすのに役立ち、繰り返しフラグメントを減らす一方でSEOのメリットもあります。 。

17.スピードとSEOのコンテンツダウンロード

ページの読み込みを高速化し、HTMLを読みやすくする別の方法は、ページの読み込みが完了した後にAJAXリクエストを使用してコードフラグメント全体を読み込むことです。 ユーザーは最終的に必要なものを取得し、検索ボットは表示したいものだけを表示します。

次の例のようにこれを行うことができます...

$('#forms').load('content/headerForms.html', function() {
//
});

ここではすべてが明らかだと思います。

もちろん、繰り返しますが、このアドバイスはどこでも使用すべきではありません。 これによりサーバーに追加の負荷が発生し、ページの一部がユーザーにしばらく利用できない可能性があることを理解する必要があります。 しかし、正しく使用すると、これは優れた最適化手法として役立ちます。

18. jQuery関数を使用する

jQueryは、クールなアニメーション効果を作成するためだけのものではありません。 開発者は、JavaScript機能の一般的な欠点のいくつかを補うことができるいくつかの本当に便利なメソッドをライブラリに組み込みました。

http://docs.jquery.com/Utilities

特に、一部のブラウザーは配列を操作するための機能を完全にはサポートしていません（たとえば、IE7はindexOf（）メソッドさえサポートしていません）。 jQueryには、配列の重複を反復、フィルタリング、複製、マージ、および削除するためのメソッドがあります。

別の一般的な問題は、ドロップダウンリストで選択したアイテムを取得するのが難しいことです。 通常のJavaScriptでは、getElementByIDを介してSELECT要素を取得し、その子を配列として取得してそれらをウォークスルーし、選択されている要素とSELECTいない要素を判別することはできません。 jQueryはこの問題を簡単に解決します...

$('#selectList').val();

したがって、メインサイトのjQueryのドキュメントを読んで時間と手間を省き、あまり知られていないが非常に便利な他の機能について読んでください。

19.他のライブラリを操作するときはnoconflictを使用します

ほとんどのjavascriptライブラリは、独自の目的で$記号を使用します。1つのページで複数のフレームワークを使用すると、エラーが発生する可能性があります。 幸いなことに、この問題は、次の例のように、.noconflict（）メソッドを使用して簡単に解決できます。

var $j = jQuery.noConflict();
$j('#myDiv').hide();

20.図面が読み込まれたかどうかを確認する方法

これは、文書化されていない価値のある問題の1つですが、フォトギャラリーやカルーセルなどを作成するときに頻繁に表示され、実際には非常に簡単に解決されます。

必要なのは、IMG要素の.load（）メソッドと、ダウンロードが完了したときにコールバック関数を使用することだけです。 次の例では、描画タグのsrc属性を変更して新しい画像をロードし、単純なロード関数をアタッチします。

$('#myImage').attr('src', 'image.jpg').load(function() {
alert(' ');
});

ご承知のとおり、アラートは図面のダウンロードの最後に表示されます。

21.常に最新バージョンを使用する

jQueryは常に改善されており、その作成者であるJohn Resigは、ライブラリのパフォーマンスを改善する方法を常に模索しています。 この点で、フレームワークの更新（安定バージョン）を常に監視し、作業バージョンを更新することをお勧めします。

22.要素が存在することを確認する方法

jQueryは存在しないDOM要素を持つアクションを単に無視するため、要素を使用してアクションを実行する前に要素がページに存在するかどうかを確認する必要はありません。 ただし、何かが選択されているかどうか、およびその数量を本当に確認する必要がある場合は、lengthプロパティを使用してください。

if ($('#myDiv).length) {
//
}

シンプルで明白。

23. JSクラスをHTMLタグに追加

このトリックは、Karl Swedbergの本で説明されています。

jQueryをロードするときに最初に行うことは、JSクラスをHTMLタグに追加することです。

$('HTML').addClass('JS');

これはユーザー側でJavaScriptサポートが有効になっている場合にのみ発生するため、同じ理由で特別なCSSスタイルを追加できます...

.JS #myDiv{display:none;}

この方法では、JavaScriptサポートが有効になっている場合はページのコンテンツを非表示にし、必要に応じてjQueryを使用して表示できます（これはたとえばクリックして表示されるドロップダウンパネル）。JavaScriptを使用していないユーザー（および検索ボット）は、すべてのコンテンツを表示するだけです。

24.デフォルトアクションを回避するために「false」を返す

これは非常に明白ですが、一部の人にとってはなじみがないかもしれません。このようにする習慣がある場合...

!

...そして、このようなイベントハンドラをアタッチします... ...その後、クリックするとそれが表示される長いページで作業するまで、すべてがうまくいきますc＃リンクでは、ページの上部に移動します。この場合、デフォルトのアクションを回避するために必要なことは、イベントハンドラに「return false;」を追加することだけです。たとえば、次のようになります。

$('popup').click(function(){
// -
});





$('popup').click(function(){
// -
return false;
});

25.短縮されたイベントレコードの準備

切り捨てられた$（ドキュメント）.readyの書き込みに関するアドバイス。これにより、数文字が節約されます。

代わりに...あなたは書くことができます...

$(document).ready(function (){
//
});



$(function (){
//
});

ご清聴ありがとうございました。このライブラリに関する私のブログで、これと他のjQueryの投稿を見つけることもできます。さらに、Twitterでフォロワーに会えるのを楽しみにしています。