MVC 三个对象分别做什么,给出伪代码示例
MVC的翻译是Model数据模型、View视图、Controller控制器
Model数据模型
负责所有的数据处理
const m = {
data:{},//处理的数据
add:{},//增
remove:{},//删
update:{},//改
get:{},//查
}
View视图
对HTML渲染
const v ={
el:null,
html:``,
init(container){初始化
v.el = $(container)
},
render(){}
}
Controller控制器
对节点标签绑定事件或动画
const c = {
init(container) {
v.init(container)//初始化
v.render(m.data.n)//渲染
c.autoBindEvents()//绑定事件
eventBus.on('m:updated', () => {//eventBus监听
v.render(m.data.n)
})
},
events: {
'click .add1': 'add',
'click .del': 'remove',
},
autoBindEvents() {
for (let key in c.events) {//表驱动编程,给对应的class绑定事件
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)
}
}
EventBus 有哪些 API,是做什么用的,给出伪代码示例
EventBus事件通讯
on监听 off取消监听 trigger触发
eventBus.on('m:updated',fn)
eventBus.off('m:updated',fn)
eventBus.trigger('m:updated')
表驱动编程是做什么的(可以自己查查资料)
表驱动编程其实就想数学用表一样,根号2等于多少,根号3等于多少。
举个例子
有一个数组[1,2,5,0,4,3,5]要求返回对应的星期几,0返回星期天
['星期一','星期二','星期五','星期天','星期四','星期三','星期五']
function getWeek(array){
const week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
for(let i=0;i<array.length;i++){
console.log(array[i])
array[i] = week[array[i]]
}
return array
}
在举个例子
events: {
'click .add1': 'add',
'click .del': 'remove',
},
add() {
m.update({ n: m.data.n + 1 })
},
remove() {
m.update({ n: m.data.n + 1 })
},
在使用表驱动编程必须要确定是如何查表。
我是如何理解模块化的
把代码封装起来等别人调用。标准化,在结构上更清晰明确。可维护性高,一个地方动不会影响其他地方。降低耦合度,减少重复代码,提高代码的复用性。