我所理解的MVC

1. MVC 三个对象

MVC即 Model+View+Controller ，其中

• M-Model数据模型：负责操作所有数据

//示例
let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息，通知View刷新界面
    },
    get:{获取数据}
}

• V-View视图：负责所有UI界面

//示例
let View={
    el:要刷新的元素，
    html：'要显示在页面上的内容'
    init(){
        v.el:需要刷新的元素
    }，
    render(){
        刷新页面
    }
}

• C-Controller控制器：负责其他

//示例
let Controller={
    init(){
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    }，
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    },
    autoBindEvents(){自动绑定事件}
}

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

EventBus基本的api有on（监听事件），trigger(emit)（触发事件）,off（取消监听）方法。
用于模块间的通讯，view组件层面，父子组件、兄弟组件通信都可以使eventbus处理

//EventBus.js
class EventBus {
    constructor() {
        this._eventBus = $(window)
    }
    on(eventName, fn) {
        return this._eventBus.on(eventName, fn)
    }
    trigger(eventName, data) {
        return this._trigger.trigger(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()
e.on()
e.trigger()
e.off()

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 #add1' : '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})
}

上面的这种利用表格关系的代码就等价于我们一开始的代码，但是这种逻辑结构更清晰

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

1. 当一个html文件需要实现多个功能的时候，我们可以把每个功能抽象成一个模块，针对每一个功能开发不同的模块，这使得模块可以独立开发，在工作中，不同的模块也就可以交由不同的开发人员。
2. 而且在开发中我们也会用到一些共同API，这个时候我们也可以把这些抽离成一个公用模块，当需要引用这个函数或者功能的时候，只需要在相应的模块里面用import导入相应的包。
3. so模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案，一个模块就是实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块
4. 模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

• 模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能
• 一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

1、export

image.png

模块功能主要由两个命令构成：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能
　　一般来说，一个模块就是一个独立的文件，该文件内部的所有变量，外部无法获取，如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量

2、import

image.png

import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，必须与被导入模块对外接口的名称相同
　　关于import其实还有很多用法，具体的大家可以查看相关的文档
3、import与import
通过export方式导出，在导入时要加{ }，export default则不需要
在一个文件或模块中，export、import可以有多个，export default仅能有一个

image.png
image.png