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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
js onclick事件传参讲解
Nov 06 Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 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加MYSQL服务器
2006/10/09 PHP
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
phpMyAdmin自动登录和取消自动登录的配置方法
2014/05/12 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
PHP html_entity_decode()函数讲解
2019/02/25 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
javascript HTML+CSS实现经典橙色导航菜单
2016/02/16 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
浅谈JavaScript 覆盖原型以及更改原型
2016/08/31 Javascript
Angular实现下载安装包的功能代码分享
2017/09/05 Javascript
Angular2里获取(input file)上传文件的内容的方法
2017/09/05 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
通过jquery的ajax请求本地的json文件方法
2018/08/08 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[01:18:43]2014 DOTA2华西杯精英邀请赛5 24 iG VS DK
2014/05/25 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
Python中函数的返回值示例浅析
2019/08/28 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
校运会广播稿100字
2014/01/27 职场文书
教师职位说明书
2014/07/29 职场文书
执法作风整顿剖析材料
2014/10/11 职场文书
2016大一新生入学教育心得体会
2016/01/23 职场文书
工作一年自我鉴定
2019/06/20 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP