jQueryを効果的に使用するためのルール

以下に、非常に単純なルールをいくつか示します。これに続いて、jQueryとの連携は、緊張したブラウザーのガラガラに隠れることはありません。 もちろん、javascriptの速度が重要になることはあまりありませんが、これは依然として最も起こりがちな瞬間に起こる可能性があります。 したがって、これらのルールを念頭に置いて、無視しない方がよいでしょう。

1.効果的な要素検索

最も速い方法は、識別子で要素を検索することです：$（ '＃someId'）、2番目に速い方法は、タグ名で検索することです：$（ 'tagName'）。 実行速度が速いのは、内部javascript関数getElementById（）およびgetElementsByTagName（）を使用して実装されているためです。 この点で、いくつかのルールが表示されます。



（より明確にするために、例のJSコードが適用されるページのテキストを示します）

< div id ="content" >

< form method ="post" action ="/" >

< h2 > </ h2 >

< ul id ="color_light" >

< li >< input type ="radio" class ="on" name ="light" value ="red" /> </ li >

< li >< input type ="radio" class ="off" name ="light" value ="yellow" /> </ li >

< li >< input type ="radio" class ="off" name ="light" value ="green" /> </ li >

</ ul >

< input class ="button" id ="color_button" type ="submit" value ="Go" />

</ form >

</ div >

* This source code was highlighted with Source Code Highlighter .

1. 1つのアイテムを探している場合は、識別子による検索を使用します。

$('#color_button')



- $('#color_button')



実行されます

$('#content .button')



-遅くなります

$('.button:first')



-さらに遅い



2.要素のグループを探している場合、識別子と最も近い共通の親類を示します。

$('#content input')



は、単に$('input')



よりも効率的です。



3.クラスごとにアイテムを探している場合は、タグ名を指定します。

$('input.button')



は、 $('input.button')



よりも高速に検索を行います。 最初のケースでは、jQueryは最初にすべての入力要素を見つけ、それらの中から既にボタンクラスで要素を検索します。 2番目のケースでは、このためにページのすべての要素が列挙されます。



上記から、2つの基本的なルールを推測できます。

1）単一のアイテムを検索するには、検索IDを使用します： $('#someId')





2）要素のグループを検索するときは、次の式に固執するようにしてください： $('#someId tagName.someClass')







それでも、次の組み合わせでIDによる検索を改善しようとしないでください。

$('tagName#someId')

$('#wrapId #someId')





これは検索を遅くするだけです。

2.アイテムの検索結果を再利用する

同じ要素を何度も検索しないでください。最速のセレクタを使用しても、これは非常に費用のかかる手順です。

$('#myElement').bind('click', function(){...});

. . .

$('#myElement').css('border', '3px dashed yellow');

. . .

$('#myElement').fadeIn('slow');



この場合、jQueryは毎回識別子myElementを持つ要素を検索します。 要素を一度見つけて保存し、必要な操作を適用する方がはるかに賢明です：

var myElement = $('#myElement');

. . .

myElement.bind('click', function(){...});

. . .

myElement.css('border', '3px dashed yellow');

. . .

myElement.fadeIn('slow');



スクリプトの作業中に同じ要素が頻繁に使用される場合、これらの要素を一度だけ検索し、結果をグローバル変数に保存するのが賢明です。

window.elements;

function init()

{

elements = $('#someId tagName.someClass');

}



確かに、時には要素の異なるグループで操作を実行する必要がありますが、それらは接続されています。 たとえば、これらは多くの操作を実行する必要があるフォームの要素である場合があります。 この場合、必要な要素を常に探す必要があります。

$('#myForm input:checkbox') //

$('#myForm input:text') //

$('#myForm input:text[value != ""]') //

. . .



代わりに、フォームのすべての要素を一度検索し、必要に応じてそこから必要な要素を取得できます。

var inputs = $('#myForm input');

inputs.filter(':checkbox') //

inputs.filter(':text') //

inputs.filter(':text[value != ""]') //

. . .



または、リストアイテムの削除や追加など、リストアイテムで多くの操作を実行する必要がある場合があります。 この場合、リスト項目の「キャッシュ」は、その構成が絶えず変化し、「キャッシュ」が無関係であることが判明するため、良いアイデアではありません。 ただし、リスト自体のオブジェクトをグローバル変数に保存すると、計算コストも大幅に削減できます。

myList = $('#myList');

. . .

myList.find('li:first').remove(); //

myList.find('li.showed').hide(); // showed



3. DOMを使用した不要な操作を避ける

ここでの主なアイデアは、ページ上で多くの変更（要素の追加/変更）を行う場合、これらの操作をローカルで行い、その後でのみDOMを変更することです。 たとえば、100個の新しい要素をリストに追加する場合、要素ごとにこの要素を実行するのは間違っています。

var top_100_list = [...]; //

$mylist = $('#mylist'); //



for (var i=0; i< top_100_list.length; i++)

$mylist.append('<li>' + top_100_list[i] + '</li>');



すべての要素を一度に挿入する方がはるかに効率的です。

var top_100_list = [...]; //

var li_items = ""; // html-

$mylist = $('#mylist'); //



for (var i=0; i< top_100_list.length; i++)

li_items += '<li>' + top_100_list[i] + '</li>';

$mylist.append(li_items);



挿入された要素のグループが1つの要素に「ラップ」されている場合、さらに大きなゲインを得ることができます。 したがって、リストのコンテンツを100個の新しい要素に置き換えるタスクがある場合、最も最適なのはこのオプションです。

var top_100_list = [...]; //

var new_ul = "<ul id='mylist'>"; // html-

$mylist = $('#mylist'); //



for (var i=0; i< top_100_list.length; i++)

new_ul += '<li>' + top_100_list[i] + '</li>';

new_ul += "</ul>";

$mylist.replaceWith(new_ul);



要素をローカルで変更すると、すべてのコンテンツとともに要素のコピーを作成するclone（）メソッドが役立ちます。 コピーに必要なすべての変更を行った後、古いバージョンの代わりにそれらをDOMに貼り付けることができます（これはreplaceWith（）メソッドを使用して実行できます）。

4.イベントの委任を使用する

場合によっては、要素の大きなグループに同じイベントハンドラーをインストールする必要があります。 たとえば、リスト項目にマウスクリックハンドラーをインストールする必要がある場合があります。 このような場合、リストの各要素にハンドラーをインストールする代わりに、リスト自体に1つのハンドラーをインストールできます。 ご存じのように、要素で発生する標準のjavascriptイベントは、そのすべての祖先（親要素、次に祖父母など）で呼び出されます。 したがって、リストの特定の要素でイベントが発生した後、リスト自体のオブジェクトで呼び出されます。 ハンドラーに渡されるイベントオブジェクトは、event.targetプロパティでイベントが発生したユーザーを正確に把握するのに役立ちます。 常に元のイベントソースのDOMオブジェクトが含まれます。

$('#myList').click(function(event){

$(event.target).addClass('clicked'); // clicked

});