设计模式之 —— 什么是 mvc

mvc

mvc 是一种代码架构设计模式，前端中的 mvc 最主要的作用就是将视图和数据模型进行分离

为什么需要 mvc

也就是为什么需要将视图和数据模型进行分离

<select id="drinkSelect">
  <option value="coffee">coffee</option>
  <option value="milk">milk</option>
  <option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>

<script type="text/javascript">
  document.getElementById('drinkSelect').onchange = function() {
    var color
    var colorOfDrink = {
      coffee: 'brown',
      milk: 'white',
      juice: 'orange'
    }
    color = colorOfDrink[this.value]
    document.getElementById('theColorOfDrink').innerHTML = color
  }
</script>

通过上面代码我们会发现视图的操作和数据以及逻辑的处理全部混淆在一起了，当前代码量小，并不会发现太大的问题，但是项目大，代码量多的时候，对于代码的维护会相对复杂，分离后具有如下优势

• 维护性高
• 代码耦合性低
• 代码可复用

怎么设计 mvc

• Model：数据层（存数据、改数据）
• View：视图层（页面展示和 dom 的操作）
• Controller：控制视图层和数据层的关联，主要通过监听 dom 事件

代码改良版：

M 数据层

数据和操作数据的逻辑:

showDrinkColor.model = {
  colorOfDrink: {
    coffee: 'brown',
    milk: 'white',
    juice: 'orange'
  },
  selectedDrink: null,
  setDrink: function(drinkName) {
    this.selectedDrink = this.colorOfDrink[this.selectedDrink]
      ? drinkName
      : null
    this.onchange()
  },
  onchange: function() {
    showDrinkColor.view.update()
  },
  getDrinkColor: function() {
    return this.selectedDrink
      ? this.colorOfDrink[this.selectedDrink]
      : 'white'
  }
}

dom 操作

showDrinkColor.view = {
  start: function() {
    // 获取select监听change事件
    document.getElementById('drinkSelect').onchange = this.onchange
  },
  onchange: function() {
    // 事件函数 做的逻辑 获取 变化后的数据传递给controller
    showDrinkColor.set(document.getElementById('drinkSelect').value)
  },
  update: function() {
    document.getElementById(
      'theColorOfDrink'
    ).innerHTML = showDrinkColor.model.getDrinkColor()
  }
}

V 视图层

页面结构

<select id="drinkSelect">
  <option value="coffee">coffee</option>
  <option value="milk">milk</option>
  <option value="juice">juice</option>
</select>
<p id="theColorOfDrink"></p>

C 控制层

视图和数据模型 进行关联

var showDrinkColor = {
  start: function() {
    // 给视图绑定事件
    this.view.start()
  },
  set: function(drinkName) {
    // 拿到视图传递过来的数据在调用数据模型的方法更新数据
    this.model.setDrink(drinkName)
  }
}
showDrinkColor.start()

1. 视图发生变化触发 Controller，并且将数据传递给 Controller
2. Controller 拿到更新的数据触发 model 并将更新的数据传递给 model
3. model 拿到数据更新数据并且触发 view 视图更新

                下一期介绍：mvvm