回避すべきjQueryの落とし穴[クローズド]

私はjQueryでプロジェクトを始めています。

jQueryプロジェクトでどんな落とし穴/エラー/誤解/誤用/誤用がありましたか？

パフォーマンスヒットに気付かず、セレクターをローカル変数に割り当てる代わりに、セレクターを使いすぎている。例えば：-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

のではなく：-

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

またはチェーンを使用するとさらに良い：-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

コールスタックがどのように機能するかを理解したとき、私はこれが啓蒙的な瞬間だと思いました。

編集：コメントに提案を組み込みました。

コンテキストの使用方法を理解します。通常、jQueryセレクターはドキュメント全体を検索します。

// This will search whole doc for elements with class myClass
$('.myClass');

しかし、コンテキスト内で検索することにより、物事をスピードアップすることができます：

var ct = $('#myContainer');
// This will search for elements with class myClass within the myContainer child elements
$('.myClass', ct);

次のように、裸のクラスセレクタを使用しないでください。

$('.button').click(function() { /* do something */ });

これはすべての要素を調べて、「ボタン」のクラスがあるかどうかを確認します。

代わりに、次のように手伝うことができます。

$('span.button').click(function() { /* do something */ });
$('#userform .button').click(function() { /* do something */ });

去年はレベッカ・マーフィーのブログでこれを学びました

更新 -この回答は2年以上前に出されたものであり、jQueryの現在のバージョンには正しくありません。コメントの1つには、これを証明するテストが含まれています。この回答の時点でのjQueryのバージョンを含むテストの更新バージョンもあります。

匿名関数を分割して、再利用できるようにしてください。

//Avoid
$('#div').click( function(){
   //do something
});

//Do do
function divClickFn (){
   //do something    
}

$('#div').click( divClickFn );

• ドキュメントを乱用しないでください。
• ドキュメントを初期化コードのみの準備をします。
• 常にドキュメントの外で関数を抽出して、再利用できるようにします。

doc readyステートメント内の数百行のコードを見てきました。醜く、読みにくく、維持することが不可能です。

サーバー$.ajaxへのAjaxリクエストに関数を使用している間は、completeイベントを使用して応答データを処理することは避けてください。リクエストが成功したかどうかにかかわらず起動します。

ではなくcomplete、を使用しますsuccess。

ドキュメントのAjaxイベントを参照してください。

コールバック付きの「チェイニング」アニメーションイベント。

クリックすると消える段落をアニメーション化したいとします。また、後でDOMから要素を削除する必要もありました。メソッドを単純にチェーンできると思うかもしれません：

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

この例では、.remove（）は.fadeOut（）が完了する前に呼び出され、段階的にフェードする効果を破壊し、要素を即座に消滅させます。代わりに、前のコマンドが終了したときにのみコマンドを実行する場合は、コールバックを使用します。

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

.fadeOut（）の2番目のパラメーターは、.fadeOut（）アニメーションが完了すると実行される無名関数です。これにより、徐々にフェードし、その後要素が削除されます。

同じイベントを複数回bind（）すると、複数回発生します。私はいつもunbind('click').bind('click')安全のためだけに行きます

プラグインを乱用しないでください。

ほとんどの場合、ライブラリとユーザーインターフェイスだけが必要になります。単純にしておけば、コードは長期的には保守可能になります。すべてのプラグインがサポートおよび保守されているわけではありません。実際、ほとんどのプラグインはそうではありません。コア要素を使用して機能を模倣できる場合は、強くお勧めします。

プラグインはコードに挿入するのが簡単で、時間を節約できますが、余分なものが必要な場合は、更新を失う可能性があるため、プラグインを変更することはお勧めできません。最初に節約した時間は、後で非推奨のプラグインを変更するときに失うことになります。

賢く使用するプラグインを選択してください。ライブラリとユーザーインターフェイスは別として、私は常に$ .cookie、$ .form、$ .validate、およびthickboxを使用しています。残りは主に自分のプラグインを開発しています。

落とし穴：セレクターの代わりにループを使用する。

jQueryの '.each'メソッドに到達してDOM要素を反復処理する場合は、代わりにセレクタを使用して要素を取得できるかどうかを確認してください。

jQueryセレクターの詳細：http :
//docs.jquery.com/Selectors

落とし穴：Firebugなどのツールを使用しない

Firebugは、この種のデバッグ用に実際に作成されました。JavaScriptを使用してDOMをいじくり回す場合は、Firebugのような優れたツールを使用して可視性を確保する必要があります。

Firebugの詳細：http : //getfirebug.com/

その他の素晴らしいアイデアは、ポリモーフィックポッドキャストのこのエピソードにあります： （Dave WardのjQuery Secrets） http://polymorphicpodcast.com/shows/jquery/

この識別子を正しいコンテキストで使用することの誤解。例えば：

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   $(".listOfElements").each( function()
   {
      $(this).someMethod( ); // here 'this' is not referring first_element anymore.
   })
});

そして、ここでそれを解決する方法のサンプルの1つ：

$( "#first_element").click( function( event)
{
   $(this).method( ); //referring to first_element
   var $that = this;
   $(".listOfElements").each( function()
   {
      $that.someMethod( ); // here 'that' is referring to first_element still.
   })
});

DOM全体を何度も検索することは避けてください。これは、スクリプトを実際に遅延させる可能性があるものです。

悪い：

$(".aclass").this();
$(".aclass").that();
...

良い：

$(".aclass").this().that();

悪い：

$("#form .text").this();
$("#form .int").that();
$("#form .choice").method();

良い：

