浅析MVC

一、MVC是什么?

MVC是一种设计模式(那设计模式又是什么呢?简单粗暴的说好用的东西就是设计模式),MVC能够使你的代码更简洁、优美,每个模块都可以写成3个对象,分别是M、V、C。

  • M-Model(数据模型),负责操作所有数据
const m = {
  data: {
    n: parseInt(localStorage.getItem('n'))
  },
  create(){},
  delete(){},
  update(data){
    Object.assign(m.data,data) //data有什么属性就放到m.data上
    eventBus.trigger('m:updated')
    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)
    v.render(m.data.n) // view = render(data)
    c.autoBindEvents()
    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(事件总线)

“事件公交车”,公交车为两个不同的地方搭建了桥梁,顾名思义eventbus承载了许多事件,是这些事件通信的桥梁

  • 引入EventBus
    const eventBus = $(window)
    把eventBus打印出来,会发现它就是一个空对象

    image
  • EventBus主要的api有两个,on(监听事件)、trigger(触发事件),当然还有off(取消监听)。

    image
    image

触发事件eventBus.trigger('m:updated'),大喊一声“m更新啦”
监听事件eventBus.on('m:updated',()=>{v.render(m.data.n)}),听到后执行事件。

三、表驱动编程

表驱动编程,能从表里面查找信息而不使用逻辑语句。事实上,凡是能通过逻辑语句来选择的事物,都可以通过查表来选择。对简单的情况而言,使用逻辑语句更为容易和直白。但随着逻辑链的越来越复杂,查表法也就愈发显得更具吸引力。

下面这段代码相似性很高,当我们使用表驱动法后

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})
}

四、我对模块化的理解

模块化就像是书本中的各章节,使用模块化能够使每块代码条理清楚,独立、互不影响,且发现有错误时便于修改,好的程序猿应该使他的代码分成模块。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、MVC是什么? MVC是一种设计模式(那设计模式又是什么呢?简单粗暴的说好用的东西就是设计模式),MVC能够使...
    浪味仙儿啊阅读 340评论 0 2
  • 接触iOS手机开发有一段时间了。总体来说,苹果公司设计的开发环境还是非常人性化的。很容易上手,也方便深入。 在组织...
    以德扶人阅读 859评论 1 51
  • 一、MVC与三层架构的异同 1.不同点 三层架构是程序设计的一种典型架构方式,确立项目后首先做的是对其进...
    LQC阅读 4,729评论 0 3
  • 原文 前言 本文为回答一位朋友关于MVC/MVP/MVVM架构方面的疑问所写, 旨在介绍iOS下MVC/MVP/M...
    无沣阅读 736评论 1 2
  • 1. MVC 三个对象 MVC即 Model+View+Controller ,其中 M-Model数据模型:负责...
    张德瘦嬢嬢阅读 289评论 0 2