title: JavaScript中的MVC设计模式
date: 2018-10-10 10:46:58
tags: [JavaScript]
categories: JavaScript

JavaScript中的MVC

MVC模式（Model–view–controller）是一种设计模式（或者软件架构），把系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。

1. Model 数据管理，主要负责和服务器进行交互。将请求到的数据传给Controller。
2. View 负责用户界面，HTML 渲染。
3. Controller 负责监听并处理View 的事件，更新和调用 Model；也负责监听 Model的变化（Model从服务器获得数据），并更新 View。Controller 控制其他所有流程。

画图来理解：

MVC.png

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

MVC模式的优点

就我的理解来说，MVC模式有这些好处：

1. 低耦合性。
   每层各司其职，比如只需要改变视图层而不需要重新编译模型和控制器代码，改代码不用在各个部分改，只需要改变某部分的代码。
2. 方便维护和修改。
   视图层、数据层和业务逻辑层分开，结构清晰好理解。
3. 大大提高代码的可重用性。
   比如用不同的视图层访问模型的数据，只要在控制器层对数据格式做处理，而不需要修改模型层的代码。

重要属性和方法

举例说明 MVC 三个对象分别有哪些重要属性和方法：

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(){}
}

具体例子

代码链接：https://github.com/yuyuye958/resume/blob/master/js/message.js

这段代码实现使用leanCloud的库来做留言板的功能。

• 另外这段代码使用了立即执行函数和闭包，可见我的另一篇博客(立即执行函数和闭包的使用)详解。