素晴らしいサイトhttp://todomvc.com/があります。これは、異なるJavaScript MV *（ Model-View- [Controller] ）フレームワークを使用した同じ問題の解決策を示しています。 現在、さまざまなフレームワークがあり、それぞれに長所と短所があります。 Angular 、 Ember 、 Backboneなどの巨人がいます 。 競争が激しいにもかかわらず、MV *フレームワークjWidgetのデモを引き続き行いたいと思います。



TodoMVC Webサイトにあるすべてのソリューションをすばやく調べたところ、jWidgetに似たフレームワークは1つも見つかりませんでした。 実際、JavaScriptに加えて、Java、C＃などのオブジェクト指向プログラミング言語でプログラミングを行っています。また、過去にはC ++でプログラミングを行っています。 したがって、私はオブジェクト指向プログラミング、 固い原則 、 オブジェクト指向設計のパターンの大ファンです。 標準のオブジェクト指向ソリューションを使用する可能性を制限するフレームワークは必要ありません。 既存のTodoMVCソリューションで私が見たものは、この点で自信を呼び起こすものではありません。 原則として、それらはいくつかの宣言構文と強力なテンプレートエンジンを提供しますが、これらすべてのオブジェクト指向の基礎は、たとえ存在しても、私たちの目には見えません。





英語のドキュメント： http : //enepomnyaschih.github.io/jwidget/index.html#! / guide / home



ロシア語のドキュメント： http : //enepomnyaschih.github.io/jwidget/index.html#! / guide / ruhome



GitHubプロジェクト： https : //github.com/enepomnyaschih/jwidget



Twitter： @jwidgetproject



jWidgetでのTodoMVC実装： http ://enepomnyaschih.github.io/todomvc/labs/architecture-examples/jwidget/release/



jWidgetは私のフォークにしか存在しないため、Sourceリンクは今は動作しません。 以下は、ソースコードへの正しいリンクです。



JWidgetソースコードTodoMVC： https : //github.com/enepomnyaschih/todomvc/tree/gh-pages/labs/architecture-examples/jwidget/



jWidgetの主な機能を簡単にリストします。



1. OOPの原則の厳格なコンプライアンス。 サンプルチュートリアルを含む完全に文書化されたバイリンガルクラスライブラリ。

2.何よりもスクリプトの速度。 したがって、クラスコンストラクターの明示的な宣言と、クラスを宣言するときのクロージャーの最小限の使用は、 Google Chromeでは、プロトタイプによる継承は、「モジュール」パターンによる継承よりもはるかに効率的です （Firefoxでは、違いはそれほど大きくありません）。

3.モデルを操作するために、ビューを完全に再レンダリングする必要はありません。 各コンポーネントは一度だけレンダリングされ、その後は個々の要素のみを更新するため、アプリケーションの高速性が保証されます。

4.フレームワークはjQueryで実行されます。

5.関数https://api.jquery.com/jQuery.parseHTML/に送信される前に前処理を必要としない最も単純なテンプレートエンジンがあります 。 テンプレートには魔法もインラインコードもありません。すべてのデータバインディングはコンポーネントのJavaScriptコードで実装されます。 このため、ビューをモデルにリンクする場合と、モデル内またはビュー内のオブジェクトをリンクする場合の両方で、同じデータバインディング手法を使用できます。これは多くの場合便利です。

6.使用後のすべてのオブジェクトは完全に破壊されます。 これにより、費用対効果の高い顧客リソースの消費と、何らかのイベントを処理しようとする「デッド」オブジェクトによるコンソールでの予期しないエラーがなくなります。 たとえば、アプリケーションの作業全体で同じモデルを使用して、そのプレゼンテーションをオンザフライで変更できます。 ビューはモデルイベントをリッスンしますが、ビューがDOMから削除された後、これらのイベントを処理するプロセッサ時間を無駄にしないようにこれらのイベントのサブスクライブを解除し、ガベージコレクターがメモリをクリアできるようにする必要があります。 オブジェクトを破壊する簡単な方法があります-いわゆる。 オブジェクトの集約のメカニズム。

