浅析MVC

• MVC 三个对象分别做什么，给出伪代码示例
  1、基本概念
  MVC（Model–view–controller）模式是软件工程中的是一种架构设计模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。概念是来源于后端的框架构建思想，是一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。
  • 模型（Model） - 用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法

Model层
Model = {
    data: { 需要用到的数据 }，
    create(): { 增数据 },
    delete(): { 删数据 },
    update() {更新数据},
    get():{ 获取数据 } 
}

• 视图（View） - 界面设计人员进行图形界面设计，是用户看到并与之交互的界面

View层
View = {
    el:null,
    html: `......` //视图模板
    init(){初始化页面},
    render(){ 刷新页面 }
}

• 控制器（Controller）- 是连接视图和模型桥梁，处理业务逻辑操作。它处理事件并作出响应。“事件”包括用户的行为和数据 Model 上的改变。

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() { 自动绑定事件 }

2、优点
（1）三个模块相互独立，改变其中一个不会影响其他两个
（2）多个 View 能共享一个 Model，提高了代码的可重用性
（3）Controller 是自包含（self-contained,指高独立内聚）的对象，与 Model 和 View 保持相对独立，所以可以方便的改变应用程序的数据层和业务规则
（4）Controller 提高了应用程序的灵活性和可配置性，Controller 可以用来连接不同的 Model 和 View 去完成用户的需求

• EventBus

EventBus 又称为事件总线,可以用来进行组件之间的监听和通信。比如说当 Model 模块中的数据发生更新，触发了 EventBus 上的某个事件，而 Controller 恰好在监听这个事件，当这个事件触发时，Controller 就知道 Model 中的数据发生了更新了，从而做出一些反应

API:
EventBus.on（）监听事件：当 m:updated 触发时，执行一些内容

EventBus.on(eventName,callback)  
//参数1:事件名称  参数2:事件函数
//判断当前事件名称是否存在，如果不存在则创建一个key值为事件名称
//value为一个数组 将callback push到数组中
 
const eventList = {};
EventBus.on = (eventName,callback)=>{
     if(!eventList[eventName]){
         eventList[eventName] = [];
     }
     eventList[eventName].push(callback)
}

EventBus.trigger（）触发事件:当一个事件执行，eventBus 触发 m:updated

EventBus.trigger(eventName,[params]) 
//参数1:事件名称 参数2:[需要传递的参数]
//判断当前事件的名称是否存在，如果存在则遍历数组，得到所有的函数，
//并执行。然后将params当做实参传递到函数中去
const eventList = {};
EventBus.trigger = (eventName,params)=>{
    if(eventList[eventName]){
         let arr = eventList[eventName];
         arr.map((cb)=>{
             cb(params)
         })
    }
}

eventBus.trigger('event') //触发事件 
eventBus.on('event',()=>{ //监听事件
     do something()
 })

EventBus.off，解绑事件

EventBus.off(eventName,[callback])  
//参数1:事件名称  参数2:[事件函数]
//判断当前事件名称是否存在，如果存在继续判断第二个参数是否存在，如果存在则找到相//对应的下标 然后将函数在数组中移除
//如果不存在则将整个数组清空
 
const eventList = {};
EventBus.off = (eventName,callback)=>{
    if(eventList[eventName]){
          if(callback){
                 let index = eventList[eventName].indexOf(callback);
                 eventList[eventName].splice(index,1)
           }
    }else{
           eventList[eventName].length = 0; 
    }
}

• 表驱动编程

表驱动法就是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if
和case)。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。

直接访问：将数据作为键值直接访问表
索引访问：先用一个基本数据类型的数据从一张索引表中查出一个键值，然后再用这一键值查出你需要的主数据。
当表的数据与键值不一致时，可以（1）复制表的数据使其与键值一一对应，变成直接访问（2）创建一个索引，与表数据对应，查询时将键值转换成索引，变成索引访问

// 保险费率根据不同年龄费率不同——不满18岁设置一个费率0.2，18-65岁设置一个费率0.4，65岁及以上设置一个费率0.6。下面为索引访问 
    const ageKey = max( min (66, age), 17)
    const rateTable = {17: 0.2, 30: 0.4, 66: 0.4}
    const rate = rateTable[ageKey]

更多举例可见：https://juejin.im/post/6844903996872720392

• 模块化

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

简单来说：就是把一坨代码写在一个文件里，其他文件需要使用的话引入这个文件就可以了`

模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。