浅析 MVC

160 阅读2分钟

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 })
},

在使用表驱动编程必须要确定是如何查表。

我是如何理解模块化的

把代码封装起来等别人调用。标准化,在结构上更清晰明确。可维护性高,一个地方动不会影响其他地方。降低耦合度,减少重复代码,提高代码的复用性。