「前端学习」浅析 MVC

1. MVC 三个对象分别做什么，给出伪代码示例

• M: Model(数据模型)负责操作所有数据
  伪代码:

const m = {
    data: {},
    create() {增 },
    delete() { 删},
    update() {改},
    get() {查}
}

• V: View(视图)负责所有UI界面
  伪代码:

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

• C: Controller(控制器), 负责除了M和V的事情的其他事情.
  伪代码:

const c = {
    init(container) {})
    }, 
    events: { 事件}, 
    add() {详细执行},
    minus() {详细执行},
    mul() {详细执行},
    div() {详细执行},
    autoBindEvents() {逻辑}
    }

}

2. EventBus 有哪些 API，是做什么用的，给出伪代码示例

​EventBus 基本的 ​API 有 ​on （监听事件）， ​trigger （触发事件）, ​off （取消监听）方法。

用于模块间的通讯， ​view 组件层面，父子组件、兄弟组件通信都可以使 ​eventbus 处理

    constructor(){
        this._eventBus =$(window)
    }
    on(eventName, fn){
        return this._eventBus.on(eventName,fn)
    }
    trigger(eventName,data){
        return this._trigger.tiggger(eventName,data)
    }
    off(eventName, fn){
        return this._eventBus.off(eventName,fn)
    }
}
export default EventBus

3. 什么是表驱动编程

摘自《代码大全2》: 表驱动法是一种编程模式(scheme)——从表里面查找信息而不使用逻辑语句(if和case)。事实上，凡是能通过逻辑语句来选择的事物，都可以通过查表来选择。对简单的情况而言，使用逻辑语句更为容易和直白。但随着逻辑链的越来越发杂，查表法也就愈发显得更具吸引力。

简单来说就是减少重复代码
举个例子:

bindEvents(){
    v.el.on('click','#add1',()=>{
    m.data.n +=1
    v.render(m.data.n)
    })
    v.el.on('click','#minus1',()=>{
    m.data.n-=1
    v.render(m.data.n)
    })
    v.el.on('click','#mul2',()=>{
        m.data.n*=2
        v.render(m.data.n)
    })
    v.el.on('click','#divide2',()=>{
        m.data.n/=2
        v.render(m.data.n)
    })
}

表驱动编程改写为:

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})
}

4. 如何理解模块化的

• 为什么要模块化
  javascript这门语言被创造出来时，它只是基于浏览器的。但自1996年以来，已经有各种各样的JavaScript平台可以在浏览器之外进行编程，官方定义的API只能构建基于浏览器的应用程序。人们逐渐认识到了问题的严重性：
  1. JavaScript没有模块系统。要编写JavaScript脚本，必须以HTML格式管理，连接，注入或手动获取和评估它们。没有用于范围隔离或依赖关系管理的本机工具。
  2. JavaScript没有标准库。它有浏览器API，日期和数学，但没有文件系统API，更不用说IO流API或二进制数据的原始类型。
  3. JavaScript没有Web服务器或数据库之类的标准接口。
  4. JavaScript没有管理依赖关系并自动安装它们的软件包管理系统，除了JSAN（不要与JSON混淆），这不符合范围隔离。
• 模块化的好处:
  1. 避免变量污染，命名冲突
  2. 提高代码复用率
  3. 提高维护性
  4. 依赖关系的管理