由MVC衍生的經典思想

MVC是一個很是經典的設計思想，大概在上世紀七十年代malltalk系統誕生時就有了，通過幾十年的發展，MVC衍生出了其餘設計思想，好比MVVM，MVP，EventBus等。下面介紹其中幾個。php

MVC基本思想

MVC，由Model，View，Controller三部分組成，每塊的分工以下，編程

Model(){
    數據
}

View(){
    視圖
}

Controller(){
    數據的操做
}
複製代碼

EventBus 事件總線

當代碼裏有多個對象，對象之間須要一座信息溝通的橋樑時，若是每個對象都本身實現本身的通訊方法，那未免過低效了，最好的辦法是咱們能夠抽象出一個專門負責事件通訊的對象，這個對象就是EventBus，DOM API也發揚了一樣的思想，把EventTarget這個對象放在原型鏈的倒數第二層，比Element，Node都高，爲的就是全部的元素、節點均可以經過EventTarget裏的方法（好比addEventListener）來通訊。數組

表驅動編程

表示原則：把知識疊入數據以求邏輯質樸而健壯。 ——《UNIX編程藝術》bash

表驅動編程（Table-Driven Approach）是一種把數據和邏輯解耦的編程思想，目的是增長代碼的可讀性和邏輯的獨立性。markdown

表驅動編程中，數據一般有三種訪問方式：mvc

直接訪問

以一個月的天數爲例，咱們要寫一串if/else 或者switch/case 來表達邏輯。oop

if(1 == iMonth) {iDays = 31;}
  else if(2 == iMonth) {iDays = 28;}
  else if(3 == iMonth) {iDays = 31;}
  else if(4 == iMonth) {iDays = 30;}
  else if(5 == iMonth) {iDays = 31;}
  else if(6 == iMonth) {iDays = 30;}
  else if(7 == iMonth) {iDays = 31;}
  else if(8 == iMonth) {iDays = 31;}
  else if(9 == iMonth) {iDays = 30;}
  else if(10 == iMonth) {iDays = 31;}
  else if(11 == iMonth) {iDays = 30;}
  else if(12 == iMonth) {iDays = 31;}
複製代碼

可是咱們把數據放在一張表裏，就不須要這麼冗餘的邏輯了，spa

const month = {
  monthTable: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
  get days(month, year) {
    // (year % 4 === 0) && (year % 100 !== 0 || year % 400 === 0) 
    return [month - 1];
  }
}
複製代碼

索引訪問

有時經過一次鍵值轉換（對象或者數組），依然沒法找到鍵值。此時可將轉換的對應關係寫到一個索引表裏，即索引訪問。並且能夠多重索引，或者使用正則匹配。設計

const c = {
    n: 0,
    events : {
        'click #add': 'add',
        'click #minus': 'minus',
        'click #mul': 'mul',
        'click #div': 'div'
    },
    add(n){ return n+1 },
    minus(n){ return n-1 },
    mul(n){ return n*2 },
    div(n){ return n/2 },
    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) // 點擊事件
        }
    }
}
複製代碼

階梯訪問

對於一些無規則的數據，例如等級劃分。咱們無法使用簡單的轉換將數據轉換爲索引，可是咱們可使用一個循環，依次檢查區間的上下限。code

須要注意的細節：

謹慎處理區間端點
能夠採用二分/索引加速

const grade = [59,79,84,89,94,100]; 
const level = ["F","E","D","C","B","A"];

const getLevel = g =>{
    for(let i = 0 ; i < grade.length ; i++){
        if(g <= grade[i]) return level[i];
    }
}
複製代碼

參考文章

zhangchen915.com/index.php/a…

efe.baidu.com/blog/mvc-de…