MVC

MVC

作用

• M:模型（Modle）【数据的保存、增删改查】
• V:视图（View）【用户能看见的东西】
• 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 触发 m:updated eventBus.trigger('m:updated')

eventBus 监听 m:updated，当 m:updated 触发时，执行一些内容

eventBus.on('m:updated',()=>{
     v.render(m.data.n)
 })

表驱动编程

实现逻辑和数据的分离

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)
         }
     }
 }

模块化

简单的说就是将一个或多个功能封装在一个模块中，这么做的好处：提高了可维护性、提高了复用性，减少不同功能代码的耦合

总结

无论是MVC、表驱动、模块化中心思想就是减少耦合，使得以后的维护更加方便高效 MVC降低了视图和抽象数据的耦合 表驱动降低了逻辑和数据的耦合 模块化降低了不同功能代码之间的耦合