浅析 MVC

MVC是什么

MVC——用于解决页面代码过于重复的一个的设计模式（优化页面代码结构）。
首先：MVC没有严格的定义。那MVC到底是什么？？
每个模块都可以写成三个对象，分别是：

M：Model（数据模型）负责操作所有数据。作用：将所有纯数据的操作放到一个类上。
V：View（视图）负责所有UI界面。作用：渲染视图。
C：Controller（控制器）负责所有其他的操作。作用：监听浏览器事件、监听数据事件等。

M（Model）—— 封装数据操作
数据相关的操作就都放到Model上。
如：把对用户的增删改查等异步请求封装起来

const m = {
    data: {},
    create() //增加
    delete() //删除
    update() //修改
    get() //查看
}

复制代码V（View）—— 渲染视图
由于HTML里面没有数据，所以我们一般都要将数据与HTML混合起来。上面代码是这样做混合的：

const v = {
    el: null,  // 初始化html
    html: `代码`  //视图代码
    ,
    init(container) {
        v.el = $(container)
    },
    render(n) { }
}

复制代码C（Controller）—— 负责M和V以外的其他操作

将content塞到页面里
浏览器事件监听 - 用户点击视图后去更新数据（监听用户交互，用户点了提交或修改按钮，Controller 就要去更新 Model。）
数据事件监听 - 数据更新后去更新视图（监听 Model 变化，Model 一变，Controller 就会去更新 View。）

const c = {
    init(container) {})
    }, 
    events: //事件 
    add() 
    minus() 
    mul() 
    div() 
    autoBindEvents() 
    }
}

复制代码EventBus
EventBus能够简化各组件间的通信，让我们的代码书写变得简单，能有效的分离事件发送方和接收方(也就是解耦的意思)，能避免复杂和容易出错的依赖性和生命周期问题。
作用：

模块通信
模块解耦
父子页面通信
多页面通信

常用API

 class EventBus {
   constructor() {
     this._eventBus = $(window)
   }
   on(eventName, fn) {
     return this._eventBus.on(eventName, fn)
   }

   trigger(eventName, data) {
     return this._eventBus.trigger(eventName, data)
   }

   off(eventName, fn) {
     return this._eventBus.off(eventName, fn)
   }
 }

 // on 是绑定
 // triger 是触发
 // off 是清除

复制代码表驱动编程
表驱动是一种通过查找数据表（哈希表）来查找信息的方法，此方法可以代替用复杂的逻辑结构查找信息（如 if else switch等）。简单的说就是用哈希表来获取值。
表驱动的优点是：

将编程的重心调整到解决问题上，而不是复杂的逻辑判断；
增加了程序的灵活性，易添加，易修改；
数据驱动，如果将数据写入文件，每次启动时，从文件中读取，那么，如果要修改一些变量，可能直接修改数据文件，而不是去修改程序结构；

function age(name){
    if(name==="小明"){
        console.log("年龄是"+10)
    }else if(name==="小白"){
        console.log("年龄是"+14)
    }else if(){
       
    }
    //....等等
}
//↓↓ 以上可以用表驱动方法简写 ↓↓
const list={
    "小明":10,
    "小白":14,
    //等等...
}
function age2(name){
    if(name in list){
        console.log(name+"的年龄是"+list[name])
    }else{
        console.log("查无此人")
    }
}
//这样我们的数据部分就和代码部分分离了，函数主体只是去表中查找然后输出结果，这就是表编程的基本思想

复制代码模块化如何理解
当我们需要实现多个功能的时候，我们可以把每个功能抽象成一个模块，针对每一个功能开发不同的模块，这使得模块可以独立开发。
模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。
模块化的目的是使代码可以重用。
模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。
模块化的好处

避免命名冲突(减少命名空间污染)
灵活架构，焦点分离，方便模块间组合、分解
多人协作互不干扰
高复用性和可维护性

最后编辑于：2020.05.25 17:29:38