浅析MVC
MVC 三个对象分别做什么,给出伪代码示例
MVC(Model-View-Controller)是一种架构模式,是一种思想理念,并不是一种技术,塔通过关注点分离鼓励改进应用程序组织
其中:
M-Model 用于封装与应用的业务逻辑相关的数据以及对数据的处理方法,会有一个或多个视图监听此模型,与数据有关的就放在M里面
let Model={
data:{},
create:{},
delete:{},
update(data){
Object.assign(m.data,data)//用新数据替换旧数据
eventBus.trigger('m:update')//eventBus触发'm:update'信息,通知View刷新界面
},
get:{}
}
V-View 实现了M里数据的展示,展现了Model的当前状态,当模型里的数据发生变化时,视图相应地会刷新自己,与视图相关地放在V里面
let View={
el:el,
html:''//html
init(){
v.el://elments
},
render(){
}
}
C-Controller 定义用户界面对用户输入地响应,起到承上启下的作用,用于控制应用的流程
,除了M和V的内容放在C里面
let Controller={
init(){
v.init()
v.render()
c.autoBindEvents()
eventBus.on('m:update',()=>{v.render()}
},
events:{//hashtable},
method(){
data=data
m.update(data)
},
autoBindEvents(){}
}
EventBus有哪些API,作用是
EventBus的作用是用来实现对象间的通信
EventBus基本的3个API是 on, trigger(emit),off, 作用分别是监听事件,触发事件,取消监听
const eventBus = $(window)
const m = {
data: {
...
},
update(data) {
eventBus.trigger('m:updated')
}
}
const v = {
render(data) {
...
}
}
const c = {
eventBus.on('m:updated', () => {
v.render(m.data.n)
})
}
表驱动编程是做什么的
表驱动编程是通过哈希表来优化代码,可以将大量重复的代码进行剥离,从而达到模块化的处理
Before:
$('#el1').on('事件A', fn1)
$('#el2').on('事件B', fn2)
$('#el3').on('事件C', fn3)
$('#el4').on('事件D', fn4)
$('#el5').on('事件E', fn5)
After:
const events = {
"#el1 事件A": "fn1",
"#el2 事件B": "fn2",
"#el3 事件C": "fn3",
"#el4 事件D": "fn4",
"#el5 事件E": "fn5"
}
const eventFunctions = {
fn1: function() {},
fn2: function() {},
fn3: function() {},
fn4: function() {},
fn5: function() {}
}
function autoBindEvents() {
for(let key in events) {
const spaceIndex = key.indexOf(' ')
const el = key.splice(0, spaceIndex)
const event = key.splice(spaceIndex+1)
const fn = eventFunctions[events[key]]
$(el).on(event, fn)
}
}
如何理解模块化的
我理解里的模块化是一种封装的思想,将大量的代码封装成几个模块,不同模块之间负责不同的工作,各个模块直接按协调完成一个项目,对于日后的优化和重构都非常重要