OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

使用JavaScript的Proxy监听对象属性变化并进行类public/private的访问控制


分享到


分类 JS学习   关键字 JavaScript   发布 ourjs  1559991024343
注意 转载须保留原文链接,译文链接,作者译者等信息。  
Proxy是ES6的引入的一个对象监听机制。可视为JavaScript对象的一个代理中间件。用户在访问对象时,会触发自定义行为。

监听属性变化

Proxy最简单的用法是可以监听对象属性的变化,比如下面的,当 obj 的 visit 属性改变时,自动更新页面上相应的 input元素值。

<form>
  <input type="text" name="visit">
</form>

<script type="text/javascript">
var obj = {}

var handler = {
  set: function(target, name, value) {    
    //改变被代理对象的值,使之保持一致
    target[name] = value

    var input = document.querySelector('[name=' + name + ']')
    if (input) {
      input.value = value
    }
  }
}

var proxy = new Proxy(obj, handler);
proxy.visit = 100

setInterval(function() {
  proxy.visit++
}, 1000)
</script>
上例每秒都会更新表单中对应属性输入框的值。

Proxy还可以用来检查设置的值是否规范:

var obj = {}

var handler = {
  set: function(target, name, value) {    
    if (isNaN(Number(value))) {
      throw 'Type error'
    }

    target[name] = value
  }
}

var proxy = new Proxy(obj, handler);
执行结果,obj中所有对象只允许赋值数字:
proxy.visit = 'OurJS'
> Uncaught Type error

proxy.visit = 100
> 100

用Proxy实现private/ public

ES6已经有了关于实现private修饰符的提案,但是浏览器目前还没有实施,示例代码如下:

class Something {
  #property;

  constructor(){
    this.#property = "test";
  }
}

const instance = new Something();
console.log(instance.property); //=> undefined
这个提案的缺陷很明显,private私有属性必须以'#'开头的方式命名。用Proxy就可以简单实现这个方案:

var obj = { '#user': 'OurJS' }
var proxy = new Proxy(obj, {
  get: function(target, name) {
    if (name[0]=='#') {
      throw 'Access forbidden'
    }
  }
});
执行结果:
console.log(proxy['#user'])
> Uncaught Access forbidden

因为Proxy也是可以继承的,这样只需提供相应的Proxy对象即可实现public/ private、set/get控制等强控制类型的类。

有一些框架,比如vue3.0即准备利用Proxy对象,实现Model到View的自动渲染。

控制 in 语法

Proxy可以控制in语法
var obj = { _visit: 100, name: 'OurJS' }

var proxy = new Proxy(obj, {
  has: function(target, name) {
    return name[0] != '_'
  }
})
使用
_visit in proxy
> VM306:1 Uncaught ReferenceError: _visit is not defined
name in proxy
true

Proxy也提供其他语法代理控制,类似的可以控制for in枚举等,可参考:

Proxy/ Proxy.revocable
handler.apply
handler.construct
handler.defineProperty
handler.deleteProperty
handler.enumerate(Deprecated)
handler.get
handler.getOwnPropertyDescriptor
handler.getPrototypeOf
handler.has
handler.isExtensible
handler.ownKeys
handler.preventExtensions
handler.set
handler.setPrototypeOf

社区评论 ( Beta版 )
  • #0 己删除 1560920324470
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. Node.JS中用concat和push连接两个或多个数组的性能比较
  2. jQuery用$.prop,$.attr方法来获取或设置checkbox当前选中状态
  3. JavaScript中将字符串true或false转换成Boolean类型
  4. 判断是否为对象typeof abc == 'object' 与 instanceof 性能比较
  5. 用网页table thead tfoot元素完美控制页眉页脚显示内容打印的简单方式
  6. jQuery用outterHtml获取相对innerHTML父一级包含其自身的html代码内容
  7. 微服务运维难维护?数据基础架构公司Segment宣布放弃微服务构架
  8. Node.JS在命令行中检查Chrome浏览器是否安装,并打开指定网址
  9. Node.JS用RSA签名算法公钥加密私钥解密,实现License软件授权验证
  10. Node.JS借助OS模块获取当前Windows系统用户登录名
  11. 用 OnceAir 搭建个人Git/Svn/照片备份服务器,每年电费7块钱

 相关阅读 - JS学习
  1. JavaScript求一个字符串的字节长度
  2. Node.JS用RSA签名算法公钥加密私钥解密,实现License软件授权验证
  3. Node.JS借助OS模块获取当前Windows系统用户登录名
  4. JavaScript中将字符串true或false转换成Boolean类型
  5. jQuery用$.prop,$.attr方法来获取或设置checkbox当前选中状态
  6. Node.JS中用concat和push连接两个或多个数组的性能比较
  7. 判断是否为对象typeof abc == 'object' 与 instanceof 性能比较
  8. 配置TinyMCE网页文本编辑器不显示html head body等标签信息
  9. node.js中将console.log日志内容输出到文件
  10. typeof判断参数是否为undefined与全等判断法性能比较

 关键字 - JavaScript
  1. 使用JavaScript的Proxy监听对象属性变化并进行类public/private的访问控制
  2. Node.JS中UDP打洞穿透内网路由,架设内网服务器技术详解及源码
  3. JavaScript求一个字符串的字节长度
  4. 设置select元素中option的默认值
  5. JavaScript中将字符串true或false转换成Boolean类型
  6. Node.JS中用concat和push连接两个或多个数组的性能比较
  7. 5个现在就该使用的数组Array方法: indexOf/filter/forEach/map/reduce详解
  8. 如何用CSS将select/option文本居中或居右对齐
  9. jQuery用$.prop,$.attr方法来获取或设置checkbox当前选中状态
  10. 判断是否为对象typeof abc == 'object' 与 instanceof 性能比较

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号