javascript - jQuery 插件命名空间函数

Question

我正在创建一个范围相当大的 jQuery 插件。事实上，该插件在技术上由几个协同工作的插件组成。

(function($){
    $.fn.foo = function(){
        //plugin part A
    }
    $.fn.bar = function(){
        //plugin part B
    }
    $.fn.baz = function(){
        //plugin part C
    }
}(jQuery))

是否可以对 jQuery 插件进行命名空间，以便较小的插件可以成为较大插件的函数

$.fn.foo.bar = function(){}
$.fn.foo.baz = funciton(){}

这将避免污染 jQuery 函数命名空间。 然后你可以像这样调用插件

$('#example').foo()
$('#other_example').foo.bar()

我自己尝试这个时遇到的问题是声明为 foo() 插件函数属性的函数没有正确设置对“this”的引用。 “this”最终引用父对象而不是 jQuery 对象。

如有任何想法或意见，我们将不胜感激。

-马特

Answer 1

只要你使用$.fn.foo.bar() -- this 指向$.fn.foo，它是您在 JavaScript 中所期望的(this 是调用该函数的对象。)

我注意到在 jQuery UI 的插件中(如 sortable)，您可以在其中调用如下函数:

$(...).sortable("serialize");
$(...).sortable({options});

如果你正在做这样的事情——你可以扩展 jQuery 本身:

$.foo_plugin = {
  bar: function() {},
  baz: function() {}
}

$.fn.foo = function(opts) {
  if (opts == 'bar') return $.foo_plugin.bar.call(this);
  if (opts == 'baz') return $.foo_plugin.baz.call(this);
}