2020-12-18

浅析 MVC

view = render(data)

view = render(data) //渲染数据（view：视图，页面）

只要改变data就能得到相应的view

缺点：费性能（重新渲染了整个div）
解决方法：虚拟DOM

事不过三原则

• 相同代码过三遍用函数
• 属性-----公有属性（类或原型）
• 原型-----继承

1、MVC含义

• M（Model）：数据模型，负责数据相关的任务

const model = {
    data: { 初始化数据 },
    create() { 增 },
    delete() { 删 },
    update() { 改 },
    get() { 查 }
}

• V （View）：视图，负责用户界面

const view = {
    el: null,
    html: ` html代码 `,
    init() { 初始化 },
    render() { 渲染html }
}

• C （Controller）：控制器，负责监听用户事件，然后调用 M 和 V 更新数据和视图

const controller = {
    init() { 初始化方法，如init、render、EventBus等 },
    //表驱动编程
    events: { 哈希表 },
    add() { },
    minus() { },
    mul() { },
    div() { },
    autoBindEvents() { 自动绑定事件 }
}

2、EventBus

生成EventBus 对象

const EventBus= $({})
console.log(EventBus)

EventBus 的API：on、off、trigger，on用于监听事件，trigger用于触发事件，两者结合可用于对象间的通信，off用于取消事件监听

EventBus.trigger(xxx) //触发xxx
EventBus.on('xxx',()=>{}) //监听xxx

3、表驱动编程

概念：一种编程思想，将大批类似但不重复的（数据）代码，做成一个哈希表，然后遍历这个表获取相应的资源

class M {
    constructor(options) {
        ['data', 'updata', 'create', 'delete', 'get'].forEach((key) => {
            if (key in options) {
                this[key] = options
            }
        })
    }
}

优点：复杂度稳定

4、模块化

模块化：顾名思义就是将散乱的代码，分成各个模块写入文件，然后在原文件里引入这个模块

//导出
export  default xxx
//引入
import aaa from './xxx'  //这里的aaa可以是任意名字