Ich möchte Kommentare zu einem Approch zu Widgets in jQuery

Question

Wrapping Wenn ich jQueryUi Widgets (dialog, datepicker etc) Ich frage mich immer, ob es besser wäre, die Widgets in eine Art Wrapper-Klasse zu wickeln. Hier ist eine Möglichkeit, dies zu tun, aber ich bin mir nicht sicher, ob dies eine gute Praxis ist.

Bitte kommentieren

CODE

Kleine Plug-In für $, die 'Dialog' umschließt.

//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)) 

Dies könnte wie dieses

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

Answer 1

Nun, tatsächlich verwendet werden, fügten die Funktionen zum $.fn Namespace von jQuery UI ($.fn.dialog() in Ihrem Fall) sind bereits Wrapper um jeden Methoden des Widgets.

Es sieht so aus, als ob Sie eine Art "Reverse-Wrapper" um den vorhandenen Wrapper dialog() implementieren möchten, um direkt auf die Methoden des Widgets zugreifen zu können. eine weitere Schicht von Overhead-Zugabe ist nicht erforderlich, da Sie nur direkt das Widget-Konstruktor aufgerufen haben, die Widget-Optionen und das Zielelement festgelegt wird:

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

Dann können Sie Dinge wie:

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

Wenn Sie einen Dialog auf "normale" Weise (über $.fn.dialog()) erstellt haben und einen Verweis auf seine Widgetinstanz weiter unten erhalten möchten, können Sie ihn aus dem data des Elements abrufen, indem Sie den Widget-Namen als Schlüssel verwenden:

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

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

Sie können den obigen Code unter this fiddle testen.

Update: Von jQuery UI 1.9 ab, the data() key becomes the widget's fully qualified name, with dots replaced by dashes. Daher wird der Code oben:

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

den nicht qualifizierten Namen verwenden noch in 1.9 unterstützt wird, aber ist veraltet und Unterstützung wird in 1,10 fallen gelassen werden.