面向对象的插件开发

我们新建一个对象命名为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',