浅析 MVC

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

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果。

这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

const m = {   data :{     time : new Date()   },   update: function(data){     m.data.time = data   } } //model得到数据<br> 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) 　　}<br>} //view展示数据和重新渲染<br> const c = {   init:function(container){     v.init(container)     v.render(c.deal())     c.autoBindEvents()   },   events:{'click #getTime':'reset'},<br>//表驱动的数据   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)     }   }//表驱动的功能部分}<br>//control负责处理m的数据和控制m和v c.init('#app')<br>//往需要的html标签里写入当前时间，按钮可以更新时间

　　

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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)<br><br>//监听一次 <br>EventBusObj.$once('event1',f2)         //触发 <em id="__mceDel">EventBusObj.$emit('event1',{a:1}) </em>//移除event1的f1方法 <em id="__mceDel">EventBusObj.$remove('event1',f1)   </em>

　　

表驱动编程是做什么的（可以自己查查资料）

　　代码大全》对表驱动编程的描述：

表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

　　表驱动编程的意义在于逻辑与数据的分离。（类似于事件委托）

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

例如：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]; }

　　

我是如何理解模块化的

　　模块化编程我的理解就是把需要的代码按照其功能分割开，这样必要时可以复用，代码可以不用揉在一起，难以管理和修改。