浅析 MVC | 易学教程

MVC 是什么

MVC (Model-View-Controller) 是一种软件设计模式.它强调分离软件的业务逻辑和显示. 这种“分离”提供了更好的分工和改进的维护

一些其他的模式也是基于MVC来设计的, 像 MVVM (Model-View-Viewmodel), MTP (Model-View-Presenter), 和 MVW (Model-View-Whatever)

简单来说MVC是一种设计模式，在前后端都用到了这种设计模式

M - Model: 模型持有所有的数据、状态和程序逻辑

V - View: 负责界面的布局和显示

C - Controller: 负责模型和界面之间的交互

用伪代码来解释一下

1. M:

const m = {
    data: x // 里面是一些需要更新和改变的数据
}

2. V

const v = {
    el: el, // el 相当于一个容器，来放置动态渲染的 html
    html: `<div>我是需要渲染的{{x}}</div>`, //把 m 里的数据
    render(v.el){
        // 这里让 m.data.x 替换成 html 的 {{x}
    } 然后加到 v.el 中
}

3. C

const c = {
    events: {
        "click #add": "add",
        "click #reduce": "reduce"
    },
    add(){
        m.data.x += 1
        v.render()
    },
    reduce(){
        m.data.x -= 1
        v.render()
    },
    autoEventSBind: {
        for(let key in events)
        // 读取event的结构，然后用 foreach 给每个函数添加事件,在调用 c.add 和 c.reduce,重新在用 v.render() 渲染出来
    }
}

大概过程就是：通过 m 拿到数据，然后在用 c 进行加工，最后让 v 渲染到页面上

表驱动编程

所谓表驱动法(Table-Driven Approach)，简单讲是指用查表的方法获取值

表驱动法是一种编程模式，表里可以存数据，也可以存指令，或函数等都可以

在数值不多的时候我们可以用逻辑语句(if/else 或 case do)的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了

表驱动编程在 JavaScript 中的一个重要应用是自动绑定事件

上面的 autoEventSBind 就是一个例子

EventBus

EventBus是一种设计模式或框架，主要用于组件/对象间通信的优化简化

EventBus 实现了 M 和 C 间的通信，因为 m.data.x 在更新后可以触发一个函数告诉 C 我更新了，而 C 用一个监听就可以知道数据更改，那我就在渲染一次页面

const eventBus = $(window) // $ 为 jquery  
const m = {
    data: x
    update(){
        eventBus.trigger('m:changed')
    }
}
// v 已经写好
cosnt c = {
    add(){
        m.data.x += 1
        eventBus.on('m:changed', (){
            c.render()
        })
    }
}

EventBus 就这样实现了 M 和 C 之间的通信

它有三个 API

trigger 触发函数
on 监听函数
off 停止监听

模块化

模块化就是把一个文件看成一个模块。每个模块有自己的命名空间

在 MVC 的概念里模块化遵循最小知识原则，就是把每个不相同的功能分成不同模块，互不依赖，互补影响，有利于维护和读写

目前模块化有三个规范

commonJS

commonJS规范 NodeJS

2. AMD

AMD规范 requireJS

3. CMD

CMD规范 seaJs

来源：oschina

链接：https://my.oschina.net/u/4288740/blog/4282642

标签

EventBus

设计模式

commonjs