实例解析ES6 Proxy使用场景-守望者-AIR技术交流

破晓发表于 2016-8-18 16:41:11

实例解析ES6 Proxy使用场景

来源：http://www.w3cplus.com/javascript/use-cases-for-es6-proxies.html<div> </div><div>ES6 中的箭头函数、数组解构、rest 参数等特性一经实现就广为流传，但类似 Proxy 这样的特性却很少见到有开发者在使用，一方面在于浏览器的兼容性，另一方面也在于要想发挥这些特性的优势需要开发者深入地理解其使用场景。就我个人而言是非常喜欢 ES6 的 Proxy，因为它让我们以简洁易懂的方式控制了外部对对象的访问。在下文中，首先我会介绍 Proxy 的使用方式，然后列举具体实例解释 Proxy 的使用场景。Proxy，见名知意，其功能非常类似于设计模式中的代理模式，该模式常用于三个方面：<ul style="box-sizing: inherit; margin-top: 10px; margin-bottom: 25px; list-style: none outside none; color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px;"><li style="box-sizing: inherit; margin-left: 0px; list-style: none outside none; line-height: 28px;">拦截和监视外部对对象的访问</li><li style="box-sizing: inherit; margin-left: 0px; list-style: none outside none; line-height: 28px;">降低函数或类的复杂度</li><li style="box-sizing: inherit; margin-left: 0px; list-style: none outside none; line-height: 28px;">在复杂操作前对操作进行校验或对所需资源进行管理</li></ul>在支持 Proxy 的浏览器环境中，Proxy 是一个全局对象，可以直接使用。<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">Proxy(target, handler)</code> 是一个构造函数，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">target</code> 是被代理的对象，<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">handlder</code> 是声明了各类代理操作的对象，最终返回一个代理对象。外界每次通过代理对象访问<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">target</code> 对象的属性时，就会经过 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">handler</code> 对象，从这个流程来看，代理对象很类似 middleware（中间件）。那么 Proxy 可以拦截什么操作呢？最常见的就是 get（读取）、set（修改）对象属性等操作，完整的可拦截操作列表请点击<a href="http://www.ecma-international.org/ecma-262/6.0/#sec-proxy-object-internal-methods-and-internal-slots" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">这里</a>。此外，Proxy 对象还提供了一个 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">revoke</code> 方法，可以随时注销所有的代理操作。在我们正式介绍 Proxy 之前，建议你对 Reflect 有一定的了解，它也是一个 ES6 新增的全局对象，详细信息请参考 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">MDN Reflect</a>。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">Basic</h2><pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="cs" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">const target = {
name: 'Billy Bob',
age: 15
};

const handler = {
get(target, key, proxy) {
 const today = new Date();
 console.log(`GET request made for ${key} at ${today}`);

 return Reflect.get(target, key, proxy);
}
};

const proxy = new Proxy(target, handler);
proxy.name;
// => "GET request made for name at Thu Jul 21 2016 15:26:20 GMT+0800 (CST)"
// => "Billy Bob"
</code></pre>在上面的代码中，我们首先定义了一个被代理的目标对象 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">target</code>，然后声明了包含所有代理操作的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">handler</code> 对象，接下来使用<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">Proxy(target, handler)</code> 创建代理对象 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">proxy</code>，此后所有使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">proxy</code> 对 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">target</code> 属性的访问都会经过 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">handler</code> 的处理。<h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">1. 抽离校验模块</h2>让我们从一个简单的类型校验开始做起，这个示例演示了如何使用 Proxy 保障数据类型的准确性：<pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="cs" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let numericDataStore = {
count: 0,
amount: 1234,
total: 14
};

numericDataStore = new Proxy(numericDataStore, {
set(target, key, value, proxy) {
 if (typeof value !== 'number') {
 throw Error("Properties in numericDataStore can only be numbers");
 }
 return Reflect.set(target, key, value, proxy);
}
});

