什么是MVC

MVC是Model（模型） View （视图）Controller（控制器）缩写，是用一种业务逻辑、数据与界面显示分离的方法来组织代码，让代码更加清晰有结构.

1、模型(model)，模型主要作用接收后台数据和更新后台的数据；
2、视图(view)，即用户视图看到的部分，并可以进行交互的界面；
3、控制器(controller)，控制器接受用户的输入并调用模型和视图去完成用户的需求，包含对数据和视图进行的各种操作的行为。

三者是怎么形成交互的，如下所示：

流程部分

用户只能点击视图，当用户点击view（视图）时，就会通知controller（逻辑），由controller监听view,从而获取到view中部分model（数据）,所以controller就会调用model去请求server（服务器），server处理后返回数据给model,然后model再返回数据给controller，最后通过controller更新view内容。

实例演示：

提用一段做留言代码进行演示：leanCloud工具使用

AV.init({
  appId: "S5zF7aoH9zRVpy3g10xXpJrC-gzGzoHsz",
  appKey: "a1StNncKamK9yDqGUPqM3KvX",
  serverURL: "https://s5zf7aoh.lc-cn-n1-shared.com"
});

const query = new AV.Query('Message');
query.find().then(function (message) {
  console.log(message)
  console.log(message[0].attributes)
  let array = message.map((item) => item.attributes)
  console.log(array)
  array.forEach((item) => {
    let li = document.createElement('li')
    li.innerText = `${item.name}:${item.content}`
    let messageList = document.querySelector('#messageList')
    messageList.appendChild(li)
  })
}), function (error) {
  alert('提交失败，改天再来')
    }

let myForm = document.querySelector('#postMessageFrom')
myForm.addEventListener('submit', function (e) {
  e.preventDefault()
  let name = myForm.querySelector('input[name=name]').value
  let content = myForm.querySelector('input[name=content]').value
  //创建 名字为Message的表
  var Message = AV.Object.extend('Message');
  //在表中创建一行数据
  var message = new Message();
  //数据内容是words:'Hello world!'保存
  //保存成功打印出'保存成功。'
  message.set('name', name);
  message.set('content', content);
  message.save().then((Object) => {
    //下面是可以做到无刷新留言
    let li = document.createElement('li')
    li.innerText = `${Object.attributes.name}:${Object.attributes.content}`
    let messageList = document.querySelector('#messageList')
    messageList.appendChild(li)
    myForm.querySelector('input[name=name]').value=''
    myForm.querySelector('input[name=content]').value=''
  })
})

将其MVC之后

!function () {
  var view = document.querySelector('section.message')

  var model = {
    initAV: function () {
      //数据库初始化
          ...
    },
    fetch: function () {
      //从数据库中获取数据
          ...
    },

    save: function (name, content) {
         //在数据库中创建数据并更新保存数据
          ...
  }

  var controller = {
    view: null,
    model: null,
    messageList: null,
    init: function (view, model) {
      this.view = view
      this.model = model
      this.model.initAV()
      this.messageList = view.querySelector('#messageList')
      this.form = view.querySelector('#postMessageFrom')
      this.loadMessages()
      this.bindEvents()
    },
    loadMessages: function () {
     ...
    },
    bindEvents: function () {
      this.form.addEventListener('submit', (e) => {
       e.preventDefault()
        this.saveMessage()    //绑定事件里面操作封装成函数
      })
    },
    saveMessage: function () {
     ...
    }
  }
  controller.init(view, model)
}.call()

在controller操作中要注意几点：
1、在这里对数据和元素进行各种操作，其中包括写各种函数，函数是进行的各种操作；
2、其次一个init初始化函数，包含所有的要用到的元素和上面所要进行的操作；
3、最后还有一个bindEvent函数，为元素专门绑定事件。绑定事件里面操作全部用函数封装好，尽量显得简单一点。

点击打开完整MVC代码