打开 Chrome 控制台,输入 window.Proxy ,你会发现 JavaScript 已经内置了一个全局的 Proxy 对象,请问这个对象是做什么用的?
其实你用关键词「Proxy MDN」搜索一下,就能得到一个详细的教程。(在关键词后面加 MDN 是一个前端必备的小技巧哦)
我今天只做一个简单的介绍。
假设我们有一个数据(对象)data,内容为
var data = { username: 'Frank', age: 26 }
现在我们给 data 创建一个代理 proxy
var proxy = new Proxy(data, {set: function(){...}, get: function(){...} })
那么,「proxy 就全权代理 data 了」,这话是什么意思呢?
意思就是 data 放假去了,如果你有任何事情要找 data,直接找 proxy 就好了,proxy 现在是 data 的秘书、代理人。
比如原本你如果要改 username,那么应该写 data.username = 'frank';
那么现在你只需要写 proxy.username = 'frank' 就好了。
原本你如果想写 console.log(data.username),现在也只需要 console.log(proxy.username) 就可以了。
这样做什么意义?
意义就是你能监控每一次对 data 的读写操作。
proxy.username = 'frank' 这句话实际上会运行 set 方法。set 方法可以对传入的值进行监控和过滤。
假设 PM 要求「username 前后不能含有空格」,用 Proxy 就很好实现这一需求,只需要把 set 写成这样:
set: function(obj, prop, value){ obj[prop] = value.trim() }
再假设 PM 要求「统计 username 被读取的次数」,那么我们只需要把 get 写成这样:
get: function(obj, prop){ if(prop === 'username'){ count += 1 } return obj[prop] }
既然用 Proxy 能监控一个变量的读写情况,那么我们就很容易实现一个双向绑定了。
具体代码看这里。
以上,就是 Proxy 的简介了。
饥人谷一直致力于培养有灵魂的编程者,打造专业有爱的国内前端技术圈子。如造梦师一般帮助近千名不甘寂寞的追梦人把编程梦变为现实,他们以饥人谷为起点,足迹遍布包括facebook、阿里巴巴、百度、网易、京东、今日头条、大众美团、饿了么、ofo在内的国内外大小企业。 了解培训课程:加微信 xiedaimala03,官网:https://jirengu.com
本文作者:饥人谷方应杭老师