7個jQuery最佳實務，jQuery最佳實務

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(‘<script src=”script/localsourceforjquery”></script>’)

當然，你也可以用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操作，然後用一個Null 字元串作為分隔字元將數組串連（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應用程式，真正的協助到大家。

您可能感興趣的文章:

• JQuery自訂事件的應用 JQuery最佳實務
• JQuery最佳實務之精妙的自訂事件
• jquery提升效能最佳實務小結
• jQuery最佳實務完整篇
• 關於jquery效能最佳實務的討論,與求教
• jquery進階編程的最佳實務詳解