// 抛出错误，因为 "foo" 不是数值
numericDataStore.count = "foo";

// 赋值成功
numericDataStore.count = 333;
</code></pre>如果要直接为对象的所有属性开发一个校验器可能很快就会让代码结构变得臃肿，使用 Proxy 则可以将校验器从核心逻辑分离出来自成一体：<pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="cs" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">function createValidator(target, validator) {
return new Proxy(target, {
 _validator: validator,
 set(target, key, value, proxy) {
 if (target.hasOwnProperty(key)) {
 let validator = this._validator;
 if (!!validator(value)) {
 return Reflect.set(target, key, value, proxy);
 } else {
 throw Error(`Cannot set ${key} to ${value}. Invalid.`);
 }
 } else {
 throw Error(`${key} is not a valid property`)
 }
 }
});
}

const personValidators = {
name(val) {
 return typeof val === 'string';
},
age(val) {
 return typeof age === 'number' && age > 18;
}
}
class Person {
constructor(name, age) {
 this.name = name;
 this.age = age;
 return createValidator(this, personValidators);
}
}

const bill = new Person('Bill', 25);

// 以下操作都会报错
bill.name = 0;
bill.age = 'Bill';
bill.age = 15;
</code></pre>通过校验器和主逻辑的分离，你可以无限扩展 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">personValidators</code> 校验器的内容，而不会对相关的类或函数造成直接破坏。更复杂一点，我们还可以使用 Proxy 模拟类型检查，检查函数是否接收了类型和数量都正确的参数：<pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="javascript" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let obj = {
pickyMethodOne: function(obj, str, num) { /* ... */ },
pickyMethodTwo: function(num, obj) { /*... */ }
};

const argTypes = {
pickyMethodOne: ["object", "string", "number"],
pickyMethodTwo: ["number", "object"]
};

obj = new Proxy(obj, {
get: function(target, key, proxy) {
 var value = target;
 return function(...args) {
 var checkArgs = argChecker(key, args, argTypes);
 return Reflect.apply(value, target, args);
 };
}
});

function argChecker(name, args, checkers) {
for (var idx = 0; idx < args.length; idx++) {
 var arg = args;
 var type = checkers;
 if (!arg || typeof arg !== type) {
 console.warn(`You are incorrectly implementing the signature of ${name}. Check param ${idx + 1}`);
 }
}
}

obj.pickyMethodOne();
// > You are incorrectly implementing the signature of pickyMethodOne. Check param 1
// > You are incorrectly implementing the signature of pickyMethodOne. Check param 2
// > You are incorrectly implementing the signature of pickyMethodOne. Check param 3

obj.pickyMethodTwo("wopdopadoo", {});
// > You are incorrectly implementing the signature of pickyMethodTwo. Check param 1

// No warnings logged
obj.pickyMethodOne({}, "a little string", 123);
obj.pickyMethodOne(123, {});
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">2. 私有属性</h2>在 JavaScript 或其他语言中，大家会约定俗成地在变量名之前添加下划线 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">_</code> 来表明这是一个私有属性（并不是真正的私有），但我们无法保证真的没人会去访问或修改它。在下面的代码中，我们声明了一个私有的 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">apiKey</code>，便于 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">api</code> 这个对象内部的方法调用，但不希望从外部也能够访问 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">api._apiKey</code>:<pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="javascript" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">var api = {
_apiKey: '123abc456def',
/* mock methods that use this._apiKey */
getUsers: function(){},
getUser: function(userId){},
setUser: function(userId, config){}
};

// logs '123abc456def';
console.log("An apiKey we want to keep private", api._apiKey);

// get and mutate _apiKeys as desired
var apiKey = api._apiKey;
api._apiKey = '987654321';
</code></pre>很显然，约定俗成是没有束缚力的。使用 ES6 Proxy 我们就可以实现真实的私有变量了，下面针对不同的读取方式演示两个不同的私有化方法。第一种方法是使用 set / get 拦截读写请求并返回 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">undefined</code>:<pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="cs" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let api = {
_apiKey: '123abc456def',
getUsers: function(){ },
getUser: function(userId){ },
setUser: function(userId, config){ }
};

