Javascript jQuery插件名称空间函数

我正在创建一个范围相当大的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”的引用这“最终是指父对象，而不是jQuery对象

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

---

-马特

嗯，我相信有很多方法可以剥这只猫的皮。jQuery UI库使用如下模式：

// initialize a dialog window from an element:
$('#selector').dialog({});

// call the show method of a dialog:
$('#selector').dialog('show');

---

只要您使用

$.fn.foo.bar（）

--

这个
指向
$.fn.foo
，这就是您在JavaScript中所期望的（
这个
是调用函数的对象）

我注意到jQueryUI（如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);
}

我知道这个问题已经得到了回答，但我已经创建了一个插件，它可以完全满足您的需求：

var _myPlugin = function() {
    // return the plugin namespace
    return this;
}

_myPlugin.prototype.alertHtml = function() {
    // use this the same way you would with jQuery
    alert($(this).html());
}

$.fn.plugin.add('myPlugin', _myPlugin);


我在下面提供了一个小示例，但请查看这篇jQuery开发组文章，了解更深入的示例：

它允许您使用所需的任意多个方法创建对象：

var _myPlugin = function() {
    // return the plugin namespace
    return this;
}

_myPlugin.prototype.alertHtml = function() {
    // use this the same way you would with jQuery
    alert($(this).html());
}

$.fn.plugin.add('myPlugin', _myPlugin);

现在你可以走了：

$(someElement).myPlugin().alertHtml();

当然，正如开发小组帖子中所解释的那样，这还有很多其他的可能性。
我非常喜欢我在Eric Martin上看到的模式。这在我不处理DOM元素的情况下非常有效——在本例中是一个利用localStorage的包装器

这样，我可以很容易地参考构造函数：

$.totalStorage('robo', 'cop');

…或公共方法：

$.totalStorage.getItem('robo'); //returns 'cop'

以下是内部结构：

;(function($){

/* Variables I'll need throghout */

var ls;
var supported = true;
if (typeof localStorage == 'undefined' || typeof JSON == 'undefined') {
    supported = false;
} else {
    ls = localStorage;
}

/* Make the methods public */

$.totalStorage = function(key, value, options){
    return $.totalStorage.impl.init(key, value);
}

$.totalStorage.setItem = function(key, value){
    return $.totalStorage.impl.setItem(key, value);
}

$.totalStorage.getItem = function(key){
    return $.totalStorage.impl.getItem(key);
}

/* Object to hold all methods: public and private */

$.totalStorage.impl = {

    init: function(key, value){
        if (typeof value != 'undefined') {
            return this.setItem(name, value);   
        } else {
            return this.getItem(name);
        }
    },

    setItem: function(key, value){
        if (!supported){
            $.cookie(key, value);
            return true;
        }
        ls.setItem(key, JSON.stringify(value));
        return true;
    },

    getItem: function(key){
        if (!supported){
            return this.parseResult($.cookie(key));
        }
        return this.parseResult(ls.getItem(key));
    },  

    parseResult: function(res){
        var ret;
        try {
            ret = JSON.parse(res);
            if (ret == 'true'){
                ret = true;
            }
            if (ret == 'false'){
                ret = false;
            }
            if (parseFloat(ret) == ret){
                ret = parseFloat(ret);
            }
        } catch(e){}
        return ret;
    }
}})(jQuery);

我以前从未看过jQueryUI库。但这是一个非常有趣和适用的解决方案。谢谢。就个人而言，我认为这种方式是一种“肮脏”的黑客行为，因为他们无法使用$（'#选择器'）.dialog（）.show（），但这是另一种方式。