熱點(diǎn)推薦：七個(gè)相關(guān)jQuery的最佳實(shí)踐
前言
隨著富網(wǎng)絡(luò)應(yīng)用（rich web applications）數(shù)量的增長(zhǎng)，以及用戶(hù)對(duì)快速交互響應(yīng)的高期望，開(kāi)發(fā)者開(kāi)始使用JavaScript庫(kù)來(lái)快速高效的完成一些重復(fù)性的工作。這其 中***的JavaScript庫(kù)就是jQuery。但是jQuery的大量應(yīng)用卻帶來(lái)了另外一個(gè)問(wèn)題：在使用JavaScript庫(kù)的時(shí)候，有哪些*** 實(shí)踐，又有哪些不好的實(shí)踐呢？
背景
在這篇文章中，我會(huì)給大家介紹在編寫(xiě)、調(diào)試和審查JavaScript代碼的時(shí)候一些好的實(shí)踐（至少我是這么認(rèn)為的）。事實(shí)上，我選擇了其中7個(gè)最常見(jiàn)的場(chǎng)景。
1、使用CDN及其回退地址（fallback）
CDN代表內(nèi)容傳遞網(wǎng)絡(luò)（Content Delivery Network），是一個(gè)緩存了JavaScript文件的服務(wù)器。使用CDN之后，每當(dāng)一個(gè)新用戶(hù)發(fā)起請(qǐng)求的時(shí)候，你的應(yīng)用程序可以使用CDN緩存，而 不用從你的服務(wù)器上重新加載庫(kù)文件。Google、Microsoft和JQuery都提供CDN服務(wù)。
鑒于網(wǎng)絡(luò)并不總是100%可靠，服務(wù)器也可能因?yàn)橐恍┰蝈礄C(jī)，你必須要確保即使這些事情發(fā)生，你的應(yīng)用程序依然能正常運(yùn)行。這時(shí)候我們就要用到回退地址：當(dāng)應(yīng)用程序無(wú)法找到緩存庫(kù)的時(shí)候，它就會(huì)回退回來(lái)，使用服務(wù)器文件。
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>
需要注意的是，我們沒(méi)有指定URL協(xié)議為http而是使用的//。這是因?yàn)镃DN服務(wù)器支持http和https，如果你的網(wǎng)站擁有SSL認(rèn)證，你無(wú)須修改就可以正常加載文件。
另外，就像我之前提到的那樣，我們還需要一個(gè)回退地址，以防CDN服務(wù)器出現(xiàn)問(wèn)題。
- <script>Window.JQuery || document.write(‘<script src=”script/localsourceforjquery”></script>’)
當(dāng)然，你也可以用Require來(lái)配置需要的jQuery，不過(guò)我覺(jué)得就這樣也不錯(cuò)。
2、限制DOM交互
用JavaScript操作DOM樹(shù)是存在性能消耗的。jQuery也一樣。所以，盡量減少與DOM的交互吧。當(dāng)我?guī)椭乙粋€(gè)同事提高數(shù)據(jù)顯示速度的時(shí)候，我看見(jiàn)他在一個(gè)循環(huán)里面使用了選擇器。這簡(jiǎn)直是性能殺手！他是這樣寫(xiě)的：
- containerDiv = $("#contentDiv");
- for(var d =0; d < TotalActions; d++)
- {
- containerDiv.append("<div><span class='brilliantRunner'>" + d + "</span></div>");
- }
有什么問(wèn)題呢？咋一看沒(méi)啥問(wèn)題。而且我的同事也說(shuō)這段代碼跑得很歡樂(lè)呢！我真是嗶了狗了！當(dāng)TotalActions小于50時(shí)，察覺(jué)不到任何問(wèn)題；但是其達(dá)到25000的時(shí)候，速度便降低了很多，原因（我也是google到的）就是DOM交互放到了循環(huán)當(dāng)中。
對(duì)于這個(gè)功能，（多次嘗試失敗之后）我將循環(huán)中的直接DOM交互替換成了一個(gè)數(shù)組的push操作，然后用一個(gè)空字符串作為分隔符將數(shù)組連接（join）起來(lái)。***，程序當(dāng)然變得更加流暢和高效了。
- 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樹(shù)中查找HTML元素的方式。但是，我多次看到，一些開(kāi)發(fā)者在同一個(gè)函數(shù)中，多次調(diào)用相同的選擇器，比如 $(“#divid”)。盡管jQuery選擇元素非常快，但也不要每次都去查找相同的元素吧。所以，你可以像這樣緩存的你元素：
- var $divId = $("#divId")
然后在接下來(lái)的代碼中，就可以用$divId了。
對(duì)于下面的代碼：
- var thefunction = function()
- {
- $("#mydiv").ToggleClass("zclass");
- $("#mydiv").fadeOut(800);
- }
- var thefunction2 = function()
- {
- $("#mydiv").addAttr("name");
- $("#mydiv").fadeIn(400);
- }
我們可以對(duì)它做這樣的修改，并且使用鏈?zhǔn)秸Z(yǔ)法，使其看起來(lái)更加漂亮：
- var mydiv =$("#mydiv");
- var thefunction = function()
- {
- mydiv.ToggleClass("zclass").fadeOut(800);
- }
- var thefunction2 = function()
- {
- mydiv.addAttr("name").fadeIn(400);
- }
但是話(huà)又說(shuō)回來(lái)，你也不用每次把所有東西都緩存起來(lái)。看下面的例子：
- $("#link").click(function()
- {
- $(this).addClass("gored");
- }
在這里，我既沒(méi)有用 $(“#link”)，或者將其緩存起來(lái)，而是使用的$(this)。因?yàn)樵谶@個(gè)例子中，我操作的對(duì)象就是這個(gè)鏈接本身。
4、find 和 filter
最近，在使用find()來(lái)獲取jQuery對(duì)象結(jié)合的時(shí)候，我產(chǎn)生了一些困惑。然后我發(fā)現(xiàn)，這個(gè)操作可以替換為用filter()方法來(lái)實(shí)現(xiàn)。理解這兩者的區(qū)別非常重要：
find: 將會(huì)從選定的元素開(kāi)始，一直向下查找DOM樹(shù)
filter: 是在jQuery集合當(dāng)中查找
5、end()
當(dāng)在jQuery集合中進(jìn)行鏈?zhǔn)讲僮鞯臅r(shí)候，我有時(shí)候需要回到父對(duì)象去進(jìn)行一些操作。比如你正在一個(gè)表格的第二行應(yīng)用CSS，然后希望回到表格對(duì)象，對(duì)其添加一些樣式。在你對(duì)行應(yīng)用完樣式之后，只要使用end()方法，你就會(huì)自動(dòng)回到表格對(duì)象，然后隨意的對(duì)其添加樣式吧！
（譯者注：find()、filter()和end()原文是大寫(xiě)，其實(shí)應(yīng)該是小寫(xiě)）
6、對(duì)象字面量
當(dāng)你通過(guò)鏈?zhǔn)秸Z(yǔ)法來(lái)操作元素的CSS屬性的時(shí)候，你可以使用對(duì)象字面量方式來(lái)提升性能。比如這段代碼：
$("#myimg").attr("src", "thepath").attr("alt", "the alt text");
變成下面這樣之后，不僅避免了操作DOM元素，而且還不用多次調(diào)用相關(guān)的設(shè)置方法：
$("#myimg").attr({"src": "thepath", "alt": "the alt text"});
7、善用CSS類(lèi)
盡可能使用CSS類(lèi)而不要寫(xiě)內(nèi)聯(lián)CSS代碼。我想這一點(diǎn)就不需要舉例說(shuō)明了吧。
***
我希望這篇文章能夠幫助你編寫(xiě)更好的jQuery應(yīng)用程序。
譯文鏈接：http://www.codeceo.com/article/7-jquery-best-practices.html
英文原文：7 JQuery Best Practices
