前言
隨著富網絡應用(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 是這樣的:
<code>for(var d =0; d < TotalActions; d++)
{
containerDiv.append("" + d + "");
}/<code>
有什麼問題呢?咋一看沒啥問題。而且我的同事也說這段代碼跑得很歡樂呢!我真是嗶了狗了!當TotalActions小於50時,察覺不到任何問題;但是其達到25000的時候,速度便降低了很多,原因(我也是google到的)就是DOM交互放到了循環當中。
對於這個功能,(多次嘗試失敗之後)我將循環中的直接DOM交互替換成了一個數組的push操作,然後用一個空字符串作為分隔符將數組連接(join)起來。最後,程序當然變得更加流暢和高效了。
<code>var myContent=[];
for(var d = 0; d < TotalActions; d++)
{
myContent.push("" + d + "");
}
containerDiv.html(myContent.join(""));/<code>
3、緩存
jQuery最重要也是最有特色的地方,就是它的選擇器以及在DOM樹中查找HTML元素的方式。但是,我多次看到,一些開發者在同一個函數中,多次調用相同的選擇器,比如 $(“#divId”)。儘管jQuery選擇元素非常快,但也不要每次都去查找相同的元素吧。所以,你可以像這樣緩存的你元素:
<code>var $divId = $("#divId")/<code>
然後在接下來的代碼中,就可以用$divId了。
對於下面的代碼:
<code>var thefunction = function()
{
$("#mydiv").ToggleClass("zclass");
$("#mydiv").fadeOut(800);
}
var thefunction2 = function()
{
$("#mydiv").addAttr("name");
$("#mydiv").fadeIn(400);
}/<code>
我們可以對它做這樣的修改,並且使用鏈式語法,使其看起來更加漂亮:
<code>var mydiv =$("#mydiv");
var thefunction = function()
{
mydiv.ToggleClass("zclass").fadeOut(800);
}
var thefunction2 = function()
{
mydiv.addAttr("name").fadeIn(400);
}/<code>
但是話又說回來,你也不用每次把所有東西都緩存起來。看下面的例子:
<code>$("#link").click(function()
{
$(this).addClass("gored");
}/<code>
在這裡,我既沒有用 $(“#link”),或者將其緩存起來,而是使用的$(this)。因為在這個例子中,我操作的對象就是這個鏈接本身。
4、find 和 filter
最近,在使用find()來獲取jQuery對象結合的時候,我產生了一些困惑。然後我發現,這個操作可以替換為用filter()方法來實現。理解這兩者的區別非常重要:
<code>find: 將會從選定的元素開始,一直向下查找DOM樹
filter: 是在jQuery集合當中查找/<code>
5、end()
當在jQuery集合中進行鏈式操作的時候,我有時候需要回到父對象去進行一些操作。比如你正在一個表格的第二行應用CSS,然後希望回到表格對象,對其添加一些樣式。在你對行應用完樣式之後,只要使用end()方法,你就會自動回到表格對象,然後隨意的對其添加樣式吧!
(譯者注:find()、filter()和end()原文是大寫,其實應該是小寫)
6、對象字面量
當你通過鏈式語法來操作元素的CSS屬性的時候,你可以使用對象字面量方式來提升性能。比如這段代碼:
<code>$("#myimg").attr("src", "thepath").attr("alt", "the alt text");/<code>
變成下面這樣之後,不僅避免了操作DOM元素,而且還不用多次調用相關的設置方法:
<code>$("#myimg").attr({"src": "thepath", "alt": "the alt text"});/<code>
7、善用CSS類
儘可能使用CSS類而不要寫內聯CSS代碼。我想這一點就不需要舉例說明了吧。
最後
我希望這篇文章能夠幫助你編寫更好的jQuery應用程序。
閱讀更多 小小邁克 的文章