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

時間 2019-11-07

標籤 jquery 自定義插件工廠方法 factory widget 欄目 JQuery 简体版

原文原文鏈接

jQuery賦予了咱們很強大的插件自定義的功能,能夠做爲咱們的武器庫,應用到全部的網頁中,使用的語法比較有意思,下面是對它的一些探討.css

遵循如下的原則:jquery

1 IIFE 建立一個jQuery的scopeapp

(function($){}(jQuery))

2 namespace要惟一.dom

$.widget('custom.colorize')

　　custom爲命名空間,colorize爲插件名函數

3 default optionsui

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

　　三個屬性(red,green,blue),兩個方法(change,random)初始化this

4 可擴展option,使用工廠方法會自動進行檢測輸入參數和擴展.好比spa

$('#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) 方法code

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