MVC(下)

MVC（下）

主要内容:使用类优化代码
1.引入类(class)
2.引入继承(class继承class)
3.初识Vue

抽象思维四:事不过三

同样的代码写三遍，就应该抽成一个函数
同样的属性写三遍，就应该做成共用属性(原型或类)
同样的原型写三遍，就应该用继承
代价
有的时候会造成继承层级太深，无法一下看懂代码
可以通过写文档、画类图解决

步骤
对比MVC的app1.js 和 app2.js，属性几乎一模一样。
何不把公共的属性抽成公共属性/原型，在js里公共属性就是原型。
它们两个v的属性一模一样，可以抽成原型。
它们两个c的公共属性抽到公共属性里。

第一部分:先抽m

步骤
(1)新建目录base存放基础代码，新建文件Model.js(js中的类都大写)。

class Model {
   
}

(2)抽离共用的

分析里面的属性或接口是共用的还是独享的。
app1的data 与app2的data完全没有关系，是独享的不能抽。4个函数可以抽。
可以用原型的思想或类的思想，这里用类的思想。

//(2)所有的model都有增删改查4个属性，不需要实现。
class Model {
   
  constructor(options) {
    //data初始化时给我
    this.data = options.data
  }
  create() {
   
    console?.error?.("你还没实现create")//兼容IE
  }
  delete() {
   
    console?.error?.("你还没实现delete")
  }
  update() {
   
    console?.error?.("你还没实现update")
  }
  get() {
   
    console?.error?.("你还没实现get")
  }
}
export default Model

(3)使用

app1.js
import Model from './base/Model.js' //.js可加可不加

const m = new Model({
    //使用
  data: {
   
    n: parseInt(localStorage.getItem('n'))
  }
})
m.update = (data) => {
   
  Object.assign(m.data, data)
  eventBus.trigger("m:updated")
  localStorage.setItem('n', m.data.n)
}
//console.dir(m)  构造函数或类
//m.create() 还没实现所有报错

函数都在原型里，只有data在当前对象本身上。注:无需逗号

最终版本

将调用也移到构造函数里,就是将m.update移到data的后面。

Model.js
constructor(options) {
   
/*this.data = options.data
  this.create = options.create
  this.delete = options.delete
  this.update = options.update
  this.get = options.get
*///简化为
  ['data','create','delete','update','get'].forEach((key) =>{
    //1'遍历的写法
    if (key in options) {
   
      this[key] = options[key]
    }
  })  
}
  create() {
   
    console?.error?.("你还没实现create")
  }
  delete() {
   
    console?