Javascript/jQuery中的方法委托？

我有以下代码：

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知道如何将这些调用委托给实际的jQueryObject

---

这可能吗？

一个选项是使用原始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

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

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

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

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

---

您可以尝试上面的代码片段。

我已经编写了一个插件，可能会对您有所帮助。它基本上是一个用于编写插件的插件。本开发组帖子对此进行了解释，并提供了一些代码示例：

资料来源如下：

编辑：

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

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());

});

---

很漂亮，谢谢你。我知道一定有一些非常基本的方法可以实现我对继承的要求。请检查我下面列出的函数，以防需要多个名称空间。不过，在这一点上，人们可能会想开始研究jQuery.sub（），它出现在1.5中。答案很好；我会用的。有没有一种方法可以使创建看起来像普通的对象构造，即“var obj=newwrapper（$（'#someitem'））；”而不是“var obj=wrapp（$（'#someitem'））；”？另外，演示如何添加一个包装器方法来包装同名的底层方法也很有帮助，例如obj.fadeOut（“slow”）调用obj.fadeOut，它将某些内容打印到控制台，然后调用$.fadeOut。