効率的な jquery を記述するための 19 のガイドライン code_jquery

まず、jQuery は JavaScript であることを覚えておいてください。これは、同じコーディング規約、スタイルガイド、ベストプラクティスを採用する必要があることを意味します。
まず、JavaScript の初心者の方は、「JavaScript 初心者のための 24 のベスト プラクティス」を読むことをお勧めします。これは、jQuery に触れる前に読むことをお勧めします。
jQuery を使用する準備ができたら、次のガイドラインに従うことを強くお勧めします。
1. 変数のキャッシュ
DOM トラバーサルはコストがかかるため、再利用される要素をキャッシュするようにしてください。

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

// おっと

h = $('#element').height();
$('#element').css('height',h-20);

// 提案

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

2 .グローバル変数を避ける
jQuery と JavaScript では、一般に、変数が関数スコープ内にあることを確認するのが最善です。

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

// おっと

$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 提案

var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

3. jQuery オブジェクトを簡単に識別できるように、ハンガリー語の命名法
を使用して変数の先頭に $ を付けます。

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

// おっと

var first = $('#first');
var Second = $('#first');
var value = $first.val();

// 提案 - jQuery オブジェクトの先頭に $

を付けます

var $first = $('#first');
var $second = $('#first'),
var value = $first.val();

4複数の var ステートメントを 1 つのステートメントに結合するには、Varchain (single Var モード)
を使用します。未割り当ての変数を最後に置くことをお勧めします。

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

var
$first = $( '#first '),
$sec = $('#second'),
値 = $first.val(),
k = 3,
cookiestring = 'SOMECOOKIESPLEASE',
i,
j,
myArray = {};

5. 'On' を使用してください
jQuery の新しいバージョンでは、短い on("click") が使用されます。類似の click() などの関数を置き換えます。以前のバージョンでは、on() は binding() でした。 jQuery バージョン 1.7 以降、イベント ハンドラーをアタッチするには on() が推奨される方法です。ただし、一貫性を保つために、単に on() メソッドをまとめて使用することもできます。

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

// おっと

$first.click(function(){
$first.css('border','1px 単色赤');
$first.css('color','blue');
});

$first.hover(function(){
$first.css('border','1px 単色赤');
})

// 推奨事項
$first.on('click',function(){
$first.css('border','1px 単色赤');
$first.css(' color','blue');
})

$first.on('hover',function(){
$first.css('border','1px 単色赤');
})

6. JavaScript を簡素化します。
一般に、可能な限り関数を組み合わせることが最善です。

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

// おっと

$first.click(function(){
$first.css('border','1px 単色赤');
$first.css('color','blue');
});

// 提案

$first.on('click',function(){
$first.css({
'border':'1px 単色赤',
'color':'blue'
});
});

7. チェーン操作
jQuery はメソッドのチェーン操作を実装するのが非常に簡単です。以下を活用してください。

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

// おっと

$秒.html(値);
$秒.on('クリック',function(){
アラート('皆さんこんにちは');
});
$秒。 fadeIn('slow');
$sec.animate({height:'120px'},500);

// 提案

$秒.html(値);
$秒.on('クリック',function(){
アラート('皆さんこんにちは');
}).fadeIn('遅い') .animate({height:'120px'},500);

8. コードの読みやすさを維持する
コードを合理化しチェーンを使用すると、コードが読みにくくなる可能性があります。ピンチや改行を追加すると、驚くべき効果が得られます。

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

// おっと

$秒.html(値);
$秒.on('クリック',function(){
アラート('皆さんこんにちは');
}).fadeIn('遅い') .animate({height:'120px'},500);

// 提案

$秒.html(値);
$秒
.on('click',function(){alert('こんにちは');})
.fadeIn('slow')
.animate({height:'120px'},500);

9. 短絡評価の選択
短絡評価は、&& を使用して左から右に評価される式です。 (論理 AND) または || (論理 OR) 演算子。

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

// おっと

function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}

// 提案

function initVar($myVar) {
$myVar = $myVar || $('#selector');
}

10. 簡略化するためのショートカット
の 1 つを選択します。コード 1 つの方法は、コーディングのショートカットを利用することです。

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

// おっと

if(collection.length > 0){..}

// 提案

if(collection.length){..}

11. 負荷の高い操作時の要素の分離
DOM 要素に対して大量の操作を実行する予定がある場合 (複数の属性または CSS スタイルを連続して設定する) )、最初に要素をデタッチしてから追加することをお勧めします。

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

// おっと

