mvc
MVC是三个字母Model（模型）, View（视图）, Controller（控制）的缩写，它是一种设计模式。 这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三类对象。
- model中封装了与程序有关的数据及其方法
Model = {
data: { 程序需要操作的数据或信息 }，
create: { 增数据 },
delete: { 删数据 },
update(data) {
Object.assign(m.data, data) //使用新数据替换旧数据
eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新
},
get:{ 获取数据 }
}
- View是对数据的展示，展示的内容就是Model中的data
View = {
el: 需要刷新的元素,
html: `<div>...</div>`
init(){
v.el: 需要刷新的元素
},
render(){ 刷新页面 }
}
- Controller用于控制数据的改变，对用户输入做出响应等
Controller = {
init(){
v.init() // View初始化
v.render() // 第一次渲染
c.autoBindEvents() // 自动的事件绑定
eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
},
events:{ 事件以哈希表方式记录 }，
method() {
data = 改变后的新数据
m.update(data)
}，
autoBindEvents() { 自动绑定事件 }
}EventBus
EventBus
EventBus的作用
EventBus可以用来进行组件之间的监听和通信。
EventBus的一些常用api
- on（监听事件）
- trigger（触发事件）
- off（取消监听）
表驱动编程
表驱动法是一种编程模式，从表(哈希表)里面查找信息来代替复杂的逻辑语句
events:{ // 事件集合的哈希表
'click #app1': 'a操作'，
'click #app2': 'b操作'，
'click #app3': 'c操作'，
'click #app4': 'd操作'，
}
autoBindEvents() { // 通过哈希变自动绑定事件
for ( let key in c.events) {
if ( c.events.hasOwnProperty(key) ) {
const spaceIndex = key.indexOf(' ') // 找到'click #app1'空格的数组下标
const part1 = key.slice(0, spaceIndex) // 通过spaceIndex 分割 'click' 和 '#app1'
const part2 = key.slice(spaceIndex + 1)
const value = c[c.events[key]]
v.el.on(part1, part2, value) // 自动把多个事件绑定在一个元素上
}
}
}
关于模块化
在一个完整的web页面中，通过不同节点的功能，结构的不同，可以分出多个模块，而每个模块的实现方式和使用的技术等等都不相同，引入模块化，可以切断每个模块的相互影响，使得单个模块中可以更好的优化代码。
模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护
