方方MVC

首先我们来看一下大神的介绍：
1.MVC是三个单词首字母的缩写，它们是Model（模型）、View（视图）、Controller（控制）。
这个模式认为，程序无论简单或复杂，从结构上看，都可以分为三层。
1）最上面的一层，是直接面向用户的“视图层”（view）。它是提供给用户的操作界面，是程序的外壳。
2）中间的一层，就是“控制层”（controller）。它负责根据用户从“视图层”输入的指令，选取“数据层”的数据，对其进行操作，产生相应的结果
3）最下面的一层，是数据层（model），也就是程序需要操作的数据和信息。
这三层是紧密联系在一起的，但又是互相独立的，每一层内部的变化不影响其他层。每一层都对外提供接口（Interface），供上面一层调用。这样一来，软件就可以实现模块化，修改外观或者变更数据都不用修改其他层，大大方便了维护和升级。

对于MVC，不同的人理解可能略微有些差别，我认为上图可以较好的反应三层结构之间的关系。“控制层”可以操纵“数据层”，然后通过渲染，将数据渲染到页面上，“视图层”可以触发事件，引起“控制层”的动作，操作数据，然后再渲染到视图层。

2.MVC代码实现
接下来，我们将用代码来简单的构造一下MVC模式，我们将会从一个最简单的代码逐步转变成MVC模式。
首先我们先来看一下代码的整体结构：

然后这里是html页面：

//index.html
<div class="modules">
  <div class="module1">
    <input type="text" name="modules1">
    <button name="button1">点我</button>
  </div>
  <div class="module2">
  </div>
  <div class="module3">
    <input type="text" name="modules3">
    <button name="button3">点我</button>
  </div>
</div>
<script src="bundle.js"></script>

接下来是module1.js：

import $ from "jquery"
开始 最符合我们意思的方法
let $module1 = $('.module1')
$module1.on('change', 'input', function () {
  console.log("change1")
})
$module1.on('click', 'button', function () {
  console.log("click1")
})

这应该是每一个初学者都能看懂的代码，我们利用jquery进行了简单的DOM操作，但我们改变输入框的内容和点击按钮的时候，控制台都会有相应的提示语。接下来我们会利用函数进行简单的封装。

function Maker(options) {
  let controller = {}
  controller.$element = $(options.element)
  controller.events = options.events
  for(let key in controller.events){
    let parts = key.split(' ')
    let eventType = parts.shift()
    let selector = parts.join(' ')
    console.log(selector)
    controller.$element.on(eventType,selector,controller.events[key])
  }
}
Maker({
  element: '.module1',
  events:{
    'change input': function(e){
      console.log("change1111")
    },
    'click button': function(e){
      console.log("click1")
    }
  }
})

上面的这段代码和开始的代码的作用是一摸一样的，我们只是利用Maker进行了一定的封装，似乎有些傻逼，代码一下子多了好多。然后我们再次修改，改成构造函数的形式。

function Maker(options) {
  this.$element = $(options.element)
  this.events = options.events
  this.bindEvent()
}
Maker.prototype.bindEvent = function () {
  for(let key in this.events) {
    let parts = key.split(' ')
    let eventType = parts.shift()
    let selector = parts.join(' ')
    console.log(selector)
    this.$element.on(eventType, selector, this.events[key])
  }
}
new Maker({
  element: '.module1',
  events:{
    'change input': function(e){
      console.log("change1111")
    },
    'click button': function(e){
      console.log("click1")
    }
  }
})

似乎还是有点多，我们将Maker放到别的js文件中（改名为Controller），然后利用import导入

//Controller.js
function Controller(options) {
  this.$element = $(options.element)
  this.events = options.events
  this.bindEvent()
}
Controller.prototype.bindEvent = function () {
  for(let key in this.events) {
    let parts = key.split(' ')
    let eventType = parts.shift()
    let selector = parts.join(' ')
    console.log(selector)
    if (typeof this.events[key] === 'function') {
        this.$element.on(eventType, selector, this.events[key])
      } else if (typeof this.events[key] === 'string') {
        this.$element.on(eventType, selector, this[this.events[key]].bind(this))
      }
    }
}
export default Controller