var
$container = $("#container"),
$containerLi = $("#container li"),
$element = null;

$element = $containerLi.first();
//... 多くの複雑な操作

// より良い

var
$container = $("#container"),
$containerLi = $container.find("li"),
$element = null;

$element = $containerLi.first().detach();
//... 多くの複雑な操作

$container.append($element);

12. スキルを覚える
jQuery でメソッドを使用する経験が不足している可能性があります。必ずドキュメントを確認してください。より良い、またはより高速な方法がある可能性があります。それを使うために。

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

// おっと

$('#id').data(key,value);

// 提案 (効率的)

$.data('#id',key,value);

13. サブクエリを使用して親要素をキャッシュする
前述したように、DOM トラバーサルは負荷の高い操作です。一般的なアプローチは、親要素をキャッシュし、子要素を選択するときにこれらのキャッシュされた要素を再利用することです。

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

// おっと

var
$container = $('#container'),
$containerLi = $('#container li'),
$containerLiSpan = $('#container li span');

// 提案 (効率的)

var
$container = $('#container '),
$containerLi = $container.find('li'),
$containerLiSpan= $containerLi.find('span');

14. ユニバーサル セレクターを避ける
ユニバーサル セレクターを子孫セレクターに入れると、パフォーマンスが非常に低下します。

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

// おっと

$('.container > *');

// 提案

$('.container').children();

暗黙的なユニバーサル セレクターを避ける
ユニバーサル セレクターは暗黙的であり、見つけるのが難しい場合があります。

// おっと

$('.someclass :radio');

// 提案

$('.someclass input:radio');

セレクターの最適化

たとえば、Id セレクターは一意である必要があるため、セレクターを追加する必要はありません。

// おっと

$('div#myid');

$('div#footer a.myLink');

// 推奨事項

$('#myid');

$('#footer .myLink');

15. 複数の ID セレクターを避ける

ここで ID を強調します。セレクターは一意である必要があり、追加のセレクターを追加する必要はなく、複数の子孫 ID セレクターも必要ありません。

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

// おっと

$('#外側 #内側'); // 提案

$('#inner');

16. 最新バージョンを使用する

通常、新しいバージョンの方が優れており、より軽量で効率的です。明らかに、サポートしたいコードの互換性を考慮する必要があります。たとえば、バージョン 2.0 は IE 6/7/8 をサポートしません。

非推奨のメソッドを放棄する
新しいバージョンごとに非推奨のメソッドに注意を払い、これらのメソッドの使用を避けることが非常に重要です。

コードをコピー コードは次のとおりです:// おっと - ライブは中止されました

$('#stuff').live('click', function() {
console.log('hooray');});

// 提案
$('#stuff').on('click', function() {

console.log('hooray');

});

// 注: これは不適切な可能性があります。Live ではリアルタイム バインディングを実現できるため、デリゲートの方が適切である可能性があります。
17. CDN を使用する

Google の CND を使用すると、ユーザーに最も近いキャッシュが確実に選択され、迅速に応答します。 。 (Google CNDを利用する場合はご自身でアドレスを検索してください。ここのアドレスは利用できません。jquery公式サイトが提供するCDNを推奨します。)

18. 必要に応じて jQuery と JavaScript ネイティブ コードを組み合わせる
上で述べたように、jQuery は JavaScript です。つまり、jQuery で実行できることはすべてネイティブ コードでも実行できます。ネイティブ コード (またはバニラ) は、jQuery ほど読みにくく保守しにくい可能性があり、コードは長くなります。しかし、それはより効率的であることも意味します (通常、基礎となるコードに近づくほど可読性が低くなり、パフォーマンスが向上します。たとえば、アセンブリには当然より強力な人材が必要です)。ネイティブ コードより小さく、軽く、効率的なフレームワークは存在しないということを忘れないでください

バニラと jQuery のパフォーマンスの違いを考慮して、両方の長所を吸収し、(可能であれば) jQuery と同等のネイティブ コードを使用することを強くお勧めします。

19. 最後のアドバイス

最後に、この記事を記録する目的は、jQuery のパフォーマンスを向上させることと、その他の優れた提案を行うことです。このトピックをさらに深く掘り下げたい場合は、非常に楽しいことがわかります。 jQuery は必須ではなく、単なるオプションであることに注意してください。なぜそれを使いたいのか考えてみましょう。 DOM操作?アヤックス？ステンシル？ CSSアニメーション？それともセレクターエンジン？おそらく、JavaScript マイクロフレームワークまたは jQuery のカスタマイズされたバージョンの方が良い選択でしょう。