const RESTRICTED = ['_apiKey'];
api = new Proxy(api, {
get(target, key, proxy) {
 if(RESTRICTED.indexOf(key) > -1) {
 throw Error(`${key} is restricted. Please see api documentation for further info.`);
 }
 return Reflect.get(target, key, proxy);
},
set(target, key, value, proxy) {
 if(RESTRICTED.indexOf(key) > -1) {
 throw Error(`${key} is restricted. Please see api documentation for further info.`);
 }
 return Reflect.get(target, key, value, proxy);
}
});

// 以下操作都会抛出错误
console.log(api._apiKey);
api._apiKey = '987654321';
</code></pre>第二种方法是使用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">has</code> 拦截 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">in</code> 操作：<pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="javascript" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">var api = {
_apiKey: '123abc456def',
getUsers: function(){ },
getUser: function(userId){ },
setUser: function(userId, config){ }
};

const RESTRICTED = ['_apiKey'];
api = new Proxy(api, {
has(target, key) {
 return (RESTRICTED.indexOf(key) > -1) ?
 false :
 Reflect.has(target, key);
}
});

// these log false, and `for in` iterators will ignore _apiKey
console.log("_apiKey" in api);

for (var key in api) {
if (api.hasOwnProperty(key) && key === "_apiKey") {
 console.log("This will never be logged because the proxy obscures _apiKey...")
}
}
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">3. 访问日志</h2>对于那些调用频繁、运行缓慢或占用执行环境资源较多的属性或接口，开发者会希望记录它们的使用情况或性能表现，这个时候就可以使用 Proxy 充当中间件的角色，轻而易举实现日志功能：<pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="javascript" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let api = {
_apiKey: '123abc456def',
getUsers: function() { /* ... */ },
getUser: function(userId) { /* ... */ },
setUser: function(userId, config) { /* ... */ }
};

function logMethodAsync(timestamp, method) {
setTimeout(function() {
 console.log(`${timestamp} - Logging ${method} request asynchronously.`);
}, 0)
}

api = new Proxy(api, {
get: function(target, key, proxy) {
 var value = target;
 return function(...arguments) {
 logMethodAsync(new Date(), key);
 return Reflect.apply(value, target, arguments);
 };
}
});

api.getUsers();
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">4. 预警和拦截</h2>假设你不想让其他开发者删除 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">noDelete</code> 属性，还想让调用 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">oldMethod</code> 的开发者了解到这个方法已经被废弃了，或者告诉开发者不要修改 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">doNotChange</code> 属性，那么就可以使用 Proxy 来实现：<pre class="cs" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="cs" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let dataStore = {
noDelete: 1235,
oldMethod: function() {/*...*/ },
doNotChange: "tried and true"
};

const NODELETE = ['noDelete'];
const NOCHANGE = ['doNotChange'];
const DEPRECATED = ['oldMethod'];

dataStore = new Proxy(dataStore, {
set(target, key, value, proxy) {
 if (NOCHANGE.includes(key)) {
 throw Error(`Error! ${key} is immutable.`);
 }
 return Reflect.set(target, key, value, proxy);
},
deleteProperty(target, key) {
 if (NODELETE.includes(key)) {
 throw Error(`Error! ${key} cannot be deleted.`);
 }
 return Reflect.deleteProperty(target, key);

},
get(target, key, proxy) {
 if (DEPRECATED.includes(key)) {
 console.warn(`Warning! ${key} is deprecated.`);
 }
 var val = target;

 return typeof val === 'function' ?
 function(...args) {
 Reflect.apply(target, target, args);
 } :
 val;
}
});

