浅析MVC

242 阅读2分钟

一、MVC 三个对象分别做什么

MVC是三个字母的缩写,分别是Model(数据模型)、View(用户视图)和Controller(控制),这是一种抽象思维。
model:负责操作数据

let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息,通知View刷新界面
    }
    get:{获取数据}
}

View:负责所有视图表现

let View ={
    el:要刷新的元素,
    html:'要显示在页面上的内容'
    init(){
        v.el:需要刷新的元素
    },
    render(){
        刷新页面
    }
}

Controller:负责控制及其他

let Controller={
    init(){
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()})
        //当enentsBus触发'm:update'是View刷新
    },
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    },
    autoBindEvents(){自动绑定事件}
}

二、EventBus 有哪些 API,是做什么用的,给出伪代码示例

EventBus基本的API有on(监听事件)、trigger(emit)(触发事件)、off(取消监听),用于模块间的通讯。

eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件,听到后执行函数'

三、表驱动编程

表驱动法是一种编程模式,从表(哈希表)里面查找信息而不是使用逻辑语句(if…else…switch),当是很简单的情况时,用逻辑语句很简单,但如果逻辑很复杂,再使用逻辑语句就很麻烦了。

// 举个栗子
events:{  // 事件集合的哈希表
   'click #app1': 'a操作''click #app2': 'b操作''click #app3': 'c操作''click #app4': 'd操作',
} 
autoBindEvents() { // 通过哈希变自动绑定事件
    for ( let key in c.events) {
        if ( c.events.hasOwnProperty(key) ) {
            const spaceIndex = key.indexOf(' ')   // 找到'click #app1'空格的数组下标
            const part1 = key.slice(0, spaceIndex) // 通过spaceIndex 分割 'click' 和 '#app1'
            const part2 = key.slice(spaceIndex + 1)
            const value = c[c.events[key]]
            v.el.on(part1, part2, value)  // 自动把多个事件绑定在一个元素上
        }
    }
}
// 如何一来在稳定的复杂度里,可以绑定多个事件

四、我对模块化的理解

通过使用类、继承等多种方法将代码的设计成较为独立的模块,可以降低代码重复率,不让各个模块联系太紧密,造成修改一处代码有牵一发而动全身的感觉,各个模块相互独立,互不影响,使得项目结构清晰,便于维护。