jQuery插件开发方式

主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建

$.widget()

使用jQueryUI的widget来写插件，相比于基本的jquery插件有一些好处：

• 方便实现继承，代码重用
• 默认是单例
• widget已经给你实现好的一些常用方法，例如destroy 案例

  (function ($) {
    // utility functions (won’t be inherited)
    function foo() {}
    $.widget('命名空间.插件名', $.继承插件的命名空间.插件名,{ /* snip */ });
  })(jQuery);
  

  写在widget里面的，就有public和private之分，规则是： public方法首字符不是 private方法首字符是

  _create _init destroy

  widget factory实现了一种单例模式，即不允许在同一个jQuery对象上多次实例化。 当调用$(XX).widgetName()进行初始化的时候，会执行以下代码（源码截取自jquery.ui.widget.js）：

var instance = $.data( this, name ); // 从widget自身取出名字为name的数据
if ( instance ) {
    instance.option( options || {} )._init();  // 若该数据已经存在则只调用_init
} else {
    $.data( this, name, new object( options, this ) ); // 若数据还没有则新建一个实例，并将实例保存
}

当调用$(XX).widgetName(‘destroy’)进行销毁的时候，执行以下代码（源码截取自jquery.ui.widget.js）：

this.element
    .unbind( "." + this.widgetName )
    .removeData( this.widgetName ); // 删除在create时保存的数据

需要注意的是，destroy方法在jquery.ui.widget.js中是有默认实现的，而_create和_init没有实现。因此如果用自己的方法覆盖destroy，不要忘记调用默认的：

destory: function () {
    console.log('destory');

    // call the original destroy method since we overwrote it
    $.Widget.prototype.destroy.call(this);
}

以下示例代码验证_create和_init的区别以及destroy的作用：

var mw = $('#test').myWidget(); // _create  _init
mw = $('#test').myWidget(); // _init
mw.myWidget('destory');
mw = $('#test').myWidget(); // _create  _init

options

选项，在widget中的定义是options，而在调用时是option，注意定义的时候有s，调用的时候没s。 定义：

$.widget( "hui.grid", {
    options: {
        rpOptions: [20, 30, 40], //可选择设定的每页结果数
        title: false,        // 是否包含标题
        minColToggle: 1,    // minimum allowed column to be hidden
        showToggleBtn: false,// show or hide column toggle popup
        hideOnSubmit: true, // 显示遮盖
        showTableToggleBtn: false, // 显示隐藏Grid
        autoload: true,        // 自动加载
        blockOpacity: 0.5,    // 透明度设置
        onToggleCol: false, // 当在行之间转换时
        onChangeSort: false,// 当改变排序时
        preProcess: false,    // 对数据预处理，需要返回数据
        ......
    },  
    _create: function() {
        console.info("2222==lgl2222");
        var opts = this.options;
        console.info(opts);
        if (opts.minpager)
            opts.pagestat = opts.pagestat || '显示{from}到{to}，共  {total} 条';
        //添加右键菜单
        if(opts.contextmenu) {
            this._createContextMenu(opts.contextmenu);
        }
        // 用flexigrid实现
        this.element.flexigrid(this.options);
    },
    ......
});

调用：

$('#test').grid('option', 'rpOptions', [20, 30, 40,300]);