接下来有两种插件书写的形式
一种是一个函数:$.fn.函数名 = function([options]){}
另外一种自然是可以多个函数:$.fn.extend({函数名:function(){}});
第一种能一次声明一个函数,而第二个可以一次声明多个函数
js写插件有多种方法,最常见的是通过$.fn添加自定义方法来实现;
$.fn.pluginName = function() {
this.css('color','red')//your code goes here
}
这样就相当于给jqury对象添加一个方法属性,$('#id').pluginName(); 就可以直接调用我们的插件了;方法里面的this就是jQuery选择器返回的集合,那么通过调用jQuery的.each()方法就可以处理合集中的每个元素了,但此刻要注意的是,在each方法内部,this指带的是普通的DOM元素了,如果需要调用jQuery的方法那就需要用$来重新包装一下。
1.让插件接收参数,通常使用jQuery的extend方法来实现,相当于继承关系,键相同的会覆盖值;
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend(defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
保护默认参数,如果一个页面会多次调用插件,那第一次调用后,defaults值会发生改变,所以我们可以让他们合并的值赋给一个新的对象,这样defaults就不会变了;
$.fn.myPlugin = function(options) {
var defaults = {
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);//将一个空对象做为第一个参数
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
});
}
2.面向对象的插件开发
为什么要有面向对象的思维,因为如果不这样,你可能需要一个方法的时候就去定义一个function,当需要另外一个方法的时候,再去随便定义一个function,同样,需要一个变量的时候,毫无规则地定义一些散落在代码各处的变量。所以我们可以定义一个对象,把方法和变量作为对象的属性;插件中我们就可以操作这个对象了。
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法,就是给Beautifier对象加个属性
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
这样改动并不影响我们调用插件的方法:
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})
3.命名空间
不仅仅是jQuery插件的开发,我们在写任何JS代码时都应该注意的一点是不要污染全局命名空间。因为随着你代码的增多,如果有意无意在全局范围内定义一些变量的话,最后很难维护,也容易跟别人写的代码有冲突。比如你在代码中向全局window对象添加了一个变量status用于存放状态,同时页面中引用了另一个别人写的库,也向全局添加了这样一个同名变量,最后的结果肯定不是你想要的。所以不到万不得已,一般我们不会将变量定义成全局的。一个好的做法是始终用自调用匿名函数包裹你的代码,这样就可以完全放心,安全地将它用于任何地方了,绝对没有冲突。
(function() {
//定义Beautifier的构造函数
var Beautifier = function(ele, opt) {
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义Beautifier的方法
Beautifier.prototype = {
beautify: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin = function(options) {
//创建Beautifier的实体
var beautifier = new Beautifier(this, options);
//调用其方法
return beautifier.beautify();
}
})();
4、在匿名函数前面加个分号,防止解析报错;
var foo=function(){
//别人的代码
}//注意这里没有用分号结尾
//开始我们的代码。。。
;(function(){
//我们的代码。。
alert('Hello!');
})();
5. 同时,将系统变量以参数形式传递到插件内部也是个不错的实践。当我们这样做之后,window等系统变量在插件内部就有了一个局部的引用,可以提高访问速度,会有些许性能的提升最后我们得到一个非常安全结构良好的代码;
;(function($,window,document,undefined){
//我们的代码。。
//blah blah blah...
})(jQuery,window,document);