MVC是什么？

MVC是一种编程思路，或者说是一种程序架构
注意：它不是框架

MVC将程序结构分为三层：View（视图层）、Model（数据层）、Controller（控制层）。

View层：用户展示信息，只与Controller通信
Model层：主要用于处理数据，只与Controller通信
Controller层：作为中间人，从View层接收信息，告诉Model层，Model层进行数据更新后，通知Controller，Controller再进行处理后告知View进行展示。

这三个层每个都是一个独立的部分，它们之间的交互要遵循一定的规则：View不能与Model直接联系，必须通过Controller进行交互。

如：

MVC模型.png

上图展示的是一个MVC模型之间的数据流向，可以看到View和Model是通过Controller来进行交互的

再以用户上网为例进行说明，如下图：

image.png

以用户搜索“美食为例”，当用户按下Enter键发送请求，该请求到了服务器（Controller），服务器本身并不存储数据，它会通知数据库（Model）去找美食，数据库找到之后，将数据返回给服务器（Controller），服务器对数据进行处理，然后生成页面（View）显示给用户看，这便是一个MVC架构的网址的执行流程

针对于前端代码的MVC

前端代码中的MVC，简单描述就是：Controller监听View层（一般是DOM节点）的变化，然后通过Model层（数据层），数据层进行数据的处理，处理完成后通知Controller层，Controller再通知View层进行渲染

面试问题：

MVC是什么？
MVVM是什么？
React与Vue分别是什么？有什么区别？

参考：《基于MVC的Javascript的富应用》
注意：在前端领域看源代码不是个很好的学习方式，一是因为更新换代太快，二是大部分写的一般，最重要的是要理解它背后的逻辑，了解其原理

可以看下：preact这个库，是react的精简版，只有4k代码

image.png

MVC

M：数据，只与数据有关
V：视图
C：控制操作，调用Model，渲染View

MVC就是将代码分成3个层次，

Model只与数据有关，其他均不管；它是最地下的一层，是核心数据层
View只与HTML有关，其他均不管，它是在最上面的一层，面向用户
而Controller，是控制着Model和View，相当于作为一个中间人的地址，当Model数据更新了就调用View进行渲染，当检测到View中操作，就调用Model 进行数据更改，更改完成后，再执行View进行渲染；

Controller监听View层，如果View有变动，则对Model进行更新，更新完成后再进行渲染；

Controller同时可以监听Model层，当Model层有变动，则对View层进行修改

image.png

Model和View之间是不会相互操作的

//-------- View 视图层
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack-demos</title>
  </head>
  <body>
    <div class="modules">
      <div class="module1">
      </div>
      <div class="module2">
      </div>
      <div class="module3">
        <input type="text" name="number2">
        <button name="button2">点我</button>
      </div>

    </div>
    <script id="module2Template" type="text/x-handlerbars">
      <hr>
      <div>{{number}}</div>
      <hr>
      <button name="increase">加</button>
      <hr>
      <button name="decrease">减</button>
    </script>
    <script type="text/javascript" src="bundle.js"></script></body>
</html>

// Controller 类
import $ from 'jquery'
const Handlebars = require('handlebars');

class Controller{
  constructor(options){
    for(let key in options){
      this[key] = options[key]
    }
    this.$element = $(this.element)

    this.init && this.init()

    if(this.template && this.render){
      this.render()
    }
    this.bindEvents()
  }
  bindEvents(){
    for(let key in this.events){
      let parts = key.split(' ')
      let eventType = parts.shift()
      let selector = parts.join(' ')
      if(typeof this.events[key] === 'function'){
        this.$element.on(eventType, selector, this.events[key])
      }else if(typeof this.events[key] === 'string'){
        let methodName = this.events[key]
        this.$element.on(eventType, selector, this[methodName].bind(this))
      }
    }
  }
  render(){
    let template = (this.template[0] === '#') ? 
      (document.querySelector(this.template).innerHTML) : 
      this.template
    let html = Handlebars.compile(template)(this.model.data)
    this.$element.html(html)
  }
}

export default Controller

import Controller from './Controller'
import $ from 'jquery'

// ----------这是Model层
let model = {
  data: {
    number: 0
  },
  get(){
    return $.get('/data.json').then((response)=>{
      this.data = response
      return this.data
    })
  },
  increase(){ // 向服务器发请求
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        console.log('500ms 过去了')
        this.data.number += 1
        resolve(this.data)
      },500)
    })
  },
  decrease(){ // 向服务器发请求
    return new Promise((resolve, reject)=>{
      setTimeout(()=>{
        console.log('500ms 过去了')
        this.data.number -= 1
        resolve(this.data)
      },500)
    })
  }
}
// ------------这是Controller实例
new Controller({
  element: '.module2',
  template: '#module2Template',
  model: model,
  events: {
    'click button[name=increase]': 'increase',
    'click button[name=decrease]': 'decrease',
  },
  init(){
    this.model.get().then(()=>{
      this.render()
    })
  },
  increase(){
    this.model.increase().then(()=>{
      this.render()
    })
  },
  decrease(){
    this.model.decrease().then(()=>{
      this.render()
    })
  }
})