浅析 MVC

162 阅读1分钟

MVC

MVC基本结构

MVC是一种,优化界面万金油设计模式。设计模式,即给代码取个名字

M-Model-数据模型

负责操控数据,如:

localStorage.getItem('n')

V-View-视图

UI界面相关,如HTML:

template: `
      <section>
        <div class="output">
          <span id="number">{{n}}</span>
        </div>
        <div class="actions">
          <button @click="add">+1</button>
          <button @click="minus">-1</button>
          <button @click="mul">*2</button>
          <button @click="div">÷2</button>
        </div>
      </section>
    `

C-Controller-控制器

负责其他部分,比如页面事件

this.el.on(part1, part2, value)

EventBus

EventBus用于事件通信,提供了on(监听事件),off,trigger(触发事件)等api。

this._eventBus.on(eventName, fn)
this._eventBus.trigger(eventName, data)
this._eventBus.off(eventName, fn)

表驱动编程

数据驱动编程,将数据抽离出来,形成列表。遍历数据,进行操作。

如:www.jianshu.com/p/4670a6183…

模块化

现代JavaScript框架和库的核心概念是能够将数据和UI封装在模块化、可重用的组件中。这对于开发人员可以在开发整个应用程序时避免使用编写大量重复的代码。模块化同时涉及到组件之间的数据通讯,也就是Eventbus。