浅析 MVC

王振涛wzt
98 阅读2分钟

一 . MVC 三个对象

(1）模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。

const m = { 
data: {}, 
create() {增 },
delete() { 删}, 
update() {改}, 
get() {查} }

(2）视图view是它在屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。

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

(3）控制器controller定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，它处理用户的行为和数据model上的改变。

const c = {
    init(container) {})
    }, 
    events: { 事件}, 
    add() {详细执行},
    minus() {详细执行},
    mul() {详细执行},
    div() {详细执行},
    autoBindEvents() {逻辑}
    }
}

二 . EventBus 有哪些 API，是做什么用的？

EventBus基本的api有on（监听事件）,off（取消监听）,trigger(emit)（触发事件）方法。 用于模块间的通讯，view组件层面，父子组件、兄弟组件通信都可以使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

三 . 表驱动编程是做什么的？

表驱动法是一种编程模式，从表里面查找信息而不是使用逻辑语句（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})
}

四 . 我是如何理解模块化的？

我的理解就是让代码变得更简洁，在面对类似需求的时候，模块化的代码可以让我们的开发变得更加方便。将一个整体的项目进行拆分，每个文件之间进行引用，增加了代码的可读性，就算代码不是自己写的，但是每个文件层次分明理解起来也会变得更容易。

在经典MVC中，一对controller-view捆绑起来表示一个ui组件，controller直接接受用户输入，并将输入转为相应命令来调用model的接口，对model的状态进行修改，最后通过观察者模式对view进行重新渲染。这样做的好处在于:

  • 避免变量污染，命名冲突
  • 提高代码复用率
  • 提高维护性
  • 依赖关系的管理
avatar
文章
阅读
粉丝