jQuery 插件开发

昨天被别人问懂不懂jQuery 自定义控件，没能答的上来，感觉自己有点low。所以今天百度下，马上把这块知识补上。
原文：
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
https://www.cnblogs.com/dc10101/archive/2012/05/03/2481004.html

jQuery插件有三种开发模式：

1.通过$.extend() 来扩展，仅仅在jQuery 命名空间添加一个静态方法。可直接用$符号调用，不需要选中DOM元素（$(“example”).myfunction()).

例子：

$.extend({
sayHello:function(name){
     /*主要处理代码*/
  }
})
$.sayHello();
$.sayHello('do');

这个种方式用来定义一些辅助方法，或者用在定义一次然后在程序中多次调用的情况。

2.$.fn 向jQuery添加新的方法

第二张有点像jquery的长用风格，可以选中dom对象，插件函数全部作用到这个dom对象上。

基本格式：
$.fn.plugName = function(){
this.css('color','red');//this指向的是jquery选中的元素对象
this.each(function(){
 $(this).append(''+$(this).attr('href'));
})
}

支持链式调用：只需要函数最后返回这个jquery对象选中的对象(return this)。

链式结构比如：$("this").style().show()，为了不打破链式结构，style（）函数最后返回的肯定是$('this'),才能让 $('this').show() 成立。

让插件接收参数：
使用者可以不传递参数，插件里面会给出参数的默认值。

$.fn.myPlugin() = function(options){
    var defaults = {
     'color':'red',
     'fontSize':'12px'
 };
 var settings = $.extend({},defaults, options);// 合并参数到jquery里面,默认最后合并到第一个参数上
 return this.css({
 'color':settings.color,
 'fontSize':settings.fontSize
});// 等效于最后 return this
}

面向对象的插件开发

//定义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();
}

命名空间
为了不污染全局命名空间，始终用自调函数包裹自己的代码。

(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();
    }
})();

bug：当前面的函数没有用分号结束时会导致匿名函数报错。
解决方法：在匿名函数前面加分号。
将系统变量以参数形式传递到插件内部：

（function($,window,document,undefined){}）(jQuery,window,document);

3.$.widget() 应用jQuery UI的部件工厂方式创建
模板：

    （function ($){
          function foo () {}
          $.widget('命名空间.插件名',$.继承插件的命名空间.插件名，{/*snip*/});
   }(jQuery);

其中命名空间是可选的，要不要继承别的widget也是可选的。大头是后面snip的部分，这也是下文要讲的。 一般来说工具函数写在widget外面比较合适，但如果你想要这些工具函数被子类继承，则需要写在widget里面。卸载widget里面的，就有public和private之分。
在外调用private方法：

   var instance = $('<div>');
instance.mywidget('publicFunction'); // work
instance.mywidget('_privateFunction'); // silently fail
instance.data('mywidget')._privateFunction(); // work
$.mynamespace.mywidget.prototype._privateFunction(); // work

widget factiory 实现了一种单例模式，不允许在同一个j’Query 对象上多次实例化。
当调用$(xxx).widgetName()进行初始化的时候，会执行以下代码。

var instance = $.data( this,name );
if ( instance ){
    instance.option ( options || {} )._init();
} else {
    $.data( this, name,new object( options , this));
}

若调用$(XX).widgetName(‘destroy’)进行销毁的时候，执行以下代码
this.element
. unbind(“.”+this.widgetName)
.removeDate( this. widgetName);

完整例子：

$.widget( "custom.progressbar", {
    options: {
        value: 0
    },
    _create: function() {
        this.options.value = this._constrain(this.options.value);
        this.element.addClass( "progressbar" );
        this.refresh();
    },
    _setOption: function( key, value ) {
        if ( key === "value" ) {
            value = this._constrain( value );
        }
        this._super( key, value );
    },
    _setOptions: function( options ) {
        this._super( options );
        this.refresh();
    },
    refresh: function() {
        var progress = this.options.value + "%";
        this.element.text( progress );
        if ( this.options.value == 100 ) {
            this._trigger( "complete", null, { value: 100 } );
        }
    },
    _constrain: function( value ) {
        if ( value > 100 ) {
            value = 100;
        }
        if ( value < 0 ) {
            value = 0;
        }
        return value;
    },
    _destroy: function() {
        this.element
            .removeClass( "progressbar" )
            .text( "" );
    }
});

参考：
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
https://www.cnblogs.com/dc10101/archive/2012/05/03/2481004.html
http://www.runoob.com/jqueryui/jqueryui-widget-extend.html