MVC

MVC全名是Model View Controller
mvc可以使多个视图共同一个模型，减少代码量，提高代码的复用性，三个模块互相独立，当一个模块发生改变时，不会影响其他两个模块
* model 模型，用于封装业务逻辑相关的数据和处理数据的方法

const m = {
    data: {
        n: parseInt(localStorage.getItem(v.key)) || 100
    },
    update(data) {
        Object.assign(m.data, data);
        eventBus.trigger('m:update');
        localStorage.setItem(v.key, m.data.n);
    }
}

• view 视图，用于展示数据，当模型数据发生变化时，视图相应地得到刷新自己的机会
  

const v = {
    el: null,
    key: 'num',
    html: `
    <div> 
        <div class="output">
            <span id="num">{{n}}</span>
        </div>
        <div class="actions">
            <button id="reduce">-1</button>
            <button id="add">+1</button>
            <button id="mul">*2</button>
            <button id="divide">÷2</button>
        </div>
    </div>
    `,
    render(n) {
        v.el.html($(v.html.replace('{{n}}', n)));
    }
}

• controller 控制器，用于控制应用程序的流程，处理用户的行为，和model的数据变化
  

const c = {
    init(container) {
        v.el = $(container);
        v.render(m.data.n);
        c.bindEvents();
        eventBus.on('m:update', () => {
            v.render(m.data.n);
        })
    },
    eventEls: {
        'click #add': 'add'
    },
    add() {
        m.update({ 'n': m.data.n += 1 })
    },
    bindEvents: function () {
        for (let keys in c.eventEls) {
            let arr = keys.split(' ');
            v.el.on(arr[0], arr[1], c[c.eventEls[keys]]);
        }
    }
}

EventBus

eventBus主要用于对象通信，eventBus 提供了 on、off 和 trigger 等 API，on 用于监听事件，trigger 用域触发事件
* on

const c = {
    init(container) {
        eventBus.on('m:update', () => {

        })
    }
}

• trigger
  

const m = {
    update(data) {
        eventBus.trigger('m:update');
    }
}

• off
  

    eventBus.off('m:update');

表驱动编程

表驱动法是一种编程模式，从表里面查找信息而不使用逻辑语句
逻辑语句

if(str ==="a"){
    console.log("a");
}else if{str ==="b"}{
    console.log("b");
}else if{str ==="c"}{
    console.log("c");
}

表驱动

let table = {
    'a' : 'a',
    'b' : 'b',
    'c' : 'c'
}

console.log(table['a']);

模块化

模块是指职责单一的一段程序，随着前端发展的越来越强大，代码也越复杂，模块化可以使得代码方便维护，按需加载，减少加载不必要的代码，复用性高