jQuery插件開發的五種形態小結

2019-11-20 13:01:44

字體：大中小

來源：轉載

供稿：網友

關于jQuery插件的開發自己也做了少許研究，自己也寫過多個插件，在自己的團隊了也分享過一次關于插件的課。開始的時候整覺的很復雜的代碼，現在再次看的時候就清晰了許多。這里我把我自己總結出來的東西分享出來，幫助那些和我一樣曾經遇到過同樣問題的人。

我要做什么
我想要得到的javascript 插件應該會有以下幾個特征

代碼相對獨立
鏈式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被緩存
可擴展
無沖突處理
事件代理，動態初始化

* 以下的代碼均假設存在 jQuery

插件的第一形態

面對這種情況，通常我們會通過定義function的方式來實現。

復制代碼代碼如下:

function pluginName($selector){
    $.each($selector, function () {
        $(this).css("background-color", "#ccc");
        // to do something...
    });
}
// pluginName(document.getElementsByClassName("demo"));

因為我談的是jQuery插件開發，那么我現在把這段代碼擴展到jQuery上，代碼如下：

復制代碼代碼如下:

// IIFE(立即調用函數表達式); [參考 http://suqing.iteye.com/blog/1981591/]
;(function ($) {
    // 擴展這個方法到jQuery.
    // $.extend() 是吧方法擴展到 $ 對象上，和 $.fn.extend 不同。擴展到 $.fn.xxx 上后，
    // 調用的時候就可以是 $(selector).xxx()
    $.fn.extend({
        // 插件名字
        pluginName: function () {
            // 遍歷匹配元素的集合
            // 注意這里有個"return"，作用是把處理后的對象返回，實現鏈式操作
            return this.each(function () {
                // 在這里編寫相應的代碼進行處理
            });
        }
    });
// 傳遞jQuery到內層作用域去, 如果window,document用的多的話, 也可以在這里傳進去.
// })(jQuery, window, document, undefined);
})(jQuery, undefined);
// 調用方式 $(".selector").pluginName().otherMethod();

但是還差的遠，目前只解決了兩個問題

代碼相對獨立
鏈式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被緩存
可擴展
無沖突處理
事件代理，動態初始化

插件的第二形態

現在來給插件添加參數支持。代碼如下

復制代碼代碼如下:

;(function($){
    $.fn.pluginName = function(options) {
        // 合并參數，通過“extend”合并默認參數和自定義參數
        var args = $.extend({}, $.fn.pluginName.defaults, options);
        return this.each(function() {
            console.log(args.text);
            // to do something...
        });
    };
    // 默認參數
    $.fn.pluginName.defaults = {
        text : "hello"
    };
})(jQuery);
// $(".selector").pluginName({
//     text : "hello world!"
// });

添加參數支持還比較容易些，又解決一問題

代碼相對獨立
鏈式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被緩存
可擴展
無沖突處理
事件代理，動態初始化

插件的第三形態

現在來添加方法的支持，我前面所提到的生命周期可控制，意思差不多，例如添加reInit,destory等方法來控制插件。

復制代碼代碼如下:

;(function($){
    $.fn.pluginName = function (method) {
        // 如果第一個參數是字符串, 就查找是否存在該方法, 找到就調用; 如果是object對象, 就調用init方法;.
        if (methods[method]) {
            // 如果存在該方法就調用該方法
            // apply 是吧 obj.method(arg1, arg2, arg3) 轉換成 method(obj, [arg1, arg2, arg3]) 的過程.
            // Array.prototype.slice.call(arguments, 1) 是把方法的參數轉換成數組.
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            // 如果傳進來的參數是"{...}", 就認為是初始化操作.
            return methods.init.apply(this, arguments);
        } else {
            $.error('Method ' + method + ' does not exist on jQuery.pluginName');
        }
    };
    // 不把方法擴展在 $.fn.pluginName 上. 在閉包內建個"methods"來保存方法, 類似共有方法.
    var methods = {
        /**
         * 初始化方法
         * @param _options
         * @return {*}
         */
        init : function (_options) {
            return this.each(function () {
                var $this = $(this);
                var args = $.extend({}, $.fn.pluginName.defaults, _options);
                // ...
            })
        },
        publicMethod : function(){
            private_methods.demoMethod();
        }
    };
    // 私有方法
    function private_methods = {
        demoMethod : function(){}
    }
    // 默認參數
    $.fn.pluginName.defaults = {
    };
})(jQuery);
// 調用方式
// $("div").pluginName({...});  // 初始化
// $("div").pluginName("publicMethod");  // 調用方法

又解決一問題

代碼相對獨立
鏈式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被緩存
可擴展
無沖突處理
事件代理，動態初始化

插件的第四形態

