关于MVC
MVC是一种设计模式，它将应用划分为3个部分：
- Modle数据(模型)
- View展示层(视图)
- Controller用户交互层
每个模块都可以写成三个对象，分别是M、V、C。
- M-Model（数据模型）负责操作所有数据和服务器进行交互，将请求到的数据传给Controller。
- V-View（视图）负责所有 UI 界面，HTML 渲染。
- C-Controller（控制器）负责监听并处理View 的事件，更新和调用 Model；也负责监听 Model的变化（Model从服务器获得数据），并更新 View。Controller 控制其他所有流程。
三者关系如图：
mvc伪代码
const m = {//数据层，关于数据的操作放在这里
data:{
n:parseInt(localStorage.getItem('number')||100)
},//数据初始化
update:function (data) {
//更新数据的方法
},
delete:function (data) {
//删除数据的方法
},
get:function (data) {
//获得数据的方法
}
}
const v = {//视图层，关于视图的操作放在这里
el:'挂载点',
html:'需要插入元素内的HTML内容',
render('渲染html')
}
const c = {//控制层，关于事件监听的放到这里
//找到重要的元素绑定事件
//如果触发事件调用更改数据方法及渲染方法
const a =$('找到A')
const b = $('找到B')
b.on('click',function(){
//调用数据层方法更改数据
//调用视图层方法渲染页面
})
}
EventBus 的 API
当一个事件执行，eventBus 触发 m:updated eventBus.trigger('m:updated')
eventBus 监听 m:updated，当 m:updated 触发时，执行一些内容
eventBus.on('m:updated',()=>{
v.render(m.data.n)
})
表驱动编程是做什么的
表驱动方法编程（Table-Driven Methods）是一种编程模式。
适用场景：消除代码中频繁的if else或switch case的逻辑结构代码,使代码更加直白。
表驱动编程的方法
- 发现大批类似但不重复的代码
- 发掘里面是重要的数据
- 把重要的数据做成哈希表，代码会简单很多
- 这是数据结构知识的好处
表驱动编程的代价
没有代价。
c = {
events:{
'click #add1':'add',
'click #minus1':'minus',
'click #mul2':'mul',
'click #divide2':'div'
},
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.el.on(part1,part2,value)
}
}
}
我理解的模块化
- 将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。
- 模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。这则就是模块化。
- 模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。
