学习MVC有感

MVC是什么？

MVC(Model View Controller)是一种架构设计模式

M ： model，即数据层（数据模型），负责操作所有的数据。

V ：view，即视图层，负责所有UI界面，是提供给用户的操作界面，是程序的外壳。

C ：Controller,即控制层，负责根据用户从“视图层”输入指令，选取“数据层中的数据”，对其进行相应操作(绑定事件等），产生最终结果。

Model 数据层

操作数据
const m = {
    data: {
    // 获取数据
    },
    create() {},
    delete() {},
    change(data) {},// 传入数据，并触发数据渲染事件来更新事件
    get() {},
}

View 视图层

渲染页面
const v = {
    el: null,
    html:'页面模板的字符串',
    init(container) {
        v.el = $(container) //  获取需要添加元素的地址
    },
    render(index) {
       //    渲染
    },
}

Controller 控制层

初始化 负责绑定事件
const c = {
    init(container) { // 初始化程序
        v.init(container)
        v.render(m.data.localIndex) // 第一次渲染 view= ranDer(data)
        c.autoBindEvent()
        eventBus.on('n:change',()=>{
            v.render(m.data.localIndex)
            localStorage.setItem('tab-index', m.data.localIndex)
        })
    },
    events: { // 需要绑定事件的元素
        'click .tab-bar li': 'x',
    },
    x(e){  // 事件执行内容
        const index= parseInt(e.currentTarget.dataset.index);
        m.change({localIndex:index})
    },
    autoBindEvent(){ // 自动绑定事件
        for (let key in c.events){
        const spaceIndex = key.indexOf(' ')
        // console.log( c[c.events[key]]);
        v.el.on(key.slice(0,spaceIndex),key.slice(spaceIndex+1),(e)=>{
            c[c.events[key]](e)
        })
        }
    },
    
}

EventBus

EventBus主要作用是负责获取到数据发生改变时，进行数据更新。所以它及其重要的api是绑定事件EventBus.on,触发事件EventBus.trigger()。

比如说通过按键进行加减的功能，首先是通过点击按键触发写在数据层的change函数，chang函数传入改变的数值，并触发 先前通过EventBus.trigger()设置的名为n:change的函数。EventBus.on()监听名为n:change的事件，一旦触发执行页面渲染程序，完成数据的更新。

表驱动编程

在《代码大全》对表驱动编程的描述：

表驱动方法是一种使你可以在表中查找信息，而不必用逻辑语句（if 或 case）来把他们找出来的方法。事实上，任何信息都可以通过表来挑选。在简单的情况下，逻辑语句往往更简单而且更直接。但随着逻辑链的复杂，表就变得越来越富于吸引力了。

我对表驱动的理解是一般用于雷同性高的代码，将雷同的代码去除，提取出重要的数据形成哈希表。再将其重组形成简洁又不重复的代码。

bindEvents(){
    c.ui.button1.on('click', () => {
        m.data.n += 1
        v.render()
        localStorage.setItem("number",  m.data.n)
    })
    c.ui.button2.on('click', () => {
        let result = parseInt($('#result').text())
        result = result - 1
        $('#result').text(result)
        localStorage.setItem("number", result)
    })
    c.ui.button3.on('click', () => {
        let result = parseInt($('#result').text())
        result = result * 2
        $('#result').text(result)
        localStorage.setItem("number", result)
    })
    c.ui.button4.on('click', () => {
        let result = parseInt($('#result').text())
        result = result / 2
        $('#result').text(result)
        localStorage.setItem("number", result)
    })
}



// 简化为

 events: {
        'click .add1': 'add',
        'click .minus1': 'minus',
        'click .mul2': 'mul',
        'click .divide2': 'div',
    },
    add() {
        m.change(m.data.n+1)
    },
    minus() {
        m.change(m.data.n-1)
    },
    mul() {
        m.change(m.data.n*2)
    },
    div() {
        m.change(m.data.n/2)
    },
    autoBindEvent(){
        for (let key in c.events){
        const spaceIndex = key.indexOf(' ')
        // console.log( c[c.events[key]]);
        v.el.on(key.slice(0,spaceIndex),key.slice(spaceIndex+1),()=>{
            c[c.events[key]]()
        })
        }
    },

如何理解模块化

一个页面最基础的需要index.html,main.js,style.css 三个文件。编写简单的页面时，不会太复杂，但是在编写页面上功能模块较多时，过了一段时间自己都看不懂写的是什么，很难进行修改维护。那么可以通过模块化思想，首先是将页面的各个部分进行模块化，分出来一个个小功能模块，在继续将小功能模块进行细分，分为数据层，视图层和控制层。虽然模块化在应用于简单页面时，复杂程度比直接写会多一些固定的步骤，但是其复杂度是恒定的，在应用于负载页面时，能够很好的区分代码和管理代码，方便日后维护。