jQueryUI 的weiget写法

JqueryUI的Weiget写法

• jQueryUI的Weiget写法

(function ($) {
    // utils fuction
    function foo() {}

    $.widget('命名空间.插件名', $.继承插件的命名空间.插件名,{
        /* snip */ 
        //public方法首字符不是_
        //private方法首字符是_
    });
})(jQuery); 

• jQueryUI的Weiget的使用方法

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

• jQueryUI的Weiget的options

//定义options
options: {
    field1: 'default',
    function1: function () {
        console.log('default option function1');
    }
//调用options中的option
$('#id').jformCommands('option','isInput',true);

jQueryUi的Weiget 的默认构建方法

_createWidget: function( options, element ) {
        element = $( element || this.defaultElement || this )[ 0 ];
        this.element = $( element );
        this.uuid = widgetUuid++;
        this.eventNamespace = "." + this.widgetName + this.uuid;
        //.....这里忽略
        this.options = $.widget.extend( {},
            this.options,
            this._getCreateOptions(),
            options );

        this._create();

        if ( this.options.disabled ) {
            this._setOptionDisabled( this.options.disabled );
        }

        this._trigger( "create", null, this._getCreateEventData() );
        this._init();
    }

所以编写 jquery ui widget时默认需要实现_create,_init,_destory 方法

jQueryUi 是怎么把weiget扩展到$.fn上的

//Widget中的定义写法
$.widget=function(name,base,prototype){
    var namespace = name.split( "." )[ 0 ];
    name = name.split( "." )[ 1 ];
    var fullName = namespace + "-" + name;
    //忽略
    $.widget.bridge( name, constructor );
    return constructor;
}

//具体的$.widget.bridge实现
$.widget.bridge = function( name, object ) {
    var fullName = object.prototype.widgetFullName || name;
    $.fn[ name ] = function( options ) {       
        //忽略 .....
        return returnValue;
    };
};