6个ES6代理使用案例

这就是我?代理好像在ES6的其他特性的大肆宣传下迷失了自我。

这可能是因为代理太慢或者是只限于支持Safari(没有版本支持),Node(v6是第一个支持的),还有转译器(Babel/TypeScript)。同时,代理具有元编译的特性,使用代理的好处,并没有比使用新的语法,比如箭头,解构等其他语法那么明显。

但我对ES6的代理还是非常激动的,因为它们是一个用来调节访问JS应用程序里面对象的简洁语义化的构造。

什么是代理?

在现实生活中,一个代理是一个人,他被赋予权限去代表别人。举例来说,很多国家允许代理人去投票,这意味着你可以授权别人代表你去投票。

在技术上,代理是一种通用的范例。你可能听说过代理服务器,他负责所有你的请求/传输,把你引导到其他的目的地,并返回响应给你。使用一个代理服务器是很有用的,比如,当你不想要到别人知道你的来源,就到达你所传输的目的地(e.g. nsa.gov)。这样,一个请求的所有目标服务器都被认为是来自代理服务器。

这就慢慢接近了这篇文章的重点,在应用程序编程上,代理在 设计模式 上是有共通之处的。ES6 代理的目的是要做一种类似的模拟,它包含一个包装类(A)和一个其他类(B)去拦截/控制访问它(A)。

当你想用代理模式时,你可能会想要:

拦截或控制访问一个对象

简化模糊的规则或辅助逻辑方法/类的复杂性

没有验证/准备之前,防止重-资源动作。

ES6 的代理

Proxy 构造器在整个全局对象上都可以被访问。用了它你就能于对象跟在其上执行的操作之间拥有一个位置,处在这个位置搜集有关请求的信息,并且返回任何你想要返回的东西。使用这种方式,代理就跟中间件有很多相同点了。

具体而言,代理让你可以拦截通常在一个对象或者其属性上调用的许多的方法, 最常见的就是 get, set, apply (针对函数) 以及 construct (对于函数而言就是用 new 这个关键词)。完整的可以通过代理来拦截的方法列表,可以看看这份文档。代理也可以在任何时候被配置成停止接收请求, 有效的撤销所有针对它们所代理对象的访问操作。这是由一个我稍后会更多的提到的 revoke 方法。

属于

在我们更深入了解以前,有三个词你需要先了解下 : target, handler, 以及 trap。

target 指的是代理所代表的对象。它就是那个你想要节制对其访问的对象。它总是被作为 Proxy构造器的第一个参数传入,并且也会被传入每个 trap 中(更多关于这个的内容在后面两行)。

handler 是一个对象,包含了你想要拦截和处理的操作。它被作为 Proxy 构造器的第二个参数传入。它实现了 Proxy API (例如:get, set, apply 等等)。

trap 是指代 handler 中处理特定方法的一个方法项。因此如果你要拦截对 get 方法的调用,就要定义一个 get 的 trap,诸如此类。

最后一个东西就是: 你还应该对 Reflect API 有所了解, 它也能在整个全局对象上被访问到。这个我会推迟到 MDN 来讲述它是什么,因为它所解释的 Reflect 是简明扼要的,也因为它就是你一看就明白的那种解释之一。相信我。

基本的使用

在我深入讲述哪些我见过的有趣的代理示例之前,先来一个"hello world“的示例。更多有关于使用代理的一步一步的介绍,你可以看看 Nicholas Zakas《理解ES6》的相关章节,在线可以免费阅读。

◆ ◆ ◆

本文来自开源中国协作翻译平台,在此节选一半,因后半部分代码较多,故请点击阅读原文阅读

本文翻译:leoxu, tv_哇,无若

 了解详情请点击阅读原文

开源中国|ID:oschina2013

扫一扫,关注OSChina号

每天为你送上精选资讯早点

还有每天的 OSChina 乱弹哦