|
|
jQuery讓編寫(xiě)基于JavaScript的良好Web應(yīng)用程序變得簡(jiǎn)單明了，但是要想將好的Web應(yīng)用程序變得更出色還需要額外幾個(gè)步驟。本文詳細(xì)闡述幾個(gè)讓W(xué)eb應(yīng)用程序變得更強(qiáng)大的步驟，這些步驟是優(yōu)化您的Web應(yīng)用程序的最后絕招。
第一個(gè)示例應(yīng)用程序
本文中的大部分技巧都可以從附帶的樣例應(yīng)用程序中找到，這是一個(gè)直觀的電子郵件Web應(yīng)用程序。不過(guò)，您可以看到它是如何從第一篇文章中發(fā)展而來(lái)的，它的性能是如何改進(jìn)的，以及這些最后步驟如何將它轉(zhuǎn)變成強(qiáng)大的Web應(yīng)用程序的。
Bind/Unbind
在Events模塊中有兩個(gè)函數(shù)，它們是bind()和unbind()，用于完成所有其他事件方法的任務(wù)。如果您能夠向頁(yè)面元素添加一個(gè)click()方法，那么哪還有必要調(diào)用bind("click")呢？這僅是浪費(fèi)時(shí)間而已。但是，這些函數(shù)在特定情況下是非常方便的，如果正確地使用它們，可以顯著提高應(yīng)用程序的性能。
這些函數(shù)不僅能夠向特定頁(yè)面元素添加事件（就像該模塊中的許多其他事件方法一樣），而且還可以從頁(yè)面元素中刪除這些事件。為什么要這樣做？下面我們看看這個(gè)Web應(yīng)用程序，以及如何在特定情況下使用這些函數(shù)。
清單1顯示了以上設(shè)置的代碼，這是未改進(jìn)之前的原始代碼：
1. $(document).ready(function(){
2. //cachethisquerysinceit'sasearchbyCLASS
3. selectable=$(":checked.selectable");
4. //whentheselect/deselectallisclicked,dothisfunction
5. $("#selectall").click(selectAll);
6. //wheneveranyindividualcheckboxischecked,changethetext
7. //describinghowmanyarechecked
8. selectable.click(changeNumFilters);
9. //calculatehowmanyareinitiallychecked
10. changeNumFilters();
11. });
12.
13. varselectable;
14. functionchangeNumFilters()
15. {
16. //thisneedstobecheckedoneverycall
17. //sincethelengthcanchangewitheveryclick
18. varsize=$(":checked.selectable").length;
19. if(size>0)
20. $("#selectedCount").html(size);
21. else
22. $("#selectedCount").html("0");
23. }
24.
25. //handlestheselect/deselectofallcheckboxes
26. functionselectAll()
27. {
28. varchecked=$("#selectall").attr("checked");
29. selectable.each(function(){
30. varsubChecked=$(this).attr("checked");
31. if(subChecked!=checked)
32. {
33. $(this).click();
34. }
35. });
36. changeNumFilters();
37. }第二個(gè)示例Web應(yīng)用程序
我將使用另一個(gè)小部件解決本文的最后3個(gè)問(wèn)題，并且在深入研究其代碼之前展示和解釋它。這個(gè)401k小部件并不陌生，因?yàn)槟呀?jīng)在前面的文章見(jiàn)過(guò)它（參見(jiàn)參考資料部分獲取這些文章的鏈接）。不過(guò)，這回有個(gè)微妙的不同之處，因?yàn)槲以谕粋€(gè)頁(yè)面上兩次添加了這個(gè)小部件。它被添加到兩個(gè)不同的表中。這將帶來(lái)幾個(gè)有趣的地方。圖3顯示了這個(gè)小部件：
在這個(gè)小部件中，我正在做幾件事情。第一件是計(jì)算文本字段之和并確定它們是否為100。如果它們的和不為100，我將向用戶顯示一個(gè)錯(cuò)誤，提示他們沒(méi)有正確使用該小部件。第二，我在每個(gè)選項(xiàng)獲取輸入之后對(duì)選項(xiàng)進(jìn)行排序。通過(guò)這種方式，百分比最高的投資分配將一直出現(xiàn)在表的頂部。這可以在圖3中看到，它按百分比對(duì)選項(xiàng)進(jìn)行排序。最后，為了讓它更酷，我添加了一些條帶。
用于生產(chǎn)這個(gè)小部件的HTML代碼出奇地簡(jiǎn)單。清單8詳細(xì)地顯示了這個(gè)小部件。
1. <p><tablewidthtablewidth=300class="percentSort"cellpadding=0cellspacing=0>
2. <tbody>
3. <tr><td>S&P500Index</td>
4. <td><inputtypeinputtype=text>%</td></tr>
5. <tr><td>Russell2000Index</td>
6. <td><inputtypeinputtype=text>%</td></tr>
7. <tr><td>MSCIInternationalIndex</td>
8. <td><inputtypeinputtype=text>%</td></tr>
9. <tr><td>MSCIEmergingMarketIndex</td>
10. <td><inputtypeinputtype=text>%</td></tr>
11. <tr><td>REITIndex</td>
12. <td><inputtypeinputtype=text>%</td></tr>
13. </tbody>
14. <tfoot>
15. </tfoot>
16. </table>
it知識(shí)庫(kù)：jQuery高級(jí)應(yīng)用：優(yōu)化Web應(yīng)用程序的最后絕招，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
