M V C分别是什么

• M：即model，数据层面，该模块封装数据以及对数据的处理方法
• V：即view，视图层面，该模块展示数据的状态
• C：即control，当数据层面发生改变，视图层当然需要做出相应的变化，这些变化的执行过程就在control模块中

EventBus

• eventbus用来进行对象间的通信
  常用api有 监听eventbus.on() 触发eventbus.trigger() 取消eventbus.off()
  用法：
• 如果一个函数里有trigger，那么执行这个函数时，就会触发trigger
• 相对应的在另一个地方会有on在监听，一旦监听到trigger执行了，那么就会执行on里面的函数
  以jquery为例

const eventBus = $(window)

m={
    f1() {
      ...
      eventBus.trigger('m:updated')
      }
}

v={
  f2() {
     eventBus.on('m:updated', ()=>{
      ...
    })
   }
}
//这样可以实现m 和 v之间的通信

表驱动编程

• 表驱动编程一般用来优化有很多重复性多可读性差的代码。意义在于逻辑与数据的分离
  例如 if - else

function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else {
        return '？？？'  
    }
}

// 如果想添加一个新的名词翻译，需要再添加一个if-else逻辑，例如：
function translate(term) {
    if (term === '1') {
        return '一'
    } else if (term === '2') {
        return '二'
    } else if (term === '3') {
        return '三'
    } else if (term === '4') {   
        // 此处添加了一个新的名词翻译
        return '四'
    } else {
        return '？？？'  
    }
}

表驱动后:

function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

// 如果想添加一个新的名词翻译，只需要在terms中添加一个新的表项，不需要修改整个逻辑
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
        '4': '四'   // 添加一个新的名词翻译
    }
    return terms[term];
}

模块化编程

模块就是实现特定功能的一组方法。模块之间可以继承 引用。自己只需实现核心得业务逻辑即可。