javascript观察者模式实现自动刷新效果


Posted in Javascript onSeptember 05, 2017

本文实例为大家分享了js观察者模式实现自动刷新的具体代码,供大家参考,具体内容如下

// author wangbinandi@gmail.com

const observable = obj => {
  const observers = Symbol();
  const set = function(target, key, value) {
    const result = Reflect.set(target, key, value);
    //console.log("set key:" + key);
    if ( target[observers].has(key) ) {
      target[observers].get(key).forEach(observer => observer());
    }

    return result;
  }

  const get = function(target, key) {
    const result = Reflect.get(target, key);
    //console.log("get key:" + key);
    if (arguments.callee.caller) {
      if (!target[observers].has(key)) {
        target[observers].set(key, new Set())
      }
      target[observers].get(key).add(arguments.callee.caller);
    }

    return result;
  }

  obj[observers] = new Map(); // string => Set()
  return new Proxy(obj, {set, get});
};

const autorun = fn => fn();

var person = observable({
  firstName: 'Matt',
  lastName: 'Ruby',
  age: 18,
  weight: 50
});

autorun(function () {
  console.log('autorun.getAge: ' + person.firstName + ' ' + person.age);
});

autorun(function () {
  console.log('autorun.getName: ' + person.firstName + ' ' + person.lastName);
});

person.age = 19;
person.weight = 55;
person.firstName = 'test';
person.lastName = 'MyLast';
console.log(person.lastName);
person.age = 20;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
记录几个javascript有关的小细节
Apr 02 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
Angular 1.x个人使用的经验小结
Jul 19 Javascript
vue中实现Monaco Editor自定义提示功能
Jul 05 Javascript
微信小程序 行的删除和增加操作实现详解
Sep 29 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
js使用generator函数同步执行ajax任务
Sep 05 #Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 #Javascript
详解Vue2.0 事件派发与接收
Sep 05 #Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 #Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 #jQuery
JSON在Javascript中的使用(eval和JSON.parse的区别)详细解析
Sep 05 #Javascript
详解vue-cli本地环境API代理设置和解决跨域
Sep 05 #Javascript
You might like
详解php魔术方法(Magic methods)的使用方法
2016/02/14 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
Ext面向对象开发实践(续)
2008/11/18 Javascript
javascript 冒泡排序 正序和倒序实现代码
2010/12/14 Javascript
非常好用的JsonToString 方法 简单实例
2013/07/18 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jQuery的框架介绍
2016/05/11 Javascript
React Native实现地址挑选器功能
2017/10/24 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
nodeJS与MySQL实现分页数据以及倒序数据
2020/06/05 NodeJs
Python编程中的异常处理教程
2015/08/21 Python
Python复制文件操作实例详解
2015/11/10 Python
Python爬虫PyQuery库基本用法入门教程
2018/08/04 Python
Python实现的字典排序操作示例【按键名key与键值value排序】
2018/12/21 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
web页面录屏实现
2019/02/12 HTML / CSS
Nike英国官网:Nike.com (UK)
2017/02/13 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
多媒体专业自我鉴定
2014/02/28 职场文书
最美护士演讲稿
2014/08/27 职场文书
前台岗位职责范本
2015/04/16 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书