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;

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

赞 (0)

相关推荐

  • JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解

    本文实例讲述了JavaScript编程设计模式之观察者模式.分享给大家供大家参考,具体如下: 简介 简单的解释观察者模式,就是一个对象(subject)维护一个依赖他的对象(observers)列表,当自身状态发生变化时,自动通知所有观察者对象.当某个对象不需要获得通知时,可以从对象列表中删除掉. 从上面的解释中我们可以提炼出三个componet: Subject, ObserverList和Observer,用JS实现很简单: function ObserverList(){ this.obs

  • 深入理解Javascript中的观察者模式

    简介 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己.讲道理,如果我们写的不是稍微底层的代码,可能不会用到它. 但是有了它会让代码更灵活,更加规整,减少冗余代码,方便分模块,分功能开发. 使用观察者模式的好处: 支持简单的广播通信,自动通知所有已经订阅过的对象. 页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 目标对

  • JavaScript观察者模式(publish/subscribe)原理与实现方法

    JavaScript观察者模式(publish/subscribe)原理与实现方法

    本文实例讲述了JavaScript观察者模式(publish/subscribe)原理与实现方法.分享给大家供大家参考,具体如下: 观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象.它是由两类对象组成,主题和观察者,主题负责发布事件,同时观察者通过订阅这些事件来观察该主体,发布者和订阅者是完全解耦的,彼此不知道对方的存在,两者仅仅共享一个自定义事件的名称. 在Nodejs中通过EventEmitte

  • 学习JavaScript设计模式之观察者模式

    一.定义 观察者模式(发布-订阅模式):其定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知. 在JavaScript中,一般使用事件模型来替代传统的观察者模式. 好处: (1)可广泛应用于异步编程中,是一种替代传递回调函数的方案. (2)可取代对象之间硬编码的通知机制,一个对象不用再显示地调用另外一个对象的某个接口.两对象轻松解耦. 二.DOM事件–观察者模式典例 需要监控用户点击document.body的动作,但是我们没有办法预知用户将在什么时间点击

  • JavaScript设计模式之观察者模式（发布者-订阅者模式）

    观察者模式( 又叫发布者-订阅者模式 )应该是最常用的模式之一. 在很多语言里都得到大量应用. 包括我们平时接触的dom事件. 也是js和dom之间实现的一种观察者模式. 复制代码 代码如下: div.onclick  =  function click (){ alert ( "click' ) } 只要订阅了div的click事件. 当点击div的时候, function click就会被触发. 那么到底什么是观察者模式呢. 先看看生活中的观察者模式. 好莱坞有句名言. "不要给我

  • JavaScript观察者模式(经典)

    Observer模式也叫观察者模式,是由GoF提出的23种软件设计模式的一种.Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段,使某个对象与依赖它的其他对象之间保持状态同步. Observer模式的角色: Subject(被观察

  • Javascript 模式实例 观察者模式

    在园里有许多牛人都已经写过这些文章,不过大多的例子都是.NET,今天我要举一个JS的使用实例．有兴趣的朋友可以先了解一下一些牛人的,比如李会军大哥设计模式篇中观察者的那一节 http://www.cnblogs.com/Terrylee/archive/2006/10/23/Observer_Pattern.html说说我自己对这模式的理解,其思想核心是:每个被观察对象都依据对象数据的改变而改变,被观察对象一定要有同样的改变行为来约束,这个约束是被观察对象提供给观察器的统一接口.观察器会开发改变

  • Javascript设计模式之观察者模式的多个实现版本实例

    介绍 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. 使用观察者模式的好处: 1.支持简单的广播通信,自动通知所有已经订阅过的对象. 2.页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性. 3.目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用. 正文(版本一) JS里对观察者模式的实现是通过回调来实现的,我们来先

  • Javascript设计模式之观察者模式(推荐)

    推荐阅读: JavaScript观察者模式(经典) 1.什么是观察者模式 观察者模式有时也称为发布--订阅模式,在观察者模式中,有一个观察者可以管理所有的目标,等到有状态发生改变的时候发出通知.(其实sql server中的发布订阅也是这个道理) 2.通俗解释 假如以前村里的广播是一个观察者,那么每个村民就是被观察对象,如果村子里有通知,政策发生改变的时候,就需要通过广播把这个消息发布出去,而不用直接一家家的跑去发通知. 3.代码 <!DOCTYPE html> <html lang=&

  • NodeJS设计模式总结【单例模式,适配器模式,装饰模式,观察者模式】

    本文实例讲述了NodeJS设计模式.分享给大家供大家参考,具体如下: 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直接返回,若不存在,则创建实例对象,并将实例对象保存在静态变量中,当下次请求时,则可以直接返回这个对象实例,这就确保了一个类只有一个实例对象.举个例子吧~一间学校刚刚起建还没有图书馆,有的同学就向领导提意见:"hey! 哥们,能不能帮我们建一个图书馆? "(想要一个图书馆实例),然后领导说:"no pro

随机推荐