我所理解的MVC

1.MVC 三个对象
MVC即 Model+View+Controller ,其中

  • M-Model数据模型:负责操作所有数据
//示例
let Model={
    data:{数据源},
    create:{增加数据},
    delete:{删除数据},
    update(data){
        Object.assign(m.data,data)//用新数据替换旧数据
        eventBus.trigger('m:update')//eventBus触发'm:update'信息,通知View刷新界面
    },
    get:{获取数据}
}
  • V-View视图:负责所有UI界面
//示例
let View={
    el:要刷新的元素,
    html:'要显示在页面上的内容'
    init(){
        v.el:需要刷新的元素
    },
    render(){
        刷新页面
    }
}
  • C-Controller控制器:负责其他
//示例
let Controller={
    init(){
        v.init()//初始化View
        v.render()//第一次渲染页面
        c.autoBindEvents()//自动的事件绑定
        eventBus.on('m:update',()=>{v.render()}//当enentsBus触发'm:update'是View刷新
    },
    events:{事件以哈希表的方式记录存储},
    method(){
        data=新数据
        m.update(data)
    },
    autoBindEvents(){自动绑定事件}
}

2.EventBus 有哪些 API,是做什么用的,给出伪代码示例
EventBus基本的api有on(监听事件),trigger(emit)(触发事件),off(取消监听)方法。
用于模块间的通讯,view组件层面,父子组件、兄弟组件通信都可以使eventbus处理

//EventBus.js
class EventBus {
    constructor() {
        this._eventBus = $(window)
    }
    on(eventName, fn) {
        return this._eventBus.on(eventName, fn)
    }
    trigger(eventName, data) {
        return this._trigger.trigger(eventName, data)
    }
    off(eventName, fn) {
        return this._eventBus.off(eventName, fn)
    }
}
export default EventBus
//new.js
import EventBus from 'EventBus.js'
const e = new EventBus()
e.on()
e.trigger()
e.off()

3.表驱动编程是做什么的
表驱动法是一种编程模式,从表(哈希表)里面查找信息而不是使用逻辑语句(if…else…switch,可以减少重复代码,只将重要的信息放在表里,然后利用表来编程,与逻辑语句相比较有着更稳定的复杂度
下面这段代码相似性很高,当我们使用表驱动法后

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 #add1' : '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.我是如何理解模块化的
1.当一个html文件需要实现多个功能的时候,我们可以把每个功能抽象成一个模块,针对每一个功能开发不同的模块,这使得模块可以独立开发,在工作中,不同的模块也就可以交由不同的开发人员。
2.而且在开发中我们也会用到一些共同API,这个时候我们也可以把这些抽离成一个公用模块,当需要引用这个函数或者功能的时候,只需要在相应的模块里面用import导入相应的包。
3.so模块化开发是一种管理方式,是一种生产方式,一种解决问题的方案,一个模块就是实现特定功能的文件,有了模块,我们就可以更方便地使用别人的代码,想要什么功能,就加载什么模块
4.模块化可以降低代码耦合度,减少重复代码,提高代码重用性,并且在项目结构上更加清晰,便于维护。

  • 模块功能主要由两个命令构成:export和import,export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能
  • 一般来说,一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量

1.export
模块功能主要由两个命令构成:export和import,export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能
  一般来说,一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取,如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量

2.import
import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块对外接口的名称相同
  关于import其实还有很多用法,具体的大家可以查看相关的文档

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值