Question

我有这段代码：

var myWidget = $('#myWidget');

并在其他地方打电话：

myWidget.hide();
myWidget.slideToggle();

这些工作当然是因为jQuery添加了这些方法。

现在，假设我正在进行一些重构，使myWidget成为一个具有自己的自定义方法和状态的正确对象：

var myWidget = (function() {
    // private stuff
    var actualJQueryObject = $('#myWidget');
    return {
        publicMethod: function() {...},
        // MAGIC!
    }
})()

但是我想让所有希望jQuery对象的调用（即我的代码周围的所有调用）仍然可以工作，即使myWidget不再是jQuery对象，因为myWidget知道如何委托这些调用realJQueryObject。

这可能吗？

Answer 1

您还可以使用另一个具有自定义方法的对象extend您的jQuery对象：

var myWidget = function() {
    // private stuff
    var actualJQueryObject = $('#myWidget');

    var extensionMethods = {
        publicMethod: function() { alert('public method!'); }  
    }
    return $.extend(actualJQueryObject, extensionMethods);
}();

请注意扩展方法的名称，以免与任何其他jQuery定义的函数冲突。

您可以尝试上述代码段here。

Answer 2

一个选项是使用原始jquery对象作为原型。

function wrap(jqObject) {
    function MyNewType() {
        this.changeFontSize = function(a) { 
            this.css({fontSize : this.size});
        };
    }
    MyNewType.prototype = jqObject;
    return new MyNewType;
}
var obj = wrap($('#someitem'));
obj.size = 50;        // obj.size
obj.changeFontSize(); // obj.changeFontSize
obj.hide();           // $.hide
obj.fadeIn("slow");   // $.fadeIn

Answer 3

我写了一个可以帮助你的插件。它基本上是一个用于编写插件的插件。这个开发组的帖子解释了它，并有一些代码示例：

http://groups.google.com/group/jquery-dev/browse_thread/thread/664cb89b43ccb92c/72cf730045d4333a?hl=en&q=structure+plugin+authoring#72cf730045d4333a

来源就在这里：

http://code.google.com/p/jquery-plugin-dev/source/browse/trunk/jquery.plugin.js

修改

我创建了一个与该插件具有类似功能的函数：

jQuerify = function(fn) { function plugin() { var instantiate = false; // check to see if it has any prototyped methods (we only need one iteration to do this) for (var i in construct.prototype) { instantiate = true; break; } // if there are prototyped methods, return an instance (since an instance's return value won't vary) // otherwise just call it using apply so the return value can vary return instantiate ? new construct(this, arguments) : construct(this, arguments); } function construct(parent, args) { // 'this' will not mimic jQuery unless given the length property this.length = 0; this.selector = parent.selector; this.context = parent.context; // mimic 'this' in jQuery, but for the plugin namespace Array.prototype.push.apply(this, $.makeArray(parent)); // return the constructors return value // should be 'this' if you want to chain the new namespace return fn.apply(this, arguments); } // copy all static properties and methods for (var i in fn) { plugin[i] = fn[i]; } // allow .fn and copy all instance properties and methods; the last part is for IE plugin.fn = construct.prototype = plugin.prototype = fn.prototype; return plugin; }

这允许您将自定义对象作为插件添加到jQuery，同时使用“this”来引用所选对象，并且还允许您对命名空间具有无限深度：

function test1() { return this; } test1.prototype.getHtml1 = function() { return $(this).html(); } function test2() { return this; } test2.prototype.getHtml2 = function() { return $(this).html(); } function test3() { return this; } test3.prototype.getHtml3 = function() { return $(this).html(); } jQuery.fn.test1 = jQuerify(test1); jQuery.fn.test1.fn.test2 = jQuerify(test2); jQuery.fn.test1.fn.test2.fn.test3 = jQuerify(test3); jQuery(function($) { alert($('body').test1().getHtml1()); alert($('body').test1().test2().getHtml2()); alert($('body').test1().test2().test3().getHtml3()); });

Javascript / jQuery中的方法委派？

3 个答案: