MVC

1. 一个功能建立一个js文件。（模块化)modal

// 创建局部变量，防止不同js文件变量名覆盖
!function(){
  // view 要操作的视图 V
  var view = document.querySelector('')

  // model 数据
  var model = {
    save: function () {
     // 一些保存数据的操作 （写成promise形式，方便后续的操作）
    }，
    fetch: function () {
     // 跟服务器获取数据（写成promise形式，方便后续的操作）
    }
  }

  // 控制器 C (逻辑处理)
  var controller = {
    view: null,
    model: null,
    init: function (view, model) {
      this.view = view
      this.model = model
      this.bindEvents()
    },
    bindEvents: function () {
     var view = this.view 
     window.addEventListener('click', () => {
        if(true) {
          this.active()
        } else {
          this.deactive()
        }
     })
    },
    active: function () {
      this.view.classList.add('someClass')
    },
    deactive: function () {
      this.view.classList.remove('someClass')
    }
  }

  controller.init(view, model)
}.call()

上面的代码就结构清晰

MVC
controller (逻辑层)、view (视图层)、model (数据层)
首先，controller监听着View。当用户操作V（视图），比如点击操作，controller监听得到通知，通过一些逻辑去更新V（视图），controller的一些操作可能需要用到一些数据，这时就需要调用model（数据层），model通过数据请求向服务器请求数据（或者保存数据），再返回响应给controller。

image.png