浅析 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];
}

　　

我是如何理解模块化的

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