jQuery插件命名空间函数 [英] jQuery Plugin Namespacing Functions

问题描述

我正在创建一个范围相当大的jQuery插件。事实上，该插件在技术上由几个插件组成，这些插件都可以一起工作。

I'm creating a jQuery plugin that that is rather large in scope. In fact, the plugin technically consists of a few plugins that all work together.

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

是否可以命名jQuery插件，使小插件可以是更大插件的功能

Is it possible to namespace jQuery plugins such that the minor plugins could be functions of the larger plugin

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

这样可以避免污染jQuery函数名称空间。
你可以调用插件，如

This would keep from polluting the jQuery function namespace. You could then call the plugins like

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

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

The issue I have run into when trying this out myself is that the functions declared as properties of the foo() plugin function don't have their references to 'this' set properly. 'this' ends up referring to the parent object and not the jQuery object.

任何想法或意见都将受到赞赏。

Any ideas or opinions would be appreciated.

-Matt

推荐答案

一旦你使用 $。fn.foo.bar（ ） - 此指向 $。fn.foo ，这就是你想要的期待在JavaScript中（这个是调用该函数的对象。）

As soon as you use $.fn.foo.bar() -- this points to $.fn.foo, which is what you would expect in JavaScript (this being the object that the function is called on.)

我在插件中注意到了jQuery UI（如可排序），您可以在其中调用以下函数：

I have noticed in plugins from jQuery UI (like sortable) where you call functions like:

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

如果您正在做这样的事情 - 您可以扩展jQuery本身：

If you were doing something like this - you could extend jQuery itself:

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

这篇关于jQuery插件命名空间函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！