第三形態的插件修改就已經可以應對大多數插件的需求了。精益求精嘛，繼續升級。
第四形態的插件是照幫司徒正美的《javascript框架設計》的代碼。加了點面向對象的知識。

復制代碼代碼如下:

(function ($) {
    var Plugin = function (element, options) {
        this.element = element;
        this.options = options;
    };
    Plugin.prototype = {
        create: function () {
            console.log(this.element);
            console.log(this.options);
        }
    };
    $.fn.pluginName = function (options) {
        // 合并參數
        return this.each(function () {
            // 在這里編寫相應的代碼進行處理
            var ui = $._data(this, "pluginName");
            // 如果該元素沒有初始化過(可能是新添加的元素), 就初始化它.
            if (!ui) {
                var opts = $.extend(true, {}, $.fn.pluginName.defaults, typeof options === "object" ? options : {});
                ui = new Plugin(this, opts);
                // 緩存插件
                $._data(this, "pluginName", ui);
            }
            // 調用方法
            if (typeof options === "string" && typeof ui[options] == "function") {
                // 執行插件的方法
                ui[options].apply(ui, args);
            }
        });
    };
    $.fn.pluginName.defaults = {};
})(jQuery);
// 調用的方式和之前一樣。

這里特別要提下緩存這個東西，插件用多了，覺的這個真的是好東西。
在傳統面向對象的插件開發中，至少會聲明個變量保存它，但是我到目前寫的jQuery插件中都沒有，用起來很麻煩。自從把初始化后的插件緩存起來后，方便了許多。通過代碼$("#target").data("pluginName")就可以取到對象了。來看看還有什么問題沒有解決

代碼相對獨立
鏈式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被緩存
可擴展
無沖突處理
事件代理，動態初始化

插件的第五形態

看了上面的代碼是否腦子有點暈了，如果是，休息片刻，稍后回來，下面的代碼更精彩。最后一個方案算是比較全面的了。方案來自Bootstrap，下面代碼以 Bootstrap 的 button 插件為例.

復制代碼代碼如下:

!function ($) {
    // ecma262v5 的新東西, 強制使用嚴謹的代碼編寫.
    "use strict";
    // BUTTON PUBLIC CLASS DEFINITION
    // ==============================
    var Button = function (element, options) {
        this.$element = $(element);
        this.options = $.extend({}, Button.DEFAULTS, options);
    };
    Button.DEFAULTS = {
        loadingText: 'loading...'
    };
    Button.prototype.setState = function (state) {
        // ...
    };
    Button.prototype.toggle = function () {
        // ...
    };
    // BUTTON PLUGIN DEFINITION
    // ========================
    var old = $.fn.button; // 這里的 $.fn.button 有可能是之前已經有定義過的插件，在這里做無沖突處理使用。
    $.fn.button = function (option) {
        return this.each(function () {
            var $this = $(this);
            // 判斷是否初始化過的依據
            var data = $this.data('bs.button');
            var options = typeof option == 'object' && option;
            // 如果沒有初始化過, 就初始化它
            if (!data) $this.data('bs.button', (data = new Button(this, options)));
            if (option == 'toggle') data.toggle();
            else if (option) data.setState(option)
        })
    };
    // ① 暴露類名, 可以通過這個為插件做自定義擴展
    $.fn.button.Constructor = Button;
    // 擴展的方式
    // 設置 : $.fn.button.Constructor.newMethod = function(){}
    // 使用 : $btn.button("newMethod");
    // ② 無沖突處理
    $.fn.button.noConflict = function () {
        $.fn.button = old;
        return this
    };
    // ③ 事件代理, 智能初始化
    $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
        var $btn = $(e.target);
        // 查找要初始化的對象
        if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn');
        // 直接調用方法, 如果沒有初始化, 內部會先進行初始化
        $btn.button('toggle');
        e.preventDefault();
    });
}(jQuery);

來看看還有什么問題沒有解決

代碼相對獨立
鏈式操作
插件可配置
有可操作的方法，插件的生命周期可控制
配置可被緩存
可擴展
無沖突處理
事件代理，動態初始化

補充

現在的插件都要求靈活性要高，比如希望插件可以同時適配jQuery和Zepto，又或者需要支持AMD或者CMD規范。

支持jQuery和Zepto

復制代碼代碼如下:

if (window.jQuery || window.Zepto) {
  (function ($) {
      // plugin code...
  })(window.jQuery || window.Zepto);
}

中間件支持，node

復制代碼代碼如下:

if (typeof(module) !== 'undefined')
{
  module.exports = pluginName;
}
requirejs(AMD) support
if (typeof define === 'function' && define.amd) {
  define([], function () {
      'use strict';
      return pluginName;
  });
}
seajs(CMD) support
if (typeof define === 'function') {
  define([], function () {
      'use strict';
      return pluginName;
  });
}