[ES6]探究数据绑定之Proxy

时间 2021-07-22

标签 javascript html java git es6 github 数组 app 异步函数栏目 JavaScript 繁體版

原文原文链接

知识储备

Proxy 方式实现数据绑定中涉及到 Proxy、Reflect、Set、Map 和 WeakMap，这些都是 ES6 的新特性。javascript

Proxy

Proxy 对象代理，在目标对象以前架设一层拦截，外部对目标对象的操做，都会经过这层拦截，咱们能够定制拦截行为，每个被代理的拦截行为都对应一个处理函数。html

1java

let p = new Proxy(target, handler);git

1es6

2github

3数组

4app

5异步

6函数

var handler = {

get: (target, name, recevier) => {

return 'proxy'

}

var p = new Proxy({}, handler)

p.a = 1

console.log(p.a, p.c) // -> proxy proxy

Proxy 构造函数接收两个参数：

第一个参数是要代理的目标对象
第二个参数是配置对象，每个被代理的操做都对应一个处理函数

在这个例子中，目标对象是一个空对象，配置对象中有一个 get 函数，用来拦截外部对目标对象属性的访问，能够看到，get 函数始终返回 proxy。

Proxy 支持拦截的操做一共有13种：

get(target, propKey, receiver)
set(target, propKey, value, receiver)
has(target, propKey)
deleteProperty(target, propKey)
ownKeys(target)
getOwnPropertyDescriptor(target, propKey)
defineProperty(target, propKey, propDesc)
preventExtensions(target)
getPrototypeOf(target)
isExtensible(target)
setPrototypeOf(target, proto)
apply(target, object, args)
construct(target, args)

👉 更详细介绍参考：
MDN·Proxy
Proxy

Reflect

Reflect 对象同 Proxy 对象同样，也是 ES6 为了操做对象而提供的新特性。

Reflect 对象的方法与 Proxy 对象的方法一一对应，只要是 Proxy 对象的方法，就能在 Reflect 对象上找到对应的静态方法（Reflect 对象没有构造函数，不能使用 new 建立实例）。这就让 Proxy 对象能够方便地调用对应的 Reflect 方法，完成默认行为，做为修改行为的基础。也就是说，无论 Proxy 怎么修改默认行为，你总能够在 Reflect 上获取默认行为。

var handler = {

get: (target, name, recevier) => {

console.log('get: ', name)

Reflect.get(target, name)

set: (target, name, value, recevier) => {

console.log('set: ', name)

Reflect.get(target, name, value)

}

var p = new Proxy({}, handler)

p.a = 1

console.log(p.a, p.c)

代码执行结果，输出：

set: a

get: a

get: c

上面代码中，Proxy 拦截目标对象的 get 和 set方法，在其中定制拦截行为，最后采用 Reflect.get 和 Reflect.set 分别完成目标对象默认的属性获取和设置行为。

👉 更详细介绍参考：
MDN·Reflect
Reflect

Set/WeakSet 和 Map/WeakMap

Set

相似 Array 数组
Set 容许你存储任何类型的惟一值，不管是原始值或者是对象引用
Set 成员的值都是惟一的，没有重复值

WeakSet

相似 Set，也是不重复元素的集合
WeakSet 对象中只能存放对象值, 不能存放原始值, 而 Set 对象均可以
WeakSet 对象中存储的对象值都是被弱引用的, 若是没有其余的变量或属性引用这个对象值, 则这个对象值会被当成垃圾回收掉. 正由于这样, WeakSet 对象是没法被枚举的, 没有办法拿到它包含的全部元素

Map

相似 Object 对象，保存键值对
Map 任何值(对象或者原始值) 均可以做为一个键(key)或一个值(value)，而 Object 对象的 key 键值只能是字符串

WeakMap

相似 Map，也是一组键值对的集合
WeakMap 对象中的键是弱引用的。键必须是对象，值能够是任意值
因为这样的弱引用，只要所引用的对象的其余引用都被清除，垃圾回收机制就会释放该对象所占用的内存。也就是说，一旦再也不须要，WeakMap 里面的键名对象和所对应的键值对会自动消失，不用手动删除引用，原理同 WeakSet
WeakMap 的 key 是非枚举的

Proxy 实现数据绑定

先上完整代码 👉

// 监听对象集合

var observers = new WeakMap()

// 待执行监听函数集合，Set 能够避免重复

var queuedObservers = new Set()

// 当前监听函数

var currentObserver

function observable(obj) {

observers.set(obj, new Map())

return new Proxy(obj, { get, set })

}

function get(target, key, receiver) {

// get 方法默认行为

const result = Reflect.get(target, key, receiver)

// 当前监听函数中，监听使用了该属性，

// 那么把该监听函数存放到该属性对应的对象属性监听函数集合 Set

if (currentObserver) {

registerObserver(target, key, currentObserver)

}

return result

}

function registerObserver(target, key, observer) {

let observersForKey = observers.get(target).get(key)

// 为每个对象属性都建立一个 Set 集合，存放监听了该属性的监听函数

if (!observersForKey) {

observersForKey = new Set()

observers.get(target).set(key, observersForKey)

}

observersForKey.add(observer)

}

function set(target, key, value, receiver) {

const observersForKey = observers.get(target).get(key)

// 修改对象属性，即对象属性值发生变动时，

// 判断对象属性监听函数集合 Set 是否存在，将其中的全部监听函数都添加到待执行监听函数集合

if (observersForKey) {

observersForKey.forEach(queueObserver)

}

// set 方法默认行为

return Reflect.set(target, key, value, receiver)

}

function observe(fn) {

queueObserver(fn)

}

// 将监听函数添加到待执行监听函数集合 Set 中

// 若是待执行监听函数集合 Set 为空，那么在添加后当即执行

function queueObserver(observer) {

if (queuedObservers.size === 0) {

// 异步执行

Promise.resolve().then(runObservers)

}

queuedObservers.add(observer)

}

// 执行待执行监听函数集合 Set 中的监听函数

// 执行完毕后，进行清理工做

function runObservers() {

try {

queuedObservers.forEach((observer) => {

currentObserver = observer

observer()

})

} finally {

currentObserver = undefined

queuedObservers.clear()

}

对外暴露的 observable(obj) 和 observe(fn) 方法两者分别用于建立 observable 监听对象和 observer 监听回调函数。当 observable 监听对象发生属性变化时，observer 函数将自动执行。

测试用例：

var obj = {name: 'John', age: 20}

// observable object

var person = observable(obj)

function print () {

console.log(`监听属性发生变化：${person.name}, ${person.age}`)

}

// observer function

observe(print)

分析接口方法

关于 observable(obj) 和 observe(fn)：
observable(obj) 方法中，经过 ES6 Proxy 为目标对象 obj 建立代理，拦截 get 和 set 操做

当前监听函数：currentObserver
待执行监听函数集合 Set：var queuedObservers = new Set()
监听对象集合 WeakMap：var observers = new WeakMap() 键值为监听对象
对象属性监听函数集合 Set：监听了对象属性的监听函数，都保存到对象属性监听函数集合 Set 中，方便在对象属性发生变动时，执行监听函数
拦截方法 get：使用 obj.property 获取对象属性，即会被拦截方法 get 拦截
👉 查看 get 中的注释
拦截方法 set：使用 obj.property = value 设置对象属性，即会被拦截方法 set 拦截
👉 查看 set 中的注释

observe(fn) 方法中，添加对象属性监听函数
监听函数中使用 obj.property 获取对象属性，即代表监听函数监听了该属性，那么就会触发拦截方法 get 中对监听属性的逻辑处理，为其建立对象属性监听函数集合 Set，并将当前的监听函数添加进其中

分析测试用例

下面经过流程图讲解一下测试用例的执行过程

经过 observable 方法建立代理对象 person
observe 方法设置监听函数，此时待执行监听函数集合 Set 为空，监听函数添加到 Set 中后执行待执行监听函数集合 Set 中的监听函数
在 runObservers 方法中当前监听函数 currentObserver 被设为 print
print 开始执行
在 print 内部检索到 person.name
在 person 上触发拦截方法 get
observers.get(person).get('name') 检索到 (person, name) 组合的对象属性监听函数集 Set
当前监听函数 print 被添加到对象属性监听函数集 Set 中
对于 person.age，同理，执行前面在 print 内部检索到 person.name 的流程
${person.name}, ${person.age} 打印出来；
print 函数执行结束；
当前监听函数 currentObserver 变为 undefined

当调用 person.age = 22 修改对象属性时：

person 上触发拦截方法 set
observers.get(person).get('age') 检索到 (person, age) 组合的对象属性监听函数集 Set
对象属性监听函数集 Set 中的监听函数（包括 print）入待执行监听函数集合，准备执行
再次执行 print

高级主题

动态 observable tree

var obj = {

name: 'John',

age: 20,

teacher: {

name: 'Tom',

age: 30

}}

// observable object

var person = observable(obj)

function print () {

console.log(`监听属性发生变化：${person.teacher.name}, ${person.teacher.age}`)

}

// observer function

observe(print)

setTimeout(() => {person.teacher.name = 'Jack'})

到目前为止，单层对象的数据绑定监听是正常工做的。可是在这个例子中，咱们监听的对象值又是对象，这个时候监听就失效了，咱们须要将：

1	observable({data: {name: 'John'}})

替换成

1	observable({data: observable({name: 'John'})})

这样就能正常运行了 😋

显然，这样使用不方便，能够作拦截方法 get 中修改一下，在返回值是对象时，对返回值对象也调用 observable(obj) 为其建立监听对象。

function get(target, key, receiver) {

const result = Reflect.get(target, key, receiver)

if (currentObserver) {

registerObserver(target, key, currentObserver)

if (typeof result === 'object') {

const observableResult = observable(result)

Reflect.set(target, key, observableResult, receiver)

return observableResult

}

return result

}

继承

对于 Proxy 拦截操做也能够在原型链中被继承，例如：

let proto = new Proxy({}, {

get(target, propertyKey, receiver) {

console.log('GET ' + propertyKey);

return Reflect.get(target, propertyKey, receiver);

}

});

let obj = Object.create(proto);

obj.foo // "GET foo"

上面代码中，拦截操做 get 定义在原型对象上面，因此若是读取 obj 对象属性时，拦截会生效。

同理，经过 Proxy 实现的数据绑定也能与原型继承搭配工做，例如：

const parent = observable({greeting: 'Hello'})

const child = observable({subject: 'World!'})

Object.setPrototypeOf(child, parent)

function print () {

console.log(`${child.greeting} ${child.subject}`)

}

// 控制台打印出 'Hello World!'

observe(print)

// 控制台打印出 'Hello There!'

setTimeout(() => child.subject = 'There!')

// 控制台打印出 'Hey There!'

setTimeout(() => parent.greeting = 'Hey', 100)

// 控制台打印出 'Look There!'

setTimeout(() => child.greeting = 'Look', 200)

源码

本文中经过简单的代码展现了 Proxy 实现数据绑定，更加完整的实现，参考：nx-js/observer-util

参考连接

Writing a JavaScript Framework - Data Binding with ES6 Proxies
使用 ES6 Proxy 实现数据绑定