の開発過程で オブジェクト指向プログラミング 、model-view-controller（MVC）は、ユーザーインターフェイスを基になるデータモデルに効率的かつ正常に関連付けるのに役立つ方法論またはデザインパターンです。この記事では、 次の順序でのMVCアーキテクチャ：
JavaScriptMVCアーキテクチャ
最近では、MVCパターンは、次のようなさまざまなプログラミング言語に適用されています。 。 JavaScriptは、MVCアーキテクチャまたはそのバリエーションをサポートするための多数のフレームワークで構成されています。これにより、開発者は簡単に、多くの労力をかけずにアプリケーションに構造を追加できます。
MVCは、次の3つのコンポーネントで構成されています。
- モデル
- 見る
- コントローラ
それでは、次に進んで、これら3つのJavaScriptMVCコンポーネントについて詳しく見ていきましょう。
モデル
モデルは、アプリケーションのデータを管理するために使用されます。ユーザーインターフェイスやプレゼンテーション層には関係ありません。代わりに、アプリケーションが必要とする可能性のある固有の形式のデータを表します。モデルが変更または更新されると、通常、発生した変更についてオブザーバーに通知し、それに応じて行動できるようにします。
バックボーンを使用して実装された単純なモデルの例を見てみましょう。
var Photo = Backbone.Model.extend（{//写真のデフォルトの属性defaults：{src： 'placeholder.jpg'、caption： 'デフォルトの画像'、表示：false}、//作成された各写真に`src`。initialize：function（）{this.set（{'src'：this.defaults.src}）}}）フォトギャラリーでは、写真の概念は、独自の種類のドメイン固有のデータを表すため、独自のモデルに値します。このようなモデルには、キャプション、画像ソース、追加のメタデータなどの関連属性が含まれる場合があります。上記の例では、特定の写真がモデルのインスタンスに保存されます。
ビュー
ビューは、現在の状態のフィルターされたビューを提供するモデルの視覚的表現です。 JavaScriptビューは、DOM要素の構築と保守に使用されます。ビューは通常、モデルを監視し、モデルが変更されると通知されるため、ビューはそれに応じて更新されます。例えば：
var buildPhotoView = function（photoModel、photoController）{var base = document.createElement（ 'div'）、photoEl = document.createElement（ 'div'）base.appendChild（photoEl）var render = function（）{// Underscoreなどのテンプレートライブラリ//写真エントリのHTMLを生成するテンプレートphotoEl.innerHTML = _.template（ '＃photoTemplate'、{src：photoModel.getSrc（）}）} photoModel.addSubscriber（render）photoEl。 addEventListener（ 'クリック'、関数（）{photoController.handleEvent（ 'クリック'、photoModel）}）var show = function（）{photoEl.style.display = ''} var hide = function（）{photoEl.style.display = 'none'} return {showView：show、hideView：hide}}このアーキテクチャの利点は、各コンポーネントが、必要に応じてアプリケーションを機能させる上で独自の役割を果たしていることです。
コントローラー
コントローラは、モデルとビューの間の中間体のように機能し、ユーザーがビューを操作したときにモデルを更新する役割を果たします。上記のフォトギャラリーアプリケーションの例では、コントローラーは、ユーザーが特定の写真の編集ビューに加えた変更を処理し、ユーザーが編集を終了したときに特定の写真モデルを更新する役割を果たします。
var PhotosController = Spine.Controller.sub（{init：function（）{this.item.bind（ 'update'、this.proxy（this.render））this.item.bind（ 'destroy'、this.proxy（this .remove））}、render：function（）{//テンプレートの処理this.replace（$（ '＃photoTemplate'）。tmpl（this.item））return this}、remove：function（）{this.el.remove （）this.release（）}}）この例では、モデルとビューの間の変更を管理するための非常に軽量で簡単な方法を提供します。
JavaScriptMVCフレームワーク
過去数年間で、一連のJavaScriptMVC 開発されています。これらのフレームワークはそれぞれ、開発者がより構造化されたJavaScriptコードを作成することを奨励することを目的として、何らかの形式のMVCパターンに従います。フレームワークのいくつかは次のとおりです。
- バックボーン.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
これで、JavaScriptMVCの記事は終わりです。 MVCアーキテクチャに関連する3つのコンポーネントを理解していただければ幸いです。
JavaScript MVCについて理解したので、 Edurekaによる。 Web開発認定トレーニングは、HTML5、CSS3、Twitter Bootstrap 3、jQuery、およびGoogle APIを使用して印象的なウェブサイトを作成し、Amazon Simple Storage Service（S3）にデプロイする方法を学ぶのに役立ちます。
文字列を日付javaに変換する
質問がありますか？ 「JavaScriptMVC」のコメントセクションにその旨を記載してください。折り返しご連絡いたします。