简单介绍,学习的是思想。反正你叫我写我也写不出来!

图片

  1. 创建实例后的 data 数据,每一个都会经过object.defineproperty并有一个新的 Dep 对象,
  2. 一个 Dep 会有多个 watcher 观察者,他们的来源是:模板中使用的指令({{msg}})
  3. 而页面视图的更像是在数据改变之后,由对应的 watcher 进行操作

  4. object.defineproperty 监听对象属性的改变

  5. 发布订阅者模式,通知改变刷新界面?

const obj = {
  msg: "message",
  uname: "why",
}
// 监听对象属性的改变
Object.keys(obj).forEach(key => {
  let val = obj[key]
  Object.defineProperty(obj, key, {
    set(newVal) {
      console.log(`监听到:${key} -改变`)
      val = newVal

      dep.notify()
    },
    get() {            
      return val
    },
  })
})

// --------------------------------- 发布订阅者模式

// 发布者
class Dep{
  constructor(){
    this.subs = []
  }

  addSud(watcher){
    // 添加订阅者
    this.subs.push(watcher)
  }

  notify(){
    // 通知所有订阅者,数据发生改变
    this.subs.forEach(item => {
      item.update()
    })
  }
}
// 订阅者
class Watcher{
  constructor(name){
    this.uname = name
  }

  update(){
    console.log('对象发生了 update', this.uname);
  }
}

const dep = new Dep()

// 这几个对象想监听(订阅 某个对象的改变
const w1 = new Watcher('对象一')
const w2 = new Watcher('对象2')
const w3 = new Watcher('对象三')

dep.addSud(w1)
dep.addSud(w2)
dep.addSud(w3)

Object.defineProperty 定义新属性或者修改原来的属性

tips: 应当直接在 Object 构造器对象上调用此方法,而不是在任意一个 Object 类型的实例上调用。

Object.defineProperty(obj, prop, descriptor)
  • obj: 需要修改的对象
  • prop: 对象需要修改的属性名, 传入字符串
  • descriptor: 需要对属性进行的操作, 以对象形式传入 {}
    • value: 设置属性的值, 默认值 undefined
    • writable: 值是否可以重写。 true | false 默认为 false
    • enumerable: 日标属性是否可以被枚举。 true | false 默认为 false
    • configurable: 目标属性是否可以被删除或是否可以再次修改特性 true false 默认为 false

descriptor:

// 在对象中添加一个设置了存取描述符属性的示例, 代理
let obj = {}
let bValue = 38;
Object.defineProperty(obj, "b", {
  get() { return bValue; },
  set(newValue) { bValue = newValue; },
  enumerable : true,
  configurable : true
});
// 对象 o 拥有了属性 b,值为 38

obj.b = 42
obj.b && bValue  // true 42
// 现在,除非重新定义(不是说赋值) o.b,o.b 的值总是与 bValue 相同

相关推荐:

来自系列:Vue 笔记

分类 javaScript下文章:

javascrapt, async函数,的简单了解。 关注点,async, await , promises

js 输入框 防抖

js ES6对象。代码案例:通过一个类来进行dom操作

javaScript 中的类和对象。 js面向对象编程. ES6的class. 通过构造函数和原型来模拟类的实现

ES5 新增的一些方法,非完全

更多...

评论([[comments.sum]])

发表

加载更多([[item.son.length-2]])...

发表

2020-11 By chuan.

Python-flask & bootstrap-flask

图片外链来自:fghrsh

互联网ICP备案号:蜀ICP备2020031846号