浅析 MVC

147 阅读1分钟

MVC 的三个对象

M - model(数据模型)

负责操作所有数据

    const m = { 
        data: {数据}, 
        create() {}, 
        delete() {}, 
        update(data) { 
            Object.assign(m.data,data)// 替换旧数据 
            eventBus.trigger('m:update')// eventBus触发'm:update'信息,通知View刷新界面 }, 
        get() {数据} }

V - view(视图)

负责视图相关的内容, 提供操作界面

const v = { 
    el: 需要刷新的元素, 
    html: ` body里面的内容 `, 
    init(container) { 
        v.el = $(container) }, 
        render() {刷新页面}   // 渲染页面
    }

C - Control(其他相关操作)

负责数据和视图以外的其他操作

    const c = { 
        init(container) { 
            v.init()// 初始化View 
            v.render()// 渲染页面 
            c.autoBindEvents()// 自动的事件绑定 
            eventBus.on('m:update',()=>{v.render()}// 当enentsBus触发'm:update',View刷新 }, 
        events: {事件}, // 事件以哈希表的方式记录存储 
        add() {+具体实现}, 
        minus() {-具体实现}, 
        mul() {*具体实现}, 
        div() {/具体实现}, 
        autoBindEvents() {自动绑定事件} }

EventBus

相关的 API

on (监听事件)

    eventBus.on('监听的内容',()=>{
        监听后的操作
    })

trigger (触发事件)

    eventBus.trigger('监听的内容',)

off (取消事件)

    eventBus.off('监听的内容')

表驱动编程

原理

将相对重要的数据放到 hash 表进行操作

作用

可以避免代码的重复

模块化

目的

把相关的功能整合到一个模块里,将各个功能分开来,这样操作其中任何一个功能的时候都不会影响其他的功能。