jQuery中的自定义插件之----工厂方法(Factory Widget)

Posted 2020-10-27 KeepLearningEverday

jQuery赋予了我们很强大的插件自定义的功能,可以作为我们的武器库,应用到所有的网页中,使用的语法比较有意思,下面是对它的一些探讨.

遵循以下的原则:

1 IIFE 创建一个jQuery的scope

(function($){}(jQuery))

2 namespace要唯一.

$.widget(‘custom.colorize‘)

　　custom为命名空间,colorize为插件名

3 default options

options:{red:255,green:0,blue:0,change:null,random:null}

　　三个属性(red,green,blue),两个方法(change,random)初始化

4 可扩展option,使用工厂方法会自动进行检测输入参数和扩展.比如

$(‘#div1‘).colorize({
    green:128,
    random:function(event, ui) {
        return ui.green > 128;
    }
})

　　就会将option扩展为:

option = {
    red:255,
    green:128,
    blue:0,
    change:null,
    random:function(event, ui) {
        return ui.green > 128;
    }
}

　　本质使用的应该是 $.extend({},default,options) 方法

 

5 添加私有方法:

(function($){
    $.widget("custom.colorize",{
        options:{
            red:255,
            green:0,
            blue:0,
            change:null,
            random:null
        },
        // constructor
        _create:function() {
            this.element
            .addClass("custom-colorize");
            this.changer = $(‘<button>‘,{text:‘change‘,‘class‘:‘custom-colorize-changer‘})
            .appendTo(this.element)
            .button();

            // 绑定点击事件在该button上
            this._on(this.charger, {
                click:"random"
            });
            this._refresh();
        },

        // 更新,render
        _refresh: function() {
            this.element.css(‘background-color‘,`rgb(${this.options.red},${this.options.green},${this.options.blue})`);

            // 触发回调函数change
            this._trigger(‘change‘);
        },
        //销毁
        _destroy: function() {
            this.changer.remove();
            this.element
            .removeClass(‘custom-colorize‘)
            .enableSelection()
            .css(‘background-color‘, ‘transparent‘);
        },
        // 设置,包含所有参数合并
        _setOptions:function(){
            this._superApply(arguments);
            this._refresh();
        },
        // 设置,部分参数
        _setOption:function(key,value){
            if(/ref|green|blue/.test(key) && (value < 0 || value > 255)) {
                return;
            }
            this._super(key,value);
        }
    });
}(jQuery))

6 公有方法,添加一个随机的方法

(function($){
    $.widget("custom.colorize",{
        //公有方法,可被colorize(‘random‘)访问
        random:function(){
            let color = {
                red: Math.floor(Math.random() * 256),
                green: Math.floor(Math.random() * 256),
                blue: Math.floor(Math.random() * 256)
            };
            if (this._trigger("random",event,colors) !== false) {
                this.option(colors);
            }
        }
    });  

　　然后来看一下怎么使用这个插件:

// 初始化默认参数
$(‘#my-widget1‘).colorize();

// 初始化并带有参数
$(‘#my-widget2‘).colorize({
    green: 128,
    random: function(event, ui) {
        return ui.green > 128;
    }
});

// 点击enable或disable
$(‘#disable‘).on(‘click‘,function(){
    if ($(‘:custom-colorize‘).colorize(‘option‘,‘disabled‘)) {
        $(‘:custom-colorize‘).colorize(‘enable‘);
    } else {
        $(‘:custom-colorize‘).colorize(‘disable‘);
    }
});

// 点击设置运行后参数
$(‘#grenn‘).on(‘click‘,function() {
    $(‘:custom-colorize‘).colorize(‘option‘, {
        red: 64,
        green: 250,
        blue: 8
    });
});

值得注意的是:

 

1 内置的插件selector, 如果是使用的工厂方法创建的插件,可以使用$(‘:插件名称‘)来获取所有应用了该插件的所有实例(instance),

 

2 使用"enable"和"disable"作为参数来操作插件是否有效

 

3 random里的ui是jQuery UI对象,详情请参见 https://jqueryui.com/

 

代码来自jQuery官方文档:http://jqueryui.com/widget/

 

希望对你有所帮助!