15个强大的jQuery开发技巧和心得(2)_H5之家 - 中国HTML5教程资源分享第一站

执行下面代码：

$('#panel').fadeIn(function(){
// this points to #panel
$('#panel button').click(function(){
// this points to the button
$(this).fadeOut();
});
});

你将遇到问题，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();
*/ 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";

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的开发技巧，如果你有更多的技巧和评论，请在下面给我们留言，谢谢支持！