jquery_jquery での高度なプログラミングのベスト プラクティスの詳細な説明

jQuery の読み込み

1. CDN を使用して jQuery をロードすることを主張します。他の人のサーバーを利用して無料でファイルをホストしてみてはいかがでしょうか。ここをクリックすると CDN を使用するメリットが表示され、ここをクリックすると主流の jQuery CDN アドレスが表示されます。

コードをコピー コードは次のとおりです:

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

2. セキュリティ上の理由から、上記のコードに示すように、リモート CDN サーバーから jQuery を取得できない場合でも Web サイトが機能できるように、ローカル バックアップを提供することが最善です。詳細はこちらをご覧ください。

3. 上記のコードに示すように、ネイキッド プロトコル URL を使用します (つまり、http: または https: を削除します)。

4. 可能であれば、JavaScript と jQuery コードをページの下部に配置するようにしてください。詳細についてはここをクリックするか、標準の HTML5 ページ テンプレートを参照してください。

5. どのバージョンを使用すればよいですか?

IE678 との互換性を維持したい場合は、バージョン 2.x を使用してください
互換性を考慮する必要がない幸運な少数の場合は、jQuery の最新バージョンを使用することを強くお勧めします
ロードするときCDN サーバーからの jQuery、それが最善です 完全バージョンを作成します (1.11 の代わりに 1.11.0 など、または 1 を直接書き込みます)
繰り返しロードしないでください
6. Prototype などの他の JS フレームワークも使用している場合は、 MooTools、Zepto Yunyun、$ 記号も使用されるため、jQuery エンコードにドル記号は使用されなくなり、代わりに「jQuery」を使用します。 $.noConflict() を呼び出すと、競合が発生しないことが保証されます。

7. ブラウザがいくつかの新機能をサポートしているかどうかを確認するには、Modernizr を使用してください。インタースティシャル広告: ブラウザが検出されない問題について

変数について

1. jQuery 型変数には $ プレフィックスを追加するのが最善です。

2. jQuery セレクターによって返されたコンテンツは常に再利用のために変数に保存します

コードをコピーします コードは次のとおりです

var $products = $("div.products"); // 遅い
var $products = $(".products"); // 速い

3. キャメルケースの名前を使用します

セレクターについて

1. IDセレクターを使ってみます。その背後にあるメカニズムは、実際にはネイティブ document.getElementById() を呼び出すことであるため、他のセレクターよりも高速です。

2. クラスセレクターを使用する場合、要素のタイプを指定します。私の言うことが信じられない場合は、このパフォーマンス比較を見てください

コードをコピーします コードは次のとおりです:

var $products = $( "div.products"); // 遅い
var $products = $(".products"); // 速い

3. ID 親コンテナーの下にある子要素を検索するには、.find() メソッドを使用してください。これが速い理由は、ID による要素の選択にシズル エンジンが使用されないためです。詳細はこちらをご覧ください

4. 複数レベルの検索では、右側はできるだけ詳細に、左側はできるだけ単純にする必要があります。詳細

コードをコピー コードは次のとおりです:

// Ugly
$ (" div.data .gonzalez");
// 最適化後
$(".data td.gonzalez");

5. 冗長性を避ける。詳細またはパフォーマンスの比較を表示します

コードをコピー コードは次のとおりです:

$("。データ テーブル。出席者 td.gonzalez");

// 良い方法: 中央の冗長性を削除します
$(".data td.gonzalez");

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

コードをコピー コードは次のとおりです:

// 不適切なコード: 必要があるためです。 DOM 全体を走査して Find .class
$('.class');
// Gaopin コード: 指定されたコンテナ範囲内のみを検索する必要があるため
$('.class', '#クラスコンテナ') ;

7. テーブルはユニバーサルセレクターを使用しています。詳細な説明を表示します

コードをコピーします コードは次のとおりです:

$('div .container > * '); // 差分
$('div.container').children(); // スティック

8. 暗黙的なユニバーサルセレクターに注意してください。省略した場合、実際には * ワイルドカード文字が使用されます。詳細

コードをコピー コードは次のとおりです:

$('div.someclass : radio' ); // 悪い
$('div.someclass input:radio') // 素晴らしい

9.ID はすでに一意性を表しており、その背後で document.getElementById() が使用されているため、テーブルは他のセレクターと混在しています。

コードをコピー コードは次のとおりです:

$('#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 $myList.append( "

" i "

");
}

// それは良いです
var $myList = $("#list");
var list = "";
for(var i = 0; i list = "

" i "

";
}
$ myList .html(list);

// しかし、これはより良いです
var array = [];
for(var i = 0; i array [ i] = "

" i "

";
}
$myList.html(array.join(''));

3. 存在しない要素を扱わない。詳細

コードをコピー コードは次のとおりです:

// 悪徳行為: jQuery のバックグラウンドはrunning 3 つの関数を完了すると、この要素は実際にはまったく存在しないことがわかります
$("#nouchthing").slideUp();
// 次のようになります
var $mySelection = $("#nouchthing") ;
if ($mySelection.length) {
$mySelection.slideUp();
}

イベント関連

1. ドキュメント準備完了イベントのハンドラーは 1 つのページに 1 つだけ記述します。このように、コードは明確でデバッグしやすく、コードの進行状況を追跡するのも簡単です。

2. テーブルはイベント コールバックとして匿名関数を使用します。匿名関数は、デバッグ、保守、テスト、再利用が困難です。もっと真剣に考えたい場合は、ここを見てください

コードをコピーします コードは次のとおりです:

$(" #myLink").on("click", function(){...}); // これのように
// このように
function myLinkClickHandler(){... }
$("# myLink").on("click", myLinkClickHandler);

