jquery高級プログラミングの最適実践詳細

jQueryを読み込みます
1.CDNを使ってjQueryをロードすることを堅持します。このような他のサーバーは無料でファイルを管理してくれます。CDNを使うメリットをクリックして、いくつかの主流のjQuery CDNアドレスを確認してください。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>')</script>

2.安全のために、リモートCDNサーバからjQueryを取得できない時には、上記のコードに示すように、ローカルバックアップを提供したほうがいいです。詳細はこちらです。
3.ヌードプロトコルのURL（つまりhttp:またはhttps:）を使って、上のコードのように展示されています。
4.できれば、JavaScriptとjQueryコードをできるだけページの下に置いてください。詳細はここに移動するか、またはHTML 5ページの標準テンプレートを参照してください。
5.どのバージョンを使うべきですか？
もしIE 678を互換したいなら、2.xのバージョンを使ってください。互換性を考慮しない幸運に対して、最新バージョンのjQueryを使用してCDNサーバからjQueryをロードする時は、1.11ではなく、1.11.0のバージョンをフルに書いてください。また他のJSフレームを使用してProttotype、MooToolsなどもあります。彼らもドル記号を使っていますから、表を使ってアメリカ語でjQuery符号化します。代わりに'jQuery'を使ってください。また、$noConflicktを呼び出します。衝突がないことを保証します。
7.ブラウザがいくつかの新しい特性に対応しているかを確認するには、Modenizrを使ってください。挿播広告：毛不検ブラウザについて
変数について
1.jQueryタイプの変数は$プレフィックスを追加したほうがいいです。
2.jQueryセレクタが返した内容を常に変数に保存して再利用する

var $products = $("div.products"); //  
var $products = $(".products"); //  

3.猫山を使って命名する
セレクタについて
1.できるだけIDセレクタ。その背後にあるメカニズムは、元のdocument.getElemenntById()を呼び出すので、他のセレクタよりも速いです。
2.クラスセレクタを使用する場合は、要素の種類を指定します。信じません。この性能の比較

var $products = $("div.products"); //  
var $products = $(".products"); //  

3.IDお父さんの容器の下からサブ元素を探してください。find（）方法を使ってください。このようにするのが早い理由は、ID選択要素によってSizleエンジンが使えないからです。詳しくはこちらをご覧ください
4.多段検索では、右側はできるだけ詳細を指定し、左はできるだけ簡単にしてください。もっと知っている

//   
$("div.data .gonzalez");
//    
$(".data td.gonzalez");

5.冗長性を避ける。詳細または性能比較

$(".data table.attendees td.gonzalez");

//     ：        
$(".data td.gonzalez");

6.選択のコンテキストを指定します。

//      ：        DOM   .class
$('.class');
//     ：                
$('.class', '#class-container');

7.表は万能セレクタを使用します。詳細説明

$('div.container > *'); //  
$('div.container').children(); //  

8.隠蔽を警戒する万能セレクタ。省略した場合は*号のワイルドカードを使います。より多くの情報

$('div.someclass :radio'); //  
$('div.someclass input:radio'); //  

9.IDはもう一つを表しています。後ろにはdocument.getElemenntById()を使っていますので、表は他のセレクタとミックスされています。

$('#outer #inner'); //  
$('div#inner'); //  
$('.outer-container #inner'); //  
$('#inner'); //     ，      document.getElementById()

DOM操作関連
1.任意の要素を操作する前に、ドキュメントから取り外してから貼り戻します。このことはもう少し詳しく話してもいいです。

var $myList = $("#list-container > ul").detach();
//...    $myList   
$myList.appendTo("#list-container");
2.    HTML          DOM  。    ，    
//     
var $myList = $("#list");
for(var i = 0; i < 10000; i++){
    $myList.append("<li>"+i+"</li>");
}

//    
var $myList = $("#list");
var list = "";
for(var i = 0; i < 10000; i++){
    list += "<li>"+i+"</li>";
}
$myList.html(list);

//      
var array = []; 
for(var i = 0; i < 10000; i++){
    array[i] = "<li>"+i+"</li>"; 
}
$myList.html(array.join(''));

3.存在しない要素を処理しないでください。詳細

//      ：jQuery                         
$("#nosuchthing").slideUp();
//     
var $mySelection = $("#nosuchthing");
if ($mySelection.length) {
    $mySelection.slideUp();
}

