Geekly Articles each Day

JQuery UIウィジェットファクトリ

すべてのjQuery UIウィジェットは、ウィジェットファクトリという単純なベースで作成されます。 互換性のあるAPIを使用して、複雑で構造化されたプラグインを作成するための柔軟な基盤を提供します。 これを使用すると、jQuery UIプラグインだけでなく、自転車を発明することなくオブジェクト指向のコンポーネントを作成できます。 他のjQuery UIコンポーネントには依存しませんが、逆に、ほとんどのUIコンポーネントはそれに依存しています。

これは何ですか


ウィジェットファクトリは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を提供します。



独自のプロトタイプを作成する


インフラ

プロトタイプとして渡されたオブジェクトリテラルは好きなように配置できますが、 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番目のパラメーターは、コールバックとイベントハンドラーに渡されるデータを持つオブジェクトです。 このオブジェクトで送信されるデータは、現在のイベントにのみ関連する必要があり、プラグインの他のメソッドによって提供されるべきではありません。

Source: https://habr.com/ru/post/J150549/

More articles:


All Articles