浅析 MVC

一、什么是MVC？

M是modal(数据模型)的简称，它是用于操作所有数据

const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))
  },
  create(){},
  delete(){},
  update(data){
    Object.assign(m.data,data) //data有什么属性就放到m.data上
    eventBus.trigger('m:updated')//eventBus触发'm:update'信息，通知View刷新界面
    localStorage.setItem('n', m.data.n)
  },
  get(){}//获取数据
}

V是view(视图)的简称，它是用于负责所有UI界面

const v = {
  el: null,//要刷新的元素
  //要显示在页面上的内容
  html: `
    <div>
      <div class="output">
        <span id="number">{{n}}</span>
      </div>
      <div class="actions">
        <button id="add1">+1</button>
        <button id="minus1">-1</button>
        <button id="mul2">*2</button>
        <button id="divide2">÷2</button>
      </div>
    </div>
  `
,
  init(container) {
    v.el = $(container)//需要刷新的元素
  },
  render(n) {
//刷新页面
    if(v.el.children.length !== 0) v.el.empty()
    $(v.html.replace('{{n}}', n))
      .appendTo(v.el)
    }
}

C是controller（控制器）的简称，它负责其他

const c = {
  init(container) {
    v.init(container)//初始化View
    v.render(m.data.n) // view = render(data)
    c.autoBindEvents()//自动的事件绑定
//当enentsBus触发'm:update'是View刷新
    eventBus.on('m:updated', () => {
      v.render(m.data.n)
    })
  },
  events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  add() {
    m.update({n: m.data.n + 1})
  },
  minus() {
    m.update({n: m.data.n - 1})
  },
  mul() {
    m.update({n: m.data.n * 2})
  },
  div() {
    m.update({n: m.data.n / 2})
  },
  autoBindEvents() {
    for (let key in c.events) {
      const value = c[c.events[key]]
      const spaceIndex = key.indexOf(' ')
      const part1 = key.slice(0, spaceIndex)
      const part2 = key.slice(spaceIndex + 1)
      v.el.on(part1, part2, value)
    }
  }
}

这是通过MVC重构后的代码，目前看起来并没有简洁很多，但至少使你的代码不再是面条式的，接下来说说代码中用到的EventBus

二、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.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…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 #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})
}

四、我是如何理解模块化的

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。这则就是模块化。模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

最后编辑于：2020.02.18 21:44:11