javascript - 用自己的方法扩展 jQueryUI Widget

Question

我正在构建一个小部件，但来自 OOP 背景，通过函数调用访问方法似乎很奇怪。

// create the widget in target_id
myWidget = jQuery('#target_id').superWidget();

// this works and accesses do_something, but it's long and redundant.
// After all, myWidget is already a superWidget
myWidget.data('superWidget').do_something('hello');

// also works, but is awkward
myWidget.superWidget('do_something', 'hello');

// what I want to be able to do:
myWidget.do_something('hello');

我认为应该可以在调用 _create 时通过自身扩展小部件来做到这一点，但实际上我不确定如何让它工作。

这可能吗？如何？我应该避免这是一个真正糟糕的想法吗？为什么？

谢谢!

Answer 1

我们不提供此 API 的原因是它会产生冲突。如果小部件提供与现有 jQuery 方法同名的方法，会发生什么情况？如果您在同一元素上初始化多个小部件，会发生什么情况？

话虽如此，小部件是纯面向对象的，带有包装器以提供通用的 jQuery API。如果您只想使用 OO 语法，也可以。

var widget = $.ns.superWidget( {}, "#elem" );
widget.doSomething( "hello" );

$.ns.superWidget 函数是一个实际的构造函数。将其作为函数调用只会导致使用 new 进行另一次调用以强制构造函数行为。

您可能有兴趣阅读 jQuery UI 1.9 Upgrade Guide其中列出了直接构造小部件实例的各种方法。

注意:如果您使用的是 jQuery UI 1.8.x，元素参数将不接受选择器，您必须传递 DOM 元素。