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

MVC

MVC (Model-View-Controller) 是一种软件设计模式.它强调分离软件的业务逻辑和显示. 这种“分离”提供了更好的分工和改进的维护. 一些其他的模式也是基于MVC来设计的, 像 MVVM (Model-View-Viewmodel), MVP (Model-View-Presenter), 和 MVW(Model-View-Whatever).

1.MVC软件设计模式的三个部分

• Model: 模型持有所有的数据、状态和程序逻辑.
• View: 负责界面的布局和显示.
• Controller: 负责模型和界面之间的交互.

基本流程：View 传送指令到 Controller,Controller 完成业务逻辑后，要求 Model 改变状态,Model 将新的数据发送到 View，用户得到反馈.

三个部分的伪代码实现

Model模型层
获取数据n，初始化增删改查四个API，用于后期操作数据。const m = {data: {n: parseInt(localStorage.getItem('n'))},//获取数据create() {},//增delete() {},//删update(data) {//改Object.assign(m.data, data)//使用新数据替换旧数据eventBus.trigger('m:updated')// eventBus触发'm:update'信息, 通知View刷新 localStorage.setItem('n', m.data.n)},get() {}
}//查
}

View视图层
视图主要用于渲染页面，所以我们将html的内容放到V里。
const v = {el: null,//接受一个容器html: `//生成HTML<div><div class="output"><span id="number">{{n}}</span></div><div class="actions"><button id="add1">+1</button><button id="minus1">-1</button><button id="mul2">*2</button><button id="divide2">÷2</button></div></div>
`,init(container) {v.el = $(container)},//初始化容器render(n) {if (v.el.children.length !== 0) v.el.empty()$(v.html.replace('{{n}}', n)).appendTo(v.el)}//通过if else判断容器的后代是否存在进行增删，最后渲染到页面
}

Controller控制层
C里面主要是放一些事件的操作，如：click、on等等。const c = {
//初始化容器init(container) {v.init(container) // View初始化v.render(m.data.n) //  第一次渲染view = render(data)c.autoBindEvents()//自动绑定事件eventBus.on('m:updated', () => { // 当eventBus触发'm:update'时View刷新console.log('here')v.render(m.data.n)})//监听数据的变化，重新渲染到页面},
//事件太多，通过哈希表来一一列出，也正是我们所说的表驱动编程events: {'click #add1': 'add','click #minus1': 'minus','click #mul2': 'mul','click #divide2': 'div',},
//每个事件点击对应着数据变化的操作函数add() {m.update({n: m.data.n + 1})//data = 改变后的新数据 m.update(data)},minus() {m.update({n: m.data.n - 1})},mul() {m.update({n: m.data.n * 2})},div() {m.update({n: m.data.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)}}
}
export default c

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

其中model和view之间不再通信，而是通过presenter这个中介来实现交互，此时代码大部分分布在presenter上

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 没有区别。

唯一的区别，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。Angular 和 Ember 都采用这种模式。

2.EventBus 有哪些 API，是做什么用的，给出伪代码示例

EventBus可以称作观察者设计模式，在Android下可以高效的发布/订阅事件。作用是可以代替传统Intent,Handler,Broadcast或接口函数在Fragment,Activity,Service,线程之间传递数据，执行方法。解决模块之间通信的问题，view组件层面，父子组件、兄弟组件通信都可以使eventbus处理。特点就是代码简洁。

DOM 的事件机制就是发布订阅模式最常见的实现，这大概是前端最常用的编程模型了，监听某事件，当该事件发生时，监听该事件的监听函数被调用。eventBus就是实现发布订阅模式的一种方法。

其实jquery和vue构造出来的对象都有监听事件的方法，我们只需要构造一个对象，然后调用他的on 和 trigger方法就可以实现组件之间的通信

下面介绍几个vue常用的事件api及其内部实现

on（监听事件） trigger（触发事件） off（取消监听） eventBus.trigger(‘m:updated’)
//触发事件,大叫’m 已经更新了’
eventBus.on(‘m:updated’, () => { console.log(‘here’) }) ‘监听事件，听 到后执行函数’

• $on 事件的订阅

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

• $off 事件的解绑

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

• $emit 事件的触发

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

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

示例代码function age(name){if(name==="小明"){console.log("年龄是"+10)}else if(name==="小白"){console.log("年龄是"+14)}else if(){}....
}

假如我们要写一个查询年龄的函数，如果用if else代码量是线性增长的。但用哈希表来记录这些映射关系会简单很多

const list={"小明":10,"小白":14,//等等...
}
function age2(name){if(name in list){console.log(name+"的年龄是"+list[name])}else{console.log("查无此人")}
}

数据部分被抽离了，分工明确。函数主体只是去表中查找然后输出结果，这就是表编程的基本思想。

4.如何理解模块化

模块化（modular）编程，是强调将计算机程序的功能分离成独立的、可相互改变的“模块”（module）的软件设计技术，它使得每个模块都包含着执行预期功能的一个唯一方面（aspect）所必需的所有东西。

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

前端流行的模块化规范有CommonJS，AMD，CMD，ES6的import／export。

• CommonJS的主要实践者就是nodejs,一般对模块输出用module.exports去输出，用require去引入模块，CommonJS一般采用同步加载【require
  / module.exports / exports】
• AMD遵从RequireJs规范，推崇依赖前置（提前执行）【require / defined】
• CMD遵从SeaJs规范，推崇依赖就近（延迟执行）【require / defined】
• ES6 可静态分析，提前编译，不是在运行时确认【import / export】