inheritancejQuery小部件并从外部调用一些基本小部件的方法

我有两个jQuery小部件，Widget A是基本小部件，Widget BinheritanceWidget A.

小工具A：

$(function () { $.widget("custom.widgetA", { _create: function () { this.element .addClass('ui-widget-a') .append( $(document.createElement('div')).text('Widget A') ); }, someMethod: function() { return 'widget A'; } }); }(jQuery)); 

小部件B：

 $(function () { $.widget("custom.widgetB", $.custom.widgetA, { _create: function () { this.element .addClass('ui-widget-b') .append( $(document.createElement('div')).text('Widget B') ); this._super(); }, someOtherMethod: function() { return 'widget B'; } }); }(jQuery)); 

比我将Widget B应用于某些HTML元素

 $('#widgetB').widgetB(); 

现在我想从小部件A中调用方法someMethod …为了做到这一点，我使用这个代码

 $('#widgetB').widgetA('someMethod') 

但得到错误信息

初始化之前无法在widgetA上调用方法; 试图调用方法’someMethod’

我知道如果我这样称呼它会起作用

 $('#widgetB').widgetB('someMethod') 

但我需要使用基本小部件调用它…可以吗？

这是我的例子的小提琴

UPDATE

之所以在这里发生这种情况

Answer 1

实际上没有什么能阻止你在同一个元素上创建两个小部件：

 $.widget("custom.widgetB", $.custom.widgetA, { _create: function () { this._super(); $(this.element).widgetA(this.options); } }); 

现在你可以同时打电话：

 $('#widgetB').widgetA('someMethod'); $('#widgetB').widgetB('someMethod'); 

在你的情况下，create函数实际上创建了新的元素（它有一个jQuery简写$("

")

），所以你必须只为widgetA ie包含一个上面的init ializer。 只有一个this._super()或$(this.element).widgetA()

小提琴更新

---

如果你在widgetA实例上存储非原始对象，这可能会导致一些额外的复杂性，但是对于这个模型，你可能不应该首先这样做