浅析MVCMVC是一种软件设计模式.它强调分离软件的业务逻辑和显示.这种“分离”提供了更好的分工、改进与维护。 C:控制

什么是MVC

MVC是一种软件设计模式.它强调分离软件的业务逻辑和显示.这种“分离”提供了更好的分工、改进与维护。

M：模型（model），用来保存数据
V:视图（view）,用户界面
C:控制器（controller），业务逻辑层面。

这各个模块之间可以互相通信，不同的人有不同的看法，例如

4. 各个部分的代码实现

const m = {
    data: {
        n: parseInt(localStorage.getItem('n')),
    },
    create() { },
    delete() { },
    update(data) {
        Object.assign(m.data, data)//意思就是把更新的这个data传给m.data
        eventBus.trigger('xxx')
        localStorage.setItem('n', m.data.n)

    },
    get() { }

}

const v = {
    container: null,
    html: ` <div id="app1">
    <div class="output">
        <span id="number">{{number}}</span>
    </div>
    <div class="actions">
        <button id="add1">+1</button>
        <button id="minus1">-1</button>
        <button id="mul2">*2</button>
        <button id="divide2">÷2</button>
    </div>
    </div>`,

    init(container) {
        v.container = $(container)
    },
    render(n) {
        if (v.container.children.length === 0) {
            $(v.html.replace("{{number}}", n)).appendTo(v.container)
        } else {
            v.container.empty()
            $(v.html.replace("{{number}}", n)).appendTo(v.container)

        }

    }
}

const c = {
    init(container) {
        v.init(container)
        v.render(m.data.n)
        c.autoBlindEvents()
        eventBus.on('xxx', () => {

            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 })
    },
    autoBlindEvents() {
        for (let key in c.events) {
            const value = c[c.events[key]]
            let spaceIndex = key.indexOf(' ')
            let part1 = key.slice(0, spaceIndex)
            let part2 = key.slice(spaceIndex + 1)
            console.log(part1, ",", part2)
            v.container.on(part1, part2, value)
        }
    }

EventBus

EventBus 是一种设计模式，主要用于组件/对象间通信的优化简化，jquery和vue构造出来的对象都有监听事件的方法，我们只需要构造一个对象，然后调用他的on和trigger方法就可以实现组件之间的通信。例如M和C之间的通信，因为m.update()调用触发xxx事件,而 c.init就会接收到，当接收以后，调用一个函数，再次渲染网页，

const eventBus = $(window)//$表示jquery
const m = {
    data: {
        index: parseInt(localStorage.getItem(localKey)) || 0,
    },
    create() { },
    delete() { },
    update(data) {
        Object.assign(m.data, data)//意思就是把更新的这个data传给m.data
        eventBus.trigger('xxx')//触发xxx事件
        localStorage.setItem(localKey, m.data.index)

    },
    }
    const c = {
    init(container) {
        v.init(container)
        v.render(m.data.index)
        c.autoBlindEvents()
        eventBus.on('xxx', () => {
            v.render(m.data.index)

        })//接收到消息，将网页再次渲染
    }
    }

EventBus 常用API，上述例子已经介绍了其中两个，一个叫做trigger 触发函数， on 监听函数，还有一个叫做off 停止监听函数。

表驱动编程

这个概念比较抽象，简单讲是指用查表的方法获取值，表驱动法是一种编程模式，表里可以存数据，也可以存指令，或函数等都可以。在数值不多的时候我们可以用逻辑语句(if/else 或 case do)的方法来获取值,但随着数值的增多逻辑语句就会越来越长,此时表驱动法的优势就显现出来了。一个简单的例子来做演示

function color(flower){
    if(flower==="rose"){
        console.log(flower+'is red')
    }else if(flower==="chrysanthemum"){
        console.log(flower+'is yellow')
    }else if(){
       
    }
    //....等等
}
换用表驱动编程变为如下
const flowerList={
    "rose":red
    "chrysanthemum":yellow
    "Gardenia":white
    
}
function color(flower){
    if(flower in flowerList){
        console.log(flower+'is'+flowerList[flower])
    }else {
        console.log('没有此花')
    }
    
}

目前看来或许两者差异不大，但是当花的种类非常之多的时候，运用方法二会明显减少重复代码量。

模块化

模块化可大可小，可以是把一个js文件当做一个模块也可以是把一个函数一个对象当成一个模块，使用模块化的好处就是把每个不相同的功能分成不同模块，互不依赖，互不影响，有利于代码的维护和读写，更重要的是再也不用写大量重复的代码。