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

 更新时间:2017年09月05日 11:44:52   作者:在这个肆意的青春岁月  
这篇文章主要为大家详细介绍了javascript观察者模式实现自动刷新效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;

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

相关文章

  • Echarts在Taro微信小程序开发中的踩坑记录

    Echarts在Taro微信小程序开发中的踩坑记录

    这篇文章主要介绍了Echarts在Taro微信小程序开发中的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-11-11
  • ES6 解构赋值的原理及运用

    ES6 解构赋值的原理及运用

    ES6允许按照一定模式从数组或对象中提取值,然后对变量进行赋值,称为解构。只要等号两边的模式相同,左边的变量就会被赋予对应的值,这种写法属于“模式匹配”。统称起来就叫做“解构赋值”。
    2021-05-05
  • 使用Chart.js图表库制作漂亮的响应式表单

    使用Chart.js图表库制作漂亮的响应式表单

    数据包围着我们。虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式。今年初,SitePoint 发表了 Aurelio 的文章《 Chart.js简介》。在深入研究 Chart.js 的功能后,本文将会讲解这篇简介的一些重点。
    2015-10-10
  • 原生js和css实现图片轮播效果

    原生js和css实现图片轮播效果

    这篇文章主要为大家详细介绍了原生javascript和css实现图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 浅谈js 闭包引起的内存泄露问题

    浅谈js 闭包引起的内存泄露问题

    这篇文章主要介绍了浅谈js 闭包引起的内存泄露问题的相关资料,需要的朋友可以参考下
    2015-06-06
  • js获取客户端外网ip的简单实例

    js获取客户端外网ip的简单实例

    这篇文章主要介绍了js获取客户端外网ip的简单实例,有需要的朋友可以参考一下
    2013-11-11
  • js实现漂亮的星空背景

    js实现漂亮的星空背景

    这篇文章主要为大家详细介绍了js实现漂亮的星空背景,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JavaScript实现首页图片轮播图效果

    JavaScript实现首页图片轮播图效果

    这篇文章主要介绍了JavaScript实现首页图片轮播图效果,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-06-06
  • JS实现简单拖动模态框案例

    JS实现简单拖动模态框案例

    这篇文章主要为大家详细介绍了JS实现简单拖动模态框案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS与C#编码解码

    JS与C#编码解码

    这篇文章主要是对JS与C#编码解码进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论