写在前面
我认为,今天的这个插件在写法上已经比较符合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插件的作用就是一段封装起来的函数,实现特定的功能,比较友好的插件应尽可能多地给用户暴露出来一些参数可供调整。