👨🏻‍✈️ 👶 🤚🏼 DIY道場ウィジェット 😹 👩‍👩‍👧 ☄️

すべての読者に良い一日を！このトピックでは、数値LEDインジケーター（時計、タイマーなど）の例を使用して、Dojoでウィジェットを作成した経験を共有します。フレームワークと理論の作成の歴史を掘り下げることはしません-トピックは実用的です。

それでは始めましょう。

ご存知のように、JavaScriptはネイティブクラスをサポートしておらず、ほぼすべてのJSフレームワークが何らかの方法でこの問題を解決します。

Dojoは、このために次の構成を使用します。

dojo.declare( ' ', [1,2,...], { / } );

ウィジェットは、ベースdijit._Widgetとdijit._Templatedの 2つのクラスを継承します。その目的は、この場合パラメーターで定義されたテンプレートからDOMノードを作成することです

templateString 。

dijit._Widgetクラスはいくつかの特別なメソッドを提供します（それらのリストはここにあります）。ウィジェットを作成してオーバーライドした後に呼び出されるpostCreateメソッドを使用します。

  postCreate : function () { this.digits = dojo.query('.digit', this.containerNode); this.render(); },

このメソッドでは、 containerNode （ dojoAttachPoint属性の値）に含まれるノードのコレクションを数字クラス（数値を表示するspan要素）で保存し 、カスタムレンダリングメソッドを呼び出します。

インジケーター値が変更されるたびに、 renderメソッドが呼び出されます（ setValueメソッド）。その中で、保存されたノードのコレクションを調べて、各要素に対応するクラス（ digit_0、digit_1、... digit_9 ）を割り当てます。メソッドの実装には詳細な説明は必要ないため、完全なウィジェットコードを提供します。

  dojo.declare( 'LedIndicator', [dijit._Widget,dijit._Templated], { currentValue : '000000', templateString: "<div>" + '<span class="led" dojoAttachPoint="containerNode">' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + "</div>" , postCreate : function () { this.digits = dojo.query('.digit', this.containerNode); this.render(); }, render : function () { var i = 0; var dc = Math.min(this.digits.length, this.currentValue.length); this.digits.removeClass(); for (i=0; i < dc; i++) { dojo.addClass(this.digits[i],'digit_'+this.currentValue.charAt(i)); } }, setValue : function (value) { this.currentValue = value; this.render(); } } );

これでおそらくすべてです。マークアップを使用してウィジェットのインスタンスを作成できます。

 <div dojoType="LedIndicator" id="led_1" class="led"></div>

私はCSSを提供しません-おそらく既に推測されているように、コレクションのすべてのノードには数字のある1つの背景がありますが、異なる位置にあります。

おわりに

Dojoのウィジェットを作成するには、宣言型とプログラム型の2つの方法があります。

宣言的な方法は、HTMLマークアップからウィジェットを作成することです。その利点は、開発の単純さと速度です。欠点は、DOMツリーをスキャンすると、大きなページの読み込み速度が大幅に低下することです。したがって、宣言型メソッドはWebアプリケーションのプロトタイプを作成するときに非常に役立ちますが、作業バージョンではプログラムメソッドを使用することをお勧めします。

これらの方法については、こちらをご覧ください。

この記事は完全で天才だと主張しているわけではありませんが、それでもあなたに役立つことを願っています。

DIY道場ウィジェット

おわりに

More articles: