|
|
jQuery让编写基于JavaScript的良好Web应用程序变得简单明了，但是要想将好的Web应用程序变得更出色还需要额外几个步骤。本文详细阐述几个让Web应用程序变得更强大的步骤，这些步骤是优化您的Web应用程序的最后绝招。
第一个示例应用程序
本文中的大部分技巧都可以从附带的样例应用程序中找到，这是一个直观的电子邮件Web应用程序。不过，您可以看到它是如何从第一篇文章中发展而来的，它的性能是如何改进的，以及这些最后步骤如何将它转变成强大的Web应用程序的。
Bind/Unbind
在Events模块中有两个函数，它们是bind()和unbind()，用于完成所有其他事件方法的任务。如果您能够向页面元素添加一个click()方法，那么哪还有必要调用bind("click")呢？这仅是浪费时间而已。但是，这些函数在特定情况下是非常方便的，如果正确地使用它们，可以显著提高应用程序的性能。
这些函数不仅能够向特定页面元素添加事件（就像该模块中的许多其他事件方法一样），而且还可以从页面元素中删除这些事件。为什么要这样做？下面我们看看这个Web应用程序，以及如何在特定情况下使用这些函数。
清单1显示了以上设置的代码，这是未改进之前的原始代码：
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. }第二个示例Web应用程序
我将使用另一个小部件解决本文的最后3个问题，并且在深入研究其代码之前展示和解释它。这个401k小部件并不陌生，因为您已经在前面的文章见过它（参见参考资料部分获取这些文章的链接）。不过，这回有个微妙的不同之处，因为我在同一个页面上两次添加了这个小部件。它被添加到两个不同的表中。这将带来几个有趣的地方。图3显示了这个小部件：
在这个小部件中，我正在做几件事情。第一件是计算文本字段之和并确定它们是否为100。如果它们的和不为100，我将向用户显示一个错误，提示他们没有正确使用该小部件。第二，我在每个选项获取输入之后对选项进行排序。通过这种方式，百分比最高的投资分配将一直出现在表的顶部。这可以在图3中看到，它按百分比对选项进行排序。最后，为了让它更酷，我添加了一些条带。
用于生产这个小部件的HTML代码出奇地简单。清单8详细地显示了这个小部件。
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知识库：jQuery高级应用：优化Web应用程序的最后绝招，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
