用es6 （proxy 和 reflect）轻松实现观察者模式

js中观察者之前我们一般通过事件机制完成

ex:

　　注册监听

　　Event.listen('changeName', name => console.log(name))

　　派发事件

　　Event.trigger('changeName', name )

那么es6中我们可以通过如下方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p>123345</p>
<input type="text"  οnclick="test()">
<button οnclick="test()">dianow</button>
</body>
<script>//添加观察者const queuedObservers = new Set();const observe = fn => queuedObservers.add(fn);//proxy 的set 方法function set(target, key, value, receiver) {const result = Reflect.set(target, key, value, receiver);queuedObservers.forEach(observer => observer());return result;}//创建proxy代理const observable = obj => new Proxy(obj, {set});//被观察的 对象const person = observable({name: '张三',age: 20});function print() {console.log(`${person.name}, ${person.age}`)}function print2() {console.log(`我是二号观察者：${person.name}, ${person.age}`)}//添加观察者
    observe(print);observe(print2);person.name = '李四';
</script>
</html>

具体参考 http://es6.ruanyifeng.com/#docs/proxy

转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/7016010.html

用es6 （proxy 和 reflect）轻松实现观察者模式相关推荐

ES6 Proxy 和 Reflect 的理解
Vue中的数据绑定 ps:观察者模式 (下面有重点) Vue作为前端框架的三驾马车之一,在众多前端项目中具有极其重要的作用. Vue中具有一个重要的功能点--"数据绑定".使用者无 ...
ES6 Proxy和Reflect
目录 Proxy 概述基本用法 Proxy 实例方法 1.get(target, propKey, receiver) 2.set(target, propKey, value, receiver) ...
ES6 Proxy和Reflect (上)
Proxy概述 Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种"元编程"(meta programming),即对编程语言进行编程. Proxy可以理 ...
深入实践 ES6 Proxy Reflect
原文: https://zhuanlan.zhihu.com/p/60126477 引言 Vue中的数据绑定 Vue作为前端框架的三驾马车之一,在众多前端项目中具有极其重要的作用. Vue中具有一个重 ...
Proxy和Reflect详解
Proxy和Reflect详解之前一直没有理解proxy代理是啥意思,只是感觉很深奥的样子,最近正好在研究vue3的响应式原理,发现vue3是使用proxy完成响应式的,因此仔细的研究了一下prox ...
Proxy和Reflect内容详解
ES6中的Proxy和Reflect内容详解监听对象的操作我们先来看一个需求:有一个对象,我们希望监听这个对象中的属性被设置或获取的过程通过我们前面所学的知识,能不能做到这一点呢? 其实是可以的 ...
1.20(Proxy、Reflect、异步任务、同步任务)
1.20(Proxy.Reflect.异步) 一.代理概念:比如对一个对象的属性进行读写操作时,代理就是对这个操作执行前的一拦截操作 1.es5代理 let obj1 = {}; let newVa ...
通过Proxy和Reflect实现vue的响应式原理
vue3通过Proxy+Reflect实现响应式,vue2通过defineProperty来实现 Proxy Proxy是什么 Proxy是ES6中增加的类,表示代理. 如果我们想要监听对象的操作过程 ...
ES6 Proxy 性能之我见
ES6 Proxy 性能之我见本文翻译自https://thecodebarbarian.com/thoughts-on-es6-proxies-performance Proxy是ES6的一个强力 ...

用es6 （proxy 和 reflect）轻松实现观察者模式

用es6 （proxy 和 reflect）轻松实现观察者模式相关推荐

最新文章

热门文章

用es6 （proxy 和 reflect）轻松实现 观察者模式

用es6 （proxy 和 reflect）轻松实现 观察者模式相关推荐

最新文章

热门文章

用es6 （proxy 和 reflect）轻松实现观察者模式

用es6 （proxy 和 reflect）轻松实现观察者模式相关推荐