乐趣区

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

作者：

jiezi

在

响应式/数据绑定(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属性)

更多文章