8-3 MVC（类优化、类继承）

• 引入类
  class
• 引入继承
  class继承class
• 路由

MVC

１.对象ｍ

• 对象ｍ中的内容
  1.data：存数据
  2.增删改查函数：暂时只用到改

2.对象v

• 内容
  1.el
  2.html
  3.init()：初始化函数调用
  4.render()：渲染

3.对象C

• init()
• events：事件一一映射哈希表
• autoBindEvent：事件绑定
• 一对方法：add、minus、mul等

抽象一：使用类抽象代码

• 对于app1和app2中的对象m，都存在属性data和属性增删改查
  两个app中的对象v和对象c中都存在相同的属性
• 问：为什么不把相同的属性抽成公共属性？
  公共属性：原型
• 抽象思维：
  同样的属性写三遍，就应该做成共用属性（原型或类）

１.抽象M

• 先判断两个app中的对象m中，哪些属性是独有的，哪些是共有的
  增删改查是共有的
  data是不共有的（数据不同）
• 使用类的思想进行抽象
  1.共有属性直接写进去
  2.不共有的属性需要初始化的时候传给我：constructor(options)
  会将它在创建对象的时候放到对象上
• 新建目录base：基础代码
  1.新建文件Model.js（所有类都是首字母大写）
  2.文件里添加类Model，不需要逗号和内容
  3.也就是所有的Model都有增删改查四个属性，不需要给内容，只需要知道有这个属性就行
• Model的类构造好了，传入的对象options则是有需要的内容决定
  1.需要data，传入data
  2.需要updata：可以直接调用覆盖（m.updata = ()=>{函数式}）；或者直接一起放到options上面自定义传入覆盖（调用函数时先看m自身属性再看原型上的）

class Model{
  constructor(options){
  //只要用户创建的时候传入对象，就会把对象上的属性放到这个创建对象的属性上
  //是放在当前创建对象本身身上
   ['data','update','create','delete','get'].forEach((key)=>{
     if(key in options){
       this[key] = options[key]
     }
  })
  }
  //下面这些都是在原型链上的__proto__
  creat(){}
  delete(){}
  update(){}
  get(){}
}

• 创建之后，只要声明
  const m = new Model(options)
  则对象m就可以使用Model中的属性和options上的属性
• 导出：export default Model
• 在app1.js中引入：import Model from './base/Model.js'
• 创建举例：
  对象m中具有data属性和update

const m = new Model({
  data:{n: value}
  update: function(date){
    函数式
  }
})

2.简化V

• base中创建view.js
• 同样创建class View

3.合并VC

• vue.js认为：作为前端的库，核心应该是视图View
• 因此合并对象V和C后，应该还是叫V
• 修改View的class

2.if语句升级

• 基本语句：如果JS中console和console.error存在，则执行

if(console && console.error){
   console.error('你还没有实现 create')
}

• 升级

console && console.error && console.error('你还没有实现 create')

• 升级二：?.语法（也叫：可选链语法）
  注意：这个语法太新了，有些编辑器可能不支持

console?.error?.('你还没有实现 create')

继承EventBus

• 创建EventBus的类
• 偷梁换柱：实际上还是用的jQuery的EventBus，但封装起来看起来像自己写的

import $ from 'jquery'
class EventBus{
  constructor(){
    this._EventBus = $(window)//这是真正的EventBus
  }
  on(eventName,fn){
    return this._eventBus.on(eventName,fn)
  }
  trigger(){}
  off(){}
}

export default EventBus

const e = new EventBus()
e.on()
e.trigger()
e.off()

• 这样写看起来麻烦了（以前直接定义对象，现在还要封装一次再引入），但有好处
• 优点：
  1.可以随时改变EventBus的实现
  2.现在EventBus是用jQuery实现的，如果有一天不用jQuery了，直接把模块中的jQuery删掉就可以了
  3.用了虚拟DOM就不需要jQuery了
• EventBus实现了底层和上层的链接
  底层需要依赖jQuery，但现在在底层和中间层之间多了EventBus，相当于底层是依赖于EventBus，而EventBus依赖于jQuery
  现在要修改jQuery，只需要修改中间层的依赖即可，不会动摇底部跟你
  
• 但多了一层想要on和trigger的调用的时候也多了一层
  由View和Model构造的对象：this.eventBus.on
• 那么如果想要跳过EventBus直接调用呢?
  答：使用继承
  View和Model是类、EventBus也是类，让View和Model都继承EventBus
  
• 实现

import EventBus from './EventBus'
class Model extends EventBus{
  constructor(options){
    super() //初始化EventBus，EventBus#constructor
    其他Model代码
  }
}

• 这样EventBus就是Model的一层原型，父级类，可以直接调用on了
• 注意：JS代码不能以括号开头
  因为括号开头的JS总会去上一层找能不能结合起来

fn()//函数调用
[0,1,2].forEach()//数组遍历

//结合成
fn()[0,1,2].forEach()

• 解决：
  1.要么每句话加分号（不推荐！！！很麻烦！！！）
  2.要么不用括号开头，直接声明一个中间变量 arr

fn()
const arr = [0,1,2]
arr.forEach()