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