浅析MVC1.什么是MVC MVC是一种架构设计模式。通过将一个应用程序分为了三个部分，分别进行操作，分为视图层（Vie

1.什么是MVC

MVC是一种架构设计模式。通过将一个应用程序分为了三个部分，分别进行操作，分为视图层（View），数据层（Model）和控制层（Control）。

视图层（View）：定义了页面的UI布局，控制所有视图相关的属性和方法
数据层（Model）：用于保存和处理页面中展示的数据，定义相关方法。
控制层（Control）：用于处理用户与视图交互，用户改变数据等逻辑，调用视图层和数据层中的方法与数据完成操作。

视图层（View）

let View={
    //要控制的元素（可以是JQ对象或者选择器，能查询到对应元素即可）
    el: el，
    //显示在页面上的内容
    html：`<div></div>`
    // 调用初始化方法渲染对应元素
    init(){
        v.el: function(){}
    }，
    // 渲染到页面中
    render(){
        
    }
}

数据层（Model）

let Model={
    //数据源
    data:{},
    // 增加数据的操作
    create:{},
    // 删除数据的操作
    delete:{},
    // 修改数据的操作
    update(data){ 
        // 按需求操作数据，并通过eventBus通知View刷新界面
    },
    // 获取数据的操作
    get:{}
}

控制层(Control)

let Controller={
    init(){
        init() // 初始化View
        render() // 初次渲染页面
        autoBindEvents() // 自动事件绑定
        eventBus.on('update',()=>{render()} // 数据修改时刷新视图
    }，
    events:{事件以哈希表的方式记录存储},
    method(){
        data= XX // 更新数据
        Model.update() // Controller 通知Model去更新数据
    },
    autoBindEvents(){
    	// 遍历events表，然后自动绑定事件
    }
}

2.事件总线（EventBus)

伪代码：

class EventBus{
    constructor() {
        // 将事件总线对象置换到类中后再操作
        this._eventBus = XXX;
    }
    on(eventName,fn){
        
    }
    trigger(eventName,data){
       
    }
    off(eventName,fn){
        
    }
    once(){
        
    }
}
export default EventBus  // 默认导出

API及其用途

通过 on 方法进行发布事件，传入事件名和函数，保存并创建事件名。

通过 trigger 方法进行订阅事件，跟据传入的事件名，找到对应对象后触发调用每个函数

通过 off 方法进行事件销毁，跟据传入的事件名和函数，找到对应对象后，判断函数是否存在，如果存在的话，找到对应的数组方法后删除。否则将该对象中所有的数据进行删除。

通过 once 方法进行单次事件注册，执行一次后，即可删除。

表驱动编程

用查表的方法获取值：在处理高重复度但不完全相似的代码时，可以抽离核心数据，利用哈希表进行存储。在执行时从表(哈希表)里面查找信息，只将重要的信息放在表里，然后利用表来编程。

events:{
    'click #aa1':'add',
    'click #minus1':'minus',
    'click #mul2':'mul',
    'click #divide2':'div'
},
add(){
    m.update( data: {n:m.data.n +1})
},
minus(){
    m.update( data:{n:m.data.n -1})
},
mul(){
    m.update( data: {n:m.data.n *2})
},
div(){
    m.update(data: {n:m.data.n /2})
}

例如上面这段代码，抽离了需要操作的对象和方法存储在哈希表中，主要有以下几个优点

可读性强，数据处理流程一目了然。
便于维护，只需要增、删数据索引和方法就可以实现功能。
精简代码，降低圈复杂度。减少if else、switch、case使用。

模块化

模块化的意义

模块化开发最终的目的是将程序划分成一个个小的结构。
在结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构。
不同的结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用。也可以通过某种方式，导入另外结构中的变量、函数、对象等。优点：

提高代码可读性
降低代码耦合度，减少重复代码，提高代码重用性。
方便后期维护，需要改动哪个功能可直接找到对应模块。
提高代码安全性，文件内部的所有变量，外部无法获取。

ES6模块化

现在基本使用ES6模块化方法

export可以让我们把变量，函数，对象进行模块话，提供外部调用接口，让外部进行引用。

核心语法

ES6 的模块化主要包含如下 3 种用法：

默认导出与默认导入默认导出的语法： export default 默认导出成员

默认导入的语法： import 接收名称 from '模块'

每个模块中，只允许使用唯一的一次 export default，否则会报错！默认导入时的接收名称可以任意名称，只要是合法的成员名称即可

按需导出与按需导入

按需导出的语法： export 按需导出的成员

按需导入的语法： import { XX } from '模块标识符’

每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用 as 关键字进行重命名
需导入可以和默认导入一起使用

直接导入并执行模块中的代码