浅析MVC - 掘金

浅析MVC

1. MVC三个对象分别做什么？

M:模型（Model）：数据保存
V:视图（View）：用户界面
C:控制器（Controller）：业务逻辑
各部分的伪代码实现：

Model

Model = {
    data:{程序员需要操作的数据或信息}
    creat：{增数据}
    delete：{删数据}
    update（data）{
        Object.assign（m.data,data）//使用新数据替换旧数据
        eventBus.triiger('m.update')//eventBus触发'm:update'信息，通知View刷新
    }，
    get:{获取数据}
}
复制代码

View

View = {
    el:需要刷新的元素，
    html:`<h1>MVC</h1>...显示在页面上的内容`
    init(){
        v.el:需要刷新的元素
    }，
    render(){刷新页面}
}
复制代码

Controller

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

2. EventBus 有哪些 API，它们有哪些功能

DOM的事件机制就是发布订阅模式最常见的实现，这大概是前端最常用的编程模型了，监听某事件，当该事件发生时，监听该事件的监听函数被调用。eventBus就是实现发布订阅模式的一种方法。
其实jQuery和Vue构造出来的对象都有监听事件的方法，我们只需要构造一个对象，然后调用他的on和trriger方法实现组件之间的通信。
下面介绍几个Vue常用的事件api及其内部实现。

$on事件的订阅

$on(eventName,callback)
//参数1：事件名称   参数2：事件函数
//判断当前事件名称是否存在，如果不存在创造一个key值为事件名称
//value为一个数组 将callback push到数组中

const eventList = {};
const $on = (eventName, callback) =>{
    if(!eventList[eventName]){
        eventList[evenName] = [];
    }
    eventList[eventName].push(callback)
}
复制代码

$off事件的解绑

$off(eventName,[callback])
//参数1：事件名称    参数2：[事件函数]
//判断当前事件名称是否存在，如果存在继续判断第二个参数是否存在，如果存在则找打相对应的下标，然后将函数在数组中移除
//如果不存在则将整个数组清空

const eventList = {};
const $off = (eventName,callback)=>{
    if(eventList[eventName]){
        if(callback){
            let index = eventList[eventName].indexOf(callback);
            eventList[eventName].splice(index,1)
        }
    }else{
        eventList[eventName].length = 0;
    }
}

export default = {
    $on,
    $emit,
    $off
}
复制代码

$emit事件的触发

$emit(evnetName,[params])
//参数1：事件名称    参数2：[需要传递的参数]
//判断当前事件的名称是否存在，如果存在则遍历数组，得到所有的函数并执行。
//然后将params当作实参传递到函数中去

const eventList = [];
cosnt $emit = (eventName,params) => {
    if(eventList[eventName]){
        let arr = eventList[eventName];
        arr.map((cb)=>{
            cb(params)
        })
    }
}
复制代码

3.表驱动编程

首先从以下简单的例子感受表驱动编程

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

假如我们写一个查询年龄的函数，如果用if else语句写，那么有多少人就得写多少个if else语句，这样我们的代码量是线性增长的，如果我们用一个哈希表来记录这些映射关系会怎样？

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

这样，我们的数据就和代码部分分离了。函数主体只是去表中查找然后输出结果，这就是表驱动编程的基本思想。

4. 如何理解模块化

为了实现代码的可复用性，便于管理及可移植性，以及防止作用域冲突等，模块化是历史的必然。因为人们厌倦重复，所以衍生出了MVC，把一个页面上的不同部分的功能分离，把一个页面上的不同部分的功能分离，把一个功能的数据，视图，控制分离。