观察者模式是指函数自动观察数据对象的变化, 一旦对象有变化,函数就会自动执行。

它定义了一种一对多的依赖关系,我们用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;
  1. 首先定义了一个observe 用来存储 要触发的函数。
  2. 然后定义了一个observable 函数 对  对象的设值做了一层代理,拦截赋值操作, Reflect.set用来完成默认的设值行为, 然后触发函数。
  3. 每当对象调用对象内部的的set方法时,就会遍历触发我们添加进callbacks里的回调函数。

打印结果:当age发生变化时:打印出

 

    这样我们就简单的实现了一个观察者模式。

ES6入门系列 ----- 使用Proxy 实现观察者模式的更多相关文章

  1. ES6入门系列三(特性总览下)

    0.导言 最近从coffee切换到js,代码量一下子变大了不少,也多了些许陌生感.为了在JS代码中,更合理的使用ES6的新特性,特在此对ES6的特性做一个简单的总览. 1.模块(Module) --C ...

  2. ES6入门系列 ----- Reflect

    Reflect   是ES6 为了操作对象而提供的新的API, 目的是: 将Object 上一些明显属于语言内部的方法,比如 Object.defineProperty  放到 Reflect对象上 ...

  3. ES6 入门系列 (一)ES6的前世今生

    要学好javascript , ECMAScript标准比什么都强, ESMAScript标准已经用最严谨的语言和最完美的角度展现了语言的实质和特性. 理解语言的本质后,你已经从沙堆里挑出了珍珠,能经 ...

  4. ES6入门系列四(测试题分析)

    0.导言 ES6中新增了不少的新特性,来点测试题热热身.具体题目来源请看:http://perfectionkills.com/javascript-quiz-es6/. 以下将一题一题来解析what ...

  5. ES6入门系列一(基础)

    1.let命令 Tips: 块级作用域(只在当前块中有效) 不会变量提升(必须先申明在使用) 让变量独占该块,不再受外部影响 不允许重复声明 总之:let更像我们熟知的静态语言的的变量声明指令 ES6 ...

  6. ES6 入门系列 - 函数的扩展

    1函数参数的默认值 基本用法 在ES6之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console.log( ...

  7. ES6 入门系列 - let 和 const 命令

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...

  8. ES6入门系列二(数值的扩展)

    ES6 在 Number对象上新增了很多方法 1 .    Number.isFinite()判断是否为有限的数字 和全局的isFinite() 方法的区别是 isFinite('1') === tr ...

  9. ES6入门系列 ----- 对象的遍历

    工作中遍历对象是家常便饭了,遍历数组的方法五花八门, 然而很多小伙伴是不是和我之前一样只会用for ...in.... 来遍历对象呢, 今天给大家介绍五种遍历对象属性的方法: 1, 最常用的for  ...

随机推荐

  1. mitmproxy的使用

    一.介绍 中间人代理可以理解成和中间件差不多 mitmproxy工程工具包,主要包含了3个组件 mitmproxy:拦截的http(s)记录控制台显示 [window不支持] mitmdump:命令行 ...

  2. 基于 Storyboard 多种方式的页面跳转、参数传递

    原文 通过按钮关联跳转 选中 Button ,然后点击 action 右边拖拽到 第二个页面 选择 "Show"即可完成跳转关联. 定义页面间 segue Id,通过代码触发跳转 ...

  3. 005 C/C++ 数据类型_void

    1.void的字面意思是'无类型'.void * 是无类型指针,void * 可以指向任何类型的数据. 2.数据类型的分装: int InitHardEnv(void ** handle); 典型的内 ...

  4. elementui入门以及nodeJS环境搭建

    1. ElementUI简介 我们学习VUE,知道它的核心思想式组件和数据驱动,但是每一个组件都需要自己编写模板,样式,添加事件,数据等是非常麻烦的, 所以饿了吗推出了基于VUE2.0的组件库,它的名 ...

  5. 如何在Markdown格式下插入动图/gif

    上传GIF动图与上传普通图片是一样的,都需要以下在markdown语法中 ![]() 的小括号内填写图片的地址.问题在于如何获取本地gif的地址呢? 核心的东西就是要把这个gif动图传上网络,这样图片 ...

  6. 设计模式-Decorator(结构型模式) 用于通过 组合 的方式 给定义的类 添加新的操作,这里不用 继承 的原因是 增加了系统的复杂性,继承使深度加深。

    以下代码来源: 设计模式精解-GoF 23种设计模式解析附C++实现源码 //Decorator.h #pragma once class Component { public: virtual ~C ...

  7. Fiddler修改请求数据

    截断方法一: 在菜单中选择“Rules”->“Automatic Breakpoint”->“Before Requests”,这种方式会截断所有Request请求. 2.浏览器打开站点, ...

  8. asp.net的原理

    Asp.net的作业流是指什么?很多人都不是很了解,也不知道是用来干什么的有怎样运用,其实能够从简略的基础了解. 作业流(Workflow),便是“事务进程的部分或全体在核算机使用环境下的主动化”(i ...

  9. java之位运算符

    整型转二进制:Integer.toBInaryString(6) <<:左移,3<<2 = 3*2*2 = 12 >>:右移,3>>1 = 3/2 = ...

  10. spring cloud 2.x版本 Gateway路由网关教程

    前言 本文采用Spring cloud本文为2.1.8RELEASE,version=Greenwich.SR3 本文基于前两篇文章eureka-server.eureka-client.eureka ...