module1.js
构建Controller.js 利用import,添加了render方法更新DOM
import Controller from "./Controller.js"
import $ from "jquery"
new Controller({
  element: '.module1',
  events:{
    'change input': 'onChangeInput',
    'click button': 'onClickBtn'
  },
  onClickBtn: function(){
    let val = $('.module1').find('input').val()
    this.render(val)
  },
  onChangeInput: function (e) {
    var input = e.target
    console.log(input.value)
  },
  render: function (value) {
    let $output = this.$element.find('.output')
    if($output.length === 0){
      let $div = $('<div class="output"><div>').text(value)
      $div.appendTo(this.$element)
    }else {
      $output.text(value)
    }
  }
})

代码其实已经少了很多，只是我们又多实现render功能。
我们将新加一个template值，之后会利用template将”控制层“和”视图层“分离,同时将render放到Controller.js中。

module1.js
new Controller({
  element: '.module1',
  template: `
    <input type="text" name="modules1" value="{{output}}">
    <button name="button1">点我</button>
    <div class="output">{{output}}</div>
  `,
  data: {
    output: '1'
  },
  events: {
    'change input': 'onChangeInput',
    'click button': 'onClickBtn'
  },
  onClickBtn: function () {
    let val = $('.module1').find('input').val()
    this.data.output = val
    this.render()
  },
  onChangeInput: function (e) {
    var input = e.target
    console.log(input.value)
  },
})

接下来我们将在module2.js中完全实现三层结构的分离，首先我们将template放到index.html的是script中。

new Controller({
  element: '.module2',
  template: '#module2Template',          //视图分离，放到了index.html中
  data: {
    number: 1
  },
  events: {
    'click button[name=increase]': 'increase',
    'click button[name=decrease]': 'decrease'
  },
  init: function () {
    $.get("./data.json").then((data) => {      //     装一下从服务器获得数据
      console.log(data)
      this.data = data
      this.render()
    })
  },
  increase: function () {
    this.removeIncrease().then( () =>{
      this.data.number += 1
      this.render()
    })

  },
  decrease: function () {
    this.data.number--
    this.render()
  },
  removeIncrease: function () {
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        console.log("500毫秒过去啦")
        resolve({number:this.number++})
      },500)
    })
  }
})

接下来，我们将model和controller分离

let model = {
  data: {
    number: 0
  },
  get(){
    return $.get("./data.json").then((response) => {      //     装一下从服务器获得数据
      this.data = response
    })
  },
  increase(){
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        console.log("500毫秒过去啦")
        this.data.number += 1
        resolve()
      },500)
    })
  },
  decrease(){
    return new Promise((resolve, reject) => {
      setTimeout(()=>{
        console.log("500毫秒过去啦")
        this.data.number -= 1
        resolve()
      },500)
    })
  },
}
new Controller({
  element: '.module2',
  template: '#module2Template',          //视图分离，放到了index.html中
  model: model,
  events: {
    'click button[name=increase]': 'increase',
    'click button[name=decrease]': 'decrease'
  },
  init: function () {
    this.model.get().then(()=>{
      this.render()
    })
  },
  increase: function () {
    this.model.increase().then( () =>{
      this.render()
    })

  },
  decrease: function () {
    this.model.decrease().then(()=>{
      this.render()
    })
  },
})

这样，我们就基本实现了三个结构的分离，model控制数据，template是视图，而Controller可以操作数据，进行渲染。controller是利用model的接口进行操作，controller和视图层是利用render进行渲染。
书籍推荐：基于MVC的JavaScript Web富应用开发
源码可以读：preact的
参考：
iOS - MVC 架构模式
谈谈MVC模式
方方