7 jQuery のベスト プラクティス_jquery

リッチ Web アプリケーションの数が増加し、高速なインタラクティブな応答に対するユーザーの高い期待に伴い、開発者は JavaScript ライブラリを使用して、いくつかの反復的なタスクを迅速かつ効率的に完了するようになりました。最も人気のある JavaScript ライブラリの 1 つは jQuery です。しかし、jQuery のアプリケーションが多数あるため、JavaScript ライブラリを使用する際のベスト プラクティスと悪いプラクティスは何なのか、という別の疑問が生じています。

背景

この記事では、JavaScript コードを作成、デバッグ、レビューする際の (少なくとも私の意見では) いくつかの優れたプラクティスを紹介します。実際、私は最も一般的なシナリオを 7 つ選択しました。

1. CDN とそのフォールバック アドレス (フォールバック) を使用します

CDN は Content Delivery Network の略で、JavaScript ファイルをキャッシュするサーバーです。 CDN を使用すると、アプリケーションは、新しいユーザーがリクエストを開始するたびにサーバーからライブラリ ファイルを再ロードする代わりに、CDN キャッシュを使用できるようになります。 Google、Microsoft、JQuery はすべて CDN サービスを提供しています。

ネットワークが常に 100% 信頼できるわけではなく、サーバーが何らかの理由でダウンする可能性があることを考慮すると、これらのことが発生した場合でもアプリケーションが引き続き正常に実行できることを確認する必要があります。現時点では、フォールバック アドレスを使用する必要があります。アプリケーションがキャッシュ ライブラリを見つけられない場合、アプリケーションはフォールバックしてサーバー ファイルを使用します。

Google CDN は次のとおりです:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>

Microsoft CDN は次のようなものです:

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"> </script>

URL プロトコルを http として指定せず、// を使用したことに注意してください。これは、CDN サーバーが http と https をサポートしているためです。Web サイトに SSL 認証があれば、ファイルを変更せずに通常どおり読み込むことができます。

また、前に述べたように、CDN サーバーに問題が発生した場合に備えてフォールバック アドレスも必要です。

<script>Window.JQuery || document.write(&lsquo;<script src=&rdquo;script/localsourceforjquery&rdquo;></script>&rsquo;)

もちろん、Require を使用して必要な jQuery を設定することもできますが、これが良いと思います。

2. DOM インタラクションを制限する

JavaScript を使用して DOM ツリーを操作すると、パフォーマンスが低下します。 jQueryについても同様です。したがって、DOM との対話を最小限に抑えるようにしてください。同僚がデータの表示速度を向上させるのを手伝っていたとき、彼がループ内でセレクターを使用しているのを見ました。これはパフォーマンスキラーです!彼はこう書きました:

containerDiv = $("#contentDiv");
for(var d =0; d < TotalActions; d++)
{
 containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
}

何が問題ですか? 一見すると何の問題もありません。そして私の同僚も、このコードは実行するのがとても楽しいと言っています。すごく腹が立った！ TotalActions が 50 未満の場合は問題ありませんが、25,000 に達すると、DOM インタラクションがループ内に配置されるため、速度が大幅に低下します。

この機能では、(何度も失敗した後) ループ内の直接の DOM インタラクションを配列のプッシュ操作に置き換え、空の文字列を区切り文字として使用して配列を結合しました。最終的に、プログラムは確実にスムーズかつ効率的になりました。

var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
 myContent.push("<div><span class='brilliantRunner'>" + d + "</span></div>");
}
containerDiv.html(myContent.join(""));

3. キャッシュ

jQuery の最も重要かつ特徴的な点は、そのセレクターと、DOM ツリー内で HTML 要素を見つける方法です。ただし、一部の開発者が $("#divid") など、同じ関数内で同じセレクターを複数回呼び出しているのを何度も見てきました。 jQuery は要素を非常に迅速に選択しますが、毎回同じ要素を検索しないでください。したがって、次のように要素をキャッシュできます:

var $divId = $("#divId")

次のコードでは、$divId を使用できます。

以下のコードの場合:

var thefunction = function()
{
 $("#mydiv").ToggleClass("zclass");
 $("#mydiv").fadeOut(800);
}

var thefunction2 = function()
{
 $("#mydiv").addAttr("name");
 $("#mydiv").fadeIn(400);
}

次のように変更し、チェーン構文を使用して、より美しく見せることができます:

var mydiv =$("#mydiv");
var thefunction = function()
{
 mydiv.ToggleClass("zclass").fadeOut(800);
}

var thefunction2 = function()
{
 mydiv.addAttr("name").fadeIn(400);
}

しかし、繰り返しになりますが、毎回すべてをキャッシュする必要はありません。以下の例を見てください:

$("#link").click(function()
{
  $(this).addClass("gored");
}

在这里，我既没有用 $(“#link”)，或者将其缓存起来，而是使用的$(this)。因为在这个例子中，我操作的对象就是这个链接本身。

4、find 和 filter

最近，在使用find()来获取jQuery对象结合的时候，我产生了一些困惑。然后我发现，这个操作可以替换为用filter()方法来实现。理解这两者的区别非常重要：

find: 将会从选定的元素开始，一直向下查找DOM树

filter: 是在jQuery集合当中查找
5、end()

当在jQuery集合中进行链式操作的时候，我有时候需要回到父对象去进行一些操作。比如你正在一个表格的第二行应用CSS，然后希望回到表格对象，对其添加一些样式。在你对行应用完样式之后，只要使用end()方法，你就会自动回到表格对象，然后随意的对其添加样式吧！

（译者注：find()、filter()和end()原文是大写，其实应该是小写）

6、对象字面量

当你通过链式语法来操作元素的CSS属性的时候，你可以使用对象字面量方式来提升性能。比如这段代码：

$("#myimg").attr("src", "thepath").attr("alt", "the alt text");

变成下面这样之后，不仅避免了操作DOM元素，而且还不用多次调用相关的设置方法：

$("#myimg").attr({"src": "thepath", "alt": "the alt text"});

7、善用CSS类

尽可能使用CSS类而不要写内联CSS代码。我想这一点就不需要举例说明了吧。

希望这篇文章能够帮助你编写更好的jQuery应用程序，真正的帮助到大家。