以下はjQueryコードを書く際の基本規約とベストプラクティスです。これらはネイティブJSの規約とベストプラクティスを含みません。

jQueryの読み込み

1、可能な限りCDNを使用してjQueryを読み込みます。

<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.html" type="text/javascript"><\/script>')</script>

百度公共CDNライブラリは国内のすべての地域で速度が最も速いと思われ、JSライブラリも多く、皆さんにおすすめします。

<script src="../libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

又拍云JSライブラリ高速化サービスは国内でのアクセス速度がなかなか良いですが、残念ながらJSライブラリが比較的少ないです。

<script src="../upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js"></script>

新浪JS/CSSライブラリは新浪SAE公共ライブラリとも呼ばれ、国内でのアクセス速度がなかなか良く、JSライブラリも充実しているので、皆さんにおすすめします。

<script src="http://lib.sinaapp.com/js/jquery/1.8.3/jquery.min.js"></script>

jQuery変数

• 1、jQueryオブジェクトを使用またはキャッシュするすべての変数は、$で始めます。
• 2、jQueryセレクタが返すオブジェクトは常にローカル変数にキャッシュして再利用します。

  var $myDiv = $("#myDiv");
  $myDiv.click(function(){....});

• 3、キャメルケースで変数を命名します。

セレクタ

• 1、IDセレクタが使える場合はID選択を使用します。内部ではdocument.getElementById()。
• 2、クラス/擬似クラスセレクタを使用する場合、DOMツリー全体をスキャンしないように、常にセレクタに要素タイプを付けます。

 // BAD 在整个DOM树中扫描"products"类名
var $products = $(".products");

// GOOD 只在DIV元素中扫描"products"类名
var $products = $("div.products");

• 3、ID > 子ノード階層セレクタではfind()メソッドを使用します。前半部分のセレクタはSizzleセレクタエンジンを使用して要素を検索していないためです。

// BAD, Sizzle选择器引擎查找层级
var $productIds = $("#products div.id");

// GOOD, 只有div.id走Sizzle选择器引擎
var $productIds = $("#products").find("div.id");

• 4、セレクタの後半部分は前半部分より明確にします。

// 未优化
$("div.data .gonzalez");

// 优化
$(".data td.gonzalez");

• 5、冗長なセレクタを避けます。

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

// Better: 有必要时要去掉中间不必要的内容
$(".data td.gonzalez");

• 6、セレクタにコンテキストを追加します。

// 要扫描整个DOM树寻找
$('.class');

// 只在#class-container里扫描
$('.class', '#class-container');

• 7、ワイルドカードセレクタの使用を避けます。

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

• 8、暗黙的なワイルドカードセレクタの使用を避けます。以下のinputを省略すると、暗黙的にワイルドカードセレクタが使用されます。

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

• 9、IDセレクタはdocument.getElementById()、IDセレクタはIDをネストする必要はありません。

$('#outer #inner'); // BAD
$('div#inner'); // BAD
$('.outer-container #inner'); // BAD
$('#inner'); // GOOD

DOM操作

• 1、常に既存のDOM要素をdetachしてから操作し、その後DOMにattachします。

var $myList = $("#list-container > ul").detach();
//...针对$myList的许多DOM操作
$myList.appendTo("#list-container");

• 2、.append()メソッドではなく、文字列連結またはarray.join()を使用します。

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

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

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

• 3、不明な要素を操作しないでください。

// BAD: 这个函数内部要先执行3个函数，才发现选择器选择到的可能是空内容
$("#nosuchthing").slideUp();

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

イベント

• 1、各ページでDocument Ready関数を1つだけ使用します。デバッグに役立ちます。
• 2、匿名関数を使用してイベントをバインドしないでください。匿名関数はデバッグ、保守、テスト、再利用に不利です。

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

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

• 3、Document ready関数は匿名関数にすべきではありません。匿名関数は再利用できず、テストもできません。

$(function(){ .. }); // BAD: 不容易复用也不利于测试

