前端：淺析MVC

淺析MVC

一. 瞭解MVC

（一）MVC含義

1. Model：數據模型
2. View：視圖
3. Controller：控制器

（二）分別作什麼？

var Model= {
    data:{},    //綁定數據
    init: function(){},     //增刪改查
    add: function(){},
    delete: function(){},
    get:: function(){}
}
var View={
    el:'',  //掛載元素
    init:: function(){},    //初始化
    template:'',            //模板
    render:: function(){}   //渲染函數
}
var controller = {
    init(): function{},         //初始化
    bindEvents: function(){},   //綁定事件
}

二. eventBus

（一）API

1. on
2. off
3. emit (trigger)

（二）使用方法

1. 綁定事件 eventBus.on()

   eventBus.on("eventName",callback)
   //參數依次爲 事件名，回調函數名

2. 觸發事件 eventBus.emit()

   eventBus.emit("eventName",[...args])
   //參數依次爲 事件名 參數數組

3. 解綁事件 eventBus.off()

   eventBus.off("eventName",callback)
   //參數依次爲 事件名，回調函數名

三. 表驅動編程

（一）定義：

• 表驅動法是一種編程模式(scheme)——從表裏面查找信息而不使用邏輯語句(if和case)。事實上，凡是能經過邏輯語句來選擇的事物，均可以經過查表來選擇。對簡單的狀況而言，使用邏輯語句更爲容易和直白。但隨着邏輯鏈的愈來愈發雜，查表法也就愈發顯得更具吸引力。

（二）舉例：

• 不使用表編程：

  if(flg==1){
      add1()
  }
  else if(flg==2){
      add2()
  }
  else if(flg==3){
      add3()
  }
  else if(flg==4){
      add4()
  }
  else{
      add5()
  }

• 使用表編程

  var obj={
      1：add1,
      2: add2,
      3：add3,
      4：add4,
      5：add5,
  }
  obj[flg]()

（三）表編程的優勢

1. 提升了程序的可讀性。一個消息如何處理，只要看一下驅動表就知道，很是明顯。
2. 減小了重複代碼。
3. 下降了複雜度。
4. 程序有一個明顯的主幹。

四. 模塊化

模塊化編程是很是重要的一種編程模式，優點以下

• 多人協做互不干擾
  模塊化避免了變量污染，而且可使得分工更加容易
• 靈活架構，焦點分離
  能夠將獨立的功能從主幹中分離開來單獨開發，增長效率
• 方便模塊間組合、分解 、解耦
  下降各個功能模塊間的耦合度，方便維護和管理
• 方便單個模塊功能調試、升級