jQueryを効率的に使用する方法

プログラマーとして、jQuery と javascript を使用することは間違いありません。では、優れたプログラムを開発したい場合、jQuery と javascript をより効率的に使用して、jQuery と javascript コードを改善するにはどうすればよいでしょうか。優れたコードは速度を向上させ、レンダリングと応答が速いということは、ユーザー エクスペリエンスが向上することを意味します。したがって、このセクションの内容は、jQuery と JavaScript の効率的な使用方法を紹介することです。

まず、jQuery は JavaScript であることを覚えておいてください。これは、同じコーディング規約、スタイルガイド、ベストプラクティスを採用する必要があることを意味します。

まず、JavaScript の初心者の方は、「初心者のための 24 の JavaScript ベスト プラクティス」を読むことをお勧めします。これは、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=$('#second');
var value=$first.val();

// 建议 - 在 jQuery 对象前加 $ 前缀    
var $first=$('#first');
var $second=$('#second'),
var value=$first.val();

4. varchain (single var モード) を使用する

複数の var ステートメントを 1 つのステートメントに結合する。未割り当ての変数を最後に置くことをお勧めします。

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

5. 'on' を使用してください

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

//糟糕$first.click(function(){    $first.css('border','1px solid red');    $first.css('color','blue');});
$first.hover(function(){    $first.css('border','1px solid red');})
// 建议$first.on('click',function(){    $first.css('border','1px solid red');    $first.css('color','blue');})
$first.on('hover',function(){    $first.css('border','1px solid red');})

6. JavaScript を簡素化する

一般に、関数は可能な限り組み合わせるのが最善です。

//糟糕$first.click(function(){    $first.css('border','1px solid red');    $first.css('color','blue');});
//建议$first.on('click',function(){    $first.css({        'border':'1px solid red',        'color':'blue'    });});

7. 連鎖操作

jQuery はメソッドの連鎖操作を非常に簡単に実装できます。以下を活用してください。

//糟糕$second.html(value);$second.on('click',function()
{    alert('hello everybody');});$second.fadeIn('slow');$second.animate({height:'120px'},500);
//建议$second.html(value);$second.on('click',function()
{    alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500);

8. コードの可読性を維持する

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

//糟糕$second.html(value);$second.on('click',function()
{    alert('hello everybody');}).fadeIn('slow').animate({height:'120px'},500);
//建议$second.html(value);$second    .on('click',function(){ alert('hello everybody');})    .fadeIn('slow')    .animate({height:'120px'},500);

9. 短絡評価を選択します

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

//糟糕function initVar($myVar) {    if(!$myVar) {        $myVar=$('#selector');    }}
//建议function initVar($myVar) {    $myVar=$myVar || $('#selector');}

10. ショートカットを選択する

コードを合理化する 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();

15. 暗黙的なユニバーサル セレクターを避ける

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

//糟糕$('.someclass :radio');
//建议$('.someclass input:radio');

16. セレクターの最適化

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

//糟糕$('div#myid'); $('div#footer a.myLink');
// 建议$('#myid');$('#footer .myLink');

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

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

//糟糕$('#outer #inner');
//建议$('#inner');

18. 最新バージョンを使用してください

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

19. 非推奨のメソッドを放棄する

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

//糟糕- live 已经废弃   $('#stuff').live('click',function() {  console.log('hooray');});
// 建议$('#stuff').on('click',function() {  console.log('hooray');});
// 注：此处可能不当，应为live能实现实时绑定，delegate或许更合适

20. CDN を使用する

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

21. 必要に応じて jQuery と JavaScript のネイティブ コードを組み合わせる

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

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

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

上記は jQuery と JavaScript を効率的に使用する方法です。この記事を読んで、皆さんの開発に役立つことを願っています。

関連する推奨事項:

JS と JQUERY の違いは何ですか

jq ソース コード内の $,jQuery に関連付けられたメソッド

JQuery フォーム検証サンプル コード

以上がjQueryを効率的に使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。