7個jQuery最佳實踐_jquery

隨著富網絡應用（rich web applications）數量的增長，以及用戶對快速交互響應的高期望，開發者開始使用JavaScript庫來快速高效的完成一些重複性的工作。這其中最受歡迎的JavaScript函式庫就是jQuery。但jQuery的大量應用卻帶來了另一個問題：在使用JavaScript函式庫的時候，有哪些最佳實踐，又有哪些不好的實踐呢？

背景

在這篇文章中，我會給大家介紹在編寫、調試和審查JavaScript程式碼的時候一些好的實踐（至少我是這麼認為的）。事實上，我選擇了其中7個最常見的場景。

1、使用CDN及其回退位址（fallback）

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，如果你的網站擁有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時，察覺不到任何問題；但是其達到25000的時候，速度便降低了很多，原因（我也是google到的）就是DOM交互放到了循環當中。

對於這個功能，（多次嘗試失敗之後）我將循環中的直接DOM交互替換成了一個數組的push操作，然後用一個空字符串作為分隔符將數組連接（join）起來。最後，程序當然變得更加流暢和有效率了。

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应用程序，真正的帮助到大家。