MVC
ModelViewController（MVC）は、情報表示ロジックとユーザーインタラクションを分離するコンピューターユーザーインターフェイス開発モデルです。モデルには、アプリケーションデータとビジネスロジックが含まれています。コントローラーは、ユーザー入力をコマンドに変換し、それをモデルと表示に渡す責任があります。これはウィキペディアの説明です。
このモデルは、もともとSmalltalk-80（1979）を使用したときにTrygve Reenskaugによって設計され、最初にModel-View-Controller-Editorと呼ばれていました。後に、「デザインパターン：再利用可能なオブジェクト指向ソフトウェアの要素」という本の詳細な紹介を通じて、MVCは完全に人気になりました。
MVCの3つの部分を構成する責任と、既存のJavaScriptフレームワークが提供するものを理解して、これらのフレームワークをより適切に使用できるようにします。次に、最初にMVCを構成する3つの部分を渡して、各パートの責任が何であるかを学習します[例としてバックボーンを使用したデモコードを与えられます]。
モデル
モデルはアプリケーションデータを管理します。モデルデータが変更されると、そのリスナーに通知されます[おそらくビュー]。通知を受け取った後、リスナーは対応する変更を行います。
ビュー
ビューは、現在の状態モデルの視覚的表現です。ビューはモデルの変更を観察し、モデルが変更されたときに通知され、ビューが自体を更新できるようにします。一般に、テンプレートエンジンを使用して、モデルをビューでレンダリングします。
コントローラー
コントローラーは、モデルとビューの間のメディエーターです。その仕事は、モデルが変更されたときにビューを更新し、ユーザーがビューを操作するときにモデルを更新することです。
JavaScipt MVCフレームワークの比較
さまざまな人が比較方法が異なります。キーは、あなたが注意を払うものに依存します。
1.フレームワークのURLルーティング、データストレージ、表示の表示などの詳細にもっと注意を払うと、JavaScript Throne：Framework Swordに焦点を当てることができます。
2.フレームワークの特定の例にもっと注意を払うと、同じデモに異なるJavaScript MVCフレームワークを使用するオープンソースプロジェクトがあります。各フレームワークの特定のアプリケーションの違いをはっきりと確認できます。これがTodomvcの公式ウェブサイトです
MVCの利点は私たちにもたらします：
1。メンテナンスが簡単です
2。モデルビューのデカップリングは、ビジネスロジックをより適切にテストできることを意味します。
3.コードをよりよく再利用できます
4.モジュール開発は、分業をより明確にし、一部の人々はビジネスロジックに焦点を当て、一部の人々はユーザーインターフェイスに焦点を当てることができます。
5。古典的なMVCモデルをレビューした後、アプリケーションのレイヤー化の概念と各レイヤーの責任を理解します。同時に、すべてのJavaScript MVCフレームワークと説明するクラシックMVCモデルの違いを特定できるはずです。このようにして、MVCフレームワークを選択する際には、モデル、ビュー、コントローラーの実装方法、さらには特定のコードを実装する方法に焦点を当てる必要があります。
MVVM
MVVMのフルネームはモデルビュービューモデルです。このアーキテクチャモデルは、もともとMicrosoftのMartinFowlerによってMicrosoftのプレゼンテーションレイヤー設計モデルの仕様として提案されていました。 MVCモデルの導関数です。 MVVMモデルの焦点は、HTML5、[2] [3] WindowsPresentation Foundation（WPF）、SilverlightおよびT ZK Framework、Adobe Flexなど、イベント駆動型をサポートできるUI開発プラットフォームにあります。
このモデルの実装のほとんどは、ビューレイヤーでデータバインディングを宣言することにより、他のレイヤーから分離されており、フロントエンド開発者とバックエンド開発者の間の分業を促進します。フロントエンド開発者は、HTMLタグでViewModelにバインドデータを書き込みます。 ModelとViewModelは、アプリケーションの開発ロジックを通じてこれら2つのレイヤーを維持するバックエンド開発者です。
近年、MVVMモデルはJavaScriptで実装され始めています。現在、比較的成熟したフレームワークには、Knockoutjs、Kendo MVVM、およびKnockback.jsが含まれます。 Nockoutjsを例として、MVVMモデルの各部分の特定の責任と例コードを確認し、同時にこのモデルを使用して開発するために使用することの利点と短所を理解しましょう。
モデル
他のMV*ファミリーメンバーと同様に、モデルは、アプリケーションに必要な特定のフィールドまたはデータ、ユーザー情報[ユーザー名、アバター、電子メール、電話番号]、音楽情報[歌名、リリース年、アルバム]などの典型的なフィールド固有のデータを表します。
モデルはデータ情報のみに焦点を当てており、動作を気にしません。データをフォーマットしたり、ブラウザ内のデータの表示に影響したりしませんが、これは彼の責任ではありません。フォーマットデータはビューレイヤーのタスクであり、ビジネスロジックレイヤーはビューモデルにカプセル化され、モデルと対話します。
モデル層で行われるより予期しない動作は、データを確認することです。たとえば、ユーザーが電子メールを入力したときに、電子メール形式が正しいかどうかを判断します。
KnockoutJSでは、モデルは基本的に上記の定義に従って実装されていますが、モデルデータを読み書きするためのAjax Calling Serverサービスがあります。
ビュー
ビューとは、ユーザーと直接対話するアプリケーションの部分を指します。ビューモデルの状態を表すためのインタラクティブなUIです。ビューはパッシブではなくアクティブであると見なされますか？この文は、パッシブビューがアプリケーションのモデルのドメインを気にせず、モデルのドメインがコントローラーに維持されることを意味します。 MVVMのアクティブビューには、データのバインディング、イベント、モデルとビューモデルの動作を理解する必要があります。これらの動作は属性に対応できますが、ビューは依然としてビューモデルのイベントに応答する必要があり、ビューは状態を制御する責任はありません。
NockoutJSのビューレイヤーは、ビューモデルのデータ宣言に関連付けられる単純なHTMLドキュメントです。同時に、knockoutjsのビューレイヤーは、ViewModelから取得したデータを表示し、コマンドをViewModelに渡し、ViewModelの変更された状態を更新します。
ViewModel
ViewModelは、データ変換に特別に使用されるコントローラーであると考えることができます。モデルの情報をビュー内の情報に変換し、同時にコマンドをビューからモデルに合格させることができます。
この意味で、ViewModelはモデルのように見えますが、ビューのディスプレイロジックの多くを制御します。同時に、ViewModelはビューの状態を維持し、ビューの動作とイベントに従ってモデルを更新するためのいくつかの方法も公開します。
要約すると、ViewModelはUIレイヤーの後ろにあり、ビューレイヤーのデータと動作のソースと見なすことができます。
Knockoutjsは、ViewModelsをUIで表現するデータと動作の表示として解釈します。持続する必要があるのはデータモデルではありませんが、ユーザーが保存するデータを保持できます。ノックアウトのViewModelsはJavaScriptオブジェクトを使用して実装されており、HTMLタグを気にする必要はありません。この抽象的な方法は、実装をシンプルに保つことができます。
アドバンテージ：
1.MVVMは並行開発を容易にするため、フロントエンド開発とバックエンド開発者が互いに影響を与えません。
2。ビューレイヤーを要約して、コードのビジネスロジックを減らす
3.ViewModelは、イベント駆動型よりもテストが簡単です
4. ViewModelのテストは、UIの自動化と相互作用を気にする必要はありません
欠点：
1.単純なUIの場合、MVVMを使用することは少し重すぎます
2。命令的なコードはブレークポイントを簡単に設定できるため、宣言的なデータバインディングはデバッグを助長しません。このモードは、そのようなブレークポイントの設定を助長しません。
3。データバインディングは、非自明のアプリケーションで多くの簿記を作成する可能性があります。また、バインディングがバインドされたオブジェクトよりも複雑であるより複雑な状況になりたくありません。
4.大規模なアプリケーションでは、多数の一般化を取得する前に、ビューモデルレイヤーを設計することは困難です。