序文

MVCは、関心事の分離を通じてアプリケーションの組織化を促進するアーキテクチャ設計パターンです。過去において、MVCはデスクトップやサーバーサイドのアプリケーションを構築するために多用されていました。 今日、ウェブアプリケーション開発は従来のアプリケーション開発に近づきつつあり、ウェブとアプリケーションの境界線はさらに曖昧になりつつあります。伝統的なプログラミング言語のデザインパターンも、Webフロントエンド開発に徐々に取り入れられています。フロントエンド開発環境の特性のために、古典的なMVCパターンでもMV *パターンの数につながっている、多かれ少なかれ派生を持っている様々なJavascriptフレームワークに実装されました。

カタログ

1. 3つのMVCオブジェクトは何をするのか、擬似コードの例を挙げてください。
2. EventBusのAPIとは何でしょうか？
3. テーブル駆動プログラミングは何をするのですか？
4. モジュール性をどう理解するか

主な記事

MVCの3つのオブジェクトの動作、擬似コードの例

• モデルのモデルは、アプリケーションのビジネスロジックに関連するデータと、そのデータがどのように処理されるかをカプセル化するために使用され、このモデルをリッスンするビューが1つ以上存在します。モデル内のデータが変更されると、モデルは関連するビューに通知します。

• ビュービューは画面上の表現であり、モデルの現在の状態を描写します。モデルのデータが変更されると、ビューはそれに応じて更新されます。

• Controllerコントローラーは、ユーザーインターフェイスがユーザーの入力に応答する方法を定義し、異なるレベル間で整理する役割を果たし、アプリケーションのフローを制御するために使用されます。

class Model={
 data(){} 		//データを保存する
 //管理データの使用
 create(){} 		//データを追加する
 remove(){} 		//データを削除する
 update(){}			//データを変更する
 get(){}					//データを表示する
}
class View={
 //管理要素，
 	el
 //HTMLを管理する
 	 	html 
 init(){
 //リフレッシュする必要がある要素
 v.el:
 }，
 //ページのレンダリング
 render(){
 
 }
}
class Controller {
 // 初期化関連の操作
 init() {}
 
 // ユーザー操作のイベント
 events
 
 // バインディングイベントは、ユーザーのアクションに応答する
 bindEvent() {}
}

EventBusはどのようなAPIを持っていますか？ それは何をしますか？

EventBusの役割：モジュール間通信、ビューコンポーネントレベル、親子コンポーネント、兄弟コンポーネントの通信に使用されるイベントバス処理を行うことができます、eventBusはバスです。

//EventBus.j 
class EventBus{
 constructor(){
 this._eventBus =$(window)
 }
 on(eventName, fn){
 return this._eventBus.on(eventName,fn)
 }
 trigger(eventName,data){
 return this._trigger.tiggger(eventName,data)
 }
 off(eventName, fn){
 return this._eventBus.off(eventName,fn)
 }
}
export default EventBus
//new.js 
import EventBus from 'EventBus.js'
const e =new EventBus()
onイベントに耳を傾ける
offリスニングのキャンセル
trigger(emit)イベントをトリガする
e.trigger('m:updated') // イベントをトリガする
e.on('m:updated', () => { console.log('here') }) 'イベントに耳を傾け、関数の実行を聞く

テーブル駆動プログラミングは何をするのですか？

テーブルドリブンアプローチとは、論理文（if...else...switch）を使う代わりにテーブルから情報を探すプログラミングパラダイムで、繰り返しコードを減らし、重要な情報だけをテーブルに入れ、論理文に比べて安定した複雑さでテーブルを使ってプログラミングを行います。

bindEvents(){
 v.el.on('click','#add1',()=>{
 m.data.n +=1
 v.render(m.data.n)
 })
 v.el.on('click','#minus1',()=>{
 m.data.n-=1
 v.render(m.data.n)
 })
 v.el.on('click','#mul2',()=>{
 m.data.n*=2
 v.render(m.data.n)
 })
 v.el.on('click','#divide2',()=>{
 m.data.n/=2
 v.render(m.data.n)
 })
}
時間のテーブル駆動型ハッシュテーブルの使用は、データとロジックの明確な分離。
events:{
 'click #aa1':'add',
 'click #minus1':'minus',
 'click #mul2':'mul',
 'click #divide2':'div'
},
add(){
 m.update( data: {n:m.data.n +1})
},
minus(){
 m.update( data:{n:m.data.n -1})
},
mul(){
 m.update( data: {n:m.data.n *2})
},
div(){
 m.update(data: {n:m.data.n /2})
}
autoBindEvents() {
 for (let key in events) {
 const value = events[key]
 const spaceIndex = key.indexOf(' ')
 const part1 = key.slice(0, spaceIndex)
 const part2 = key.slice(spaceIndex + 1)
 this.el.on(part1, part2, value)
 }
 }

モジュール性をどう理解するか

モジュラー理解：

モジュール化とは、ファイルを1つずつモジュールにカプセル化し、必要なインターフェースだけを残すことです。

なぜモジュール化なのか

1. 最小知識の原則の遵守。つまり、ある機能を使用するためには、そのモジュールのインターフェイスの紹介が必要なだけです。
2. モジュールは互いに干渉しない、高い保守性、各パッケージモジュールから独立しています。他の要件に変更するたびに、他のドキュメントの内容に影響を与えることはありません。
3. 再利用性が高く、ラップされたモジュールは何度でも呼び出せるので、書き直す必要がありません。
4. 統一されたモジュラースタイルが表示され、お互いを使用するために同僚との間の将来の作業期間を容易にするために、そうでなければ一緒にコードの混乱は、遅かれ早かれ、死に散布詠唱、モジュール化の使用を無視しないでください。

// 
export default View
// 
import View from './View.js'