【前言】

MVC是一种架构设计模式，它通过关注点分离鼓励改进应用程序组织。在过去，MVC被大量用于构建桌面和服务器端应用程序，如今Web应用程序的开发已经越来越向传统应用软件开发靠拢，Web和应用之间的界限也进一步模糊。传统编程语言中的设计模式也在慢慢地融入Web前端开发。由于前端开发的环境特性，在经典MVC模式上也引申出了诸多MV*模式，被实现到各个Javascript框架中都有多少的衍变。

【目录】

MVC 三个对象分别做什么，给出伪代码示例
EventBus 有哪些 API，是做什么用的，给出伪代码示例
表驱动编程是做什么的
我是如何理解模块化的

【正文】

1.MVC 三个对象分别做什么，给出伪代码示例

模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。
视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。
控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

class Model={
    data(){}    		//保存数据
    //管理数据的用法
    create(){}  		//增加数据
    remove(){}  		//删除数据
    update(){}			//改变数据
    get(){}					//查看数据
}


class View={
    //管理元素，
  	el
   //管理HTML
 	 	html：
    init(){
    //需要刷新的元素
     v.el:
    }，
    //页面渲染
    render(){
        
    }
}

class Controller {
    // 初始化相关操作
    init() {}
    
    // 用户操作的事件
    events
  
    // 绑定事件，响应用户操作
    bindEvent() {}
}

2.EventBus 有哪些 API? 是做什么用的?

EventBus作用：用于模块间的通讯， view 组件层面，父子组件、兄弟组件通信都可以使 eventbus 处理,eventBus 是一种公交车（bus就是巴士，公交的意思）

//EventBus.j代码
class EventBus{
    constructor(){
        this._eventBus =$(window)
    }
    on(eventName, fn){
        return this._eventBus.on(eventName,fn)
    }
    trigger(eventName,data){
        return this._trigger.tiggger(eventName,data)
    }
    off(eventName, fn){
        return this._eventBus.off(eventName,fn)
    }
}
export default EventBus


//new.js代码
import EventBus from 'EventBus.js'
const e =new EventBus()

on监听事件
off取消监听
trigger(emit)触发事件

e.trigger('m:updated') // 触发事件
e.on('m:updated', () => { console.log('here') }) '监听事件，听到后执行函数'

3.表驱动编程是做什么的？

表驱动法是一种编程模式，从表(哈希表)里面查找信息而不是使用逻辑语句（if…else…switch，可以减少重复代码，只将重要的信息放在表里，然后利用表来编程，与逻辑语句相比较有着更稳定的复杂度。

bindEvents(){
    v.el.on('click','#add1',()=>{
    m.data.n +=1
    v.render(m.data.n)
    })
    v.el.on('click','#minus1',()=>{
    m.data.n-=1
    v.render(m.data.n)
    })
    v.el.on('click','#mul2',()=>{
        m.data.n*=2
        v.render(m.data.n)
    })
    v.el.on('click','#divide2',()=>{
        m.data.n/=2
        v.render(m.data.n)
    })
}

使用表驱动取出一个时间的哈希表，清晰的分明了数据和逻辑。


events:{
    'click #aa1':'add',
    'click #minus1':'minus',
    'click #mul2':'mul',
    'click #divide2':'div'
},
add(){
    m.update( data: {n:m.data.n +1})
},
minus(){
    m.update( data:{n:m.data.n -1})
},
mul(){
    m.update( data: {n:m.data.n *2})
},
div(){
    m.update(data: {n:m.data.n /2})
}

autoBindEvents() {
    for (let key in events) {
      const value = events[key]
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      this.el.on(part1, part2, value)
    }
  }

4.我是如何理解模块化的

模块化的理解：

模块化是将文件一个一个的封装起来放在一个个的模块中去，只留下必须要的接口拱其使用。

为什么要模块化？

符合最小知识原则，使用某个功能时，只需引入其模块的接口
各个模块间互不干涉，维护性高，它的每个封装模块都是独立的。每次要去改编或者提出其他需求搄更改不会影响其他的文件内容。
它的复用性很高，一个封装的模块能够被反复多次的调用，省去了重复编写的时间。
样式统一的模块化方便日后工作时期同事间相互查看和使用，不然乱糟糟的代码放在一起，迟早呗喷死，切勿忽略模块化的使用。

//导出
export default View
//导入
import View from './View.js'

初识 MVC