jquery插件开发学习笔记（二）

写在前面

我认为，今天的这个插件在写法上已经比较符合jquery插件开发的“正统”流程。在各个方面都考虑得比较完善。习惯了这种思路之后，对于开发功能完备的插件是大有帮助的。

相比较与第一个插件来说，插件主体区和功能区分离是最大的特点。另外，进过两个小时的bug分析，得出了惨痛的参数传递的方法（目前觉得还太高深，不是吾辈理解之）。

包裹

(function($){
//code goes here
})(jQuery)

插件的衣服

默认参数

var defaults={
color:"red",
name:"myName",
//etc...
};

分情况对待。如果参数在整个插件内都有引用，就声明为全局的（对于插件本身而言是全局的，对于网页脚本来说，它只是某个函数内部的变量。所以，给插件穿衣服是为了防止污染环境）。

插件功能方法区

var methods={
init:function(options){
var settings=$.extend({},defaults,options);//防止污染默认参数
return this.each(function(){
//code
});
}
method_1:function(){
return this.each(function(){
//code
});
}
method_2:function(){
return this.each(function(){
//code
});
}

};

需要的方法依次写好。注意，如果需要传递参数，就把穿进来的参数和默认参数合并到新的变量中。合并过程中间，为了防止污染默认参数，合并到一个新的空对象（｛｝）中。

插件区

$.fn.myPlugin=function () {
var method=arguments[0];
if(methods[method]){
method=methods[method];
arguments = Array.prototype.slice.call(arguments, 1);//!!!重要！！！
}else if(typeof method==="object"||!method){
method=methods.init;
}else{
$.error("error!!!");
return this;
}
return method.apply(this,arguments);
};

用户调用时可能会传递函数（如果传递了，肯定是第一个参数），所以把arguments[0]储存到method中。

以下分几类情况进行讨论：

1、 如果传递了函数，属于存在methods[method]，所以method即为methods[method]，赋给它即可；重要的事情说三遍！重要的事情说三遍！重要的事情说三遍！（

arguments = Array.prototype.slice.call(arguments, 1);

） 解释：我们的方法是作为参数传入的，把它从参数列表中删除，因为调用方法时并不需要它（大神解释，目前还理解不了。）

2、如果用户没有传递函数，只是传递了参数（或者什么都没有传递），那么method即为init函数（初始化），所有的设置都要按照开发者的意愿进行。

3、如果用户传递的参数或者函数格式有误，报错。

调用

$("a").myPlugin("init",{"color":"blue", "backgroundColor":"#baf"});
$("button").myPlugin("yellow");

总结

jquery插件的作用就是一段封装起来的函数，实现特定的功能，比较友好的插件应尽可能多地给用户暴露出来一些参数可供调整。