jQuery中優(yōu)化Web應(yīng)用程序的方法

這篇文章給大家介紹jQuery中優(yōu)化Web應(yīng)用程序的方法，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

jQuery讓編寫基于JavaScript的良好Web應(yīng)用程序變得簡單明了，但是要想將好的Web應(yīng)用程序變得更出色還需要額外幾個步驟。

示例應(yīng)用程序

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

Bind/Unbind

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

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

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

$(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”小部件，我給出了它的基礎(chǔ)形式。在關(guān)于性能的文章中，您看到如何通過緩存選擇查詢和通過CLASS減少使用查詢來改進它的性能。但是還有一個問題需要解決。當(dāng)在包含100行的表中勾選“select/deselectall”復(fù)選框之后，您將得到糟糕的性能。事實上，在我的瀏覽器中，如果使用了這些代碼，那么完成選擇的平均時間為3.4秒。響應(yīng)性太差了！即使進行了各項優(yōu)化，仍然有些不可接受的地方。

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

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

現(xiàn)在，unbind()方法開始發(fā)揮它的作用。通過在單擊復(fù)選框之前調(diào)用unbind()，將停止調(diào)用click()，同時避免了click()進一步調(diào)用changeNumFilter()方法。這很棒！現(xiàn)在就不會調(diào)用changeNumFilters()101次了。但是，這僅是一次有效的，在調(diào)用click方法之后，需要使用bind方法將click方法添加回到每個復(fù)選框。清單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)化之后，復(fù)選框的運行速度提高到約900毫秒，從而大大改進了性能。這些改進源于返回去檢查您的算法正在做什么，以及貫穿代碼的操作。您可以僅調(diào)用函數(shù)1次，而不是100次。通過在本系列的其他文章中不斷改進該函數(shù)，您***會讓它變得更快、更高效。但不一定非得這么做，我還發(fā)現(xiàn)一個最快的算法，以前從來沒有透露過。此外，如果我過早地向您展示這個最快的算法，我就不能將其作為本文的題材了。希望它能使您看到在代碼中使用bind/unbind特性帶來的好處（如果沒有更好的方法的話）。

記?。涸诓幌Ｍ|發(fā)默認(rèn)事件時才使用bind/unbind，或作為向頁面元素添加或刪除事件的臨時方法

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

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

Live/Die

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

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

這個設(shè)計存在一個問題。它向包含一個messageRow類的表的每行添加一個雙擊事件。但是，如果向該表添加新的行，會發(fā)生什么事情呢？例如，當(dāng)您使用Ajax在未重新加載頁面的情況下將額外的消息加載到頁面時，可能會顯示這些行。這導(dǎo)致一個問題，因為所編寫的代碼不能工作。您創(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)匀挥行В?**種方法是重新初始化技術(shù)，它在每次添加新的元素之后重新將事件添加到選中的元素中。第二種方法利用了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");  }

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

幸運的是，有一個插件好像能夠解決該問題。這個插件稱為LiveQuery插件，它允許您將特定頁面元素綁定到事件，但僅能以“活動”的方式進行，因此所有頁面元素（包括創(chuàng)建頁面時自帶的元素和在頁面的生命周期中創(chuàng)建的元素）都可能觸發(fā)事件。對UI開發(fā)人員而言，這是一個非常智能、重要的插件，因為使得處理動態(tài)頁面就像處理靜態(tài)頁面一樣簡單。對于Web應(yīng)用程序開發(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()方法。事實上，我認(rèn)為它對于任何動態(tài)地創(chuàng)建頁面元素的頁面都是必不可少的，不管是通過Ajax還是用戶交互進行創(chuàng)建，都需要使用live()函數(shù)而不是事件方法。它很好的實現(xiàn)了易編寫和bug之間的折衷。

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

Ajax Queue/Sync

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

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

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

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

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

記?。喝绻膽?yīng)用程序有多個相互依賴的Ajax調(diào)用，那么要考慮使用Ajax Queue或Ajax Sync。

第二個示例Web應(yīng)用程序

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

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

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

<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設(shè)置小部件

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

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

讓我們遵循我曾用jQuery設(shè)置小部件的幾個步驟。通過查看這些步驟，您可以看到清單9中的設(shè)計模式是如何出現(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代碼引入大量功能。這種類型的設(shè)計的好處是很明顯的。同樣，遵循角色分離、代碼重用等也是非常有益的。您還將在小部件插件中看到這種類型的設(shè)計，因為它將簡單的HTML代碼轉(zhuǎn)變成適用于插件的小部件。最重要的是，這也是您在這里需要完成的任務(wù)，即編寫一個插件來將一個簡單的表轉(zhuǎn)變成排序和匯總表。

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

名稱空間

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

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

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

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

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

沒有能夠處理名稱空間問題的現(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ù)與自身的其他實例重復(fù)（或者甚至是其他碰巧對ID或類使用相同名稱的小部件）。這種類型的代碼編寫方式在插件代碼中很常見。編寫良好的插件應(yīng)該考慮到名稱空間問題，而糟糕的插件忽略了這個問題。從這個例子中可以看到，在代碼中使用名稱空間也是很簡單的，并且隨著頁面越來越復(fù)雜，它可以給您節(jié)省大量時間。鑒于這個原因，我建議您現(xiàn)在就開始考慮jQuery代碼中的名稱空間問題，并在編寫代碼時使用這種解決辦法。

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

結(jié)束語

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

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

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

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

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

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

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

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

關(guān)于jQuery中優(yōu)化Web應(yīng)用程序的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。