Question

我正在编写一些自定义jQuery插件，我有以下代码这扩展了jQuery：

(function ($) {
    $.fn.extend({    

        pluginOne: function () { return this.each(pluginOneFN) },
        pluginTwo: function () { return this.each(pluginTwoFN) },
        pluginThree: function (p1, p2) {
            return this.each(function() { 
                pluginThreeFN.call(this, p1, p2); 
            });
        }    

    });
})(jQuery);

现在pluginOne和pluginTwo还可以，但pluginThree看起来很乱。

pluginThree需要一些参数，我在想是否有更短或更优雅的方式为插件3编写这段扩展代码？

Answer 1

我唯一能想到的就是改进了一点可重用性。您可以引入一个函数来初始化插件，支持参数。

(function ($) {

    $.fn.initializePlugin = function(pluginFn, args) {
      return this.each(function() { 
          pluginFn.apply(this, args); 
      });
    };

    $.fn.extend({    
        pluginOne: function () { return this.each(pluginOneFN) },
        pluginTwo: function () { return this.each(pluginTwoFN) },
        pluginThree: function () { return this.initializePlugin(pluginThreeFN, arguments) }
    });
})(jQuery);

请注意，我还没有测试过这段代码，只是为了证明这个想法。

另外，如果我正在创建插件，我会遵循仅使用一个参数的现有约定，这是初始化时的某种options对象，或者是调用方法的string。你的方法不能支持这个，在我的回答中也不能。您可以查看bootstrap的源代码，了解此类插件系统的良好框架实现。

jQuery扩展，我可以使这段代码更优雅吗？

1 个答案: