浅析 MVC
MVC 三个对象分别做什么，给出伪代码示例
MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。
这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。
1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。
2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。
3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。
const m = {
data :{
time : new Date()
},
update: function(data){
m.data.time = data
}
}
//model得到数据
const v = {
el: null,
html:`<span>{{time}}<span><button id="getTime">得到时间</button>`,
init: function(container){
v.el = document.querySelector(container)
},
render: function(time){
v.el.innerHTML = v.html.replace('{{time}}',time)
},
selector:function(btn){
return document.querySelector(btn)
}
}
//view展示数据和重新渲染
const c = {
init:function(container){
v.init(container)
v.render(c.deal())
c.autoBindEvents()
},
events:{'click #getTime':'reset'},
//表驱动的数据
deal:function(){
let hour = m.data.time.getHours()
let minute = m.data.time.getMinutes()
let sec = m.data.time.getSeconds()
return `${hour}:${minute}:${sec}`
},
reset:function(){
m.update(new Date())
v.render(c.deal())
c.autoBindEvents()
},
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.selector(part2).addEventListener(part1, value)
}
}
//表驱动的功能部分
}
//control负责处理m的数据和控制m和v c.init('#app')
//往需要的html标签里写入当前时间，按钮可以更新时间
EventBus 有哪些 API，是做什么用的，给出伪代码示例
const EventBusObj = new EventBus()
const f1=(p)=>{
console.log('f1')
console.log(p)
}
const f2=(p)=>{
console.log('f2')
console.log(p)
}
//注册
EventBusObj.$on('event1',f1)
//监听一次
EventBusObj.$once('event1',f2)
//触发
EventBusObj.$emit('event1',{a:1})
//移除event1的f1方法
EventBusObj.$remove('event1',f1)
表驱动编程是做什么的（可以自己查查资料）
代码大全》对表驱动编程的描述：
表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。
表驱动编程的意义在于逻辑与数据的分离。（类似于事件委托）
例如：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];
}
我是如何理解模块化的
模块化编程我的理解就是把需要的代码按照其功能分割开，这样必要时可以复用，代码可以不用揉在一起，难以管理和修改。
