MVC
M model 处理数据（页面相关data）
V view 处理视图相关(DOM)
C controller 其他（将DOM和data组织联系起来，例如绑定事件）
const m={
data :{
num:1,
}
}
const v={
input:$('input')//获取框输入内容
output:$('span')//展示处理新的结果
}
const c ={
v.input.on('input',()=>{
m.data.num = v.input.val()+1
v.output.text(m.data.num)
})
}
以上就利用mvc模式简单地实现了输入框输入数字多少，就在输入框外面span展示数字的功能。这样的好处是代码解耦，m只需要关注页面有哪些
数据，v只处理dom,c只负责将mv组织联系，比如如果下一次页面需求更改，展示处理新的结果要用p标签存放，直接在v里面修改新的存放容器就可以了，不用修改重新在绑定事件里面修改获取$('p')
const v={
$input:：$('input')//获取框输入内容
output:$('p')//展示处理新的结果
}
EventBus 的API以及作用
主要api有
| jQuery | Vue | 作用 |
|---|---|---|
| on() | $on() | 绑定自定义事件 |
| trigger() | $emit | 触发自定义事件 |
| off() | $off | 解绑事件 |
EventBus用于对象之间的通信，比如在mvc的例子中，为了尽可能的解耦，c中不直接操作v的数据,比如c中这一行v.output.text(m.data.num)，在v里面通知c一旦m.data.num更新，result就要展示新的结果，用EventBus实现如下。
const EventBus =$(window)//一个全局对象，可以拿到互相通信对象的状态
const m={
data :{
num:1,
}
}
const v={
input:$('input')//获取框输入内容
output:$('span')//展示处理新的结果
eventBus.on('num:updated',()=>{
v.output.text(m.data.num)
})
}
const c ={
v.input.on('input',()=>{
m.data.num = v.input.val()+1
eventBus.trigger('num:updated')
//一旦m.data.num 更新触发`'num:updated'`事件,让v获取最新的m.data.num
})
}
表驱动编程是做什么的
表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。——《代码大全2》Table-DrivenMethods 表驱动法
表驱动编程目的在逻辑和数据分离，减少重复代码。比如给页面元素绑定事件，可以把dom元素和对应需要绑定的事件以及处理存在一个哈希表里面，然后利用事件委托给哈希表中所有dom元素的父级元素绑定事件
let eventHash={
'input input':getNum,
' click': addNum,
'div click': showColor
}
function getNum(){},
function addNum(){},
function showColor(){}
for (let key in eventHash) {
const value = eventHash[key]
const spaceIndex = key.indexOf(' ')
const part1 = key.slice(0, spaceIndex)
const part2 = key.slice(spaceIndex + 1)
【input、button、div公共父元素】.on(part1, part2, value)
//这里利用事件委托给父元素绑定
}
模块化就是讲一个页面的功能划分成各个小模块，每一个小模块下代码单独实现再export出去,然后在需要该功能的页面按需import。模块化的目的就是解耦，对于外层引入的一方不需要知道这个模块内部功能代码实现的细节，对于小模块只需要export一个入口(可以是变量，对象，函数等)即可
网友评论