JiantでのToDoMVCの実装

最初の投稿を読んで、回答し、評価してくれたみんなに感謝します！



イデオロギーの仕組みを実証するために、Jiantは、さまざまなMVCフレームワークを評価するために作成されたプロジェクトであるToDoMVCを実装しました。 JiantはMVCフレームワークではなく、一連のサポートツールを使用した開発へのアプローチです。 開発に約8時間かかりました。仕様を読んで理解し、ビジネスのないリファレンス実装（localStorage）（非常に単純なもの）などを検討しました。 たくさんか少しかはわかりませんが、たくさんあります。 結果はgithub.com/vecnas/todomvc-jiantにあります。 ChromeおよびFirefoxでは、ファイルシステム、IEではサーバーから直接動作します。

仕様書

github.com/addyosmani/todomvc/wiki/App-Specification-英語の仕様。 ここでキーポイントを要約します。

タスク管理（ToDo）用のツールを開発する必要があります。次の点を実装する必要があります。

1. ストレージ。 すべてのタスクとそのステータスは、ローカルストレージ（HTML5 localStorage）に保存され、たとえばブラウザーの再起動時に復元される必要があります。
2. ナビゲーション アプリケーションは、ブラウザでハッシュナビゲーションをサポートする必要があります。詳細については、オリジナルを参照してください。 そこでナビゲーション形式が指定されていますが、Jiantの形式はこれとは少し異なります。これは、ナビゲーションノードを指定してからそれらに戻ることができるためです。 ナビゲーションバーのボタンで制御されます。 3つの状態があります：すべて表示、アクティブ表示、完了完了
3. 新しい挑戦。 ページ上部の入力フィールドに入力してEnterキーを押すと、入力されます。
4. 大量操作。 特別なボタンは、すべてのタスクを完了または未完了としてマークします。 ボタンの状態は、すべてのタスクの現在の状態とも同期されます。 つまり、すべてが既に完了しているときに新しいものを追加すると、インジケーターはすべてが完了したことを示すのを停止します
5. チャレンジ。 3つのインタラクティブな要素を表します-完了しないスイッチは、クリック、タスクの削除ボタン、および名前のダブルクリックによって機能します-タスクを編集できます
6. 編集中 入力フィールドが開き、Enterキーを押すかフォーカスを失うことで残りの要素が非表示になります-テキストを保存し、Escキーを押します-保存時にテキストが空の場合、すべての変更をキャンセルします-タスクを削除します
7. アクティブなタスクのカウンター。 現在のアクティブなタスクの数を表示します。変更があれば同期されます。テキストは読み書き可能である必要があります（「1タスク」が「2タスク」）
8. クリアが完了しました。 完了したタスクの数を表示し、クリックして削除します。完了したタスクが少なくとも1つある場合にのみ表示されます
9. カウンターとナビゲーションボタンのあるパネルは、少なくとも1つのタスクがある場合にのみ表示されます

入力時に、htmlコードといくつかのインタラクティブスクリプト、およびすべてのスタイルを含むプロジェクトテンプレートが発行されました。

Jiantプロジェクトの構造

現時点では、理想的な構造は次のとおりです。

1. アプリケーション定義ファイル-アプリケーションAPIを記述するJSON変数の宣言
2. 「イグニッション」は、ユーザーにとって便利な場所であればどこでもbindUiを呼び出します
3. 「プラグイン」のセット-アプリケーションロジック。それぞれが独自のサンドボックスにカプセル化され、アプリケーションAPIを介して機能します。

初期設計

Jiantアプローチの最初の段階は、最も抽象的な設計です。 最も重要で、おそらく（少なくとも自分にとって）珍しいことは、すべての実装方法を完全に無視することです。 顧客の説明を見て、アプリケーションの説明の最初のバージョンを作成します。 ここでは、仕様を読んだ後の最初の考慮事項を述べていますが、プロジェクトの結果に基づいて作成された理想的な推論ではありません。 つまり、すべてが非常に重要です。

