浅析MVC - 掘金

一、什么是MVC

MVC是一种设计模式

M--model（数据模型）用来操作所有数据。一旦模型的数据发生改变，Model将通知有关的视图。
V--View（视图）负责所有UI页面。描绘的是Model的当前状态，当模型的数据发生改变，View就会刷新自己。
C--Controller（控制器）负责其他。负责监听并处理视图(View)的事件。更新和调用Model。也负责监听Model的变化，并更新View。
他们相互之间可以通信
Model代码示例

let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
    },
    get:{获取数据}
}

View代码示例

View = {
    el: 需要刷新的元素,
    html: `<h1>M V C</h1>....显示在页面上的内容`
    init(){
        v.el: 需要刷新的元素
    },
    render(){ 刷新页面 }
}

Controller代码示例

Controller = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 }，
   method() {
      data = 改变后的新数据
      m.update(data)
   }，
   autoBindEvents() { 自动绑定事件 }
}EventBus

二、EventBus 有哪些 API

EventBus是个空对象，主要用于对象间的通信。
使用 EventBus 可以满足最小知识原则，model和view互相不知道对方的细节，但是却可用调用对方的功能。

const eventBus = $(window) 
eventBus.trigger('m:update') // 自动触发事件
update eventBus.on('m:update', () => {console.log('触发';)}) //监听事件 然后执行函数

EventBus常用的api

on（监听事件） trigger（触发事件） off（取消监听）

三、表驱动编程

当有大批类似但不重复的代码时，可以把这些重要的数据做成哈希表，通过遍历这个哈希表来进行批量的函数监听；这样就简化了代码。表驱动编程的意义在于逻辑与数据的分离。

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

用表驱动编程
function translate(term) {
    let terms = {
        '1': '一',
        '2': '二',
        '3': '三'
    }
    return terms[term];
}

当有其他数据时，如果用if…else，那就要一直重复的写很多次if…else语句。而用表驱动编程可以直接把需要添加的数据添加到哈希表里面，达到了代码简化的效果。

四、我对模块化的理解

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。这就是模块化。好处：

降低代码耦合度
减少重复代码
提高代码重用性
在项目结构上更加清晰，便于维护。在一个完整的页面应用中，不同的节点功能，不同的结构可以规划为多个模块，每个模块的实现的方式以及用到的技术大不相同，使用模块化编程可以减小各个模块之间的影响和联系，可以更方便的优化代码和重构代码，提高我们代码的重用性，便于后期维护；