浅析MVC - 掘金

1.MVC

1.1 MVC定义

总的来说，MVC是一种优化代码结构的设计模式。

每个模块都可以写成三个对象，分别是M,V,C

M-Model(数据模型)，负责操作所有的数据
V-View(视图)，负责所有的UI界面
C-Controller(控制器)，负责其他

1.2 MVC三部分的伪代码实现

Model

Moder = {
    data:{程序需要操作的数据或者信息},
    create:{增数据}，
    delete:{删数据}，
    update(data){
        Object.assign(m.data,data)//使用新数据替换旧数据
        eventBus.trigger('m:uptate')//eventBus触发'm:update'信息，通知View刷新
    }，
    get:{获取数据}

2.View

   View = {
   el:需要刷新的元素，
       html:`<h1>M V C</h1>...`//显示在页面上的内容
       init(){
           v.el:需要刷新的元素
       },
       render(){
           刷新页面
       }

3.Controller

Controller = {
   init(){
      v.init() // View初始化
      v.render() // 第一次渲染
      c.autoBindEvents() // 自动的事件绑定
      eventBus.on('m:update', () => { v.render() }) // 当eventBus触发'm:update'时View刷新
   },
   events:{ 事件以哈希表方式记录 }，
   method() {
      data = 改变后的新数据
      m.update(data)
   }，
   autoBindEvents() { 自动绑定事件 }
}EventBus

2.EventBus

2.1EventBus定义

EventBus学名事件总线
EventBus主要负责对象和对象之间的通信

2.2EventBus常用的API及其伪代码

on（监听事件）
trigger（触发事件）
off（取消监听）
eventBus.trigger('m:updated') // 触发事件,'m 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听
到后执行函数'

3.表驱动编程

3.1定义

表驱动编程是一种编程模式——适合从表里面查找信息而不适用逻辑语句.

3.2代码举例

function age(name){
    if(name==="小明"){
        console.log("年龄是"+10)
    }else if(name==="小白"){
        console.log("年龄是"+14)
    }else if(){
       
    }
    //....等等
}


function age2(name){
    const list={
        "小明":10,
        "小白":14,
        //等等...
    }
    if(name in list){
        console.log(name+"的年龄是"+list[name])
    }else{
        console.log("查无此人")
    }
}

age2()就使用了哈希表来替换逻辑语句，体现了表驱动编程的思想，使得代码更加简洁

4.模块化

如果不使用模块化的思想来编程，那么写出的代码全部会在一个文件里面，这样的好处可能是在最开始写代码的时候思路和代码的顺序是一致的，但是坏处是很不便于后期维护。没有模块化的代码在有经验的程序员的眼中会是烂代码。所以为了便于维护，我们可以将没有模块化的代码分成一个个模块，每个模块实现一种功能，比如所有的网页都能用MVC的设计模式。