$("#form")
    .find(".text").this().end()
    .find(".int").that().end()
    .find(".choice").method();

特に.each（）で、常に$（this）を意味のある変数にキャッシュする

このような

$(selector).each(function () {
    var eachOf_X_loop = $(this); 
})

レポマンが言ったことに似ていますが、完全ではありません。

ASP.NET winformsを開発するとき、私はしばしば

$('<%= Label1.ClientID %>');

＃記号を忘れます。正しい形は

$('#<%= Label1.ClientID %>');

イベント

$("selector").html($("another-selector").html());

イベントのクローンは作成されません。すべてを再バインドする必要があります。

JPのcommentに従って、trueを渡すとclone（）はイベントを再バインドします。

同じjQueryオブジェクトの複数作成を回避する

//Avoid
function someFunc(){
   $(this).fadeIn();
   $(this).fadeIn();
}

//Cache the obj
function someFunc(){
   var $this = $(this).fadeIn();
   $this.fadeIn();
}

JavaScriptについても同様ですが、jQuery、JavaScriptはCSSに取って代わるべきではありません。

また、JavaScriptがオフになっているユーザーがサイトを使用できることを確認してください（今日ほど重要ではありませんが、完全に使用可能なサイトを用意しておくと便利です）。

DOM操作が多すぎます。.html（）、. append（）、. prepend（）などのメソッドは優れていますが、ブラウザでのページのレンダリングと再レンダリングの方法が原因で、頻繁に使用すると速度が低下します。多くの場合、DOMを複数回変更するよりも、HTMLを文字列として作成し、それをDOMに1回含めるほうが適切です。

の代わりに：

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

これを試して：

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

あるいはこれ（$ wrapperは、まだDOMに注入されていない新しく作成された要素です。このラッパーdivにノードを追加してもスローダウンは発生しません。最後に、$ wrapperを$ parentに追加し、DOM操作を1つだけ使用します。 ）：

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

ClientIDを使用して、ASP.NETプロジェクトのコントロールの「実際の」IDを取得します。

jQuery('#<%=myLabel.ClientID%>');

また、SharePoint内でjQueryを使用している場合は、jQuery.noConflict（）を呼び出す必要があります。

jQueryオブジェクトの代わりにIDを関数に渡す：

myFunc = function(id) { // wrong!
    var selector = $("#" + id);
    selector.doStuff();
}

myFunc("someId");

ラップされたセットを渡す方がはるかに柔軟です。

myFunc = function(elements) {
    elements.doStuff();
}

myFunc($("#someId")); // or myFunc($(".someClass")); etc.

連鎖の過度の使用。

これを見てください：

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

説明

文字列アキュムレータスタイルを使用する

+演算子を使用すると、新しい文字列がメモリ内に作成され、連結された値がそれに割り当てられます。この後で初めて、結果が変数に割り当てられます。連結結果の中間変数を回避するために、+ =演算子を使用して結果を直接割り当てることができます。スロー：

a += 'x' + 'y';

もっと早く：

a += 'x';
a += 'y';

プリミティブな操作は、関数呼び出しよりも高速です。

パフォーマンスが重要なループおよび関数では、関数呼び出しに対する代替の基本操作の使用を検討してください。スロー：

var min = Math.min(a, b);
arr.push(val);

もっと早く：

var min = a < b ? a : b;
arr[arr.length] = val;

JavaScriptパフォーマンスのベストプラクティスで詳細を読む

ユーザーにブラウザでhtmlエンティティを表示する場合は、次のように、「テキスト」ではなく「html」を使用してUnicode文字列を挿入します。

$('p').html("Your Unicode string")

私の2セント）

通常、jqueryを使用すると、常に実際のDOM要素について心配する必要がなくなります。あなたはこのようなものを書くことができます$('div.mine').addClass('someClass').bind('click', function(){alert('lalala')})--そしてこのコードはエラーを投げることなく実行されます。

場合によっては、これが役立つ場合もあれば、まったくない場合もありますが、jqueryは、空の一致に対応する傾向があります。まだreplaceWithドキュメントに属していない要素で使用しようとすると、エラーがスローされます。私はそれがかなり直観に反していると思います。

別の落とし穴は、私の意見では、prevAll（）メソッドによって返されるノードの順序です$('<div><span class="A"/><span class="B"/><span class="C"/><span class="D"/></div>').find('span:last-child').prevAll()。実際には大したことではありませんが、この事実に留意する必要があります。

たとえば、20列のテーブルの1500行のような大量のデータでAjaxを計画している場合は、jQueryを使用してそのデータをHTMLに挿入することさえ考えないでください。プレーンJavaScriptを使用します。jQueryは遅いマシンでは遅すぎます。

また、jQueryが着信HTMLのスクリプトタグを解析してブラウザの癖を処理するなど、速度を低下させる時間の半分を実行します。高速の挿入速度が必要な場合は、プレーンJavaScriptを使用してください。

ほんの数行の通常のJavaScriptで完了することができる小さなプロジェクトでjQueryを使用します。

イベントバインディングを理解していません。JavaScriptとjQueryの動作は異なります。

好評により、例：

jQueryの場合：

$("#someLink").click(function(){//do something});

jQueryなし：

<a id="someLink" href="page.html" onClick="SomeClickFunction(this)">Link</a>
<script type="text/javascript">
SomeClickFunction(item){
    //do something
}
</script>

基本的に、JavaScriptに必要なフックは不要になりました。つまり、開発者が通常CSSの目的で利用するIDとクラスを単純に使用できるため、インラインマークアップ（onClickなど）を使用します。