js 中的 MVC

前言

MVC 是一种架构设计模式。代码按照这种方式组织，达到分离关注点的目的

MVC

MVC 由 Model、View 和 Controller 三个部分组成。

平时，我们习惯的在监听事件之后直接处理页面数据和渲染页面。是比较零散耦合的一种处理方式。这里可以改成 MVC 模式，将数据、视图抽离出来，用控制器连接，达到解耦约束的效果

接下来的概念会结合一个例子进行说明：有两个按钮，red 和 green。点击按钮改变 body 背景色

Model

Model 是数据和数据处理存放的地方。数据处理完成之后会通知 View 渲染

class Model {
  constructor() {
    this.background = ''
  }

  update(val) {
    this.background = val
  }

  notify() {
    View.prototype.render(this.background)
  }
}

这里的 background 就是数据，update 是处理数据的方法，notify 用来通知 View

View

View 可以看成视图层，将 Model 的数据展示给用户。将用户指令传达给 Controller ，同时时刻接收来自 Model 的通知渲染数据

class View {
  constructor() {
    const redDOM = document.getElementById('red')
    const greenDOM = document.getElementById('green')

    redDOM.addEventListener('click', () => {
      Controller.prototype.eventListener('red')
    })
    greenDOM.addEventListener('click', () => {
      Controller.prototype.eventListener('green')
    })
  }

  render(val) {
    document.body.style.background = val
  }
}

View 将需要监听的事件注册好。如果触发事件的话就对控制器的方法进行调用

render 是 View 渲染的方法

Controller

可以将 Controller 定义成一种处理中枢。接受来自 View 和 用户的指令，处理后发往 Model。

class Controller {
  constructor() {
    new View()
    new Model()
  }

  eventListener(val) {
    Model.prototype.update(val)
    Model.prototype.notify()
  }
}

Controller 将 Model 和 View 进行了初始化。注册了 eventListener 作为接受 View 调用，处理 Model 数据

完整代码

<div>
  <button id="red">red</button>
  <button id="green">green</button>
</div>

class Controller {
  constructor() {
    new View()
    new Model()
  }

  eventListener(val) {
    Model.prototype.update(val)
    Model.prototype.notify()
  }
}

class Model {
  constructor() {
    this.background = ''
  }

  update(val) {
    this.background = val
  }

  notify() {
    View.prototype.render(this.background)
  }
}

class View {
  constructor() {
    const redDOM = document.getElementById('red')
    const greenDOM = document.getElementById('green')

    redDOM.addEventListener('click', () => {
      Controller.prototype.eventListener('red')
    })
    greenDOM.addEventListener('click', () => {
      Controller.prototype.eventListener('green')
    })
  }

  render(val) {
    document.body.style.background = val
  }
}

new Controller()

小结

1. 将数据和视图抽离模块，利用控制器作为桥梁进行联动