技術標籤：前端體系構建設計模式

前言

我對於MVC的理解，應該是從大學開始學習JAVA的時候開始的。那個時候ssh三大框架還比較流行。從資料庫建表，到前端和後臺的開發，其中印象最深的就是後臺建立一張表的時候，JAVA中的Hibernate建立表的例項物件，這就是像一個數據模型一樣，然後我們會建立一些Sevice的服務，這些服務，可以利用介面類定義，然後到介面類的實現類（ServiceImpl）來進行表資料的增刪改查，到前端的話，就是展示資料。那個時候，就感覺這就是一個MVC的模型。

後來，參加了工作，由於工作的需要，轉向了前端，2015年的專案，公司引入了sea.js和Backbone框架，第一次接觸到了前端的MVC或者說MVVM的框架。直至現在，這個專案還是用Backbone在進行MVC模式的開發。BackBone框架給我印象最深的就是，一般用Model去實現資料的查詢操作，在這個Model裡面實現各種介面的呼叫，就這相當於Model層在管理和控制資料一樣，然後就是View,用View來實現頁面的展示和事件的繫結，讓我覺得這就是一個MV的框架，只是在V的裡面會包含著C的邏輯。

MVC

對MVC簡單的理解

1. M-Model:資料模型，負責操作資料。
2. V-View:檢視，負責UI介面。
3. C-Controller:控制器，負責其他（事件的繫結等）

上圖

虛擬碼示例

//利用Backbone框架實現MVC
var model = Backbone.Model.extend({
  defaults: {
    data:[]
  }
  //查詢學生的資料
  getStudentInfo: function(){
  	return studetntService.getStudentInfo().then(fucntion(data){
		return this.set("data"
 
,data && data[0]);
	});
  }
});
var view = Baockbone.View.extend({
	    // 初始化方法
    initialize: function(options){
      this.el = options.el;
      this.render();
      this.bindEvnets();
    },
    //渲染介面
    render: function(){
    },
    //繫結事件
    bindEvnets: function(){
    }
})

EventBus 有哪些 API，是做什麼用的，給出虛擬碼示例？

當一個事件執行，eventBus 觸發 m:updated eventBus.trigger('m:updated')

eventBus 監聽 m:updated，當 m:updated 觸發時，執行一些內容

eventBus.on('m:updated',()=>{
     v.render(m.data.n)
 })

表驅動程式設計

表驅動方法程式設計（Table-Driven Methods）是一種程式設計模式,適用場景:消除程式碼中頻繁的if else或switch case的邏輯結構程式碼,使程式碼更加直白.

c = {
     events:{
         'click #add1':'add',
         'click #minus1':'minus',
         'click #mul2':'mul',
         'click #divide2':'div'
     },
     autoBindEvents(){
         for(let key in c.events){
             const value = c[c.events[key]]
             const spaceIndex = key.indexOf(' ')
             const part1 = key.slice(0, spaceIndex)
             const part2 = key.slice(spaceIndex + 1)
             v.el.on(part1,part2,value)
         }
     }
 }

模組化

• 將一個複雜的程式依據一定的規則（規範）封裝成幾個塊（檔案）並進行組合。
• 模組的內部資料的實現是私有的，只是向外部暴露一些介面（方法）與外部其他模組通訊。這則就是模組化。
• 模組化可以降低程式碼耦合度，減少重複程式碼，提高程式碼重用性，並且在專案結構上更加清晰，便於維護。