7.ネイティブアプリケーションビルダーであるjWidget SDKは 、アプリケーション開発を簡素化し、本番環境にリリースする前にコードを最適化します。 それをGruntJSのプラグインのスタックに置き換える予定です 。 私がjWidget、GruntJSなどの開発を始めたとき、それは存在しませんでした。

jWidgetが非常に高速であることを確認するために、ブラウザーにビューを再描画する時間を与えるために各エントリを追加した後、0ミリ秒の待機でTodoMVCに500エントリを追加するのにかかった時間を測定しました。 また、500レコードの[すべて選択]および[完了した操作をクリア]の時間を大まかに測定しました。 結果は次のとおりです。

• 角度JS -16847ミリ秒。 すべてを選択すると、完了した操作はすぐにクリアされます。
• Angular JS （パフォーマンス最適化バージョン）-13287ミリ秒。 すべてを選択すると、完了した操作はすぐにクリアされます。
• Ember JS -13095ミリ秒。 すべてを選択し、完了した操作をクリアするには約3秒かかります。
• バックボーン -9506ミリ秒。 すべてを選択し、完了した操作をクリアするには約3秒かかります。
• jWidget -9974ミリ秒。 すべてを選択すると、完了した操作はすぐにクリアされます。
• YUI -1分以上。 待たなかった。

ご覧のとおり、レコードの追加速度はBackboneのみがjWidgetをわずかに上回っていましたが、同時にSelect AllとClear Completeの速度が遅れていました。 同時に、AngularとEmberの3秒の遅れは実際には重要であることに注意してください。すべての場合において、setTimeoutの500倍の呼び出しによって多くの時間が単に消費されるためです。 一般に、3つの最も人気のあるフレームワークのうち、どれも最後まで大量のデータに対処することができませんでしたが、jWidgetがトップであることが判明しました。

次に、jWidgetのメカニズムについて説明します。 フレームワークは5つの層で構成されます。

1. クラスとオブジェクト 。 クラスの継承。 オブジェクトの集約のメカニズム。
2. イベント イベントの発表。 サブスクリプション、サブスクライブ解除、イベント生成。
3. プロパティとそのヘルパー 。 既存のプロパティに基づいて新しいプロパティを作成します。 プロパティベースのデータバインディング。
4. コレクションとそのシンクロナイザー 。 配列、辞書、多く。 既存のコレクションに基づいた新しいコレクションの作成。 コレクションベースのデータバインディング。
5. コンポーネント 。 テンプレート。 テンプレート要素とコンポーネントコードの関係。 プロパティとコレクションに基づくデータバインディングを使用して子コンポーネントを作成します。

1.クラスとオブジェクト。

以下は、jWidgetクラスの宣言の例です。 クラスは、少量の構文糖で希釈されたプロトタイプを介した標準継承によって作成されます。

//  . var Hand = function(side) { //    . Hand._super.call(this); //  . this.side = side; //    ,     . //  ,         . this.grabbedObject = null; }; //  Hand  JW.Class. JW.extend(Hand, JW.Class, { //    ,   . // String side; // Grabbable grabbedObject; //  . grab: function(obj) { this.grabbedObject = obj; }, //    . destroy: function() { console.log("Destroying " + this.side + " hand"); //         _super. this._super(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

