ES6入门系列 ----- 使用Proxy 实现观察者模式
观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行。
它定义了一种一对多的依赖关系,我们用Proxy来实现一个简单的观察者模式(PS: 初学我们认为
观察者模式 == 发布订阅模式, 其实它们有点不同)。
例子:
const callbacks = new Set();
const observe = fn => callbacks.add(fn);
const observable = obj => new Proxy(obj, {set}); function set (target, key, value, receiver) {
const result = Reflect.set(target, key, value, receiver);
callbacks.forEach(observe => observe());
return result;
}
// 一个可观察的对象
const person = observable({name: 'liu', age: 18}); function change() {
console.log(`${person.name} is ${person.age}`);
} observe(change); person.age = 19;
- 首先定义了一个observe 用来存储 要触发的函数。
- 然后定义了一个observable 函数 对 对象的设值做了一层代理,拦截赋值操作, Reflect.set用来完成默认的设值行为, 然后触发函数。
- 每当对象调用对象内部的的set方法时,就会遍历触发我们添加进callbacks里的回调函数。
打印结果:当age发生变化时:打印出
这样我们就简单的实现了一个观察者模式。
ES6入门系列 ----- 使用Proxy 实现观察者模式的更多相关文章
- ES6入门系列三(特性总览下)
0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --C ...
- ES6入门系列 ----- Reflect
Reflect 是ES6 为了操作对象而提供的新的API, 目的是: 将Object 上一些明显属于语言内部的方法,比如 Object.defineProperty 放到 Reflect对象上 ...
- ES6 入门系列 (一)ES6的前世今生
要学好javascript , ECMAScript标准比什么都强, ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性. 理解语言的本质后,你已经从沙堆里挑出了珍珠,能经 ...
- ES6入门系列四(测试题分析)
0.导言 ES6中新增了不少的新特性,来点测试题热热身.具体题目来源请看:http://perfectionkills.com/javascript-quiz-es6/. 以下将一题一题来解析what ...
- ES6入门系列一(基础)
1.let命令 Tips: 块级作用域(只在当前块中有效) 不会变量提升(必须先申明在使用) 让变量独占该块,不再受外部影响 不允许重复声明 总之:let更像我们熟知的静态语言的的变量声明指令 ES6 ...
- ES6 入门系列 - 函数的扩展
1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...
- ES6 入门系列 - let 和 const 命令
let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...
- ES6入门系列二(数值的扩展)
ES6 在 Number对象上新增了很多方法 1 . Number.isFinite()判断是否为有限的数字 和全局的isFinite() 方法的区别是 isFinite('1') === tr ...
- ES6入门系列 ----- 对象的遍历
工作中遍历对象是家常便饭了,遍历数组的方法五花八门, 然而很多小伙伴是不是和我之前一样只会用for ...in.... 来遍历对象呢, 今天给大家介绍五种遍历对象属性的方法: 1, 最常用的for ...
随机推荐
- ASP.NET MVC Action向视图传值之匿名类型
在使用ASP.NET MVC过程中想必大家都有遇到过一个问题就是我们的Action如何向视图传递匿名类型的值呢,如果不做特殊处理则无法实现. 接下来我们来看一个示例: 在我们的控制中: using S ...
- 松软科技带你学开发:SQL--COUNT() 函数
SQL COUNT() 语法 SQL COUNT(column_name) 语法 COUNT(column_name) 函数返回指定列的值的数目(NULL 不计入): SELECT COUNT(col ...
- 初识Kotlin之函数
本章通过介绍Kotlin的基本函数,默认参数函数,参数不定长函数,尾递归函数,高阶函数,Lamdba表达式.来对Kotlin函数做进一步了解.将上一篇的Kotlin变量的知识得以运用.Kotlin变量 ...
- 安装 tensorflow 1.1.0;以及安装其他相似版本tensorflow遇到的问题;tensorflow 1.13.2 cuda-10环境变量配置问题;Tensorflow 指定训练时如何指定使用的GPU;
# 安装 2.7 环境conda create -n python2. python= conda activate python2. # 安装 1.1.0 gpu版本pip # 配置环境变量expo ...
- opensciencegrid - GridFTP 安装
最近配置一个GridFTP 用于测试其传输FTP性能, 在这里简单记录,备忘:使用本教程可以简单起一个GridFTP用于测试服务: 预配置环境: 测试系统:CentOS 7 1806 配置Yum仓库: ...
- Python语法速查: 1. 数据类型与内置函数
返回目录 (1)常用内置数据类型 分类 类型名称 描述 数字 int 整数 float 浮点数 complex 复数 bool 布尔值 序列 str 字符串(不可变序列) list 列表 tuple ...
- CCSpriteFrameCache的使用
配置环境:win7+Cocos2d-x.2.0.3+VS2012 CCSpriteFrameCache是帧缓存类. 通过plist文件导入图片 CCSpriteFrameCache::sharedSp ...
- leetcode 752. 打开转盘锁
地址 https://leetcode-cn.com/problems/open-the-lock/ 你有一个带有四个圆形拨轮的转盘锁.每个拨轮都有10个数字: '0', '1', '2', '3', ...
- 算法问题实战策略 NTHLON
地址 https://algospot.com/judge/problem/read/NTHLON #include <iostream> #include <vector> ...
- python pyquery 基本用法
1.安装方法 pip install pyquery 2.引用方法 from pyquery import PyQuery as pq 3.简介 pyquery 是类型jquery 的一个专供pyth ...