MVC 三个对象

M:model（模型）负责操作数据与服务器的交互，将请求到的数据传给control
V:View （视图）负责所有UI界面，比如el,templete，render
C:controller（控制器）负责其他,比如初始化和事件,负责监听和处理View事件，并更新和调用 Model,负责监听Model数据变化，并更新View

/** 模擬 Model, View, Controller */
var M = {}, V = {}, C = {};

/** Model 負責存放資料 */
M.data = "hello world";

/** View 負責將資料輸出到螢幕上 */
V.render = (M) => { alert(M.data); }

/** Controller 作為一個 M 和 V 的橋樑 */
C.handleOnload = () => { V.render(M); }

/** 在網頁讀取的時候呼叫 Controller */
window.onload = C.handleOnload;

const m={
  data={},
  create(){},
  delete(){},
  update(){},
  get(){}
}

const v={
  el:null,
  html:`代码`,
  init(container){
    v.el=$(container)
  },
  render(n){}
}

const c={
  init(constainer){}
  events:{事件}
  add(){执行}
  minus(){执行}
  update(){执行}
  get(){执行}
  autoBindEvents(){逻辑}
}

EventBus

什么是EventBus?

简单的说，就是一个以事件为驱动的消息服务总线，是一种设计模式或框架，主要用于组件/对象间通信的优化简化。

Web平台运行期为什么要用EventBus？

便于业务逻辑解耦
提供丰富的扩展点，包括前扩展、后扩展和覆盖
使用事件驱动，让事件触发更加清晰
让代码更加简洁清楚

Web平台运行期在那些地方使用了EventBus？

业务逻辑调度中心，包括前端、Web服务端任何地方
通过EventBus集成各种超类、模板、页面
通过EventBus集成各种系统服务与业务组件

EventBus 有哪些 API?

on : 监听事件
trigger(emit) : 触发事件
off : 取消监听

//EventBus.js
class EventBus {
    constructor() {
        this._eventBus = $(window)
    }
    on(eventName, fn) {
        return this._eventBus.on(eventName, fn)
    }
    trigger(eventName, data) {
        return this._trigger.trigger(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()

表驱动编程

表驱动编程方法是一种使你可以在表中查找信息，而不必用很多的逻辑语句（if或Case）来把它们找出来的方法。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，复杂度也会越来越高。表就可以减少重复代码，只将重要的信息放在表里，然后利用表来编程，与逻辑语句相比较有着更稳定的复杂度。

没有使用表驱动编程的代码

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 #add1' : '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})
}

会发现通过表驱动编程之后代码逻辑变的更为清晰简洁了。

我是如何理解模块化的？

模块化就是把一个模块的代码放在一个文件夹里，再进行引入，简化了代码之间的影响

let string=`内容`
import default string//导出

import $ from `string`//引入

浅析MVC