jQuery讓編寫基于JavaScript的良好Web應用程序變得簡單明了，但是要想將好的Web應用程序變得更出色還需要額外幾個步驟。本文詳細闡述幾個讓Web應用程序變得更強大的步驟，這些步驟是優(yōu)化您的Web應用程序的***絕招。

51CTO推薦專題：jQuery從入門到精通

***個示例應用程序

本文中的大部分技巧都可以從附帶的樣例應用程序中找到，這是一個直觀的電子郵件Web應用程序。不過，您可以看到它是如何從***篇文章中發(fā)展而來的，它的性能是如何改進的，以及這些***步驟如何將它轉(zhuǎn)變成強大的Web應用程序的。

Bind/Unbind

在Events模塊中有兩個函數(shù)，它們是bind()和unbind()，用于完成所有其他事件方法的任務。如果您能夠向頁面元素添加一個click()方法，那么哪還有必要調(diào)用bind("click")呢？這僅是浪費時間而已。但是，這些函數(shù)在特定情況下是非常方便的，如果正確地使用它們，可以顯著提高應用程序的性能。

這些函數(shù)不僅能夠向特定頁面元素添加事件（就像該模塊中的許多其他事件方法一樣），而且還可以從頁面元素中刪除這些事件。為什么要這樣做？下面我們看看這個Web應用程序，以及如何在特定情況下使用這些函數(shù)。

清單1顯示了以上設置的代碼，這是未改進之前的原始代碼：

$(document).ready(function(){  
//cachethisquerysinceit'sasearchbyCLASS  
selectable=$(":checked.selectable");  
//whentheselect/deselectallisclicked,dothisfunction  
$("#selectall").click(selectAll);  
//wheneveranyindividualcheckboxischecked,changethetext  
//describinghowmanyarechecked  
selectable.click(changeNumFilters);  
//calculatehowmanyareinitiallychecked  
changeNumFilters();  
});  
 
varselectable;  
functionchangeNumFilters()  
{  
//thisneedstobecheckedoneverycall  
//sincethelengthcanchangewitheveryclick  
varsize=$(":checked.selectable").length;  
if(size>0)  
$("#selectedCount").html(size);  
else  
$("#selectedCount").html("0");  
}  
 
//handlestheselect/deselectofallcheckboxes  
functionselectAll()  
{  
varchecked=$("#selectall").attr("checked");  
selectable.each(function(){  
varsubChecked=$(this).attr("checked");  
if(subChecked!=checked)  
{  
$(this).click();  
}  
});  
changeNumFilters();  
}  

該代碼看起來比較簡單，因為我在好幾篇文章中都用到這個小部件。您在***篇文章中見到了“select/deselectall”小部件，我給出了它的基礎形式。在關于性能的文章中，您看到如何通過緩存選擇查詢和通過CLASS減少使用查詢來改進它的性能。但是還有一個問題需要解決。當在包含100行的表中勾選“select/deselectall”復選框之后，您將得到糟糕的性能。事實上，在我的瀏覽器中，如果使用了這些代碼，那么完成選擇的平均時間為3.4秒。響應性太差了！即使進行了各項優(yōu)化，仍然有些不可接受的地方。

讓我們深入一步考察這個算法，看看是否有地方出了問題。您將遍歷頁面上的每個復選框，看看它們當前的“checked”狀態(tài)是否與“select/deselectall”復選框一致。如果不一致，就對其調(diào)用“click”，以和“select/deselectall”復選框的狀態(tài)匹配。等一等，您還需要向這些復選框添加一個函數(shù)，從而在每次單擊時都調(diào)用changeNumFilters()函數(shù)。

通過仔細檢查，您發(fā)現(xiàn)設置了一個可能調(diào)用changeNumFilters()101次的算法。怪不得性能如此差。很明顯，您不需要在每次單擊時都更新選中的消息的計數(shù)，而是在該過程完成之后進行更新即可。在單擊復選框的同時如何才能避免調(diào)用該方法？

現(xiàn)在，unbind()方法開始發(fā)揮它的作用。通過在單擊復選框之前調(diào)用unbind()，將停止調(diào)用click()，同時避免了click()進一步調(diào)用changeNumFilter()方法。這很棒！現(xiàn)在就不會調(diào)用changeNumFilters()101次了。但是，這僅是一次有效的，在調(diào)用click方法之后，需要使用bind方法將click方法添加回到每個復選框。清單2顯示了更新之后的小部件。

