js 观察者模式

观察者模式 解决1对多的关系,其中有一个比较难的思维点 就是 某人对某个事情敢兴趣,不是自己一直盯着那个事情,而是发生那个事情的主人去通知对这个事情敢兴趣的人。所以首先事情的主人就要收集搞清楚哪些人对这个事情敢兴趣,当事情发生了 逐一通知他们。

所以这里就有两个重要的对象 收集者Dep(收集对某个事情敢兴趣的),观察者Watcher(对事情敢兴趣的人).
重点 发生的什么事情不重要,事情在代码里没有主题对象

// 观察者模式 简单实现

// 收集对发生的事情有兴趣的人
class Dep {
  constructor() {
//存储对事情敢兴趣的人
    this.watchers = [];
  }
//收集对事情敢兴趣的人
  addDep(watcher) {
    this.watchers.push(watcher);
  }

  // 事件发生时通知所有人
  notifys() {
    this.watchers.forEach((item) => {
      item.notify();
    });
  }
}

// 观察者 对发生的事情敢兴趣的人
class Watcher {
//name是观察者的标记名称 fun是事件发生时要干的事情
  constructor(name, fun) {
    this.name = name;
    this.doneFun = fun;
  }

  notify() {
    console.log('我是-' + this.name + '-观察者');
    if (typeof this.doneFun === 'function') {
      this.doneFun();
    }
  }
}

//这里是举例执行
//假设有个对象 a={name:''},有3个观察者 好奇1,2,3号对a对象是否改变了name有兴趣,代码就可以这样写
const a={name:'牛大爷'}
const Deps = new Dep();
Deps.addDep(new Watcher('好奇者1号'));
Deps.addDep(new Watcher('好奇者2号'));
Deps.addDep(new Watcher('好奇者3号'));
//牛大爷下面决定改名称了 
a.name='你大爷';
//这样好奇者 1,2,3号就都知道牛大爷改名字了
Deps.notifys();

你可能感兴趣的:(js 观察者模式)