MVC简述

发表于

自己对MVC的一点理解

MVC 是什么

MVC 是一种设计模式（或者软件架构），把系统分为三层：Model数据、View视图和Controller控制器。

  • Model 数据管理，包括数据逻辑、数据请求、数据存储等功能。前端 Model 主要负责 AJAX 请求或者 LocalStorage 存储
  • View 负责用户界面，前端 View 主要负责 HTML 渲染。
  • Controller 负责处理 View 的事件，并更新 Model；也负责监听 Model 的变化，并更新 View，Controller 控制其他的所有流程。
    代码说明
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    var model = {
        data: null,
        init(){}
        fetch(){}
        save(){}
        update(){}
        delete(){}
    }
    view = {
        init() {}
        template: '<h1>hi</h1'>
    }
    controller = {
        view: null,
        model: null,
        init(view, model){
            this.view = view
            this.model = model
            this.bindEvents()
        }
        render(){
            this.view.querySelector('name').innerText = this.model.data.name
        },
        bindEvents(){}
    }

Model 和服务器交互，Model 将得到的数据交给 Controller，
Controller 把数据填入 View，并监听 View 用户操作 View，
如点击按钮，Controller 就会接受到点击事件，
Controller 这时会去调用 Model，
Model 会与服务器交互，得到数据后返回给 Controller，
Controller 得到数据就去更新 View