//handlestheselection/unselectionofallcheckboxes  
functionselectAll()  
{  
varchecked=$("#selectall").attr("checked");  
selectable.unbind("click",changeNumFilters);  
selectable.each(function(){  
varsubChecked=$(this).attr("checked");  
if(subChecked!=checked)  
{  
$(this).click();  
}  
});  
selectable.bind("click",changeNumFilters);  
changeNumFilters();  
} 

通過這些優(yōu)化之后，復選框的運行速度提高到約900毫秒，從而大大改進了性能。這些改進源于返回去檢查您的算法正在做什么，以及貫穿代碼的操作。您可以僅調(diào)用函數(shù)1次，而不是100次。通過在本系列的其他文章中不斷改進該函數(shù)，您***會讓它變得更快、更高效。但不一定非得這么做，我還發(fā)現(xiàn)一個最快的算法，以前從來沒有透露過。此外，如果我過早地向您展示這個最快的算法，我就不能將其作為本文的題材了。希望它能使您看到在代碼中使用bind/unbind特性帶來的好處（如果沒有更好的方法的話）。

記住：在不希望觸發(fā)默認事件時才使用bind/unbind，或作為向頁面元素添加或刪除事件的臨時方法

清單3顯示了編寫該算法的最快方法（如果您的代碼中有這個小部件）。它運行該函數(shù)僅需40毫秒，遠遠勝過之前的其他方法。

functionselectAll()  
{  
varchecked=$("#selectall").attr("checked");  
selectable.each(function(){  
$(this).attr("checked",checked);  
});  
changeNumFilters();  
} 

#p#

Live/Die

jQuery 1.3版本的另外兩個強大的新特性是live()和die()函數(shù)。通過一個示例可以看到它對構建設計良好的Web應用程序的作用。想像一下對表中的每個單元格都添加一個雙擊。作為jQuery老手，您應該知道要在document.ready()函數(shù)中設置雙擊，如清單4所示。

$("tr.messageRow").dblclick(function(){  
if($(this).hasClass("mail_unread"))  
{  
$(this).removeClass("mail_unread");  
}  
}); 

這個設計存在一個問題。它向包含一個messageRow類的表的每行添加一個雙擊事件。但是，如果向該表添加新的行，會發(fā)生什么事情呢？例如，當您使用Ajax在未重新加載頁面的情況下將額外的消息加載到頁面時，可能會顯示這些行。這導致一個問題，因為所編寫的代碼不能工作。您創(chuàng)建的事件被綁定到所有在加載頁面時顯示的tr.messageRow元素中。

它沒有綁定到您在頁面的生命周期中創(chuàng)建的任何新的tr.messageRow中。編寫類似代碼的程序員最終會很失望的，因為它無法工作。在jQuery文檔發(fā)現(xiàn)該問題之前，jQuery新手可能要花好幾個小時才能弄明白為什么他們的代碼不能工作（這也是我去年的經(jīng)歷）。

在jQuery 1.3之前，有3種可以解決該問題的方法，但都不是很好（對于使用jQuery 1.2.x的程序員而言，它們?nèi)匀挥行В?**種方法是重新初始化技術，它在每次添加新的元素之后重新將事件添加到選中的元素中。第二種方法利用了bind/unbind，如前面小節(jié)所示。清單5顯示了這兩種方法。

