jQuery 開発者が注意すべき 9 つの間違い_jquery

jQuery は非常に使いやすいため、CSS ではないことを忘れてしまうこともあります。 CSS を使用する場合、パフォーマンスについてあまり考慮する必要はありません。CSS は非常に高速なので、最適化する価値はありません。しかし、現実の世界となると、jQuery はパフォーマンスの問題で開発者を狂わせる可能性があります。気づかないうちに貴重なミリ秒を失ってしまうことがあります。また、いくつかの機能は忘れがちなので、古い (そしてあまり良くない) 機能を使い続けます。

プロジェクトで jQuery を使用する際の、最も一般的で修正が簡単な間違いをいくつか見てみましょう。

1.最新の jQuery バージョンを使用していません
各バージョンの更新は、パフォーマンスの向上といくつかのバグ修正を意味します。現在の安定版リリースは 1.7.2 ですが、1.6 以下を使用して開発されたサイトがたくさんあることは皆さんもご存知かと思います。 jQuery の更新ごとにすべての古いサイトを更新することはできません (クライアントがそうするために料金を払っている場合を除く) が、少なくとも新しいプロジェクトにはそれを使い始める必要があります。したがって、新しいプロジェクトを開始するたびに、このローカル コピーのことは忘れて、最新のリリースを入手してください。

2. CDN でホストされている jQuery のコピーを使用していません
先月のユニーク訪問者数は何人ですか?その数はまだ 10 億未満ですよね？
したがって、あなたのものではなく、Google の jQuery のコピーを使用したほうがよいでしょう。ユーザーが Google の Web サイト (またはその CDN を使用する他の多くのサイト) のキャッシュ ファイルをまだ持っている場合、ユーザーのブラウザはキャッシュされたバージョンを取得するだけで、Web サイトのパフォーマンスが大幅に向上します。次の HTML をコピーして貼り付けることで使用できます:




3. CDN バージョンのフォールバックを使用していません
Google は素晴らしいなどと言いましたが、失敗する可能性があります。したがって、外部ソースに依存する場合は常に、ローカルのフォールバックがあることを確認してください。 HTML5 定型ソース コードでこのスニペットを見たことがありますが、素晴らしいと思いました。こちらも使用してください:






4.
一般的な操作を実行している間、要素を操作するたびに要素を呼び出す必要はありません。複数の操作を続けて実行する場合は、連鎖を使用すると、jQuery が要素を 2 回取得する必要がなくなります。

代わりに:

$(“#mydiv”).hide();
$(“#mydiv”).css(“padding-left”, “50px”);

これを使用します:

$(“#mydiv”).hide().css(“padding-left”, “50px”);

5.内容をキャッシュしていません
これは、パフォーマンスに関する最も重要なヒントの 1 つです。要素を少なくとも 2 回呼び出す場合は、要素をキャッシュする必要があります。キャッシュは jQuery セレクターを変数に保存するだけなので、再度呼び出す必要があるときは変数を参照するだけでよく、jQuery は要素を見つけるために DOM ツリー全体を再度検索する必要がありません。

/* ほとんどすべての jQuery 関数が
要素を返すため、このように使用できます。そのため、$mydiv は $(“#mydiv”) と等しくなります。また、
$mydiv を使用して、それが jQuery キャッシュであることがわかるようにするのも良いでしょう。 var */

var $mydiv = $(“#mydiv”).hide();
[.. ここではたくさんの素晴らしいことが起こっています…]
$mydiv.show();

6.純粋な JS を使用していません
特に属性の変更については、純粋な JavaScript で処理を実行するためのメソッドがいくつか組み込まれています。次のような、jQuery オブジェクトを DOM ノードに「変換」して、より単純なメソッドで使用することもできます。 //$jqObj[0]

7 を使用して jQuery オブジェクトを DOM ノードに変換できます。サイトに組み込む前にプラグインをチェックしていません
ご存知のとおり、jQuery はコーディングが世界で最も難しいものではありません。しかし、優れた JS (および jQuery)、それはかなり難しいです。悪いニュースは、あなたが優れたプログラマではないにもかかわらず、何が良くて何が良くないかを見つけるために試行錯誤する必要があるということです。プロジェクトにプラグインを含める際に注意しなければならない点がいくつかあります。

ファイル サイズ (確認するのが最も簡単です!) – ツールチップ プラグインが jQuery ソースよりも大きい場合は、何かが実際に間違っています。
パフォーマンス – firebug などで試すことができます。理解しやすいチャートが表示されるので、何かが異常な場合にそれがわかります。
クロスブラウジング – 少なくとも IE7 でテストしてください。ただし、Chrome、Firefox、Safari、Opera も試すのに適しています。
モバイル – すべてがモバイル化されていることを忘れないでください。プラグインが機能するか、少なくともモバイル ブラウザがクラッシュしないかどうかを確認します
8. jQuery を削除することに積極的ではありません
場合によっては、jQuery を削除して単純な古い CSS を使用する方が良い場合があります。実際、たとえば、不透明度のホバーやトランジションが必要な場合は、CSS と優れたブラウザーのサポートを使用して実行できます。そして、jQuery がプレーン CSS に勝てる方法はありません。

9.サーバー側のタスクに jQuery を使用しています。
マスキングと検証が有効であることはわかっていますが、これらのタスクに jQuery だけに依存しないでください。サーバー側ですべてを再確認する必要があります。これは、AJAX の使用を検討している場合に特に重要です。また、JS を無効にしてもすべてが機能することを確認してください。

それでは、あなたの番です!
このリストに載せるべきだと思うものはありますか?あなたの考えを共有してください！

著者について