MVC 是什么
M -- 数据模型， 负责操作所有数据
V -- 视图 ，负责所有 UI 界面
C -- 控制器，负责其他
伪代码示例
Model
let Model = {
data: { 程序需要操作的数据或信息 }，
create: { 增数据 },
delete: { 删数据 },
update(data) {
Object.assign(m.data, data) //使用新数据替换旧数据
eventBus.trigger('m:upate') // eventBus触发'm:update'信息, 通知View刷新
},
get:{ 获取数据 }
}
View
let View = {
el: 需要刷新的元素,
html: `<h1>M V C</h1>....显示在页面上的内容`
init(){
v.el: 需要刷新的元素
},
render(){ 刷新页面 }
}
Controller
let 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基本的api有on（监听事件），trigger(emit)（触发事件）,off（取消监听）方法。
- 用于模块间的通讯，view组件层面，父子组件、兄弟组件通信都可以使eventbus处理
可以用jquery
const eventBus = $({window})
//触发事件：注意事件名不能有空格
eventBus.trigger('m:update')
//监听事件
eventBus.on('m:update',()=>{ //名字不能有空格
v.render(m.data.n)
localStorage.setItem('x', m.data.n)
})
表驱动编程
表驱动编程是什么
- 表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)
- 表驱动编程是一种很重要的编程思想，它的理念是从大量相似的代码中抽取出本质的东西，组成哈希表，利用表进行编程，以减少重复代码
- 事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂，查表法也就愈发显得更具吸引力
const c = {
events: { //哈希表
'click #add1':'add',
'click #minus1':'minus',
'click #mul2':'mul',
'click #divide2':'divide'
},
add() {
m.update({n:m.data.n += 1})
},
minus() {
m.update({n:m.data.n -= 1})
},
mul() {
m.update({n:m.data.n *= 2})
},
divide() {
m.update({n:m.data.n /= 2})
},
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) //通过遍历哈希表监听事件
}
}
}
我眼中的模块化
模块化就是一种封装，在有很多全局变量的时候，我们可能会考虑避免环境污染，用函数封装起来，当函数多起来了，我们又会考虑用一个对象封装起来，暴露一些方法出来，在一个 js文件功能比较杂的时候，我们就又思考该怎么让文件内容变得简单易读，模块化就应该由此而生吧，将各个功能相关的代码写到一个模块里，各个模块各司其职项目结构更清晰，模块化可以降低代码的耦合度，方便代码优化和代码重构，提高了代码的重用性，便于后期维护。
