如何开发插件

jQuery插件开发模式

jQuery插件一般有三种开发方式：

1. 通过$.extend来扩展jQuery
2. 通过$.fn 向jQuery添加新的方法
3. $.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级开发模式，本文不做介绍。第二种则是一般插件开发用到的方式，本文着重讲述。

插件开发

第二种插件开发方式一般是如下定义

$.fn.pluginName=function(){
    // your code here
};

插件开发一般用面向对象思维
例如定义一个对象

var Test=function(ele,opt){
    this.ele=ele,
    this.defaults={
        'color':'red',
        'fontSize':'12px',
        'textDecoration':'none'
    },
    this.options=$.extend({},this.defaults,opt);
};
//定义方法
Test.prototype={
    changeCss: function(){
        return this.ele.css({
            'color':this.options.color,
            'fontSize':this.options.fontSize,
            'textDecoration':this.options.textDecoration
        });
    }
};

$.extend({},this.defaults,opt)有{}主要是为了创建一个新对象，保留对象的默认值。

$.fn.myPlugin=function(options){
    // 创建test实体
    var test=new Test(this,options);
    return test.changeCss();
};

调用插件

$(function(){
    $('a').myPlugin({
        'color':'blue',
        'fontSize':'20px'
    });
});

上述开发方法的问题

上述的开发存在一个严重的问题，就是定义了一个全局的Test，这样对于插件的兼容等方面都不好。万一别的地方用到Test，那就天啦撸。所有我们要把代码包起来，用自调用匿名函数（块级作用域或者私有作用域）包裹，就不会出现这个问题了；包裹方法如下

;(function($,window,document,undefined){
    // code
})(jQuery,window,document);