これは何ですか
ウィジェットファクトリはjQueryグローバルオブジェクトメソッドです- jQuery.widget-2つまたは3つの引数を受け入れます。
jQuery.widget( 'namespace.widgetname', namespace.superwidget, // - // {...} // , // );
ウィジェットの名前空間を含む文字列型の最初の引数とその名前は、ドットで区切られています。 名前空間は必須であり、ウィジェットプロトタイプが格納されるjQueryグローバルオブジェクト内の場所を参照します。 名前空間が指定されていない場合は、ファクトリが名前空間を作成します。 （翻訳者注-しかし、名前空間のないプラグインは、少なくとも私は成功しませんでした。とにかく、名前空間は便利です。）プラグインの名前は、プラグインとプロトタイプの名前として保存されます。 例：
jQuery.widget("demo.multi", {...})
jQuery.demo.multi
および
jQuery.demo.multi.prototype
を作成します。
2番目の（オプションの）引数、それを継承するためのプロトタイプ。 たとえば、jQuery UIには、「マウス」プラグインがあり、[マウスとの]対話用のすべてのプラグインがベースになっています。 これを実現するために、
draggable
、
droppable
などがマウスプラグインから継承されます。
jQuery.widget( "ui.draggable", $.ui.mouse, {...} );
この引数を指定しない場合、ウィジェットは「メインウィジェット」のjQuery.Widgetから直接継承されます（小さなwの
jQuery.Widget
と大きなWの
jQuery.Widget
違いに注意してください）。
最後の引数は、ウィジェットの各インスタンスのプロトタイプとして使用されるオブジェクトリテラルです。 ファクトリーはプロトタイプチェーンを作成し、ウィジェットのプロトタイプを、継承元のすべてのウィジェットと、基本的な
jQuery.Widget
まで
jQuery.Widget
ます。
jQueryプロトタイプ（jQuery.fn）でjQuery.widgetが呼び出されると、ウィジェットの名前に一致する新しいメソッドが作成されます。この場合、
jQuery.fn.multi
になります。
.fn
メソッドは、jQueryオブジェクトで受信したDOM要素とウィジェットインスタンス間のインターフェイスとして機能します。 ウィジェットインスタンスは、jQueryオブジェクトの各要素に対して作成されます。
便益
プラグイン開発のガイドラインで説明されている単純化されたアプローチでは、構造化コードとOOP指向のプラグインに関して、特定の実装に関する多くの疑問が残ります。 また、一般的なタスクのソリューションは提供していません。 ウィジェットファクトリは、プラグインインスタンスと通信し、いくつかの反復タスクを解決するためのjQuery UI APIを提供します。
- 名前空間とプロトタイプの作成
さらに、クエリとフィルタリングの場合、名前空間と名前に基づいて、たとえば$(":demo-multi")
ような擬似セレクターが生成されます。 - プロトタイプと
jQuery.fn
の関係
jQuery.widget.bridge
を介して実装されjQuery.widget.bridge
- ユーザー設定をデフォルト設定とマージする
デフォルト設定は変更できます（翻訳者の注意-明らかに、すべてのウィジェットインスタンスのデフォルト設定は、特定のページの設定で、ウィジェットのプロトタイプのデフォルト設定を変更できます）。 - プラグインインスタンスは、
$("#something").data("pluginname")
介して利用できます$("#something").data("pluginname")
DOM要素を含むjQueryオブジェクトへの参照（翻訳者のメモ-プラグインインスタンスが現在動作している特定のDOM要素へのリンクを意味します）は、this.element
インスタンスのプロパティとして利用できるため、プラグインと要素とのやり取りが非常に簡単になります。 - ウィジェットメソッドは、jQueryプロトタイプメソッドの引数-
$("#something").multi("refresh")
-またはインスタンスから直接-$("#something").data("multi").refresh()
介して使用できます。 - 同じアイテムで複数のインスタンスを防止します
ユーザーがサブスクライブできるコールバックメカニズム：this._trigger("clear")
- 購読する：
$( "#something" ).multi({ clear: function( event ) {} });
- または
.bind
を.bind
場合：
$( "#something" ).bind( "multiclear", function( event ) {} );
（翻訳者のメモ-プラグインとイベントの名前からはみ出したイベントの名前に注意してください）
- 購読する：
- 初期化後のプラグインオプションの変更を容易にするメカニズム
- インスタンスを有効化/無効化または破棄し、元の状態に戻すだけです。 （翻訳者のメモ-プライベートメソッド
_destroy
などをさらに参照してください。）
独自のプロトタイプを作成する
インフラ
プロトタイプとして渡されたオブジェクトリテラルは好きなように配置できますが、
options
（翻訳者のメモ-デフォルトオプション）、コールバック
_create
、
_setOption
、
destroy
含める必要が
options
。
例
(function( $ ) { $.widget( "demo.multi", { // options: { clear: null }, // _create: function() { }, // _setOption _setOption: function( key, value ) { switch( key ) { case "clear": // break; } // jQuery UI 1.8, _setOption $.Widget.prototype._setOption.apply( this, arguments ); // jQuery UI 1.9 , _super this._super( "_setOption", key, value ); }, // destroy DOM, destroy: function() { // jQuery UI 1.8 destroy $.Widget.prototype.destroy.call( this ); // jQuery UI 1.9 _destroy } }); }( jQuery ) );
メソッドでのカプセル化
ほとんどの場合、オブジェクトには、新しい要素の構築と挿入、イベントの処理など、さまざまな特定の操作を処理するためのメソッドが含まれます。
_create
メソッドですべてのすべてを処理するのではなく、操作ごとに独立したメソッドを使用することをお
_create
ます。 これは、変更の場合にコードを複製しません。
たとえば、
<select multiple>
拡張する架空のウィジェットでは、誰かが子
<option>
を調べて、対応する
<li>
および
<ul>
を作成したいと思うでしょう。 これは、
_create
メソッドを介して実装できます。
_create: function() { var self = this; this.list = $( "<ul>" ).insertAfter( this.element ); this.element.hide().find( "option" ).each(function( i, el ) { var $el = $( el ), text = $( el ).text(), item = $( "<li class='multi-option-item'>" + text + "</li>" ); item.appendTo( self.list ).click(function(){ console.log( $el.val() ); }); }); }
残念ながら、この
_create
に
_create
コードを残すと、元の
<option>
要素と作成するリストアイテム間のリンクを定義するのが難しくなり、元の
<select>
追加または削除された
<option>
要素の状態
<select>
既にある場合に問題が発生し
<select>
ウィジェットを初期化した後。 代わりに、要素の操作を担当し、
_create
メソッドから
_create
メソッドを作成します。 また、リストの要素のクリックの処理も個別に行い、新しいアイテムを作成した後、新しいハンドラーをアタッチしないように、イベントの委任を使用します。
例
_create: function() { this.list = $( "<ul>" ) .insertAfter( this.element ) .delegate( "li.multi-option-item", "click", $.proxy( this._itemClick, this ) ); this.element.hide(); this.refresh(); }, refresh: function() { // this.items = this.items || $(); // , this.element.find( "option:not(.demo-multi-option)" ).each( $.proxy(function( i, el ) { // , var $el = $( el ).addClass( "demo-multi-option" ), text = $el.text(), // item = $( "<li class='multi-option-item'>" + text + "</li>" ) .data( "option.multi", el ) .appendTo( this.list ); // this.items = this.items.add( item ); },this)); // , this.items = this.items.filter( $.proxy(function( i, item ) { var isInOriginal = $.contains( this.element[0], $.data( item, "option.multi" ) ); if ( !isInOriginal ) { $( item ).remove(); } return isInOriginal; }, this )); }, _itemClick: function( event ) { console.log( $( event.target ).val() ); }
プライベートv。 パブリックメソッド
お気づきかもしれませんが、最初にアンダースコア付きのメソッドとアンダースコアなしのメソッドを作成しました。 プレフィックスを持つメソッドは「プライベート」として扱われます。 ファクトリは、
$.fn
介してそれらを呼び出す試みをすべてブロックします
$( "#something" ).multi( "_create" )
上記のコードは例外をスローします。 しかし、これらはプロトタイプウィジェットに存在するため、合意によってのみプライベートと見なされます。
.data()
を介して
.data()
れると、これらのメソッドのいずれかを直接呼び出すことができます。
$( "#something" ).data( "multi" )._create()
正しい決断をする方法は？ ウィジェットのユーザーが特定のメソッドを必要とする場合、それらを公開します。
refresh
例は、ユーザーが選択の要素を制御できるため、それを更新する機会をユーザーに提供する必要があることを示しています。 一方、
_itemClick
などのイベントを処理するためのユーティリティ関数は、内部使用にのみ必要であり、プラグインのパブリックインターフェイスではまったく必要ありません。
プロパティ
this.element
プラグインインスタンスによって使用される要素。 例：
$( "#foo" ).myWidget()
この場合、
this.element
はid
foo
要素を含むjQueryオブジェクトになります。
.myWidget()
が呼び出される複数の要素の場合、プラグインの個別のインスタンスが要素ごとに呼び出されます。 つまり、
this.element
は常に1つの要素のみが含まれます。
this.options
プラグインの構成に使用されるオプション。 インスタンスを作成するとき、ユーザーから渡されたオプションはすべて、
$.demo.multi.prototype.options
指定されたオプションと自動的に結合されます。 カスタムオプションはデフォルトオプションを上書きします。
this.namespace
プラグインの名前空間、この場合は「デモ」。 通常、プラグインでは使用されません。
this.name
プラグインの名前。この例では「multi」。
this.namespace
よりも少し便利ですが、ほとんどの場合は使用されません。
this.widgetEventPrefix
プラグインイベントに名前を付けるために使用されるプロパティ。 たとえば、
dialog
には
close
コールバックがあり、実行されると、
dialogclose
イベント
dialogclose
ポップアップ
dialogclose
ます。 イベント名は、イベントプレフィックスとコールバック名で構成されます。 デフォルトでは、
widgetEventPrefix
の値はウィジェットの名前と同じ
widgetEventPrefix
が、上書きできます。 たとえば、ユーザーが要素のドラッグを開始した場合、
draggablestart
イベントをポップアップさせたくないので、
dragstart
という名前にしたいので、イベントプレフィックスを「drag」に等しくします。 コールバックの名前がイベントのプレフィックスと一致する場合、イベントはプレフィックスなしになります。 これにより、
dragdrag
などのイベントが回避されます。
this.widgetBaseClass
ウィジェット要素のクラス名を作成するのに役立ちます。 たとえば、要素をアクティブとしてマークする場合
element.addClass( this.widgetBaseClass + "-active" )
ほとんどのプラグインでは、
.addClass( "demo-multi-active" )
ようなものを書く方が簡単なので、これは必要ありません。 上記の例は、ファクトリー自体と
$.ui.mouse
などの抽象プラグインにより関連しています。
方法
（翻訳者のメモ-もちろん、 ドキュメントを直接読むことをお勧めします）
_create
ウィジェットに関連するすべてのものを構成するメソッド-要素の作成、イベントのハングなど。このメソッドは、インスタンスの作成直後に1回呼び出されます。
_init
渡される引数の数に関係なく、ウィジェットが呼び出されるたびに呼び出されるメソッド。 最初の呼び出し中に、
_init
は
_create
後に
_create
ます。 また、ウィジェットの作成後はいつでも呼び出すことができます。この場合、
_init
を使用して、破棄および再作成を実行せずに再初期化できます。
destroy
プラグインのインスタンスを破棄し、必要な他のアクションを実行するメソッド。 プラグインが行うすべての変更は
destroy
メソッドを使用して
destroy
必要があります。 クラス、イベントの削除、作成された要素の破壊などを含みます。これはプラグインを破壊するための出発点ですが、プラグインごとにニーズに基づいて個別に記述されます。
option
インスタンスの作成後にオプションを設定するために使用されます。 メソッドのシグネチャは、
.css()
および
.attr()
メソッドに似てい
.css()
。 名前を指定して値を取得するか、名前と値を一緒に設定して値を設定するか、オブジェクトを渡して複数の値を設定できます。 このメソッドは
_setOptions
呼び出すため、サードパーティのプラグインによって変更されるべきではありません。
_setOptions
インスタンス化後にプリファレンスを設定するために使用されるプライベートメソッド。 このメソッドは_setOptionを呼び出すため、サードパーティのプラグインによって変更されるべきではありません。
_setOption
ユーザーが
option
メソッドを使用して値を変更したときに呼び出され
option
。 特定のオプションを変更するときに特別な動作が必要な場合は、プラグインでこのメソッドを変更できます。 たとえば、ダイアログボックスでウィンドウタイトルの値が変更された場合、タイトルの更新を開始する必要があります。
_setOption: function(key, value) { if (key === 'title') { this.titleElement.text(value); } $.Widget.prototype._setOption.apply(this, arguments); }
親メソッド
_setOption
呼び出すことにより、新しいオプション値を設定します。 これは
_setOption
で実行しないで
_setOption
。 正しい動作を判断するために、古い値と新しい値を比較する必要がある場合があります。 親メソッド
_setOption
が最後に
_setOption
ため、
this.options[key]
を値と比較できます。 何も比較する必要がない場合は、メソッドの最初で親
_setOption
を呼び出すことができます。
enable
ヘルパー呼び出し
option('disabled', false)
。 また、以下をチェックすることにより、このヘルパー呼び出しをキャッチできます。
if (key === "disabled")
_setOption
。
disable
ヘルパー呼び出し
option('disabled', true)
。 以下をチェックすることで、このヘルパー呼び出しをキャッチすることもできます。
if (key === "disabled")
_setOptionで。
_trigger
このメソッドは、すべてのコールバックに使用する必要があります。 実行されるコールバックの名前は、唯一の必須パラメーターです。 すべてのコールバックもイベントをトリガーします（上記の
this.widgetEventPrefix
の説明を参照）。 コールバックをトリガーしたイベントのオブジェクトを渡すこともできます。 たとえば、
drag
イベントはmousemoveイベントによってトリガーされ、
_trigger
に渡す必要があります。 3番目のパラメーターは、コールバックとイベントハンドラーに渡されるデータを持つオブジェクトです。 このオブジェクトで送信されるデータは、現在のイベントにのみ関連する必要があり、プラグインの他のメソッドによって提供されるべきではありません。