15个值得开发人员关注的jQuery开发技巧和心得(2)_H5之家

你将遇到问题，button会消失，不是panel。使用$.proxy方法，你可以这样书写代码：

$('#panel').fadeIn(function(){ // Using $.proxy to bind this: $('#panel button').click($.proxy(function(){ // this points to #panel $(this).fadeOut(); },this)); });

这样才正确的执行。$.proxy方法接受两个参数，你最初的方法，还有context。这里阅读更多$.proxy in the docs.。

10. 判断页面是否太过复杂

一个非常简单的道理，约复杂的页面，加载的速度越慢。你可以使用下面代码检查一下你的页面内容：

console.log( $('*').length );

以上代码返回的数值越小，网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码

11. 将你的代码转化成jQuery插件

如果你要花一定得时间去开发一段jQuery代码，那么你可以考虑将代码变成插件。这将能够帮助你重用代码，并且能够有效的帮助你组织代码。创建一个插件代码如下：

(function($){ $.fn.yourPluginName = function(){ // Your code goes here return this; }; })(jQuery);

你可以在这里阅读更多开发教程。

12. 设置全局AJAX为缺省

如果你开发ajax程序的话，你肯定需要有”加载中“之类的显示告知用户，ajax正在进行，我们可以使用如下代码统一管理，如下：

// ajaxSetup is useful for setting general defaults: $.ajaxSetup({ url : '/ajax/', dataType : 'json' }); $.ajaxStart(function(){ showIndicator(); disableButtons(); }); $.ajaxComplete(function(){ hideIndicator(); enableButtons(); }); /* // Additional methods you can use: $.ajaxStop(); $.ajaxError(); $.ajaxSuccess(); $.ajaxSend(); */

详细你可以查看这篇文章:

如何快速创建一个AJAX的"加载"的图片效果

5个在线Ajax“加载中”旋转图标生成器工具

13. 在动画中使用delay()方法

链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是你可以在动画之间加上delays，如下：

// This is wrong: $('#elem').animate({width:200},function(){ setTimeout(function(){ $('#elem').animate({marginTop:100}); },2000); }); // Do it like this: $('#elem').animate({width:200}).delay(2000).animate({marginTop:100});

jQuery动画帮了我们大忙，否则我们得自己处理一堆的细节，设置timtout，处理属性值，跟踪动画变化等等。

大家可以参考这个文章：jQuery animations

14. 合理利用HTML5的Data属性

HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。下面是个例子：

为了存取数据你需要调用如下代码：

$("#d1").data("role"); // "page" $("#d1").data("lastValue"); // 43 $("#d1").data("hidden"); // true; $("#d1").data("options").name; // "John";

如果你想看看实际的例子，请参考这篇教程：使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

data()的jQuery文档：data() in the jQuery docs

15. 本地存储和jQuery

本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中:

localStorage.someData = "This is going to be saved across page refreshes and browser restarts";

但是对于老的浏览器来说，这个不是个好消息。因为他们不支持。但是我们可以使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可以使得本地存储功能正常工作。

以上是我们介绍的15个jQuery的开发技巧，如果你有更多的技巧和评论，请在下面给我们留言，谢谢支持！

原文来源：15个值得开发人员关注的jQuery开发技巧和心得