浅析 MVC

MVC 是一种架构设计模式，通过关注点分离鼓励改进应用程序组织。由于前端开发的环境特性，在 MVC 模式上引申出了许多 MV* 模式。这些模式都是为了对重复代码的重构和类似页面的代码封装。

MVC 是什么

• 模型 model ，用于封装与应用程序的业务逻辑相关的数据以及数据的处理方法，会有一个或多个视图监听这个模型。一旦模型的数据发生变化，模型将通知有关的视图。

const model = {
    data: null,
    get() {
        data: 获取的数据
    },
    set(data) {
        更新 data 数据
        触发数据响应事件 eventBus.trigger()
    }
}

• 视图 view，负责所有的 UI 界面，描绘 model 当前状态。

const view = {
    el: null,
    html: `UI界面html`，
    init() {
        初始化 el
        render(model.data)
    },
    render(data) {
        刷新页面html
    }
}

• 控制器 controller ，处理用户的行为和数据 model 的改变。

const controller = {
    init(container) {
        初始化视图
        绑定数据响应 eventBus.on()
    },
    events: {
        设置事件和函数绑定
    },
    // 实现每个事件函数
    autoBindEvents() {
        for (let key in c.events){
            对每个键进行动态绑定事件
        }
    }
}

EventBus

eventBus 通常是一个 jquery 全局对象，通过 const eventBus = $(window) 实现一个 eventBus ，常用的 api 有 on() 、 trigger() 、 off() 。

eventBus.on(eventName, fn) // 绑定一个函数事件
eventBus.trigger(eventName, data) // 响应对应绑定函数事件名的函数
eventBus.off(eventName，fn) // 注销对应绑定函数事件名的函数

表驱动编程

表驱动编程，实际就是对大量类似且重复的代码，其重要的数据做成哈希表的编程方式。例如：数据-逻辑分离。

// model 的数据操作封装
constructor(options) {
    const keys = ['data', 'create', 'update', 'delete', 'get']
    keys.forEach(key => this[key] = options[keys])
}

模块化

Javascript 程序本来很小——在早期，它们大多被用来执行独立的脚本任务，在你的 web 页面需要的地方提供一定交互，所以一般不需要多大的脚本。过了几年，我们现在有了运行大量 Javascript 脚本的复杂程序，还有一些被用在其他环境（例如 Node.js）。

从业务角度来看，一个项目就是由各个模块组合而成的。从技术上去实现功能的复用，Node.js 已经提供这个能力很长时间了，对前端而言，目前的方案是前端模块化：将功能打包为模块，发布至内部中央仓库，使用方通过自己的方式导入模块包使用。