MVC模式

南派三叔
316 阅读3分钟

1. 什么是MVC

  网上有很多关于MVC的理解，经过我的理解后，MVC就是一种框架，将原来无序的代码划分在M（数据）、V（视图）、C（控制器）三个结构中，使代码结构变得非常清楚，可以针对不同的层进行优化，提高效率，同时能针对单一模块添加功能和重复使用相同模块。

  • M-Model(数据模型),负责操作所有数据。

    如下，申明一个m对象，专门用来存储数据：

const m={
    data:{
        p:3,
        n:Math.random()
    },
    upData(){
        return this.data.p + this.data.n
    }
}
  • V-View（视图）负责所有界面视图
const v={
    html:`
        <div>
            <p>点击数字将生成一个新的随机数</p>
            <div id="btn">{{p}}</div>
        </div>
    `,
    render(){
        $(v.html.replace('{{p}}',m.data.p)).appendTo('body')
    }
}

v.render()
  • C-Controller(控制器)，负责操作数据，达到改变界面视图，是View和Model的连接层
    const c={
        init(){
            $('#btn').on('click',()=>{
                m.upData()    
            })
        }
    }
    
    c.init()

2. 浅析eventBus

eventBus在android界里很有名气，但这里所说的是JS里的eventBus，其实原理是一样的，作用是简化事件通讯，eventBus运用了下面几个DOM原生事件。

1）addEventListener(type, callback, scope) — 添加一个事件监听

2）removeEventListener(type, callback, scope) — 移除一个事件监听

3）dispatch(type, target) — 触发一个事件

4）getEvents() — 调试使用，仅仅打印添加的监听

5）hasEventListener() — 判断是否有事件监听

eventBus将这些事件方法作为继承的属性方法传递给子类 如：

class EventBus{
    //封装这些事件方法
}
class Bus extends EventBus{
    //继承EventBus的属性方法
}

let bus=new Bus()
//调用方法
bus.on(event,fn)
bus.emit(event)
bud.off(event)

这样做的优点在于可以动态设置事件处理线程，实现解耦让业务代码更加简洁。

3. 表驱动编程

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

function days(num){
    if(num===1){return 31+'天'}
    if(num===2){return 28+'天'}
    if(num===3){return 31+'天'}
    if(num===4){return 30+'天'}
    if(num===5){return 31+'天'}
    if(num===6){return 30+'天'}
    if(num===7){return 31+'天'}
    if(num===8){return 31+'天'}
    if(num===9){return 30+'天'}
    if(num===10){return 31+'天'}
    if(num===11){return 30+'天'}
    if(num===12){return 31+'天'}
}

上面是一个查月份天数的函数，可以说是非常冗长了，如果使用表驱动编程思想，再看看

let num=[1,2,3,4,5,6,7,8,9,10,11,12]
let value=[31,28,31,30,31,30,31,31,30,31,30,31]
function days(x){
    for(let i=0;i<num.length;i++){
        if(x===num[i]){
            return value[i]+'天'
        }
    }
}

这代码的复杂度是恒定的，前端最重要的一个编程思想之一就是“事不过三，稳定代码复杂度”，而上面代码的复杂度是递增的，从这一点就可以看出表驱动法编程的重要性，当然，这里的“表”可以指代一切表（哈希表，键值对对象，数组）。

4. 我对模块化的理解

其实这篇文章，全程都在围绕模块化编程叙述，MVC就是一种模块化编程框架，或者说是一种思想方法；eventBus就是将事件作为一个类属性方法，或者说是一个版块封装在我们要操作的对象上；表驱动编程更是模块化编程思想的一大类思想。因此，模块化，就是将我们的代码分割成不同功能版块，使之更简洁，模块之间分工更加明确，提高代码优化效率的一种编程方法。

avatar
文章
阅读
粉丝