浅析MVC

1. MVC的三个对象

每个模块都可以写成三个对象，分别是M、V、C；

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

let section = {}; // 创建这个应用对象

section.Model = function() {
    let val = 0; // 需要操作的数据

    /* 操作数据的方法 */
    this.add = function(v) {
        if (val < 100) val += v;
    };

    this.sub = function(v) {
        if (val > 0) val -= v;
    };

    this.getVal = function() {
        return val;
    };
};

• V-View(视图)负责所有UI界面

section.View = function() {

    /* 视图元素 */
    let $num = $('#num'),
        $incBtn = $('#increase'),
        $decBtn = $('#decrease');

    /* 渲染数据 */
    this.render = function(model) {
        $num.text(model.getVal() + 'rmb');
    };
};

• C-Controller(控制器)负责其他

section.Controller = function() {
    let model = null,
        view = null;

    this.init = function() {
        /* 初始化Model和View */
        model = new section.Model();
        view = new section.View(this);

        /* View向Model注册，当Model更新就会去通知View啦 */
        model.register(view);
        model.notify();
    };

    /* 让Model更新数值并通知View更新视图 */
    this.increase = function() {
        model.add(1);
        model.notify();
    };

    this.decrease = function() {
        model.sub(1);
        model.notify();
    };
};

2. EventBus的API

eventBus作为一个对象，用来完成MVC对象间的通信。

eventsBus提供了on、off、trigger等方法，用来处理事件。

• trigger方法触发一个事件A（字符串）：

m = {
    data: {...},
    methods: {
        ...
        update(data){
            修改m.data
            eventBus.trigger(A)
        }
    }
}

• on方法用来监听事件：

eventBus.on(A, ()=>{
    v.render(m.data)
})

实现了M和V之间的沟通，使得视图和数据保持同步。

3. 表驱动编程

表驱动编程是从大量相似的代码中抽取出本质的东西，组成哈希表，利用表进行编程，以减少重复代码。

将关键信息抽离，组成一个对象：

const events = {
    '#el1 事件A': 'fn1',
    '#el2 事件B': 'fn2',
    '#el3 事件C': 'fn3',
    '#el4 事件D': 'fn4',
    '#el5 事件E': 'fn5'
}

const eventFunctions = { //事件处理函数
    fn1(){}
    fn2(){}
    fn3(){}
    fn4(){}
    fn5(){}
}

创建函数，并绑定相应的事件：

function autoBindEvents(){
    for(let key in events){
        const spaceIndex = key.indexOf(' ')
        const element = key.slice(0, spaceIndex)  //得到各个'#el'
        const event = key.slice(spaceIndex + 1) //得到各个'事件'
        const fn = eventFunctions[events[key]] //得到各个fn
        $(element).on(event, fn) //绑定事件
    }
}

由此实现代码去重，实现高效率编程。

4. 我对模块化的理解

模块化以实现编程的简洁与效率编程角度出发，通过代码合并去重、封装的方式来实现较少的代码量完成较多的工作。这是编程的必然趋势，在不远的未来可能会通过拖动不同的代码块就实现全民编程。将编程由枯燥乏味变为优美的艺术品已然在路上。