イベント関連
1.1ページには1つのドキュメントreadyイベントの処理プログラムのみが書かれています。このようにコードは明らかにデバッグしやすく、コードのプロセスを追跡しやすいです。
2.表は匿名関数でイベントのコールバックを行う。匿名関数は調整・維持テストおよび多重化しにくい。本当のことを考えているかもしれませんが、ここを見てみてください。
3.ドキュメントreadyイベントのフィードバックも匿名関数で行い、匿名関数はデバッグ・保守テストと多重化しにくい。
4.さらに、外部ファイルにreadyイベントの処理プログラムを入れても良いです。ページに埋め込まれたコードは呼び出しだけでいいです。

$("#myLink").on("click", function(){...}); //    
//   
function myLinkClickHandler(){...}
$("#myLink").on("click", myLinkClickHandler);

5.千万表にHTMLのJSコードを書いてください。これはデバッグの悪夢です。いつもjQueryを使ってイベントの持ち込み手続きを結びつけるべきです。これでいつでも動態的にバインディングをキャンセルすることができます。

$(function(){ ... }); //      ：                 

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

6.可能な限り、イベントハンドラをバインディングする時に名前空間を使用すれば、他のバインディングに影響を与えずにバインディングを簡単にキャンセルすることができます。

<script src="my-document-ready.js"></script>
<script>
 //             
 $(document).ready(initPage); //    $(initPage);
</script>

非同期操作
1.直接$ajax()を使って表を使います。getJson()または.get()は、jQuery内部では元にします。
2.表はHTTPSサイトに対してHTTPを使って要求を開始します。いっそのことテーブルに指定したほうがいいです。（HTTPまたはHTTPSをあなたのURLから削除します。）
3.表はリンクにパラメータを埋め込み、専用のパラメータ設定を使って転送

<a id="myLink" href="#" onclick="myEventHandler();">my link</a> <!--   -->
$("#myLink").on("click", myEventHandler); // GOOD

4.できるだけデータの種類を指定して、自分でどのようなデータを処理しますか？
5.非同期動的にロードされたコンテンツについては、エージェントを使用してイベントハンドラをバインドすることが望ましい。このような利点は、後に動的にロードされる要素イベントに対しても同様に効果的である。もっと知りたいかもしれません。
6.Promiseモードを使用します。その他の例

$("#myLink").on("click.mySpecialClick", myEventHandler); //   
//   ，          
$("#myLink").unbind("click.mySpecialClick");

7.標準のAjaxテンプレートの一部分。ルーツ

//        ...
$.ajax({
    url: "something.php?param1=test1&param2=test2",
    ....
});

//     ...
$.ajax({
    url: "something.php",
    data: { param1: test1, param2: test2 }
});

アニメーションと効果
1.一貫したスタイルで統一されたアニメーションを実現する
2.ユーザー体験を遵守し、アニメーション効果を乱用する。
簡潔な表示非表示、状態切り替え、滑り込みなどの効果を用いて、設定された設定値を使って設定された要素の速度「fast」、「slow」、または400（中速）プラグインの関連性を示す。
1.常に良好なサポートがあり、文書を改善し、全面的にテストし、かつ、コミュニティで活躍するプラグインを選択します。
2.使用しているプラグインと現在使用しているjQueryバージョンが互換性があるかどうかに注意してください。
3.いくつかの常用機能はjQueryプラグインと書くべきです。jQueryプラグインのテンプレート
チェーン文
1.変数でjQueryセレクタを返した結果を保存する以外に、チェーンを使って呼び出してもいいです。

$("#parent-container").on("click", "a", delegatedClickHandlerForAjax);

2.チェーン呼び出しが3回以上ある場合やコードが結合エコーでやや複雑な場合は、改行と適切なインデントを使ってコードの読み取り可能性を向上させます。

$.ajax({ ... }).then(successHandler, failureHandler);

//   
var jqxhr = $.ajax({ ... });
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

3.特に長い呼び出しは変数で中間結果を保存してコードを簡略化したほうがいいです。
その他
1.対象の字面量を使ってパラメータを伝える

var jqxhr = $.ajax({
    url: url,
    type: "GET", //    GET,         
    cache: true, //    true,   script,jsonp   false,      
    data: {}, //         .
    dataType: "json", //          
    jsonp: "callback", //       JSONP     
    statusCode: { //               
        404: handler404,
        500: handler500
    }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

2.表でCSSとjQueryを揉む

$("#myDiv").addClass("error").show();

3.公式Changelogに常に関心を持ち、表現は捨てた方法を使う。
4.適時にネイティブJavaScriptを使う。

$("#myLink")
    .addClass("bold")
    .on("click", myClickHandler)
    .on("mouseover", myMouseOverHandler)
    .show();