// these will throw errors or log warnings, respectively
dataStore.doNotChange = "foo";
delete dataStore.noDelete;
dataStore.oldMethod();
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">5. 过滤操作</h2>某些操作会非常占用资源，比如传输大文件，这个时候如果文件已经在分块发送了，就不需要在对新的请求作出相应（非绝对），这个时候就可以使用 Proxy 对当请求进行特征检测，并根据特征过滤出哪些是不需要响应的，哪些是需要响应的。下面的代码简单演示了过滤特征的方式，并不是完整代码，相信大家会理解其中的妙处：<pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="javascript" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let obj = {
getGiantFile: function(fileId) {/*...*/ }
};

obj = new Proxy(obj, {
get(target, key, proxy) {
 return function(...args) {
 const id = args[0];
 let isEnroute = checkEnroute(id);
 let isDownloading = checkStatus(id);
 let cached = getCached(id);

 if (isEnroute || isDownloading) {
 return false;
 }
 if (cached) {
 return cached;
 }
 return Reflect.apply(target, target, args);
 }
}
});
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">6. 中断代理</h2>Proxy 支持随时取消对 <code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">target</code> 的代理，这一操作常用于完全封闭对数据或接口的访问。在下面的示例中，我们使用了<code style="box-sizing: inherit; font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace; font-size: 1em; padding: 1px 3px; margin-right: 3px; margin-left: 3px; border: 1px solid rgb(204, 204, 204); background: rgb(221, 221, 221);">Proxy.revocable</code> 方法创建了可撤销代理的代理对象：<pre class="javascript" style="box-sizing: inherit; overflow: auto; font-family: monospace, monospace; padding: 0.5em; color: rgb(131, 148, 150); margin-bottom: 20px; line-height: 20px; background: rgb(0, 43, 54);"><code class="javascript" style="box-sizing: inherit; font-family: monospace, monospace; font-size: 1em; display: block; padding: 0.5em; background-image: initial; background-attachment: initial; background-size: initial; background-origin: initial; background-clip: initial; background-position: initial; background-repeat: initial;">let sensitiveData = { username: 'devbryce' };
const {sensitiveData, revokeAccess} = Proxy.revocable(sensitiveData, handler);
function handleSuspectedHack(){
revokeAccess();
}

// logs 'devbryce'
console.log(sensitiveData.username);
handleSuspectedHack();
// TypeError: Revoked
console.log(sensitiveData.username);
</code></pre><h2 style="box-sizing: inherit; margin-bottom: 15px; font-size: 1.4em; color: rgb(0, 163, 207); border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(221, 221, 221); padding-bottom: 5px; font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif;">Decorator</h2>ES7 中实现的 Decorator，相当于设计模式中的装饰器模式。如果简单地区分 Proxy 和 Decorator 的使用场景，可以概括为：Proxy 的核心作用是控制外界对被代理者内部的访问，Decorator 的核心作用是增强被装饰者的功能。只要在它们核心的使用场景上做好区别，那么像是访问日志这样的功能，虽然本文使用了 Proxy 实现，但也可以使用 Decorator 实现，开发者可以根据项目的需求、团队的规范、自己的偏好自由选择。<blockquote style="box-sizing: inherit; padding: 15px 20px; margin-bottom: 25px; border-left-width: 5px; border-left-style: solid; border-left-color: rgb(0, 163, 207); color: rgb(64, 64, 64); font-family: "Microsoft YaHei", 微软雅黑, "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 20px; background: rgb(246, 246, 246);">本文根据<a href="http://devbryce.com/author/bryce/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">@Bryce Johnson</a>的《<a href="http://devbryce.com/use-cases-for-es6-proxies/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">6 compelling use cases for ES6 proxies</a>》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处:<a href="http://devbryce.com/use-cases-for-es6-proxies/" target="_blank" style="box-sizing: inherit; color: rgb(41, 180, 240); text-decoration: none; background: transparent;">http://devbryce.com/use-cases-for-es6-proxies/</a>。</blockquote></div>

页: [1]

守望者--AIR技术交流's Archiver

实例解析ES6 Proxy使用场景