jQuery插件开发的五种形态小结(3)

这里特别要提下缓存这个东西，插件用多了，觉的这个真的是好东西。
在传统面向对象的插件开发中，至少会声明个变量保存它，但是我到目前写的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);

来看看还有什么问题没有解决