jQueryのウィジェットをラップするためのコメントをお願いします

Question

jQueryUiウィジェット（dialog、datepickerなど）を使用するときは、何らかの種類のラッパークラスでウィジェットをラップする方が良いかどうかは疑問です。これを行う方法が1つありますが、これが良い方法であるかどうかはわかりません。

は 'ダイアログ' をラップしている$のための

CODE

小さなプラグインをコメントしてください。

//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.dialog()）によって$.fn名前空間に追加された機能は、各ウィジェットのメソッドの周りすでにラッパーです。

ウィジェットのメソッドに直接アクセスできるように、既存のdialog()ラッパーの周りにある種の「リバースラッパー」を実装したいようです。

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

：

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

が次にあなたのようなことを行うことができます：あなたが唯一のウィジェットのオプションとターゲット要素を指定して、直接、ウィジェットのコンストラクタを呼び出すために持っているように、オーバーヘッドの別の層を追加することは、必要ありませんウィジェットの名前をキーとして使用して、エレメントのdataからフェッチすることができます：

（「 $.fn.dialog()を介して）」というダイアログを「通常の」方法で作成した場合、そのウィジェットインスタンスの参照をさらに取得したい場合は、

$("#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で削除されます。