快速瞭解什麼是MVC

努力了嗎樑同學發表於2020-03-15
MVC
  • MVC設計模式
  • 簡單認識EvenBus
  • 表驅動程式設計
  • 模組化

一、MVC設計模式

1. 為什麼要有設計模式

程式碼重複太多，相同頁面重複寫等。MVC設計模式就是為了解決程式碼重複，優化程式碼結構。

2. 學MVC會有什麼情況

  • 會出現義大利麵條式程式碼的情況，過於臃腫太長，程式碼重複率高，頁面不整潔等。
  • 你會變成類似外包式程式設計師，每天重複幹著重複的事情，不懂得提升自己，不會封裝，不會造輪子。

3. 什麼是MVC

將平時全部堆在一起的程式碼，進行分類管理，細分成一段段小程式碼。再將程式碼分種類，分別放入對應M模組、V模組、C模組。方面自己和他人閱讀、開發。

M —— Model（資料型別）負責操作所有資料

// 資料相關放入m中
const m = {
    資料1,
  資料2,
  資料3
}
複製程式碼

V —— View（檢視）負責所有UI頁面

// 檢視相關放入v中
const v = {
    html程式碼,
    渲染等
}
複製程式碼

C —— Controller（控制器）負責其他

// 其他全部放入c中
const c = {
    事件,
  新增,
  修改等
}
複製程式碼

二、簡單識EvenBus

- 什麼是EvenBus

EvenBus可以使用監聽和觸發事件，對所點實現通訊。

- 監聽和觸發的兩個API

// 傳送一個資訊，用於給監聽事件監聽
eventBus.trigger('我觸發了')
// 監聽一個資訊，若監聽到了則執行
eventBus.on('我觸發了', 執行語句)
複製程式碼

- EvenBus虛擬碼事例

宣告eventBus

const eventBus = $(window)
複製程式碼

建立監聽和觸發事件

元件1 {
    ···
  eventBus.trigger('hereTrigger')
  ···
}
元件2 {
    ···
  eventBus.on('hereTrigger'，()=>{
    consolo.log('Receive message')
  })
  ···
}
複製程式碼

eventBus.trigger執行後，會把hereTrigger傳送出去。

如果evenBus.on收到了資訊與hereTrigger一致，那麼就會執行consolo.log。

如果eventBus.trigger沒有執行，那麼eventBus.on將不會執行。

三、表驅動程式設計

- 定義

表驅動程式設計，又稱之為表驅動、表驅動方法。 “表”是幾乎所有資料結構課本都要討論的非常有用的資料結構。表驅動方法出於特定的目的來使用表，程式設計師們經常談到“表驅動”方法，但是課本中卻從未提到過什麼是"表驅動"方法。表驅動方法是一種使你可以在表中查詢資訊，而不必用很多的邏輯語句（if或Case）來把它們找出來的方法。事實上，任何資訊都可以通過表來挑選。在簡單的情況下，邏輯語句往往更簡單而且更直接。但隨著邏輯鏈的複雜，表就變得越來越富有吸引力了。

簡單來說，將資料統計放在一個位置，需要獲取裡面資料的時候，像表一樣，一一對應。

- 簡單的例子

拿最常見的if語句來舉例

if(key = 'A'){
    執行語句a 
}else if(key = 'B'){
    執行語句b
}else if...
複製程式碼

改為表驅動程式設計來實現

let table = {
    a: {
    action () {
        console.log("執行語句a")
    }
  },
    b: {
    action () {
        console.log("執行語句b")
    }
  }
}

function handleTable(key) {
  return table[key]
}
handleTable('a').action()
複製程式碼

四、模組化

所謂模組化，就是一種將複雜程式碼分解為更好的可管理模組的方式。MVC設計模式就是一種模組化的體現，將程式碼分門別類的進行管理。

- 各自獨立

在平時寫程式碼的時候，可以將不同功能的程式碼，單獨一個檔案來寫，然後通過導包匯入到主程式中，那麼當其中一個出現故障的時候，並不會影響到其他的程式碼。

- 分級啟動

當載入的時候，可以分開載入。如果載入較慢的時候，可以優先載入重要的模組。

相關文章