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