Proxy

亦凉 2022-10-01 04:56 192阅读 0赞

（Proxy）

在这之前，我们讲过对象属性的精细化设置。可以设置对象属性的可读，可写，或者删除之类的操作。当然，这些操作都是为了什么而存在的呢？没错，就是为了保护我们的属性。

在我们学nodejs的时候，我们是用的七牛SDK去处理上传的图片。那么，我们都知道，七牛的SDK都是需要APPID去签名的。那么，这个APPID就是我们不希望去被修改的属性。在ES6之前，我们可以使用Object.defineProperty去保护它。

例如:

let sign = \{ \_appid: "12345678", \_appkey: "666", desc: "Alex的密钥" \}

Object.defineProperties(sign,\{ \_appid: \{ writable: false \}, \_appkey: \{ writable: false \} \})

这种情况下，我们的私有属性就被保护了起来。

那么，有的时候，我们想针对多个属性进行保护的时候，ES5的方式就显得比较吃力了。你不得不针对多个属性进行声明witable: false;

那么这个时候ES6就出来拯救我们了。

Proxy Proxy实际上，意味着我们代理了这个对象，该对象所有的属性操作都会经过我们的Proxy。一起来看看吧。

let sign = \{ \_appid: "12345678", \_appkey: "666", desc: "Alex的密钥" \}

当然，细心的同学可能会发现，我们依旧可以去直接修改这个sign这个对象，没有出现任何问题。例如，我对sign对象的\_appid进行修改是ok的。

我们这个proxy模式类似于一个中间层的概念，供用户进行操作的，实际上是signProxy对象。如果，你期望你的对象完全不可修改。大可以将sign直接写到Proxy构造器当中。

数据校检 保护属性 相关例子： 我们从两个例子去体会一下Proxy的应用吧。

数据类型验证 需求：

有一个记账的对象，记录着用户的存款金额，为了方便以后计算，要保证存入的数据必须为Number。

let account = \{ number: 88 \}

let proxyAccount = new Proxy(account, \{ get(target, property)\{ return target\[property\] \}, set(target, propName, propValue)\{ if(propName == "number")\{ if(typeof propValue!="number")\{ alert("number属性必须存入数字"); return \} \} target\[propName\] = propValue; \} \}) 简易版本Vue双向数据绑定 我们之前都使用过Vue。那么，今天我们来做一个简易版本的Vue去试一下。当然，Vue内部的原理远比我们的Demo复杂的多。

实现功能如下：

通过v-model绑定一个值的同时。v-bind的dom元素可以实现双向数据绑定。 实现代码如下:

用户名：  
密码：

#  #

##  ##

转载于:https://juejin.im/post/5c6ea0056fb9a049df24abac