js插件开发规范

以前用过许多jQuery插件，都只是在关注功能和效果的层面上，最近突然有想自己写一个独立功能的插件，所以先打好桩。学习一下插件开发的规范写法，以免形成不好的习惯。

1.使用闭包：

(function($){
//Code goes here
})(jQuery);

这是来自jQuery官方的插件开发规范要求，使用这种编写方式有什么好处呢？

a)避免全局依赖。

b)避免第三方破坏。

c)兼容jQuery操作符’$’和’jQuery’。

这段代码在被解析时会形同如下代码：

var jq = function($){
//Code goes here
} ;
jq(jQuery);

这样效就一目了然了。

2.拓展

jQuery提供了2个供用户拓展的’基类’ - .extend和.fn.extend.

.extend用于拓展自身方法，如.ajax,.getJSON等，.fn.extend则是用于拓展jQuery类，包括方法和对jQuery对象的操作。为了保持jQuery的完整性，我们比较趋向于使用.fn.extend进行插件开发而尽量少使用.extend.

3.选择器

jQuery提供了功能强大，并兼容多种css版本的选择器，不过许多同学在使用选择器时并未注重效率问题。

a)尽量使用Id选择器，jQuery的选择器使用的API都是基于getElementById或getElementsByTagName，因此可以知道效率最高的是Id选择器，因为jQuery会直接调用getElementById去获取dom，而通过样式选择器获取jQuery对象时往往会使用getElementsByTagName去获取然后筛选。

b)样式选择器应该尽量明确的指定tagName，如果开发人员使用样式选择器来获取dom，且这些dom属于同一类型，例如获取所有className为jquery的div，那么我们应该使用的写法是(′div.jquery′)而不是(‘.jquery’)，这样写的好处很明显，在获取dom是jQuery会获取div然后进行筛选，而不是获取所有dom再筛选。

c)避免迭代，很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式，如(′.jquery.child′)，获取className为jquery的dom下的所有className为child的节点，其实这样编写代码付出的代价是非常大的，jQuery会不断的进行深层次遍历来获取需要的元素，即使确实需要，我们也应该使用诸如(selector,context),(′selector1>selecotr2′),(selector1).children(selector2),$(selector1).find(selector2)之类的方式。

js插件开发的一种方法：

js代码：

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type='text/javascript'>
(function($){
//默认参数（放在插件外面，避免每次调用插件都调用一次，节省内存）
var defaults = {
color:'红色'
}
//拓展
$.fn.extend({
//插件名称
height:function(options){
//覆盖默认参数
var opts = $.extend(defaults,options);
//主函数
return this.each(function(){
//激活事件
var obj = $(this);
obj.click(function(){
alert(opts.color);
});
});
}
});
})(jQuery);
$(function(){
$("p").height({color:'black'});
});
</script>

html代码：

<p>click</p>