JW.Classの主要な機能の1つは、別のオブジェクトの制御下にあるオブジェクトを破棄するオブジェクト集約メカニズムです。 このアイデアは、 「オブジェクト指向設計のトリック」という本の紹介から得たものです。 ギャングオブフォーのデザインパターン 。 オブジェクトへのすべてのポインターは、集約と認識の2つのタイプに分けられることがわかります。 認識とは、ポインターを所有するオブジェクトが、そのポインターが参照するオブジェクトに対して一切の責任を負わないことを意味します。 彼は単に自分のパブリックフィールドとメソッドにアクセスできますが、このオブジェクトの有効期間は彼の制御下にはありません。 ただし、集約とは、リンクを所有するオブジェクトが、そのリンクが参照するオブジェクトを破棄する責任があることを意味します。 原則として、より複雑なケースもありますが、集約オブジェクトは所有者オブジェクトが生きている間も存続します。



jWidgetでは、集約はJW.Classクラスの独自のメソッドを介して実装されます。 オブジェクトBをオブジェクトAの独自のメソッドに渡すことにより、オブジェクトAをオブジェクトBの所有者にしました。オブジェクトAを破棄すると、オブジェクトBは自動的に破棄されます。 便宜上、独自のメソッドはオブジェクトBを返します。以下は、この機能を使用するコードの例です。

 var Soldier = function() { Soldier._super.call(this); //   .  -   , //   . this.leftHand = this.own(new Hand("left")); this.rightHand = this.own(new Hand("right")); }; JW.extend(Soldier, JW.Class, { // Hand leftHand; // Hand rightHand; destroy: function() { console.log("Destroying soldier"); this._super(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、 destroyメソッドを呼び出して兵士を作成し、破壊できます。

 var soldier = new Soldier(); soldier.destroy();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その結果、ブラウザコンソールに次の行が表示されます。

破壊兵士
右手を破壊する
左手を破壊する

ご覧のとおり、兵士が破壊されると、兵士の手は自動的に破壊されます。 あるいは、destroyメソッドを呼び出すことにより、Soldierクラスのdestroyメソッドで明示的に手を破壊することもできます。 しかし、集約により、より少ないコードでこれを実現できます。 一般に、実際のアプリケーションでは、destroyメソッドをオーバーロードすることはほとんどありません。 たとえば、 私のTodoMVC実装では、このメソッドは一度もオーバーロードされません-オブジェクトの集約の1つのメカニズムによってすべてが達成されます。



集約されたオブジェクトは逆の順序で破棄されます。これにより、オブジェクト間の関係がある場合の整合性が保証されます。

2.イベント。

イベントは、MV *フレームワークの不可欠な部分です。 ビューがモデルに直接アクセスできる場合、モデルはビューについて何も知りません。 フィードバックは、イベントを通じてのみ行われます。 クリック 、 マウスダウン、 キー押下などの標準のユーザーインターフェイスイベントを意味するのではなく、 「 ドキュメントの名前が変更されました」 、 「新しいドキュメントがフォルダーに追加されました」 、 「フォルダー内のドキュメントが日付順にソートされます」などのイベントです。 これは、プログラミング言語の標準ツールには含まれていないため、フレームワークのタスクです。



記事の冒頭で書いたように、jWidgetのスクリプトの速度は何よりも優れています。 したがって、たとえばjQueryで提案されている標準のイベントサブスクリプションスキームは、私たちには適していません。

 $("#document").bind("click", onClick); $("#document").unbind("click", onClick);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここでの問題は、イベント応答アルゴリズムが線形計算の複雑さを持っていることです（徹底的な検索）。 イベントからのサブスクライブ解除時間が、キーがディクショナリから削除された時間に等しく、はるかに高速なスキームを実装できました。 さらに、jWidgetイベントスキームは、OOPのすべての原則に従って実装され、オブジェクトの集約メカニズムと完全に結合します。

 var Document = function(title) { Document._super.call(this); this.title = title; //   . this.titleChangeEvent = this.own(new JW.Event()); }; JW.extend(Document, JW.Class, { // String title; // JW.Event titleChangeEvent; setTitle: function(title) { if (this.title === title) { return; } this.title = title; //  . this.titleChangeEvent.trigger(new JW.ValueEventParams(this, title)); } }); var Client = function(document) { Client._super.call(this); this.document = document; //   .  ,     //     . this.own(document.titleChangeEvent.bind(this._onTitleChange, this)); }; JW.extend(Client, JW.Class, { // Document document; _onTitleChange: function(params) { console.log("Changed title to " + params.value); } }); //  . var doc = new Document("apple"); var client = new Client(doc); doc.setTitle("banana"); // : Changed title to banana doc.setTitle("cherry"); // : Changed title to cherry //    ,  . client.destroy(); doc.destroy();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

イベントはJW.Eventクラスによって表されます。 イベントサブスクリプションは、 JW.EventAttachmentクラスのインスタンスとしてbindメソッドによって返されます。 サブスクリプションを破棄することは、イベントからサブスクリプションを解除することと同じです。 トリガーメソッドを使用してイベントをスローする場合、 JW.EventParamsのインスタンスをそこに渡して、イベントハンドラーに引数として渡します。

3.プロパティとそのヘルパー

フレームワークは、データバインディングの可能性を提供しない場合、本格的なMV *フレームワークと呼ぶことはできません。 jWidgetはこの機能を提供します。 次のクラスのオブジェクトは、変更に関するイベントを自動的にスローするため、データバインディングに使用できます。

• JW.Property
• JW.ObservableArray
• JW.ObservableMap
• JW.ObservableSet

次の段落でコレクション（配列、マップ、セット）について説明します。 次に 、プロパティ（ JW.Property ）について説明します。 プロパティは、値の変更に関するイベントをスローする「変数」です。 したがって、このクラスの最も単純なインターフェース：

• Getメソッド
• 設定方法
• ChangeEventイベント

xの値をsetメソッドに渡すと、プロパティはxの値と等しいかどうかを確認します。 等しい場合、何も起こりません。 等しくない場合、プロパティは自身をxに設定し、changeEventイベントをスローします。



クラスインターフェイスは認識できないという事実にもかかわらず、データバインディングに十分な機会を提供し、アプリケーションコードの量を大幅に削減します。 まず、1つのプロパティの値を別のプロパティにコピーすることにより、2つのプロパティを関連付けることができます。

 var source = new JW.Property("apple"); var target = new JW.Property(); new JW.Copier(source, {target: target}); assertEqual("apple", target.get()); source.set("banana"); assertEqual("banana", target.get());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

bindToメソッドも同じことを行うため、コードをより理解しやすくできます。 さらに、この場合のターゲットプロパティも変更に関するイベントをスローするため、チェーンに沿って好きなだけプロパティを関連付けることができることに注意してください。

 var source = new JW.Property("apple"); var target1 = new JW.Property(); target1.bindTo(source); var target2 = new JW.Property(); target2.bindTo(target1); source.set("banana"); assertEqual("banana", target2.get());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その場でプロパティをコピーすることは始まりにすぎません。 式text = value + " " + unit



を使用して、2つの既存のプロパティに基づいて新しいプロパティを作成してみましょう。

 var value = new JW.Property(1000); var unit = new JW.Property("MW"); var functor = new JW.Functor([ value, unit ], function(value, unit) { return value + " " + unit; }, this); var target = functor.target; assertEqual("1000 MW", target.get()); value.set(1500); assertEqual("1500 MW", target.get()); unit.set(""); //    assertEqual("1500 ", target.get());
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最後に、何らかの表現要素内のテキストを構築されたプロパティにバインドします。

 new JW.UI.TextUpdater("#capacity", target);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、値と単位を変更すると、＃capacity要素内のテキストが自動的に更新されます。



ドキュメントの JW.Propertyクラス機能の完全なリストを参照してください。



jWidgetは、HTMLテンプレートを介した使い慣れたデータバインディングをアプリケーションのJavaScriptコードに転送します。 これにより、アプリケーションを最適化し、機能を拡張する絶好の機会が提供されます。 データバインディングは、モデルとビューの間のレイヤーだけに限定されません。 モデル内およびビュー内でプロパティを簡単に関連付けることができます。 アプリケーション操作アルゴリズムは完全に透過的であり、アプリケーションの特定の使用シナリオに基づいて、ユーザーが自分が関連付ける対象を制御できます。 アプリケーションのすべての機能を再利用できます。 フレームワークは、そこからデータバインディングの式を抽出するためにHTMLテンプレートをプリコンパイルしません。これにより、アプリケーションの速度が向上します。



プロパティの値は、 ownValueメソッドを使用して集計できます。

4.コレクションとシンクロナイザー

jWidgetには、 JW.AbstractArray 、 JW.AbstractMap 、およびJW.AbstractSetの 3つの独自のコレクションクラスが導入されています。 これは、ネイティブの配列とオブジェクトの使用が禁止されていることを意味するものではありません。jWidgetコレクションは、ネイティブに簡単に変換できます。 各jWidgetコレクションには2つの実装があります-シンプルな実装とアラートな実装：



-JW.AbstractArray ： JW.ArrayおよびJW.ObservableArray

-JW.AbstractMap ： JW.MapおよびJW.ObservableMap

-JW.AbstractSet ： JW.SetおよびJW.ObservableSet



単純なコレクションは通知するよりも少し速く動作しますが、通知するコレクションは変更についてイベントをスローするため、データバインディングはそれらに自由に適用されます。 また、単純なコレクションクラスには、ネイティブのArrayとObjectで同じ操作を実行するように設計された同一の静的メソッドのセットがあります。 例として、モデルオブジェクトの配列を使用してビューオブジェクトの配列を作成する操作を引用します。

 // @param {JW.AbstractArray} documents function createDocumentViews(documents) { return documents.$map(function(document) { return new DocumentView(document); }, this); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

その際、単にJW.Arrayの新しいインスタンスを作成し、それにビューオブジェクトを追加しました。 ドキュメント配列とその表現の間の接続は保持されていないため、ドキュメント配列を変更しても表現の配列を変更する必要はありません。 それらをリンクするには、データバインディングを構成する必要があります。 jWidgetでは、これはシンクロナイザーを作成することで行われます。 この場合、 マッパーを作成する必要があります。

 function createDocumentViews(documents) { return documents.createMapper({ createItem: function(document) { return new DocumentView(document); }, destroyItem: function(documentView) { documentView.destroy(); }, scope: this }).target; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ご覧のとおり、1つのコールバックの代わりに、2つを渡します。 2番目のコールバックは、ドキュメント配列から削除された場合にマッパーがドキュメントビューを破棄できるようにするために必要です。 マッパーはターゲットの配列を形成し、元の配列と完全に一致するように保持します。 マッパーを破壊すると、ターゲットに残っているすべての表現が破壊されます...ところで、マッパーを破壊するのを忘れていました。 集計を使用します。

 var DocumentList = function(documents) { DocumentList._super.call(this); this.documentViews = this.createDocumentViews(documents); }; JW.extend(DocumentList, JW.Class, { createDocumentViews: function(documents) { return this.own(documents.createMapper({ createItem: function(document) { return new DocumentView(document); }, destroyItem: function(documentView) { documentView.destroy(); }, scope: this })).target; } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

括弧の意味に注意してください。 マッパーを正確に集約し、ターゲットを正確に返します。



createMapperメソッドは、JW.ArrayとJW.ObservableArrayの両方で機能します。 最初の場合のみ、JW.Arrayはイベントをスローしないため、定数のデータバインディングを実装できません。 ただし、必要に応じて、いつでもJW.ArrayをJW.ObservableArrayに置き換えることができる完全に多形的なソリューションを開発できます。



jWidgetは、広範なシンクロナイザーを提供します。 完全なリストについては、 ドキュメントを参照してください。



コレクションの要素は、 ownItemsメソッドを使用して集約できます。

5.コンポーネント

最後に、プレゼンテーションに行きました。 jWidgetは、すべてのプレゼンテーションコンポーネントの基本クラスとしてJW.UI.Componentクラスを提供します。 各コンポーネントクラスには独自のテンプレートがあり、このクラスで継承されます。 テンプレートはプレーンHTMLで、2つの新しい属性jwclassとjwidが追加されます。 テンプレートは、 JW.UI.templateメソッドを使用してコンポーネントクラスにバインドされます。

 var MyComponent = function(message, link) { MyComponent._super.call(this); this.message = message; this.link = link; }; JW.extend(MyComponent, JW.UI.Component, { // String message; // String link; renderComponent: function() { this._super(); this.getElement("hello-message").text(this.message); this.getElement("link").attr("href", this.link); } }); JW.UI.template(MyComponent, { main: '<div jwclass="my-component">' + '<div jwid="hello-message" />' + '<a href="#" jwid="link">Click me!</a>' + '</div>' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

jwclass属性はコンポーネントのルート要素に対してのみ設定され、CSS要素クラスのプレフィックスです。 jwid属性は、この要素のCSSクラスの接尾辞です。 たとえば、上記のテンプレートは次のHTMLに展開されます。

 <div class="my-component"> <div class="my-component-hello-message" /> <a href="#" class="my-component-link">Click me!</a> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

DOMでコンポーネントをレンダリングするには、次の指示を使用できます。

 var component = new MyComponent("Hello, Wanderer!", "http://google.com"); component.renderTo("body");
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントコードは、 getElementメソッドを使用すると、jwidによって要素のjQueryラッパーを取得できることを示しています。



renderComponentメソッドは、コンポーネントのライフサイクルメソッドです。 オーバーロードすることにより、コンポーネントのコンポーネントを操作し、子コンポーネントを作成できます。



子コンポーネントには3つのタイプがあります。

1. 名前付き子コンポーネント
2. 簡単に交換可能な子コンポーネント
3. 子コンポーネントの配列

名前付き子コンポーネントは、指定されたテンプレート要素を完全に置き換えます。 たとえば、アプリケーションがタイトルとコンテンツで構成されているとします。 それらを名前付き子コンポーネントにしましょう。 これは、それらを子辞書に追加することにより行われます。

 var Application = function() { Application._super.call(this); }; JW.extend(Application, JW.UI.Component, { renderComponent: function() { this._super(); this.children.set(this.own(new Header()), "header"); this.children.set(this.own(new Content()), "content"); } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="header" />' + '<div jwid="content" />' + '</div>' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ヘッダーとコンテンツがレンダリングされ、「header」要素と「content」要素が置き換えられます。 辞書のコンポーネントをその場で追加および削除して、コンポーネントのコンテンツを操作できます。



簡単に交換可能な子コンポーネントは名前付きコンポーネントに似ていますが、JW.Propertyに基づいて機能します。 それらはaddReplaceableメソッドによって追加されます。 そのようなコンポーネントはJW.Mapperを使用して便利にレンダリングされます：

 var Application = function(selectedDocument) { Application._super.call(this); this.selectedDocument = selectedDocument; }; JW.extend(Application, JW.UI.Component, { // JW.Property selectedDocument; renderComponent: function() { this._super(); var documentView = this.own(new JW.Mapper([ this.selectedDocument ], { createValue: function(document) { return new DocumentView(document); }, destroyValue: function(documentView) { documentView.destroy(); }, scope: this })).target; this.addReplaceable(documentView, "document"); } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="document" />' + '</div>' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、selectedDocumentプロパティにデータバインディングを実装しました。 このプロパティの値を変更すると、古いドキュメントの表現が自動的に破棄され、新しいドキュメントの表現が作成され、古いドキュメントの代わりになります。



子コンポーネントの配列は 、JW.AbstractArrayに基づいています。 それらはaddArrayメソッドによって追加されます。 配列がJW.ObservableArrayの場合、メソッドはビューとこの配列の継続的な同期を提供します。 子コンポーネントの配列は、createMapperメソッドを使用して便利にレンダリングされます。

 var Application = function(documents) { Application._super.call(this); this.documents = documents; }; JW.extend(Application, JW.UI.Component, { // JW.AbstractArray documents; renderComponent: function() { this._super(); var documentViews = this.own(this.documents.createMapper({ createItem: function(document) { return new DocumentView(document); }, destroyItem: function(documentView) { documentView.destroy(); }, scope: this })).target; this.addArray(documentViews, "documents"); } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="documents" />' + '</div>' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

名前付きの簡単に交換可能な子コンポーネントとは異なり、配列は指定された要素を置き換えませんが、この要素内に子コンポーネントを追加します。 したがって、addArrayメソッドの2番目の引数をスキップすることにより、コンポーネントのルート要素に直接、子コンポーネントの配列を追加できます。



便宜上、jWidgetではrenderChildIdメソッドを定義できます。ChildIdは要素のjwidで、CamelCaseで大文字になっています。 このメソッドは、入力としてテンプレート要素を受け入れます。 以下は、このメソッドのさまざまな機能です。

 var Application = function(title, documents, selectedDocument) { Application._super.call(this); this.title = title; this.documents = documents; this.selectedDocument = selectedDocument; }; JW.extend(Application, JW.UI.Component, { // JW.Property<String> title; // JW.AbstractArray<Document> documents; // JW.Property<Document> selectedDocument; //     ,       . renderTitle: function(el) { this.own(new JW.UI.TextUpdater(el, this.title)); }, //    JW.UI.Component,     . renderHeader: function() { return this.own(new Header()); }, //    JW.AbstractArray,     . renderDocumentList: function() { return this.own(this.documents.createMapper({ createItem: function(document) { return new DocumentListItem(document); }, destroyItem: JW.destroy, //  scope: this })).target; }, //    JW.Property,      . renderSelectedDocument: function() { return this.own(new JW.Mapper([ this.selectedDocument ], { createValue: function(document) { return new DocumentPanel(document); }, destroyValue: JW.destroy, //  scope: this })).target; }, //    false,       DOM renderHappyNewYear: function() { return new Date().getMonth() === 0; } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="title" />' + '<div jwid="header" />' + '<div jwid="document-list" />' + '<div jwid="selected-document" />' + '<div jwid="happy-new-year">Happy new year!</div>' + '</div>' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンポーネントのHTMLテンプレートは、 jWidget SDKを使用して別のHTMLファイルに移動できます 。 詳細については、ガイドのプロジェクトインフラストラクチャセクションをご覧ください。 フレームワークが成功した場合、jWidget SDKを置き換えるGruntJSのプラグインを作成する予定です。 先ほどjWidget SDKについて書きましたが、あまりサポートされていません。 そして今、同等のプロジェクトGruntJSが登場し、すぐに巨大なサポートを見つけてコミュニティを形成しました。 そのため、jWidget SDKの開発を最小限に抑えています。



この記事がお役に立てば幸いです。 JavaScriptプログラマーの中には、私のように、実際のオブジェクト指向プログラミングのファンであり、コード実行の高速性を高く評価している人がいると確信しています。 これがあなたなら、仕事でjWidgetを試してください。がっかりすることはありません。 膨大な量のMV *フレームワークがあったとしても、jWidgetを好みます。 私はドキュメントの維持、初心者向けのチュートリアル、および単体テストの綿密なカバーに多大な労力を費やしています。 プロジェクトをさらに発展させ、成長させたい場合は、 GitHubにアスタリスクを付けて Twitter @jwidgetprojectでフォローしてください。 また、建設的な批判と良い提案に感謝します。 ありがとう