浅析MVC

• M model(数据模型) 负责操作数据
• V view(视图) 负责视觉界面
• C controller(控制器) 负责业务逻辑等其他操作

将网页相关的JS代码，分成以上三个部分（以对象形式储存），这样代码可以拥有较清晰的逻辑，可读性增强。

//M Model
const m = {
    data: {
        n: 
    },
    create(){},
    delete(){},
    update(){},
    get(){},
}

//V View
const v = {
    el: null,
    html: `
      <div>

      </div>
`,
    init(container) {
        v.container = $(container)                     
    },
    render: (n) => {
    }
}

//C Controller
const c = {
    init(container) {                      
        v.init(container)
        v.render(m.data.n)
    },
    add() {
        m.update({n:m.data.n +1})
    },
    min() {
        m.update({n:m.data.n -1})
    },
    mul() {
        m.update({n:m.data.n * 2})
    },
    div() {
        m.update({n:m.data.n /2})
    }
}

eventBus

有时，三个模块之间需要通信。比如当M模块的data数据发生变化时，想让C模块监听到该变化事件，方可进行相应的渲染操作。

此时便需要用到eventBus进行模块间通信，

获取一个空对象/windowsJQuery对象,

在C模块为该对象绑定一个自定义事件的监听，

然后在M模块方法data变化后，调用该对象的trigger('自定义事件')方法，

便可实现模块间的通信。

具体代码如下。

const eventBus = $({})  

const m = {
    data: {
    },
    
    update(data){
        Object.assign(m.data,data)
        eventBus.trigger('data-update')
    },
}
const c = {
    init(container) {      
        eventBus.on('data-update',()=>{
            v.render(m.data.n)
        })
    },
}

表驱动编程

所谓表驱动法(Table-Driven Approach),简单讲是指用查表的方法获取值。

在数值不多的时候我们可以用逻辑语句(if 或case)的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。

若需要给大量的对象绑定事件，一个个绑定会出现大量重复的代码，不够优雅，效率也不高。

可以将绑定对象 事件类型,方法写在一个表里，一一映射。

再对该表进行遍历处理，便可进行事件绑定。

这样的好处显而易见，由于表内元素样式的统一，需要更改事件监听时，只需要增删改查表里的数据，相比于第一种方式则需要进行大量的代码 增删，表驱动事半功倍。

 event: {
        "click #add1": `add`,
        "click #minus1": `min`,
        "click #mul2": `mul`,
        "click #divide2": `div`,
    },
    add() {
        m.update({n:m.data.n +1})
    },
    min() {
        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.event) { 
            const spaceIndex = key.indexOf(" ")
            const event = key.slice(0, spaceIndex)
            const ele = key.slice(spaceIndex + 1)
            v.container.on(event, ele, () => {
                c[c.event[key]]()
            })
        }
    }
}

对模块化的理解

模块化（modular）编程，是强调将计算机程序(网页)的功能分离成独立的、可相互改变的“模块”（module）的软件设计技术，它使得每个模块都包含着执行预期功能的一个 唯一 方面（aspect）所必需的 所有 东西。

不进行模块化编程的代码，复用性几乎没有。

模块化可以大大提高代码的可复用性，提高了编程效率。

前端模块化即是将单独功能的数据，视觉界面，操作相关模块囊括在一个JS文件里（JS文件实现对CSS的引用），这使得别人想调用该功能时，只需要引入该JS文件，传入指定的参数，调整一下暴露的接口，便可以复用该功能。

网页功能模块化的代码复用时，在个性化方面可能有点欠缺，即完全符合自己的预期不太容易，但是可以大大提升效率。