浅析 MVC

MVC 三个对象分别做什么，给出伪代码示例

M-Model (数据模型)负责操作所有数据

1. M-Model (数据模型)负责操作所有数据
2. V-View (视图)负责所有UI界面
3. C-Controller (控制器)负责其他

    constructor(options) {
        super();
        const keys = ["data", "updata", "create", "delete", "get"];  
        keys.forEach((key) => {
            if (key in options) {  
                this[key] = options[key];
            }
        });
    }
    create() {}
    delete() {}
    update() {}
    get() {}
export default Model;  
// m.create()
// m.delete()

上面数据显示对数据进行增删改查四种操作,并通过export default Model导出

class View extends EventBus {
    constructor(options) {  
        super();
        Object.assign(this, options);  
        this.el = $(this.el);
        this.render(this.data);
        this.autoBindEvents();
        this.on("m:updated", () => {
            this.render(this.data);
        });
    }
    autoBindEvents() {
        for (let key in this.events) {
            const value = this[this.events[key]];
            const spaceIndex = key.indexOf("");
            const part1 = key.slice(0, spaceIndex);
            const part2 = key.slice(spaceIndex + 1);
            this.el.on(part1, part2, value);
        }
    }
}
export  default View

EventBus 有哪些 API，是做什么用的?

• 一种特殊的设计模式,用于组件之间的通信
• 其中on、trigger、off,三个API最为重要

class EventBus {
    constructor() {
        this._eventBus = $(window);
    }
    on(eventName, fn) {  //事件jiant
        return this._eventBus.on(eventName, fn);   
    }
 
    trigger(eventName, date) {  //事件触发
        return this._eventBus.trigger(eventName, date);
    }
    off(eventName, fn) {  //结束事件
        return  this._eventBus.off(eventName, fn);
    }
}
export  default  EventBus

表驱动编程是做什么的

• 就是使用一种特殊的抽象思想,事不过三原则
• 把代码中有相同的,但是有部分不同的代码抽离出来,变成对象遍历哈希,对代码不同部分进行实现

我是如何理解模块化的

• 遵循最小知识原则,把不同功能的代码,进行封装,实现特定代码实现特定效果,并且这些最小模块互不依赖,互不影响,便于读写和维护