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 21 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
Bootstrap每天必学之标签页(Tab)插件
Aug 09 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
node中koa中间件机制详解
Aug 22 Javascript
Angular2之二级路由详解
Aug 31 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
小程序实现上下移动切换位置
Sep 23 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 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执行速度全攻略(下)
2006/10/09 PHP
改进的IP计数器
2006/10/09 PHP
如何使用PHP中的字符串函数
2006/11/24 PHP
Linux下ZendOptimizer的安装与配置方法
2007/04/12 PHP
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
jQuery Easyui 下拉树组件combotree
2016/12/16 Javascript
如何学JavaScript?前辈的经验之谈
2016/12/28 Javascript
JS调用Android、Ios原生控件
2017/01/06 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
javascript实现秒表计时器的制作方法
2017/02/16 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
详解Vue This$Store总结
2018/12/17 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python2.7实现邮件发送功能
2018/12/12 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python re正则表达式元字符分组()用法分享
2020/02/10 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
canvas学习和滤镜实现代码
2018/08/22 HTML / CSS
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
广州一家公司的.NET面试题
2016/06/11 面试题
汇科协同Java笔试题
2012/03/31 面试题
2014年党员创先争优承诺书
2014/05/29 职场文书
奥巴马上海演讲稿
2014/09/10 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书