州

ハッシュナビゲーションが必要な場合、アプリケーションには状態があります。 それらをリストします。仕様から直接リストを取得しますが、考えないでください。

states: { "": { go: function () {}, start: function(cb) {}, end: function(cb) {} }, active: { go: function () {}, start: function(cb) {}, end: function(cb) {} }, completed: { go: function () {}, start: function(cb) {}, end: function(cb) {} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

説明：形式に従って、アプリケーション記述変数に状態セクションが含まれている場合、Jiantはリストされた状態をロードし、それぞれに3つのメソッドを実装します：go、start、end。 goは、状態への移行、状態の開始または終了への応答の開始と終了に使用されます。 最短のエントリは次のようになります。

  states: { "": {}, active: {}, completed: {} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ただし、この場合、IDEにはオートコンプリートがありません。そのため、私自身の利便性とより良いドキュメントのために、最初の表記を使用します。 空の状態は、「不確実な」状況に対応します。たとえば、ブラウザウィンドウがハッシュなしで単にロードされた場合などです。

ハッシュナビゲーションに必要なのはそれだけです。 すべての機能は、Jiantによるアプリケーションの初期化時に追加されます。



状態設計のトピックを完全に閉じるために、2つのパラメーターを使用して1つの状態を作成できます。次に例を示します。

  states: { "": { go: function(showActive, showCompleted) {} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、それも機能します。 しかし、純粋に功利主義的な考慮事項から州を管理しているため、3つの州を作成する方が便利なようです。 繰り返しますが、これは最初の直感的なソリューションです。 ところで、これらの状態は最終バージョンのままでした。

イベント

次に、アプリケーションレベルのイベントを抽象的に定義します。 直観的に、次のリストは正しいようです。

  events: { todoAdded: { fire: function(todo) {}, on: function(cb) {} }, todoRemoved: { fire: function(todo) {}, on: function(cb) {} }, todoStateChanged: { fire: function(todo) {}, on: function(cb) {} } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

唯一のリフレクションにより、todoを完了または再アクティブ化するために、最後のイベント（イベントを2つに分割する必要があるかどうか）が発生しました。 繰り返しますが、すべてのイベントサポートコードはJiant内で機能し、ユーザーはイベントの抽象的なリストを定義して使用するだけです。 各イベントには2つのメソッドがあります-明らかです。 cb関数（コールバック、onメソッドのパラメーター）は、fire呼び出しとまったく同じ引数を取ります。

インターフェース

次に、アプリケーションの視覚部分を定義する必要があります。 エレメントのリストは、通常どおり、顧客の説明から簡単にコピーされます。 このように書いた後：

  views: { main: { batchToggleStateCtl: ctl, newTodoTitleInput: input, todoList: container }, controls: { activeCountLabel: label, clearCompletedCtl: ctl, completedCountLabel: label, showAllCtl: ctl, showActiveCtl: ctl, showCompletedCtl: ctl } },
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-私はhtmlに入り、要素の識別子が既に登録されており、構造が設定されているので、それを適用する方が論理的です。 結果：

  views: { header: { newTodoTitleInput: input }, main: { batchToggleStateCtl: ctl, todoList: container }, footer: { activeCountLabel: label, clearCompletedCtl: ctl, completedCountLabel: label, showAllCtl: ctl, showActiveCtl: ctl, showCompletedCtl: ctl } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、設計の10分目に作成されたこの構造は、プロジェクトの終了まで変更されませんでした。

パターン

仕様に基づいて、非常に動的な要素が1つ表示されます-タスクの視覚的表現です。 それらの数は異なり、追加および削除されます。そのため、Jiantのイデオロギーによれば、テンプレートを使用して定義するだけです。

  templates: { tmTodo: { deleteCtl: ctl, editCtl: ctl, stateMarker: label, toggleStateCtl: ctl, titleInput: input, hiddenInEditMode: collection, titleLabel: label } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

繰り返しますが、もう一度頭を悩ませないために、原則として「タスクの削除ボタン」deleteCtlに従って、顧客の説明からすべてを転送します。

テンプレートについて何か言わなければならないことがあります。 最初に、フィールドがテンプレートに定義されていることがわかります。最初に、アプリケーションの起動時に有効性がチェックされ、次にテンプレートから要素を作成した後にフィールドが添付されます。 各テンプレートには、parseTemplate、parseTemplate2Textの2つのメソッドがあり、置換用のパラメーターを受け入れます。 テンプレートにはロジックは含まれず、値の置換のみが含まれます。これは意図的なものであり、JavaScriptコードのロジックの場所です。 その後、別のテンプレートがアプリケーションに登場し、値がどのように置換されるかを示すためにさらに導入されました。

  templates: { .... itemsLeft: {}, itemsLeft1: {} }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実装：

  <div id="itemsLeft1" style="display: none;"> <strong>!!count!!</strong> item left </div> <div id="itemsLeft" style="display: none;"> <strong>!!count!!</strong> items left </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして使用：

  tm.parseTemplate2Text({count: count})
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まだデータモデルを設計していません。詳細については、以下をご覧ください。 すぐに実行して、何も壊れないことを確認したいと思います。これにはスターターが必要です。

スターター

理想的な構造に基づいて、アプリケーションのスターターをapp.jsファイル（「顧客からの」基本テンプレートで使用可能）に配置します。そのコードは次のとおりです。

  jQuery(function() { jiant.bindUi("", todomvcJiant, true); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

htmlコードはすでに顧客によって設定されているため（CSSを変更しないように変更したくない）、プレフィックスは空（最初のパラメーター）で、todomvcJiant変数はアプリケーション定義ファイル（ビュー、テンプレート、状態、イベントを含む）で定義され、モードをオンにします開発。

HTML実装

これですべてです。定義ファイルとスターターのみがあり、ロジックはありませんが、アプリケーションを起動するのは本当に痛いです。 Chromeでhtmlを実行すると、

1. 「履歴プラグインおよび状態が構成されていません。 状態を使用したり、$ .Historyプラグインを追加しないでください»
2. 未実現のインターフェース要素に関するメッセージを含む別のアラート
3. そして、コンソールで2番目のアラートのテキストを繰り返します。オブジェクトIDの下のクラスによって参照される既存のオブジェクト、IDによって参照される非既存のオブジェクト、詳細についてスタックトレースをチェック、予想されるオブジェクトID：

履歴を追加します-含まれています。 これで、たとえば次のように、htmlレベルで抽象定義を実装することができます。

 <section id="main"> <input id="toggle-all" class="batchToggleStateCtl" type="checkbox" style="display: none;"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list" class="todoList"> </ul> </section>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

-識別子はすでに配置されており、必要な要素にクラスを追加します。 テンプレートの実装：

  <div id="tmTodo" style="display: none;"> <li class="stateMarker"> <div class="view hiddenInEditMode"> <input class="toggle toggleStateCtl" type="checkbox"> <label class="editCtl titleLabel"></label> <button class="destroy deleteCtl"></button> </div> <input class="edit titleInput" value=""> </li> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

<script type = "someUnreadableTypeToFoolBrowser">にテンプレートを配置する一般的な慣行とは異なり、Jiantは正しいhtml構造を使用します。これは、scriptタグ内にDOMモデルがなく、実装へのテンプレートフィールドのバインディングを検証できないためです。



最後に、Jiantは無関係な要素のレポートを停止しました;抽象アプリケーションモデルは実装に依存しており、すぐに使用できます。

プラグイン

Jiantのイデオロギーに従います-ロジックはプラグインによって追加されます。 新しいビューまたはイベント状態が表示される場合、アプリケーション記述ファイルに彼女を追加し、htmlに実装します。 つまり、アプリケーションを拡張するプロセスは常に一定で制御されます。これは、小規模な開発から開始する大規模な開発にとって非常に重要です。

モデル

問題は、このアプリケーションに集中データモデルが必要かどうかです。 理論的には、各プラグインは独自のモデルを含み、アプリケーションで発生するイベントに基づいてそれを同期できます。 実際には、比較のためにこのオプションを作成しましたが、予想どおり-不要で反復的なコードがたくさんありました。 したがって、モデルを実装します（実際には、実装をjsonアプリケーション記述ファイルに直接配置することは可能ですが、読みにくくなるため、イデオロギーに従って個別のプラグインとしてレンダリングします）、model.js：

 todomvcJiant.model.todo = (function($, app) { var todos = []; return { add: function(title, completed) { var todo = {title: title, completed: completed ? true : false}; todos.push(todo); app.events.todoAdded.fire(todo); return todo; }, remove: function(todo) { todos = $.grep(todos, function(value) {return value != todo;}); app.events.todoRemoved.fire(todo); return todo; }, getAll: function() { return todos; }, getCompleted: function() { return $.grep(todos, function(value) {return value.completed}); }, getActive: function() { return $.grep(todos, function(value) {return !value.completed}); } } })($, todomvcJiant);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最も単純な配列ベースの実装。 ここで、アプリケーションのイベントをいくつか起動することに注意してください。 この場合、モデルをjsonプロジェクトの説明に追加するのは表面的なものです（たとえば、getActive（）メソッドはありません）。Jiantはデータモデルをまったく扱いません。

プラグインの実装

さらに、仕様の各ロジック要素に対して、独自のプラグインを作成して追加します。 いつでも、すべてが私たちのために機能し、機能は他に影響を与えることなく成長します。 以下にいくつかの例を示します。コード内のコメント

stateCtls.js

 jiant.onUiBound(function($, app) { //      API   var ctlsView = app.views.footer, ctls = { "showActiveCtl": app.states.active, //      "showCompletedCtl": app.states.completed, "showAllCtl": app.states[""] }; $.each(ctls, function(key, state) { ctlsView[key].click(function() { state.go(); }); state.start(function() { //             ctlsView[key].addClass("selected"); }); state.end(function() { ctlsView[key].removeClass("selected"); }); }); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

footerVisibility.js

 jiant.onUiBound(function($, app) { app.events.todoAdded.on(updateView); //    app.events.todoRemoved.on(updateView); function updateView() { //   todo  ,         app.model.todo.getAll().length > 0 ? app.views.footer.show() : app.views.footer.hide(); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

他のプラグインも同様にonUiBoundを使用して追加されます。 プラグインが新しいAPI機能を必要とする場合、抽象的な宣言と実装を作成します。 この場合、ほとんどのプラグインでは、プラグインがステータスを更新することに応答してグローバルなsmthChangedイベントのようなものが判明しましたが、これは個人的な偶然です。

htmlはhtmlとしてのみ使用され、カスタム属性やタグは使用されないことに注意してください。 UIを操作するためのすべてのロジックは、jQuery関数で記述されています。

楽しい事実-オブジェクトの識別子を入力する必要はありませんでした。 すべての作業は、オブジェクトへの直接リンクを介して行われます。 todoオブジェクトのUI実装への参照は、todoオブジェクトのフィールドとしてtodoRenderer.js内に保存され、外部の誰にも使用されず、順序はモデル内に保存されます。

PS

最後の行にすべてを書いたとき、タスクテキストを変更した後、既存のイベントのいくつかが発生するまで新しいテキストはlocalStorageに保存されないことに気付きました。 修正するために、新しいイベントtodoTitleModifiedを追加し、新しいテキスト（todoRenderer.js）をインストールした後にエディターでスローし、saveモジュール（persistence.js）でイベントにサブスクライブします。