浅析 MVC-一一网

当一个系统开始庞大起来，为了方便后续维护，那么就要考虑使用一些方法来进行解耦了。
mvc 模式： 引入分层的概念，但是层与层之间耦合明显。

MVC

MVC 模式将程序分为三个部分：模型（Model）、视图（View）、控制器（Controller）。

Model 模型层：
模型层：业务数据的处理和存储，数据更新后更新；
View 视图层：
视图层：人机交互接口，一般为展示给用户的界面；
Controller 控制器层
控制器层：负责连接 Model 层和 View 层，接受并处理 View 层触发的事件，并在 Model 层的数据状态变动时更新 View 层；

MVC 模式的目的是通过引入Controller层来将Model层和View层分离，使得系统在可维护性和可读性上有了进步。

mvc模式只是一种思想，可以有多种表达形式，但是基础的思想是不变的。

典型MVC思路

典型思路是View层通过事件通知到 Controller层，Controller 层经过对事件的处理完成相关业务逻辑，要求Model层改变数据状态，Model层再将新数据更新到View层。

伪代码

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



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



// 伪代码示例
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
复制代码

EventBus

作用：对象间通信
在controller层监听事件，Model层触发事件

api

on（监听事件）
trigger（触发事件）
off（取消监听）

eventBus.trigger('m:updated') // 触发事件,大叫'm 已经更新了'
eventBus.on('m:updated', () => { console.log('here') }) '监听事件，听到后执行函数'
复制代码

表驱动编程

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

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

将一类操作抽象出来，再将if…else… 判断的内容放入hash表中，这样不论有多少个判断，只需加入hash表中，不用修改逻辑代码。

// 上面Controller层的自动绑定事件
events:{  // 事件集合的哈希表
   'click #app1': 'a操作'，
   'click #app2': 'b操作'，
   'click #app3': 'c操作'，
   'click #app4': 'd操作'，
} 
autoBindEvents() { // 通过哈希变自动绑定事件
    for ( let key in c.events) {
        if ( c.events.hasOwnProperty(key) ) {
            const spaceIndex = key.indexOf(' ')   // 找到'click #app1'空格的数组下标
            const part1 = key.slice(0, spaceIndex) // 通过spaceIndex 分割 'click' 和 '#app1'
            const part2 = key.slice(spaceIndex + 1)
            const value = c[c.events[key]]
            v.el.on(part1, part2, value)  // 自动把多个事件绑定在一个元素上
        }
    }
}
复制代码

模块化

解耦，解耦，解耦！
减少重复代码，提高代码重用性，并且在项目结构上更加清晰，便于维护。

export

export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。
存在两种 exports 导出方式：

命名导出（每个模块包含任意数量）
默认导出（每个模块包含一个）

// 导出单个特性
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// 导出列表
export { name1, name2, …, nameN };

// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };

// 解构导出并重命名
export const { name1, name2: bar } = o;

// 默认导出
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };

// 导出模块合集
export * from …; // does not set the default export
export * as name1 from …; // Draft ECMAScript® 2O21
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
复制代码