MVC初探

MVC 三对象功能与代码示例

MVC包括三类对象：模型Model、视图View、控制器Controller。

• 模型Model：用于封装与应用程序的业务逻辑相关的数据以及数据的处理方法。会有一个或多个视图View监听一个模型，当模型的数据发生变化时，模型将通知相关视图。
• 视图View：视图对象给出在用户屏幕上显示的内容，这些内容是模型model对象当前的状态。当模型数据发生变化时，视图对象也会刷新显示在屏幕上的内容。
• 控制器Controller：定义用户界面对用户输入的响应方式，起到不同层面间的组织作用，用于控制应用程序的流程，处理用户的行为和数据model上的改变。

以上内容来源于博客《前端MVC变形记》- 作者：wangfengjiao - 原文链接：efe.baidu.com/blog/mvc-de…

// Model 代码示例
const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))
  },
  create() {},
  delete() {},
  update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('n', m.data.n)
  },
  get() {}
}

// View 代码示例
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)
  }
}

// Controller代码示例
const c = {
  init(container) {
    v.init(container)
    v.render(m.data.n) // view = render(data)
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      console.log('here')
      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)
    }
  }
}

EventBusAPI举例与代码代码示例

• trigger() 用于触发事件
• on() 用于监听事件

//trigger()方法示例
 update(data) {
    Object.assign(m.data, data)
    eventBus.trigger('m:updated')
    localStorage.setItem('n', m.data.n)
  },
  
//on()方法示例
init(container) {
    v.init(container)
    v.render(m.data.n) // view = render(data)
    c.autoBindEvents()
    eventBus.on('m:updated', () => {
      console.log('here')
      v.render(m.data.n)
    })
  },

表驱动编程

所谓表驱动法(Table-Driven Approach),简单讲是指用查表的方法获取值。例如使用一个哈希表承载代码中所有事件绑定事件方法，在用到表中事件的情况下将其应用在对应方法中。

// 在events对象中记录所有事件方法
 events: {
    'click #add1': 'add',
    'click #minus1': 'minus',
    'click #mul2': 'mul',
    'click #divide2': 'div',
  },
  // 在autoBindEvents()函数中遍历events哈希表并将对应方法用在EventsBus.on()方法中
 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)
    }
  }  

模块化

模块化（modular）编程，是强调将计算机程序的功能分离成独立的、可相互改变的“模块”（module）的软件设计技术，它使得每个模块都包含着执行预期功能的一个唯一方面（aspect）所必需的所有东西。