lixinliang

不懂用户体验的技术不是好设计

🎈 代理对象

简语

AOP，面向切面编程。

具体定义，网上资料很多，这里不再重复。

虽然，在构建一般项目下，

我们不一定常常围绕，AOP 模块来开发。

但是，在调试或者重构，我们会经常用到它。

举个栗子 🌰

https://github.com/lixinliang/use-vue/blob/c7dd7fad057c45bce0ea229fc9b6c223eea88a08/index.js#L70

这里，定义了一个变量，$mount 指向原函数。

并且，定义一个匿名函数，覆盖了原函数。

在匿名函数的内部，

我们可以添加我们需要的代码，

然后，通过 $mount.apply(this, arguments)，无污染地重新实现原方法的逻辑。

AOP 就是这么个意思。

推荐一篇 AlloyTeam 的文章，有对 AOP 更深入的研究。

http://www.alloyteam.com/2013/08/yong-aop-gai-shan-javascript-dai-ma/

新特性

今天，讨论的内容，

主要是代理对象，也就是 ES6 的 Proxy 对象。

Proxy 是一个构造函数，

但是，使用 Proxy 生成的实例对象，却不是 instanceof Proxy。

例如，我换成了 Promise 对象。

关于

Proxy 对象用于截获对另一个对象执行的内部低级别操作。

代理对象可以用于拦截、对象虚拟化、日志记录/分析和其他用途。 ⛳️

怎么个意思呢？

响应式

简单来说，

我们都知道，当代的三大主流的数据驱动框架（MVVM），React、Angular、Vue。

在高级浏览器中，为了实现响应式数据，

它们的底层实现，都离不开 getter，setter。

举个栗子 🌰

我们定义了，window 对象的 test 属性的 getter 和 setter，

因此，当我们访问 test 的时候，包括使用它赋值、计算、传参等，

都进入了 getter 的钩子函数，

在返回内容时，我们可以处理一些逻辑。

setter 道理同上。

代理

getter，setter 带给了我们非常多的便利，

不过，前提是，我们知道，这个属性的名字叫 test。

因此，代理对象就诞生了。

代理对象，可以理解为，

整个对象的，任意属性，都应用了 getter，setter。

举个栗子 🌰

无论我们访问 a，b 还是 c，都进入了 getter 的钩子函数，

我们根本不需要担心，用户想访问什么，

一切都在目标射程之内 🎯

我们既可以根据不同的情况返回不同的内容，

当然也可以返回相同内容，

或者作为 fallback 的默认值。

黑科技

而且，

为什么，我们就不能返回 Proxy 我自己呢？

这样，我们就永远跟 undefined 讲再见了。 👋

代码如下：

var anything = new Proxy({}, {
    get () {
        console.log('getter');
        return anything;
    },
    set () {
        console.log('setter');
        return anything;
    },
});

新玩具

访问是没有问题了，

不过，调用方法还是会报错。

所以，我们传入的参数，从 {} 改为 function () {}，

就可以了。

具体实现如下：

https://github.com/lixinliang/proxy-any

https://www.npmjs.com/package/proxy-any

我们的新玩具，就诞生了：

场景

在开发某些工作项目的时候，

开发环境 与 生产环境，并不是完全一致，

取决于，运行我们的代码的宿主，可能是 Chrome、Wechat、App、Electron 甚至 Node 等等。

宿主提供的 API 我们在 开发环境 并不具备，

这时候，ProxyAny 主要目的是简单实现这些 API，

我们并不需要完全实现等同的效果，

在 handle 的回调函数里面，我们只需要确保代码不报错，让程序继续执行而已。

灵感