//firsttechniquetodealwith"hot"pageelements,addedduringthepage's  
//lifetime  
$("#mailtabletr#"+message.id).addClass("messageRow")  
.dblclick(function(){  
if($(this).hasClass("mail_unread"))  
{  
$(this).removeClass("mail_unread");  
}  
 
//secondtechniquetodealwith"hot"pageelements  
$("#mailtabletr#"+message.id).addClass("messageRow")  
.bind("dblclick",(function(){  
if($(this).hasClass("mail_unread"))  
{  
$(this).removeClass("mail_unread");  
}  

這兩種方法都不是很好。您可能正在重復編寫代碼，或者被迫查找可能添加新頁面元素的點，然后在這些點上處理“熱元素”問題。這不是良好的編程方式。但是，jQuery可能大大簡化這一切，它能夠幫助我們完成很多事情。

幸運的是，有一個插件好像能夠解決該問題。這個插件稱為LiveQuery插件，它允許您將特定頁面元素綁定到事件，但僅能以“活動”的方式進行，因此所有頁面元素（包括創(chuàng)建頁面時自帶的元素和在頁面的生命周期中創(chuàng)建的元素）都可能觸發(fā)事件。對UI開發(fā)人員而言，這是一個非常智能、重要的插件，因為使得處理動態(tài)頁面就像處理靜態(tài)頁面一樣簡單。對于Web應用程序開發(fā)人員而言，它就是真正不可或缺的插件。

jQuery核心團隊意識到該插件的重要性，從而將其包含到1.3發(fā)布版中。這個“活動”特性現(xiàn)在是核心jQuery的一部分，因此任何開發(fā)人員都可以利用它。這個特性完整地包含在1.3核心代碼中，除了一小部分事件之外。我敢打賭，這些未被包含的事件將出現(xiàn)在jQuery的下一個發(fā)布版之中。我們看看如何利用它改變代碼。

$("tr.messageRow").live("dblclick",function(){  
if($(this).hasClass("mail_unread"))  
{  
$(this).removeClass("mail_unread");  
} 

通過對代碼進行一處小更改，該頁面上的所有tr.messageRow元素被雙擊時都將觸發(fā)這段代碼。僅使用dblclick()函數(shù)是看不到這種行為的，如上所述。為此，我極力推薦您在大部分事件方法中使用live()方法。事實上，我認為它對于任何動態(tài)地創(chuàng)建頁面元素的頁面都是必不可少的，不管是通過Ajax還是用戶交互進行創(chuàng)建，都需要使用live()函數(shù)而不是事件方法。它很好的實現(xiàn)了易編寫和bug之間的折衷。

記住：當將事件添加到動態(tài)頁面元素時要使用live()方法。這讓事件和頁面元素一樣具有動態(tài)性。

#p#

Ajax Queue/Sync

在服務器中使用Ajax調(diào)用成為Web2.0公司度量自身的度量指標。我們已經(jīng)多次討論過，在jQuery中使用Ajax就像調(diào)用普通的方法一樣簡單。這意味著您可以輕松地調(diào)用任何服務器端Ajax函數(shù)，就像調(diào)用客戶端的JavaScript函數(shù)一樣。但是美中存在一些不足之處，當對服務器進行過多的Ajax調(diào)用時，就會出現(xiàn)一些負面效應。如果Web應用程序使用的Ajax調(diào)用過多，就會導致問題。

***個問題是一些瀏覽器限制打開的服務器連接的數(shù)量。在Internet Explorer中，當前版本僅支持打開2個服務器連接。Firefox支持打開8個連接，但仍然是一個限制。如果Web應用程序不對Ajax調(diào)用進行控制，它就很可能打開2個以上的連接，尤其是服務器端調(diào)用屬于時間密集型調(diào)用時。這個問題可能源于Web應用程序的不良設計，或用戶不對請求加以限制。不管是那種情況都是不可取的，因為您不希望由瀏覽器決定使用哪些連接。

另外，因為調(diào)用是異步的，不能保證從服務器返回的響應的順序與發(fā)送時一樣。例如，如果您幾乎同時發(fā)出2個Ajax調(diào)用，您就不能保證服務器的響應是以相同的順序返回。因此，如果第二個調(diào)用依賴于***個調(diào)用的結果，那么就會出現(xiàn)問題。想象這樣一種場景，其中***個調(diào)用獲取數(shù)據(jù)，第二個調(diào)用在客戶端操作該數(shù)據(jù)。如果第二個調(diào)用的響應返回得比***個Ajax調(diào)用快，那么您的代碼就會導致錯誤。您完全不能保證響應速度。當調(diào)用更多時，就更容易導致問題。

jQuery的創(chuàng)建者意識到這個潛在的問題，但同時也認識到它僅會給1%的Web應用程序帶來問題。但1%開發(fā)Web應用程序的開發(fā)人員需要一個解決辦法。因此創(chuàng)建了一個插件，通過創(chuàng)建一個Ajax Queue和一個Ajax Sync來篩查該問題。Queue和Sync的功能是很相似的：Queue一次發(fā)出一個Ajax調(diào)用，并且等待其響應返回之后才發(fā)出另一個調(diào)用。Sync幾乎同時發(fā)出多個調(diào)用，但調(diào)用的響應是按先后順序返回的。

通過在客戶端控制Ajax調(diào)用解決了超載問題，同時也控制和規(guī)范了將響應發(fā)送回客戶端的方式。現(xiàn)在，您可以確保知道響應返回到客戶端的順序，從而可以根據(jù)事件的順序編寫代碼。我們看看這個插件是如何工作的，以及如何在您的代碼中使用它（見清單7）。記住，這僅是為1%的Web應用程序設計的，它們擁有多個Ajax調(diào)用，并且后一個調(diào)用嚴重依賴于前一個調(diào)用的結果。這個示例不是調(diào)用相互依賴的例子，但它能夠向您展示如何使用該插件（要為這個插件的應用創(chuàng)建一個***的真實例子，并讓其易于理解是很困難的）。

varnewRow="<trid='?'>"+  
"<td><inputtypeinputtype=checkboxvalue='?'></td>"+  
"<td>?</td>"+  
"<td>?</td>"+  
"<td>?</td>"+  
"<td>?</td></tr>"; 

$("#mailtable").everyTime(30000,"checkForMail",function(){  
//byusingtheAjaxQueuehere,wecanbesurethatwewillcheckformail  
//every30seconds,butONLYifthepreviousmailcheckhasalreadyreturned.  
//Thisactuallywouldbebeneficialinamailapplication,ifonecheckfor  
//newmailtakeslongerthan30secondstorespond,wewouldn'twantthe  
//nextAjaxcalltokickoff,becauseitmightduplicatemessages(depending  
//ontheserversidecode).  
//So,byusingtheAjaxQueueplug-in,wecanensurethatourWebclient  
//isonlycheckingfornewmailonce,andwillneveroverlapitself.  
 
$.ajaxQueue({  
url:"check_for_mail.jsp",  
success:function(data)  
{  
varmessage=eval('('+data+')');  
if(message.id!=0)  
{  
varrow=newRow.replace("?",message.id);  
rowrow=row.replace("?",message.id);  
rowrow=row.replace("?",message.to);  
rowrow=row.replace("?",message.from);  
rowrow=row.replace("?",message.subject);  
rowrow=row.replace("?",message.sentTime);  
$("#mailtabletbody").prepend(row);  
$("#mailtable#"+message.id).addClass("mail_unread").addClass("messageRow");  
$("#mailtable#"+message.id+"td").addClass("mail");  
$("#mailtable:checkbox").addClass("selectable");  
}  
}  
});  

記住：如果您的應用程序有多個相互依賴的Ajax調(diào)用，那么要考慮使用Ajax Queue或Ajax Sync。

#p#

第二個示例Web應用程序

我將使用另一個小部件解決本文的***3個問題，并且在深入研究其代碼之前展示和解釋它。這個401k小部件并不陌生，因為您已經(jīng)在前面的文章見過它（參見參考資料部分獲取這些文章的鏈接）。不過，這回有個微妙的不同之處，因為我在同一個頁面上兩次添加了這個小部件。它被添加到兩個不同的表中。這將帶來幾個有趣的地方。圖3顯示了這個小部件：

在這個小部件中，我正在做幾件事情。***件是計算文本字段之和并確定它們是否為100。如果它們的和不為100，我將向用戶顯示一個錯誤，提示他們沒有正確使用該小部件。第二，我在每個選項獲取輸入之后對選項進行排序。通過這種方式，百分比***的投資分配將一直出現(xiàn)在表的頂部。這可以在圖3中看到，它按百分比對選項進行排序。***，為了讓它更酷，我添加了一些條帶。

用于生產(chǎn)這個小部件的HTML代碼出奇地簡單。清單8詳細地顯示了這個小部件。

<p><tablewidthtablewidth=300class="percentSort"cellpadding=0cellspacing=0> 
<tbody> 
<tr><td>S&P500Index</td> 
<td><inputtypeinputtype=text>%</td></tr> 
<tr><td>Russell2000Index</td> 
<td><inputtypeinputtype=text>%</td></tr> 
<tr><td>MSCIInternationalIndex</td> 
<td><inputtypeinputtype=text>%</td></tr> 
<tr><td>MSCIEmergingMarketIndex</td> 
<td><inputtypeinputtype=text>%</td></tr> 
<tr><td>REITIndex</td> 
<td><inputtypeinputtype=text>%</td></tr> 
</tbody> 
<tfoot> 
</tfoot> 
</table> 

用jQuery設置小部件

以上的一小段HTML直接引入了這部分內(nèi)容，本小節(jié)關注如何在jQuery中設置小部件，以及所需的所有代碼。要將事件附加到頁面元素或在特定情況下需要添加類時，通常需要這樣做。有時候還需要更進一步。這些小部件的所有設置代碼都是jQuery代碼。

我可以提供關于角色分離的理論，讓HTML設計師和JavaScript程序員各自完成自己的工作，但是您們可能已經(jīng)多次聽到這種陳詞。在這里我僅添加另一樣東西，即“類修飾”，這是很多插件創(chuàng)作者都使用的。看看清單8中的HTML代碼，僅通過將一個percentSort類添加到表，您就可以顯著改變表的功能和外觀。這是小部件設計的目標，讓添加和刪除小部件就像向小部件添加類一樣簡單。

讓我們遵循我曾用jQuery設置小部件的幾個步驟。通過查看這些步驟，您可以看到清單9中的設計模式是如何出現(xiàn)的。

$(document).ready(function(){  
 
//thefirststepistofindallthetablesonthepagewith  
//aclassofpercentSort.Theseareallthetableswewantto  
//convertintoourwidget.  
//Afterwefindthem,weneedtoloopthroughthemandtakesome  
//actionsonthem  
//Attheconclusionofthisblockofcode,eachtablethat'sgoingto  
//beapercentSortwidgetwillhavebeentransformed  
 
$("table.percentSort").each(function(i){  
 
//eachtableneedsauniqueID,fornamespaceissues(discussedlater)  
//wecansimplycreateauniqueIDfromtheloopcounter  
 
$(this).attr("id","percentSort-"+i);  
 
//withineachtable,let'shighlighteveryotherrowinthetable,to  
//giveitthat"zebra"look  
 
$(this).find("tbody>tr").filter(":odd").addClass("highlight");  
 
//becauseeachtableneedstoshowthe"Total"totheuser,let'screateanew  
//sectionofthetableinthefooter.We'lladdarowinthetablefooter  
//todisplaythewords"Total"andaspanfortheupdatedcount.  
 
$("#"+$(this).attr("id")+"tfoot")  
.append("<tr><td>Total</td><td> 
<span></span>%</td></tr>");  
 
//finally,let'saddtheCLASSof"percentTotal"tothespanwejust  
//createdabove.We'llusethisinformationlatertodisplay  
//theupdatedtotals  
 
$("#"+$(this).attr("id")+"tfootspan").addClass("percentTotal");  
});  
 
//nowthesecondstep,afterwe'vecompletedsettingupthetablesthemselves  
//istosetuptheindividualtablerows.  
//Wecansimilarlysortthrougheachofthem,takingtheappropriateactions  
//oneachoftheminturn.  
//Uponcompletionofthisblockofcode,eachrowineachtablewillbe  
//transformedforourwidget  

$("table.percentSorttbody>tr").each(function(i){  
 
//getthenamespace(tobediscussedinthenextsection)  
 
varNAMESPACE=$(this).parents("table.percentSort").attr("id");  
 
//attachauniqueIDtothisrow.Wecanusetheloopcounter  
//toensuretheIDisuniqueonthepage(whichisamustoneverypage)  
 
$(this).attr("id","row"+i);  
 
//now,withinthisrowofthetable,weneedtofindthetextinput,because  
//weneedtoattachaclasstothem.Weutilizethenamespace,andalso  
//findthe:textwithinthetablerow,andthenattachthecorrectclass  
 
$("#"+$(this).attr("id")+":text").addClass("percent");  
 
//Finally,weattachauniqueIDtoeachofthetextinputs,andwedothisby  
//makingitacombinationofthetablenameandtherowname.  
 
$("#"+$(this).attr("id")+".percent").  
attr("id",NAMESPACE+"-"+$(this).attr("id"));  
});  
//Finally,becauseweknowweonlywantnumericalinputs,werestrictthetextentry  
//tojustnumbers.Wemustdothisnow,becauseupuntilthispoint,thepage  
//containednoelementswiththeCLASS"percent"  
$(".percent").numeric();  

如您從這個例子中見到的一樣，可以通過jQuery代碼向HTML代碼引入大量功能。這種類型的設計的好處是很明顯的。同樣，遵循角色分離、代碼重用等也是非常有益的。您還將在小部件插件中看到這種類型的設計，因為它將簡單的HTML代碼轉(zhuǎn)變成適用于插件的小部件。最重要的是，這也是您在這里需要完成的任務，即編寫一個插件來將一個簡單的表轉(zhuǎn)變成排序和匯總表。

記住：盡量多使用jQuery代碼進行設置，并且盡可能少使用HTML。

#p#

名稱空間

可能處理這種類型的設計和jQuery的最難解方面是理解名稱空間。這個例子很好，因為它以一種很直觀的方式展示了該問題。知道頁面上的所有ID和類時，編寫jQuery代碼是非常簡單的。這就是jQuery的設計目標。當您不知道頁面上有幾個類時，或這些類開始重復時，會發(fā)生什么呢？在這個例子中，您可以直接看到問題，有兩個完全相同的小部件！所有東西都是重復的。這似乎是不考慮名稱空間引起的問題；您的小部件開始彼此干擾，最終導致不能正常工作。

造成這個問題的原因是您僅調(diào)用$(".percentTotal")等，而忽略了應該同步哪個小部件。因為相同的頁面上有多個表，因此該頁面就有percentTotal類的多個實例。當然，如果頁面上僅有一個表，那么您就可以確定它是唯一的。但是隨著頁面更加高級，以及組件的重用越來越多，這種一個表的假設就不再成立。有些人會問，“在這里使用ID不行嗎？”這不能解決問題：您打算給它什么ID？您不可以使用“percentTotal”，因為這會帶來歧義。

也不可以使用“percentTotal-1”，因為它不表示頁面上的任何東西。（以上數(shù)字畢竟是任意創(chuàng)建的）。您可以向頁面包含的表添加一些引用來解決問題，比如“percentTotal-percentSort1”，但這會讓問題更加復雜。jQuery有一個超級復雜但又十分容易使用的選擇語法，從而讓這種混合命名模式變得毫無必要。為什么要重新創(chuàng)造已有的東西呢？讓我們使用jQuery的選擇引擎幫助您解決名稱空間問題。

這個小部件的核心問題是決定操作發(fā)生在哪個小部件中。當向文本框輸入數(shù)字時，您可以問自己，jQuery如何知道進入哪個文本框？您在代碼中的“百分比”類添加了一個事件，并且可以在代碼內(nèi)部使用$(this)引用它。這將我們帶入下一個問題：jQuery如何知道問題發(fā)生在哪個小部件中，從而使您能夠更新正確的percentTotal字段？我認為這不是一件簡單的事情。這確實不簡單。盡管您的代碼能夠向頁面上帶有“百分比”類的每個文本框添加一個事件，但如果忽略了發(fā)生事件的小部件就是不妥當?shù)摹?/p>

這個問題被歸結為名稱空間問題的原因是，小部件的命名不清晰，容易導致問題。要使jQuery代碼正常工作，每個名稱都必須在其自己的空間之內(nèi)明確定義，這就出現(xiàn)了術語名稱空間。您必須避免編寫重名的代碼，實現(xiàn)每個小部件都是自含的。您必須能夠在相同的頁面上添加相同小部件的多個實例，同時避免名稱重復。最重要的是，每個小部件在頁面上都是獨立的。

沒有能夠處理名稱空間問題的現(xiàn)成方法，因此我將展示我的解決辦法，您可以在自己的代碼中使用我的辦法，或通過了解問題創(chuàng)建更好的解決辦法。我喜歡該代碼的原因是它簡單易用（只有1行），并且能夠讓您在某種程度上控制自己的名稱空間。看看清單10。

//oureventisattachedtoEVERYinputtextfieldwithaCLASSof"percent"  
//thismakesourcodelookgood,butcanleadtonamespaceissues  
$("table.percentSortinput.percent").keyup(function(){  
 
//thissimplelinecanestablishanamespaceforus,bygettingtheunique  
//IDattachedtoourtable(thetableisconsideredthe"container"for  
//ourwidget.Itcouldbeanything,dependingonyourspecificcode.)  
//WepasstheCLASSofourwidgettotheparents()function,because  
//thateffectivelyencapsulatesthewidget  
 
varNAMESPACE="#"+$(this).parents("table.percentSort").attr("id");  
 
//withthenamespaceestablished,wecanusethejQueryselection  
//syntaxtousethisnamespaceasourprefixforallofourremaining  
//searches.Noticehowtheambiguityisremovedforoursearch  
//byCLASSof"percent"and"percentTotal"  
//Thissolvesournamespaceissues  
 
varsum=$(NAMESPACE+"input.percent").sum();  
vartotalField=$(NAMESPACE+".percentTotal"); 

因此，僅需添加一行代碼，您就能夠封裝小部件，從而避免它的函數(shù)與自身的其他實例重復（或者甚至是其他碰巧對ID或類使用相同名稱的小部件）。這種類型的代碼編寫方式在插件代碼中很常見。編寫良好的插件應該考慮到名稱空間問題，而糟糕的插件忽略了這個問題。從這個例子中可以看到，在代碼中使用名稱空間也是很簡單的，并且隨著頁面越來越復雜，它可以給您節(jié)省大量時間。鑒于這個原因，我建議您現(xiàn)在就開始考慮jQuery代碼中的名稱空間問題，并在編寫代碼時使用這種解決辦法。

記住：開始編寫jQuery代碼時，一般就要開始包含名稱空間解決辦法。您可以使用以上的解決辦法，或創(chuàng)建自己的解決辦法。通過采用名稱空間解決辦法，即使代碼越來越復雜，也不會帶來名稱重復問題。

#p#

結束語

本文提供一些技巧，幫助您將良好的jQuery代碼轉(zhuǎn)變成強大的jQuery代碼。jQuery非常簡單易用（并且是獨立的JavaScript的巨大改進），因此編寫良好的jQuery代碼也很容易。大部分開發(fā)人員在幾分鐘之內(nèi)編寫完并運行良好的jQuery代碼。但是良好的代碼和強大的代碼是有區(qū)別的。強大的jQuery代碼考慮隨著頁面越來越復雜時的性能問題。強大的jQuery代碼能夠考慮到頁面的未來方向，而不是僅看到當前的位置。強大的jQuery代碼是為最復雜的應用程序設計的，然后讓應用程序處理輸入的簡單信息。

本文介紹了5個概念，幫助您將良好的jQuery代碼轉(zhuǎn)變成強大的jQuery代碼。

***個概念是使用bind()/unbind()方法。當您不希望在頁面的生命周期內(nèi)將事件添加到代碼時，這些方法對向頁面元素添加/移除事件非常有用。這些方法在頁面包含大量事件時對提升性能非常重要，或者用于某些用戶界面中。

第二個概念是使用1.3中包含的新特性live()/die()。這些函數(shù)允許將事件變成動態(tài)的，就像頁面元素一樣。隨著Web應用程序包含的頁面元素越來越多，這些函數(shù)允許代碼隨著頁面的增長而增長，這在以前的發(fā)布版中是無法實現(xiàn)的。您希望事件處理像頁面處理一樣具有動態(tài)性。

第三個新添加的特性是AjaxQueue/Sync插件，它用于規(guī)范和控制對服務器發(fā)出的Ajax調(diào)用，避免它們超出限度（從客戶端角度看）。當Ajax調(diào)用的響應返回順序很重要時，該插件也能幫上大忙。

第四個概念是，盡可能多地用jQuery代碼編寫頁面設置代碼。這讓HTML的編寫更加簡單，并且在設置頁面時能夠獲得更多的控制。

***一個概念是，在代碼中利用名稱空間解決辦法，避免因小部件的函數(shù)名稱重復而導致問題。每個頁面元素和小部件都應該是自含的，不與頁面的其他方面發(fā)生干擾，名稱空間解決辦法能夠阻止該問題。

這5個步驟并不難實現(xiàn)。事實上，其中4個步驟僅需修改一行代碼。不過，理解如何在代碼中應用它們才是最重要的。像所有東西一樣，如果不能正確時使用，它不僅不能提供幫助，反而還有害處。我的建議是，當您用jQuery代碼編寫頁面時，要盡快應用這5個步驟。每個開發(fā)人員都會告訴您，利用特性是編程過程的一部分。您不希望僅因開頭設計得不好或更改某些部分而重新設計整個Web應用程序。編寫代碼時就要抱有編寫強大應用程序的想法，并且遵循這些建議。

【編輯推薦】

1. jQuery四大天王：核心函數(shù)詳解
2. 拋磚引玉 自定義jQuery擴展接口
3. 改變獲取對象方式 ***的jQuery選擇器
4. 使用jQuery構建未來Web應用程序
5. jQuery另類視角：動態(tài)擴展對象