我们新建一个对象命名为Beautifier,然后我们在插件里使用这个对象来编码
//定义 Beautifier的构造函数,然后我们在插件里使用这个对象来编码
var Beautifier=function(ele,opt){
this.$element=ele,
this.defaults={
'color':red,
'font-size':'12px',
'text-Decoration':'none'
},
this.options=$.extend({},this.defaults,opt)
}
//定义Beautifier的方法
Beautifier.prototype={
beautify:function(){
return this.$element.css({
'color':this.options.color,
'font-size':this.options.fontSize,
'text-Decoration':this.options.textDecoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin=function(options){
//创建Beautifier的实体
var beautifier=new Beautifier(this,options);
//调用其方法
return beautifier.beautify();
}
//插件的调用
$(function(){
$('a').myPlugin({
'color':'#2C9929',
'font-Size':'20px'
});
})
//指定文字带下划线的调用
$(function(){
$('a').myPlugin({
'color':'#2C9929',
'font-Size':'20px',
'text-Decoration':'underline'
});
})
关于命名空间
不仅仅是jQuery插件的开发，我们在写任何JS代码时都应该注意的是不要污染全局命名空间，因为随着你代码的增多，如果有意无意的在全局定义一些变量的话，最后很难维护，也容易跟比别人写的代码有冲突。
一个好的做法是始终用自调用匿名函数包裹你的代码，这样就可以完全放心，安心的将它用于任何地方了，绝对没有冲突。
用自调用匿名函数调用你的代码
我们知道JS中无法用花括号方便的创建作用域，但函数却可以形成一个作用域，域内的代码是无法别外界访问的。如果我们将自己的代码放入一个函数中，那么就不会污染全局命名空间，同时不会和别的代码冲突。
如上面我们定义了一个Beautifier全局变量，他被赋到全局的window对象上，为了防止这种事情发生，我们将所有代码用自调用匿名函数包裹。
(function(){
//定义Beautifier的构造函数
var Beautifier=function(ele,opt){
this.$element=ele,
this.defaults={
'color':'red',
'font-Size':'12px',
'text-Decoration':'none'
},
this.options=$.extend({},this.defaults,opt);
}
//定义Beautifier的方法
Beautifier.prototype={
beautify:function(){
return this.$element.css({
'color':this.options.color,
'font-Size':this.options.fontSize,
'text-Decoration':this.options.text-Decoration
});
}
}
//在插件中使用Beautifier对象
$.fn.myPlugin=function(options){
//创建Beautifier的实体
var beautifier=new Beautifier(this,options);
//调用其方法
return beautifier.beautify();
}
})();