3. ドキュメント準備完了イベントを処理するコールバックでも匿名関数が使用されます。匿名関数はデバッグ、保守、テスト、再利用が困難です: (

コードをコピー コードは次のとおりです:

$(function(){ ... }); // 悪い習慣: この関数は使用できず、テスト ケースは使用できません。そのために書かれています

// 良い実践例
$(initPage); // または $(document).ready(initPage);
function initPage(){
// ここで次のことができますプログラムを初期化します
}

4. さらに、ready イベント ハンドラーも外部ファイルに配置してページに導入することが最善であり、ページに埋め込まれたコードを呼び出すだけで済みます。

コードをコピー コードは次のとおりです:

<script><br> // 必要なグローバル変数を初期化します<br> $(document).ready(initPage); // または $(initPage); <br></script>

5. HTML には何千万もの JS コードがインラインで記述されており、デバッグは悪夢です。イベント自体をバインドするには、常に jQuery を使用して、いつでも動的にバインドを解除できるようにする必要があります。

コードをコピー コードは次のとおりです:

私のリンク
$ ("#myLink").on("click", myEventHandler) // 良い

;

6. 可能であれば、他のバインドに影響を与えずに簡単にバインドを解除できるように、イベント ハンドラーをバインドするときに名前空間を使用するようにしてください。

コードをコピー コードは次のとおりです:

$("#myLink").on ("click .mySpecialClick", myEventHandler); // 悪くない
// その後、正常にバインドを解除しましょう
$("#myLink").unbind("click.mySpecialClick");

非同期操作

1. .getJson() や .get() の代わりに $.ajax() を直接使用します。これは、jQuery が内部的に前者に変換するためです。

2. HTTP を使用して HTTPS サイトのリクエストを開始することを推奨します (URL から HTTP または HTTPS を削除します)。

3. テーブルにはリンクにパラメータが埋め込まれています。

コードをコピーしてください コードは次のとおりです。以下:

// 読みにくいコード...
$.ajax({
url: "something.php?param1=test1¶m2=test2",
....
});

// 読みやすくなりました...
$.ajax({
url: "something.php",
data: { param1: test1, param2: test2 }
});

4. 処理するデータの種類がわかるように、データ型を指定してみます (下記の Ajax テンプレートを参照してください)

5. 非同期で動的に読み込まれるコンテンツの場合は、プロキシを使用してイベント ハンドラーをバインドするのが最善です。この利点は、後で動的にロードされる要素イベントにも有効であることです。さらに詳しく知りたい場合があります

コードをコピー コードは次のとおりです:

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

6. Promise モードを使用します。その他の例

コードをコピー コードは次のとおりです。

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

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

7. 標準 Ajax テンプレートのワンポイント。根本原因の追求

コードをコピー コードは次のとおりです:

var jqxhr = $。 ajax({
url: url,
type: "GET", // デフォルトは GET ですが、必要に応じて変更できます
キャッシュ: true, // デフォルトは true ですが、スクリプトの場合、 jsonp タイプは false です。自分で設定できます。
data: {}, // ここにリクエスト パラメーターを入力します。
dataType: "json", // 必要なデータ型を指定します。
jsonp: "callback ", // JSONP 型を処理するコールバックを指定します Request
statusCode: { // 各ステータスでエラーを処理したい場合
404: handler404,
500: handler500
}
});
jqxhr.done(successHandler) ;
jqxhr.fail(failureHandler);

アニメーションと特殊効果

1. 一貫性のある統一されたアニメーションの実装を維持します

2. ユーザー エクスペリエンスを厳密に従い、アニメーション特殊効果の乱用を避けます

単純な表示/非表示、状態切り替え、スライドインおよびスライドアウト効果を使用して要素を表示します

プリセット値を使用してアニメーション速度を「高速」、「低速」、または 400 (中速) に設定します)
プラグイン関連

1. 優れたサポート、優れたドキュメント、徹底したテスト、活発なコミュニティを備えたプラグインを常に選択してください

2. 使用するプラグインが現在使用している jQuery のバージョンと互換性があるかどうかに注意してください

3. いくつかの一般的な関数は jQuery プラグインとして作成する必要があります。 1分でわかるjQueryプラグイン作成テンプレート

チェーン構文

1. jQuery セレクターから返された結果を保存するために変数を使用するだけでなく、チェーン呼び出しを活用することもできます。

コードをコピー コードは次のとおりです:

$("#myDiv").addClass ("エラー ").show();

2. チェーン呼び出しが 3 つを超える場合、またはバインドされたコールバックによりコードが少し複雑になる場合は、改行と適切なインデントを使用してコードを読みやすくします。

コードをコピー コードは次のとおりです:

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

3. 特に長い呼び出しの場合は、コードを簡素化するために変数を使用して中間結果を保存するのが最善です。

その他

1. オブジェクト リテラルを使用してパラメーターを渡します

コードをコピーします コードは次のとおりです:

$myLink.attr("href", "#").attr("title", "my link").attr("rel", "external"); // おっと: attr が 3 回呼び出されました
// はい、attr
$myLink.attr({
href: "#",
title: "my link",
rel: "external"
});

2. CSS と jQuery を組み合わせる

コードをコピーします コードは次のとおりです:

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // Bad
.error {/* Good*/
color: red ;
フォントの太さ: 太字;
}
$("#mydiv").addClass("error");

3. 常に公式の変更ログに注意し、放棄された方法を使用してください。

4. 必要に応じてネイティブ JavaScript を使用します。

コードをコピー コードは次のとおりです。

$("#myId") / / いくらならまだ劣ります...