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 相关文章推荐
使用dynatrace-ajax跟踪JavaScript的性能
Apr 12 Javascript
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
angularjs中回车键触发某一事件的方法
Apr 24 Javascript
Vue-cli proxyTable 解决开发环境的跨域问题详解
May 18 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
前端axios下载excel文件(二进制)的处理方法
Jul 31 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 获取ip地址代码汇总
2015/07/05 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
js完美的div拖拽实例代码
2014/01/22 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
详解Django框架中的视图级缓存
2015/07/23 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
OpenCV2从摄像头获取帧并写入视频文件的方法
2018/08/03 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
Python字符串处理的8招秘籍(小结)
2019/08/13 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
Python实现定时监测网站运行状态的示例代码
2020/09/30 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
骨干教师培训制度
2014/01/13 职场文书
节约用水倡议书
2014/04/16 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
学生干部培训方案
2014/06/12 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
基于PyQT5制作一个桌面摸鱼工具
2022/02/15 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
TaiShan 200服务器安装Ubuntu 18.04的图文教程
2022/06/28 Servers