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对象.

任何想法或意见将不胜感激.

-Matt

Answer 1

一旦你使用$.fn.foo.bar()- this指向$.fn.foo,这是你在JavaScript中this所期望的(作为调用函数的对象.)

我注意到jQuery UI(比如可排序)的插件中你调用的函数如下:

$(...).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);
}