jQueryを効率的に使用する方法-jsチュートリアル-php.cn

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

小云云

リリース： 2017-11-17 11:10:02

オリジナル

1489 人が閲覧しました

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

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

まず、JavaScript の初心者の方は、「初心者のための 24 の JavaScript ベストプラクティス」を読むことをお勧めします。これは、jQuery を始める前に読むことをお勧めします。

jQuery を使用する準備ができたら、次のガイドラインに従うことを強くお勧めします:

1. 変数をキャッシュする

DOM トラバーサルはコストがかかるため、再利用される要素をキャッシュするようにしてください。

//糟糕h=$(&#39;#element&#39;).height();$(&#39;#element&#39;).css(&#39;height&#39;,h-20);
//建议$element=$(&#39;#element&#39;);h=$element.height();$element.css(&#39;height&#39;,h-20);

ログイン後にコピー

2. グローバル変数を避ける

jQuery JavaScript と同様に、一般に、変数が関数のスコープ内にあることを確認することが最善です。

//糟糕$element=$(&#39;#element&#39;);h=$element.height();$element.css(&#39;height&#39;,h-20);
//建议var $element=$(&#39;#element&#39;);var h=$element.height();$element.css(&#39;height&#39;,h-20);

ログイン後にコピー

3. ハンガリー語の命名法

を使用して変数の先頭に $ を付け、jQuery オブジェクトを簡単に識別します。

//糟糕
var first=$(&#39;#first&#39;);
var second=$(&#39;#second&#39;);
var value=$first.val();

ログイン後にコピー

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

6. JavaScript を簡素化する

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

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

ログイン後にコピー

7. 連鎖操作

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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 でのメソッドの使用に慣れていない可能性があります。必ずドキュメントを確認してください。より良い、またはより高速な使用方法があるかもしれません。

//糟糕$(&#39;#id&#39;).data(key,value);
// 建议 (高效)  $.data(&#39;#id&#39;,key,value);

ログイン後にコピー

13. サブクエリを使用して親要素をキャッシュする

前述したように、DOM トラバーサルはコストのかかる操作です。一般的なアプローチは、親要素をキャッシュし、子要素を選択するときにこれらのキャッシュされた要素を再利用することです。

//糟糕var     $container=$(&#39;#container&#39;),    $containerLi=$(&#39;#container li&#39;),    $containerLiSpan=$(&#39;#container li span&#39;);
// 建议 (高效)  var     $container=$(&#39;#container &#39;),    $containerLi=$container.find(&#39;li&#39;),    $containerLiSpan= $containerLi.find(&#39;span&#39;);

ログイン後にコピー

14. ユニバーサルセレクターを避ける

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

//糟糕$(&#39;.container > *&#39;);
//建议$(&#39;.container&#39;).children();

ログイン後にコピー

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

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

//糟糕$(&#39;.someclass :radio&#39;);
//建议$(&#39;.someclass input:radio&#39;);

ログイン後にコピー

16. セレクターの最適化

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

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

//糟糕- live 已经废弃   $(&#39;#stuff&#39;).live(&#39;click&#39;,function() {  console.log(&#39;hooray&#39;);});
// 建议$(&#39;#stuff&#39;).on(&#39;click&#39;,function() {  console.log(&#39;hooray&#39;);});
// 注：此处可能不当，应为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 を効率的に使用する方法です。この記事を読んで、皆さんの開発に役立つことを願っています。