15个值得开发人员关注的jQuery开发技巧和心得

2011-11-17 15:00:41来源:gbin1.com作者:gbin1

在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢!

8. 使用自定义的删除方法

你可能听到过jQuery的删除插件,它能够允许你给你的动画添加特效。唯一的缺点是你的访问者需要加载另外一个javascript文件。幸运的是,你可以简单的从插件拷贝效果,并且添加到jQuery.easing对象中,如下:

$.easing.easeInOutQuad = function (x, t, b, c, d) {
 if ((t/=d/2) < 1) return c/2*t*t + b;
 return -c/2 * ((--t)*(t-2) - 1) + b;
};

// To use it:
$('#elem').animate({width:200},'slow','easeInOutQuad');

9. $.proxy()

使用callback方法的缺点之一是当执行类库中的方法后,context被设置到另外一个元素,例如:

<div id="panel" style="display:none">
 <button>Close</button>
</div>

执行下面代码:

$('#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);

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

关键词:jQuery开发技巧