jqueryUI之widget

jqueryUI widget 分析

$.widget 理解是个注册ui组件的工厂方法，$.widget(name,prototype) 传入ui的name和ui的prototype，就会返回新ui的构造方法。

$.widget( "ui.buttonset",/* 原型*/ {
    version: "1.10.1",
    options: {
        items: "button, input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], a, :data(ui-button)"
    },
    _create: function() {
        this.element.addClass( "ui-buttonset" );
    },
    _init: function() {
        this.refresh();
    },

 因为ui组件有很多方法是可以公用的，像共有属性、option参数设置、create/init组件执行过程、on/off/trigger事件和其他focusable等添加class的逻辑，通过$.Widget这个ui的最基类做了封装

$.Widget = function( /* options, element */ ) {};
$.Widget._childConstructors = [];
$.Widget.prototype = {
    widgetName: "widget",
    widgetEventPrefix: "",
    defaultElement: "<div>",
    options: {
        disabled: false,
        create: null
    }

如果简化ui的$.widget的逻辑

function base(){};//$.Widget 基类

base.prototype={ _create:function(){... }, ... };

function pkg(proto){//$.widget 工厂方法

　　var constructor=function(opt){ this._create(opt); }; 

　　constructor.prototype=$.extend(true,{},new base(),proto); 
　　return constructor; 
}

源码分析

实际的实现中$.widget做了一些自己的特殊处理：

如命名相关

    var fullName, existingConstructor, constructor, basePrototype,
        // proxiedPrototype allows the provided prototype to remain unmodified
        // so that it can be used as a mixin for multiple widgets (#8876)
        proxiedPrototype = {},
        namespace = name.split( "." )[ 0 ];

    name = name.split( "." )[ 1 ];
    fullName = namespace + "-" + name;

    if ( !prototype ) {
        prototype = base;
        base = $.Widget;
    }

    // create selector for plugin
    $.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
        return !!$.data( elem, fullName );
    };

    $[ namespace ] = $[ namespace ] || {};
    existingConstructor = $[ namespace ][ name ];

 

如快捷使用

    constructor = $[ namespace ][ name ] = function( options, element ) {
        // allow instantiation without "new" keyword
        if ( !this._createWidget ) {
            return new constructor( options, element );
        }

        // allow instantiation without initializing for simple inheritance
        // must use "new" keyword (the code above always passes args)
        if ( arguments.length ) {
            this._createWidget( options, element );
        }
    };

 

如考虑继承情况

    // extend with the existing constructor to carry over any static properties
    $.extend( constructor, existingConstructor, {
        version: prototype.version,
        // copy the object used to create the prototype in case we need to
        // redefine the widget later
        _proto: $.extend( {}, prototype ),
        // track widgets that inherit from this widget in case this widget is
        // redefined after a widget inherits from it
        _childConstructors: []
    });




    // If this widget is being redefined then we need to find all widgets that
    // are inheriting from it and redefine all of them so that they inherit from
    // the new version of this widget. We're essentially trying to replace one
    // level in the prototype chain.
    if ( existingConstructor ) {
        $.each( existingConstructor._childConstructors, function( i, child ) {
            var childPrototype = child.prototype;

            // redefine the child widget using the same prototype that was
            // originally used, but inherit from the new version of the base
            $.widget( childPrototype.namespace + "." + childPrototype.widgetName, constructor, child._proto );
        });
        // remove the list of existing child constructors from the old constructor
        // so the old child constructors can be garbage collected
        delete existingConstructor._childConstructors;
    } else {
        base._childConstructors.push( constructor );
    }

 

和桥接ui组件成jquery插件

$.widget.bridge( name, constructor );

 

还有很多属性复制克隆防止覆盖的处理

basePrototype.options = $.widget.extend( {}, basePrototype.options );

 

比较难以理解的应该是这段

    $.each( prototype, function( prop, value ) {
        if ( !$.isFunction( value ) ) {
            proxiedPrototype[ prop ] = value;
            return;
        }
        proxiedPrototype[ prop ] = (function() {
            var _super = function() {
                    return base.prototype[ prop ].apply( this, arguments );
                },
                _superApply = function( args ) {
                    return base.prototype[ prop ].apply( this, args );
                };
            return function() {
                var __super = this._super,
                    __superApply = this._superApply,
                    returnValue;

                this._super = _super;
                this._superApply = _superApply;

                returnValue = value.apply( this, arguments );

                this._super = __super;
                this._superApply = __superApply;

                return returnValue;
            };
        })();
    });

 

这段代码在传入的ui原型中有方法调用this._super 和this.__superApply会调用到base上（最基类上）的方法。参考测试用例中

test( "._superApply()", function() {
    expect( 10 );
    var instance;
    $.widget( "ui.testWidget", {
        method: function( a, b ) {
            deepEqual( this, instance, "this is correct in testWidget" );
            deepEqual( a, 5, "parameter passed to testWidget" );
            deepEqual( b, 10, "second parameter passed to testWidget" );
            return a + b;
        }
    });

    $.widget( "ui.testWidget2", $.ui.testWidget, {
        method: function( a, b ) {
            deepEqual( this, instance, "this is correct in testWidget2" );
            deepEqual( a, 5, "parameter passed to testWidget2" );
            deepEqual( b, 10, "second parameter passed to testWidget2" );
            return this._superApply( arguments );
        }
    });

    $.widget( "ui.testWidget3", $.ui.testWidget2, {
        method: function( a, b ) {
            deepEqual( this, instance, "this is correct in testWidget3" );
            deepEqual( a, 5, "parameter passed to testWidget3" );
            deepEqual( b, 10, "second parameter passed to testWidget3" );
            var ret = this._superApply( arguments );
            deepEqual( ret, 15, "super returned value" );
        }
    });

    instance = $( "<div>" ).testWidget3().testWidget3( "instance" );
    instance.method( 5, 10 );
    delete $.ui.testWidget3;
    delete $.ui.testWidget2;
});

 jqueryui 的widget设计，即能很好的保证代码复用和维护风格统一，也允许各自ui灵活的实现功能。除此之外jquery ui在api的灵活性和实例化步骤等地方都做的很好，在自己实现代码的时候参考下他的实现很有启发