// GOOD
$(initPage); // or $(document).ready(initPage);
function initPage(){
  // Document ready里可以初始化变量和调用其他初始化函数
}

• 4、Document ready関数は外部ファイルに置き、他の初期化設定の後に、インラインJSでこれらの関数を呼び出します。

<script src="my-document-ready.js.html"></script>
<script>
  // 任何其他需要设置的全局变量
  $(document).ready(initPage); // or $(initPage);
</script>

• 5、HTMLファイルに動作（インラインJS）を追加しないでください。デバッグの悪夢です。常にjQueryを使用してイベントをバインドすると、後でイベントをアンバインドするのが簡単になります。

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

• 6、必要に応じて、イベントにカスタム名前空間を使用します。これにより、特定のDOM要素の特定のイベントをアンバインドする際、そのDOM要素の他のイベントに影響を与えずに済みます。

$("#myLink").on("click.mySpecialClick", myEventHandler); // GOOD
// 后面会很容易的解绑这个特定的点击事件
$("#myLink").unbind("click.mySpecialClick");

Ajax

• 1、使用を避けます.getJSON()と.get()、のみを使用します$.ajax()、前の2つは内部で後者を使用しています。
• 2、...ではhttpsのウェブサイトで使用httpリクエスト。プロトコル相対URL（URLからhttp/httpsを削除）を重視します。
• 3、リクエストパラメータをURLに置かず、dataオブジェクトに置きます。

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

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

• 4、データのタイプを明示的に設定しますdataType、これにより現在処理しているデータが何かを簡単に把握できます。
• 5、Ajaxで読み込んだDOM要素にイベントをバインドする場合は、できるだけイベント委任を使用します。イベント委任の利点は、Ajaxで後からDOMに追加された要素もイベントに応答できることです。

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

• 6、Promiseを使用します

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

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

• 7、Ajaxテンプレートコード：

var jqxhr = $.ajax({
  url: url,
  type: "GET",      // 默认值GET，可根据需要配置
  cache: true,      // 默认值true, dataType是'script'或'jsonp'时为false，可根据需要配置
  data: {},         // 请求参数对象
  dataType: "json", // 设置数据类型
  jsonp: "callback",// 只在操作JSONP时设置此项
  statusCode: {     // 针对特定错误码的回调处理函数
    404: handler404,
    500: handler500
  }
});
jqxhr.done(successHandler);
jqxhr.fail(failureHandler);

エフェクトとアニメーション

1、統一されたアニメーション実装方法を採用します。

2、ユーザーエクスペリエンスを追求する場合を除き、アニメーション効果を使いすぎないでください。

• 可能な限り、シンプルなshow/hide/toggle/slideUp/slideDownメソッドを使用して要素の表示・非表示を行います。
• 可能な限り、定義済みのアニメーション時間間隔を使用します：slow,fast或400

プラグイン

• 1、常に保守が行き届き、ドキュメントが優れ、テストが充実し、コミュニティサポートがあるプラグインを選択します。
• 2、そのプラグインが使用中のjQueryバージョンと互換性があるか注意深く確認します。
• 3、汎用的なコンポーネントはすべてjQueryプラグインとして抽出すべきです。

チェーン記法

• 1、変数キャッシュやセレクタメソッドの複数回呼び出しではなく、できるだけチェーン記法を使用します。

$("#myDiv").addClass("error").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"); // BAD
// GOOD
$myList.attr({
    href: "#",
    title: "my link",
    rel: "external"
});

• 2、CSSをjQueryに混ぜないでください。

$("#mydiv").css({'color':red, 'font-weight':'bold'}); // BAD

.error { color: red; font-weight: bold; } /* GOOD */
$("#mydiv").addClass("error"); // GOOD

• 3、非推奨（deprecated）のメソッドを使用しないでください。
• 4、必要に応じてネイティブJSメソッドを使用します。

$("#myId"); // 还是慢了些
document.getElementById("myId");

関連リソース

• jQueryチュートリアル