jQueryUIプラグイン開発フレームワーク解析

一、optionsパラメータでプラグインの作成を制御する
 
プラグインの定義:
 

//        btn
$.chuanlu = {
    btn : function(element, options){
        this._create(element, options);
    }
}

//        btn   
$.chuanlu.btn.prototype = {
    //     
    _create : function(element, options){
        this.element = element;
        this.options = options;
        this._setOptions(options);
    },
    //       
    _setOptions : function(options){
        var key;
        for (key in options) {
            this._setOption(key, options[key]);
        }
        return this;
    },
    //       
    _setOption : function(key, value){
        switch(key){
        case 'backgroundColor':
            this.element.css('backgroundColor', value);
            break;
        case 'text':
            this.elment.html(value);
            break;
        default:
            break;
        }
    }
}

//         btn
$.fn.btn = function(options){
    return this.each(function() {
        var opts = $.extend({}, $.fn.btn.defaults, options);
        //           
        var instance = new $.chuanlu.btn($(this), options);
    });
};

//          
$.fn.btn.defaults = {
    backgroundColor: 'transparent'
}

 
プラグイン呼び出し:
 

$('.btn').btn({
    backgroundColor: '#f00'
});

 
二、プラグインにメソッド呼び出しを追加する
 
例えば、上記のbtnボタンプラグインにdestroyメソッドを追加し、jQueryUIのプラグイン仕様に従って、このメソッドを呼び出すコードは以下の通りです.
 

$('.btn').btn('destroy');

 
この書き方は簡単ですが、プラグインの作成コードフォーマットと競合しているので、プラグインにdestroyメソッドを追加するとともに、作成したコードを変更します.
修正されたコードは次のとおりです.
 
 

//        btn
$.chuanlu = {
    btn : function(element, options){
        this._create(element, options);
    }
}
//        btn   
$.chuanlu.btn.prototype = {
    //     
    _create : function(element, options){
        this.element = element;
        this.options = options;
        this._setOptions(options);
    },
    //       
    _setOptions : function(options){
        var key;
        for (key in options) {
            this._setOption(key, options[key]);
        }
        return this;
    },
    //       
    _setOption : function(key, value){
        switch(key){
        case 'backgroundColor':
            this.element.css('backgroundColor', value);
            break;
        case 'text':
            this.elment.html(value);
            break;
        default:
            break;
        }
    },
    //     
    destroy : function(){
        alert('     ');
    }
}
//           btn
$.fn.btn = function(options){
    var fullName = 'btn.chuanlu';
    //   options    ，       ，      
    if(typeof options == 'string'){
        //   options        ，           
        this.each(function(){
            var instance = $.data(this, fullName);
            instance[ options ].apply(instance, arguments);
        });
    } else {
        return this.each(function() {
            var opts = $.extend({}, $.fn.btn.defaults, options);
            //           
            var instance = new $.chuanlu.btn($(this), options);
            //           ，                 
            $.data(this, fullName, instance);
        });
    }
    
};

//          
$.fn.btn.defaults = {
    backgroundColor: 'transparent'
}

 
プラグイン呼び出し:
 

$('.btn').btn({
    backgroundColor: '#f00'
}).bind('click',function(event){
    $(this).btn('destroy');
});

 
三、option方法でプラグインパラメータ値を設定して取得する
 
jQueryUIのプラグイン仕様に従って、プラグインパラメータ値を取得して設定することは、optionメソッドを呼び出すことによって実現されます.optionメソッドはパラメータ付きメソッドであり、optionメソッドを呼び出すコードフォーマットは以下の通りです.
 
1、パラメータ値の取得
 

$('.btn').btn('option', 'backgroundColor');

 
2、パラメータ値の設定
 

$('.btn').btn('option', 'backgroundColor', '#086');

  
このパラメータ付きメソッドを実現するには、プラグイン定義コードを再変更する必要があります.
修正されたコードは次のとおりです.
 

//        btn
$.chuanlu = {
    btn : function(element, options){
        this._create(element, options);
    }
}
//        btn   
$.chuanlu.btn.prototype = {
    //     
    _create : function(element, options){
        this.element = element;
        this.options = options;
        this._setOptions(options);
    },
    //       
    _setOptions : function(options){
        var key;
        for (key in options) {
            this._setOption(key, options[key]);
        }
        return this;
    },
    //       
    _setOption : function(key, value){
        switch(key){
        case 'backgroundColor':
            this.element.css('backgroundColor', value);
            break;
        case 'text':
            this.elment.html(value);
            break;
        default:
            break;
        }
    },
    //     
    destroy : function(){
        alert('     ');
    },
    option : function(key, value){
        var options = this.options;
        if ( value === undefined ) {
            return this.options[key] === undefined ? null : this.options[key];
        }
        options[ key ] = value;
        this._setOptions(options);
        return this;
    }
}
//           btn
$.fn.btn = function(options){
    var fullName = 'btn.chuanlu';
    var isMethodCall = typeof options === "string",
    args = Array.prototype.slice.call(arguments, 1),
    returnValue = this;

    options = !isMethodCall && args.length ? $.extend.apply( null, [ true, options ].concat(args) ) : options;

    //         
    if (isMethodCall && options.charAt( 0 ) === "_") {
        return returnValue;
    }
    
    if (isMethodCall) {
        this.each(function() {
            var instance = $.data(this, fullName),
                methodValue = instance && $.isFunction(instance[options]) ?
                    instance[ options ].apply( instance, args ) :
                    instance;
            if (methodValue !== instance && methodValue !== undefined) {
                returnValue = methodValue;
                return false;
            }
        });
    } else {
        this.each(function() {
            var instance = $.data( this, fullName);
            if ( instance ) {
                instance.option( options || {} )._init();
            } else {
                options = $.extend({}, $.fn.btn.defaults, options);
                $.data(this, fullName, new $.chuanlu.btn($(this), options));
            }
        });
    }
    return returnValue;
    
};

//          
$.fn.btn.defaults = {
    backgroundColor: 'transparent'
}

 
プラグイン呼び出し:
 

$('.btn').btn({
    backgroundColor: '#f00'
}).bind('click',function(event){
    //$(this).btn('destroy');
    //        #086
    $(this).btn('option', 'backgroundColor', '#086');
    //       
    alert($(this).btn('option', 'backgroundColor'));
});