MVC 三个对象

• M-Model（数据模型），负责操作所有数据
• V-View（视图），负责所有UI界面
• C-Controller（控制器）负责其他

const m = {
    data:{}//程序数据
    create(){}//增
    update(){}//改
    get(){}//查
    delete(){}//删
    }

const v= {
    el:页面元素
    html:{}//页面的显示内容
    init:()//初始化元素
    render(){}//渲染
    }

const c= {
    init:()//初始化
    BindEventss(){}//绑定事件
    }

EventBus

eventBus 的作用主要是用来实现对象之间的通信，例如可以通过 eventBus 来实现 m、v、c 三个对象之间的通信。

EventBus的常用api：

• on 用于监听对象

const eventBus=$(window)
eventBus.on("监听事件"，（）=>{})

• trigger 用于触发对象

const eventBus=$(window)
eventBus.trigger("事件")

• off 用于取消对象监听

const eventBus=$(window)
eventBus.off("监听事件")

例如在MVC 中可以采用 eventBus来实现v对象随着m对象的数据的变化自动触发渲染

const eventBus = $(window) // 获取eventBus 对象
const m = {
    data: {
       ...
    },
    update(data){
        ...
        eventBus.trigger('m:updated') //触发事件
        ....
    },
}

const v = {
      ...
    render(n) {
      
    }//渲染数据
}

const c = {
    init(container) {
       ...
        eventBus.on('m:updated',()=>{
            v.render(m.data.n)
        })//监听后渲染
    }
}

表驱动编程

表驱动编程是一种编程模式，是从哈希表里查找信息而不是使用逻辑语句if…else…，原因是当逻辑简单时，用逻辑语句简单，且代码简短，但逻辑复杂时，逻辑语句就很麻烦，代码很长，这时候就应该使用表驱动编程

const c = {
    init(container) {
        v.init(container)
        v.render(m.data.n)
        c.autoBindEvents()
        eventBus.on('m:updated',()=>{
            v.render(m.data.n)
        })
    },
    events: {     //通过哈希表把事件、元素和函数进行分离
        'click #add1': 'add',
        'click #minus1': 'minus',
        'click #mul2': 'mul',
        'click #divide2': 'div',
    },
    add() {
        m.update({n:m.data.n+1})

    },
    minus() {
        m.update({n:m.data.n-1})

    },
    mul() {
        m.update({n:m.data.n*2})

    },
    div() {
        m.update({n:m.data.n/2})

    },
    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) //view里面的v.el
        }
    }
}

模块化

模块化的本质其实就是帮助我们优化代码而产生的，像是一种归纳的方法，将原本零散的节点，结构分成不同模块，这些模块不仅相互独立、互不影响，又可以重复使用。借此来降低代码耦合度，减少重复代码，让代码结构更加清晰整洁，便于维护
JavaScript 主要通过 import 与 export 来进行模块化操作（详见MDN文档），如：

// 文件名name.js
const name = 'Jacky'
export {
    name
}
// index.js
import { name } from './name.js'
console.log(name) // "jacky"