浅析 MVC

894 阅读2分钟

1.MVC 三个对象分别做什么,给出伪代码示例

M (Model)数据模型:负责操作所有数据

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

V(View)视图:负责所有UI界面

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

C(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(){自动绑定事件}
}

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

EventBus基本的api有on(监听事件),trigger(emit)(触发事件),off(取消监听)方法。 用于模块间的通讯,view组件层面,父子组件、兄弟组件通信都可以使eventbus处理

//EventBus.js
class EventBus{
    constructor(){
        this._eventBus =$(window)
    }
    on(eventName, fn){
        return this._eventBus.on(eventName,fn)
    }
    trigger(eventName,data){
        return this._trigger.tiggger(eventName,data)
    }
    off(eventName, fn){
        return this._eventBus.off(eventName,fn)
    }
}
export default EventBus
//new.js
import EventBus from 'EventBus.js'
const e =new EventBus()
e.on()
e.trigger()
e.off()

3 表驱动编程是做什么的

表驱动法是一种编程模式,从表(哈希表)里面查找信息而不是使用逻辑语句(if…else…switch,可以减少重复代码,只将重要的信息放在表里,然后利用表来编程,与逻辑语句相比较有着更稳定的复杂度 下面这段代码相似性很高,当我们使用表驱动法后

bindEvents(){
    v.el.on('click','#add1',()=>{
    m.data.n +=1
    v.render(m.data.n)
    })
    v.el.on('click','#minus1',()=>{
    m.data.n-=1
    v.render(m.data.n)
    })
    v.el.on('click','#mul2',()=>{
        m.data.n*=2
        v.render(m.data.n)
    })
    v.el.on('click','#divide2',()=>{
        m.data.n/=2
        v.render(m.data.n)
    })
}

将事件提取出一个哈希表,使逻辑和数据清晰明了的分离开

events:{
    'click #aa1':'add',
    'click #minus1':'minus',
    'click #mul2':'mul',
    'click #divide2':'div'
},
add(){
    m.update( data: {n:m.data.n +1})
},
minus(){
    m.update( data:{n:m.data.n -1})
},
mul(){
    m.update( data: {n:m.data.n *2})
},
div(){
    m.update(data: {n:m.data.n /2})
}

4 我是如何理解模块化的

1.代码模块化之后,无论是代码的整体性还是后期进行代码维护都变的清晰简单了起来。如:与逻辑相关的代码统一放到JS文件中,与视图相关的统一放到html文件中,与样式相关的统一放到css文件中。

2.模块化可以降低代码耦合度,减少重复代码,提高代码重用性,并且在项目结构上更加清晰,便于维护。

3.一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,如果你希望外部能够读取模块内部的某个变量,就必须使用export命令输出该变量,使用import命令输入其他模块提供的功能。