浅析MVC

1. MVC 三个对象分别做什么，给出伪代码示例

MVC分别指model模型，view视图，controler控制器。

model

model是和数据相关的代码集合的对象，这里是所有模块数据的来源，更新数据也要调用它的方法。如下代码中，data用来存放数据，update是更新数据的方法。

const m ={
       data:{n: parseInt(localStorage.getItem('n')},
        update(data) {//  更新数据，储存数据
            Object.assign(m.data, data)//  替换对象的属性
            localStorage.setItem('n', data.n)
            eventBus.trigger('dataUpdate')//  触发eventBus的dataUpdate事件
        }
       }

view

view是和视图相关代码集合的对象，这里是渲染页面的方法render，以及渲染页面要用到的页面内容html,容器el。

const v={
    el: null,
    html: `
    <div>
    <p class="data">{{data}}</p>
    <button class="add">+1</button>
    <button class="subtract">-1</button>
    <button class="multiply">×2</button>
    <button class="divide">÷2</button>
    </div>
    `,
    render(n) {
        if (v.el.children.length !== 0) {
            v.el.empty()
        }
        $(v.html.replace('{{data}}', n))
            .appendTo(v.el)
    },
    init(container) {
        v.el = $(container)
        v.render(m.data.n)
}

controler

controler是衔接视图和数据间的代码集合的对象，是操作view和model代码的代码。在如下代码中，他需要绑定事件，调用view和model中的代码初始化页面。

let c = {
    init(container) {
        v.init(container)
        c.autoBindEvents()
        eventBus.on('dataUpdate', () => {//  监听’dataUpdate‘数据更新事件
            v.render(m.data.n)
        })
    },
    events: {//  把绑定事件的信息做成hash表，自动绑定事件
        'click .add': 'add',
        'click .subtract': 'subtract',
        'click .multiply': 'multiply',
        'click .divide': 'divide'
    },
    add() {
        m.update({ 'n': m.data.n += 1 })
    },
    subtract() {
        m.update({ 'n': m.data.n -= 1 })
    },
    multiply() {
        m.update({ 'n': m.data.n *= 2 })
    },
    divide() {
        m.update({ 'n': m.data.n /= 2 })
    },
    autoBindEvents() {
        for (let key in c.events) {
            const value = c.events[key]
            const spaceIndex = key.indexOf(' ')
            const part1 = key.slice(0, spaceIndex)
            const part2 = key.slice(spaceIndex + 1)
            v.el.on(part1, part2, c[value])
        }
    }
}

2. EventBus有哪些 API，是做什么用的，给出伪代码示例

EventBus可以完成模块间的通信，可以在model模块更新数据时触发事件eventBus.triggle('updateData')，可以controler模块监听'updateData'事件通知view模块的渲染EventBus.on('updateData',v.render)，可以删除事件EventBus.off('updateData')

3.. 表驱动编程

像上面controler中出现多次绑定事件的代码，这些操作里有重复的部分也有不重复的，我们就将重复的部分做成hash表，这样

• 可读性强，数据处理流程一目了然。
• 便于维护，只需要增、删数据索引和方法就可以实现功能。
• 精简代码，降低圈复杂度。减少 if-else、switch-case 使用。
• 在一定程度上可以提升程序运行速度

4. 我是如何理解模块化的

模块化根据功能将代码归类，有利于写出有条理的代码，也提高了可读性。而且模块间采用最小知识原则，将代码内部对外界依赖性降到最低，因此便于维护和因需求变动做出改动。