浅析MVC

MVC

M：Model数据模式，负责操作所有数据

V：View视图，负责所有UI界面

C：Controller，控制器负责其他

const m = {
    data: {},
    create() {增 },
    delete() { 删},
    update() {改},
    get() {查}
}
const v = {
    el: null,
    // 初始化html
    html: `代码`
    ,
    init(container) {
        v.el = $(container)
    },
    render(n) { }
}
const c = {
    init(container) {})
    }, 
    events: { 事件}, 
    add() {详细执行},
    minus() {详细执行},
    mul() {详细执行},
    div() {详细执行},
    autoBindEvents() {逻辑}
    }
}

EventBus

可以进行组件之间的监听和通信

EventBus.on（）监听事件

eventBus.on('m:updated',()=>{
     v.render(m.data.n)
 }) //监听 m:updated，当 m:updated 触发时，执行事件

EventBus.trigger（）触发事件

eventBus.trigger('m:updated') //当一个事件执行，eventBus 触发 m:updated

EventBus.off（）解除绑定

eventBus.off('m:updated') //解除m:updated绑定

表驱动编程

表驱动方法编程（Table-Driven Methods）是一种编程模式,适用场景:消除代码中频繁的if else或switch case的逻辑结构代码,使代码更加直白.

c = {
    events:{
        'click #add1':'add',
        'click #minus1':'minus',
        'click #mul2':'mul',
        'click #divide2':'div'
    },
    autoBindEvents(){
        for(let key in c.events){
            const value = c[c.events[key]]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0, spaceIndex)
            const part2 = key.slice(spaceIndex + 1)
            v.el.on(part1,part2,value)
        }
    }
}

模块化的理解

将一个复杂的程序依据一定的规则（规范）封装成几个块（文件）并进行组合。 模块的内部数据的实现是私有的，只是向外部暴露一些接口（方法）与外部其他模块通信。这就是模块化。 模块化可以降低代码耦合度，减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。