一、相关API

Proxy

Reflect

二、Proxy应用场景

1.数据校验

表单提交的时候做数据校验,例如年龄是不是满足条件,数据类型是不是满足要求等等,这场场景非常适合使用Proxy。

下面展示与业务解耦的校验功能

1)ES6实现方式

{
function validator(target, validator) {
return new Proxy(target, {
_validator: validator,
       //set方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。
set(target, key, value, proxy) {
if (target.hasOwnProperty(key)) {
let va = this._validator[key]
if (!!va(value)) {
return Reflect.set(target, key, value, proxy)
} else {
throw Error(`不能设置${key}到${value}`)
}
} else {
throw Error(`${key}不存在`)
}
}
})
} const personValidators = {
name(val) {
return typeof val === 'string'
},
age(val) {
return typeof val === 'number' && val > 18
}
} class Person {
constructor(name, age) {
this.name = name;
this.age = age
return validator(this, personValidators)
}
}
const person = new Person('knyel', 30)
console.log(person)
person.name = 'lk'
console.log(person)
person.age = 12
console.log(person)
}

输出结果为

Proxy {name: "knyel", age: 30}
Proxy {name: "lk", age: 30}
Uncaught Error: 不能设置age到12
at Object.set (index.js:144)
at Object.<anonymous> (index.js:174)
at __webpack_require__ (index.js:20)
at Object.obj.time (index.js:80)
at __webpack_require__ (index.js:20)
at Object.<anonymous> (index.js:70)
at __webpack_require__ (index.js:20)
at index.js:63
at index.js:66

2)ES5实现方式

传统的方式对某个属性进行限制的时候,需要对他进行判断,判断类型是不是合适,是不是满足某种条件,然后才允许它进行修改。

3)对比

用了ES6代理的方式,可以将条件和对象本身(业务逻辑)完全隔离开,后期代码维护中,比如要加一个手机号的验证,我们只需要在修改类Person(添加手机号属性),personValidators(添加手机号验证规则),这样就可以实现了。代码的扩展性、可维护性和健壮性是非常强的。

2.其他场景待完善

ES6 Proxy的应用场景的更多相关文章

  1. Vue3.0 响应式数据原理:ES6 Proxy

    Vue3.0 开始用 Proxy 代替 Object.defineProperty了,这篇文章结合实例教你如何使用Proxy 本篇文章同时收录[前端知识点]中,链接直达 阅读本文您将收获 JavaSc ...

  2. ES6 Proxy 性能之我见

    ES6 Proxy 性能之我见 本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...

  3. es6 Proxy对象详解

    Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改.这个词的原理为代理,在这里可以表示 ...

  4. ES6 Proxy和Reflect(下)

    construct() construct方法用于拦截new命令. var handler = { construct (target, args) { return new target(...ar ...

  5. ES6 Proxy和Reflect (上)

    Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...

  6. es6 proxy代理

    es6 新增构造函数 Proxy Proxy 构造函数,可以使用new 去创建,可以往里面插入两个参数,都是对象 let target = {} let handler = {} let proxy ...

  7. es6 Proxy

    proxy在语言层面去操作一个对象 var user={}; user.fname='Bob'; user.lname="Wood"; user.fullName= functio ...

  8. ES6 Generator的应用场景

    一.基础知识 API文档 ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 Generator 函数将 JavaScript 异步编程带入了一个 ...

  9. ES6 Symbol的应用场景

    一.简介 具体使用请参考:API ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值.它是 JavaScript 语言的第七种数据类型,前六种是:undefined.null.布尔值(B ...

随机推荐

  1. Codeforces Round #499 (Div. 2) C Fly题解

    题目 http://codeforces.com/contest/1011/problem/C Natasha is going to fly on a rocket to Mars and retu ...

  2. table-cell http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

    http://www.cnblogs.com/StormSpirit/archive/2012/10/24/2736453.html

  3. 1.5、CDH 搭建Hadoop在安装之前(定制安装解决方案)

    Cloudera托管两种类型的软件存储库,您可以使用它们来安装诸如Cloudera Manager或CDH-parcel存储库和软件包存储库之类的产品. 在大多数情况下,这些存储库是有效的解决方案,但 ...

  4. Spring集成MyBatis的使用-使用SqlSessionTemplate

    Spring集成MyBatis的使用 Spring集成MyBatis,早期是使用SqlSessionTemplate,当时并没有用Mapper映射器,既然是早期,当然跟使用Mapper映射器是存在一些 ...

  5. Loading AssetBundle Manifests

    [Loading AssetBundle Manifests] AssetBundle Manifest 可以用于获取dependency. AssetBundle assetBundle = Ass ...

  6. appium的内存泄露问题

    appium的一个内存泄露的问题 标签(空格分隔): appium 我们在做移动端的测试后时候,经常会用到appium 但是有时候我们跑一个小时候/2个小时候时候,会遇到appium报错的信息: ap ...

  7. 测试工具之appcrawler的使用

    appcrawler 标签(空格分隔): appcrawler appcrawler 简介 一个基于自动遍历的app爬虫工具. 支持android和iOS, 支持真机和模拟器. 最大的特点是灵活性. ...

  8. 一、Iterator 迭代器

    需求:如何不适用for循环,依次遍历出数组中每个元素? 设计原理: 代码清单: 接口类 public interface Iterator { boolean hasNext(); Object ne ...

  9. 执行SDK的aapt报错./aapt: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by ./aapt)

    问题| 执行SDK下的aapt报错./aapt: /lib64/libc.so.6: version `GLIBC_2.14' not found (required by ./aapt)   ../ ...

  10. Python开发【第三篇】:Python函数

    set     无序,不重复,可嵌套. 函数     创建函数:     1.def关键字,创建函数     2.函数名     3.()     4.函数体     5.返回值 发邮件函数 def ...