jquery - 我想要关于在 jQuery 中包装小部件的方法的评论

Question

当使用 jQueryUi 小部件(对话框、日期选择器等)时，我总是想知道是否有更好的方法将小部件包装在某种包装类中。这是一种方法，但我不确定这是否是一个好的做法。

请评论

代码

包装“对话框”的 $ 小插件。

//Widget Wrapper plugin POC.
//Should be extended to support all Methods on all Widgets in jQueryUI   
(function ($) {
    $.fn.ww = function (uiWidgetName, options) {
    if (this.length == 1) {
        return new wrappers[uiWidgetName](this[0], options);
    }
}


var wrappers= {};

wrappers.dialog = function (element, options) {
    var theWidget = $(element);
    theWidget.dialog(options);

    this.open = function () {
        theWidget.dialog('open');
    }
    this.close = function () {
        theWidget.dialog('close');
    }
  }

} (jQuery))

可以这样使用

var a = $("#WrapperTest").ww('dialog',{ autoOpen: false });            
a.open();

Answer 1

事实上，通过 jQuery UI 添加到 $.fn 命名空间的函数(在您的例子中为 $.fn.dialog())已经了 包装每个小部件的方法。

看起来您想在现有的 dialog() 包装器周围实现某种“反向包装器”，以便能够直接访问小部件的方法。不需要添加另一层开销，因为您只需直接调用小部件的构造函数，指定小部件选项和目标元素:

var dialogWidget = new $.ui.dialog({
    autoOpen: false
}, $("#WrapperTest")[0]);

然后你可以做这样的事情:

dialogWidget.open();
dialogWidget.close();
dialogWidget.option("autoOpen", !dialogWidget.option("autoOpen"));
// and so on.

如果您以“通常”的方式创建了一个对话框(通过$.fn.dialog())，并且您想要进一步获取对其小部件实例的引用，您可以从元素的 data 中获取它使用小部件的名称作为键:

$("#WrapperTest").dialog({
    autoOpen: false
});

var dialogWidget = $("#WrapperTest").data("dialog");
dialogWidget.open();

您可以在 this fiddle 中测试上面的代码.

更新:从 jQuery UI 1.9 开始，the data() key becomes the widget's fully qualified name, with dots replaced by dashes 。因此，上面的代码就变成了:

var dialogWidget = $("#WrapperTest").data("ui-dialog");
dialogWidget.open();

1.9 中仍然支持使用非限定名称，但已弃用，并且在 1.10 中将不再支持。