关于前端:响应式数据绑定详解

响应式 / 数据绑定(model==>View):

一旦更新了 data 中的某个属性数据, 所有界面上间接应用或间接应用了此属性的节点都会更新(更新)

实现数据绑定的 2 个重要技术

• 数据劫持 / 监督: 通过 defineProperty()监督 data 中所有属性 (任意档次) 数据的变动, 一旦变动就去更新界面

• 订阅者 - 发布者模式: 能晓得界面上哪些节点须要更新

  四个重要对象

• Observer

  • 用来对 data 所有属性数据进行劫持的构造函数
  • 给 data 中所有属性从新定义属性形容(get/set)
  • 为 data 中的每个属性创立对应的 dep 对象

• Dep(Depend)

  • data 中的每个属性 (所有档次) 都对应一个 dep 对象

  • 创立的机会

    • 在初始化 define data 中各个属性时创立对应的 dep 对象
    • 在 data 中的某个属性值被设置为新的对象时
  • 对象的构造

  {
  id, // 每个 dep 都有一个惟一的 id
  subs // 蕴含 n 个对应 watcher 的数组(subscribes 的简写)
  }

  • subs 属性阐明

    • 当一个 watcher 被创立时, 外部会将以后 watcher 对象增加到对应的 dep 对象的 subs 中
    • 当此 data 属性的值产生扭转时, 所有 subs 中的 watcher 都会收到更新的告诉, 从而最终更新对应的界面

• Compile

  • 用来解析模板页面的对象的构造函数(一个实例)
  • 利用 compile 对象解析模板页面
  • 每解析一个表达式 (非事件指令) 都会创立一个对应的 watcher 对象, 并建设 watcher 与 dep 的关系
  • complie 与 watcher 关系: 一对多的关系

• Watcher

  • 模板中每个非事件指令或表达式都对应一个 watcher 对象
  • 监督以后表达式数据的变动
  • 创立的机会: 在初始化编译模板时

• 对象的组成

• {
  vm, //vm 对象

  exp, // 对应指令的表达式

  cb, // 当表达式所对应的数据产生扭转的回调函数

  value, // 表达式以后的值

  depIds // 表达式中各级属性所对应的 dep 对象的汇合对象

  // 属性名为 dep 的 id, 属性值为 dep

  }

• dep 与 watcher 的关系: 多对多

  • 一个 data 中的属性对应对应一个 dep, 一个 dep 中可能蕴含多个 watcher(模板中有几个表达式应用到了属性)

  • 模板中一个非事件表达式对应一个 watcher, 一个 watcher 中可能蕴含多个 dep(表达式中蕴含了几个 data 属性)