jQuery小部件桥接在一个非基于函数的对象上

Question

作为从jQuery 1.6.4升级到1.9.x的一部分，我试图了解如何使用jQuery小部件桥来允许访问作为独立对象创建的小部件的函数，而不是作为jQuery的扩展。

所有的例子（像这个例子）都使用原型函数作为对象的源定义，这似乎并不能直接从基于{}的定义中定义对象。

例如，我定义了这样一个小部件：

var ControlPanel = {
    instance: null,
    options: {
        //Some options here
    },
    simpleFunction: function(){
        alert("I am a function");
    },
    _init: function() {
        //Some init stuff here
    }
}
$.widget("basereality.controlPanel", ControlPanel); // create the widget
//This doesn't appear to work...
$.widget.bridge('controlPanel', $.basereality.controlPanel); //'Bridge' the widget

然后通过以下操作创建一个实例：

var controlPanelParams = {
  // some options go here
};
var newControlPanel = $('#controlPanel').controlPanel(controlPanelParams);

我现在希望能够在创建的对象上调用方法"simpleFunction"，我已经尝试过这样做：

newControlPanel.simpleFunction();
//and 
$(newControlPanel).simpleFunction();

两者都给出了"Object没有名为simpleFunction的方法"错误。

那么，我做错了什么？你打算如何在非基于函数的对象上使用$.widget.bridge？

Answer 1

我想我已经想通了。取而代之的是：

$(newControlPanel).addControl(smartyControlPanel);

通过如下参数调用函数来访问：

newControlPanel.controlPanel("addControl", smartyControlPanel);

我还将我的代码转换为基于第一个原型的函数：

var ControlPanel = function(options, element){
    this.options = options;
    this.element = element;
    this._init();
};
ControlPanel.prototype = {
    //Everything else in here
}

尽管必须将其作为参数进行调用比直接将其作为函数进行调用要难理解得多。