es6版·观察者模式+发布订阅模式 |
您所在的位置：网站首页 › 手写发布订阅者和观察者模式哪个好 › es6版·观察者模式+发布订阅模式 |
es6版·观察者模式+发布订阅模式
一、原理图
二、观察者模式
1、手动触发的观察者模式 /* * @Author: laifeipeng * @Date: 2019-02-22 15:44:56 * @Last Modified by: laifeipeng * @Last Modified time: 2019-02-22 16:29:36 */ /*************** 观察者模式 **************/ // 观察的主题（目标对象），相当于发布者 class Subject { constructor() { this.subs = []; } addSub(sub) { this.subs.push(sub); console.log(this.subs) } removeSub(sub) { const idx = this.subs.findIndex(i => i === sub); if (idx === -1) { console.log('不存在该观察者'); return; } this.subs.splice(idx, 1); } notify() { this.subs.forEach(sub => { sub.update();// 与观察者原型方法update对应！ }); } } // 观察人，相当于订阅者 class Observer { update() { console.log('update'); } } // 测试代码 const subject = new Subject(); const ob = new Observer(); const ob2 = new Observer(); ob2.update = function () { //修改update方法，实现不同逻辑 console.log('laifeipeng'); } //目标添加观察者了 subject.addSub(ob); subject.addSub(ob2); //目标发布消息调用观察者的更新方法了 subject.notify(); // update // laifeipeng subject.removeSub(ob2); //移除之后就不触发ob2的update了，不再打印`laifeipeng` subject.notify(); // update const test = new Observer(); subject.removeSub(test);// // 不存在该观察者2、根据内部状态自动触发更新 手动触发有啥用？肯定要根据内部状态更改触发才有用！ 增加内部状态变量state并增加对应的getter/setter /* * @Author: laifeipeng * @Date: 2019-02-22 15:44:56 * @Last Modified by: laifeipeng * @Last Modified time: 2019-02-22 16:29:36 */ /*************** 观察者模式 **************/ // 观察的主题（目标对象），相当于发布者 class Subject { constructor() { this.subs = []; this.state = "张三";//触发更新的状态 } //新增两个对于name的操作 获取/更新 getState() { return state; } setState(state) { if (this.state === state) { console.log('不能设为之前的name，无效'); return; } this.state = state; this.notify(); // 有更新，触发通知！【原本手动触发通知的，现在根据数据变化来触发】 } addSub(sub) { this.subs.push(sub); console.log(this.subs) } removeSub(sub) { const idx = this.subs.findIndex(i => i === sub); if (idx === -1) { console.log('不存在该观察者'); return; } this.subs.splice(idx, 1); } notify() { this.subs.forEach(sub => { sub.update();// 与观察者原型方法update对应！ }); } } // 观察人，相当于订阅者 class Observer { update() { console.log('update'); } } // 测试代码 const subject = new Subject(); const ob = new Observer(); const ob2 = new Observer(); ob2.update = function () { //修改update方法，实现不同逻辑 console.log('laifeipeng'); } //目标添加观察者了 subject.addSub(ob); subject.addSub(ob2); //目标发布消息调用观察者的更新方法了 // subject.notify(); // 不使用手动触发，通过内部状态的设置来触发 subject.setState('李四'); // update // laifeipeng subject.setState('李四'); // 不能设为之前的name，无效3、观察外部的对象 在2的基础上，把内部状态改为外部的对象（变量）。 举例：贪吃蛇页面score分数，根据snake的长度而改变。 下面只写基本的框架，其他自行填充。 // 贪吃蛇 class Snake(){ constructor(){ this.length=3;// 初始长度 // ...其他一系列实例属性 } // ...其他一系列原型方法 } const snake = new Snake(); //...对snake的各种处理 class Subject { constructor(obj) { this.subs = []; this.state = obj.length;//触发更新的状态 } notify() { this.subs.forEach(sub => { sub.update(n);// 与观察者原型方法update对应！ }); } // 其他还是原来的 } class Observer { constructor(obj) { this.score = obj.value;//触发更新的状态 } update(n) { this.score += n; } } const subject = new Subject(snake); const ob = new Observer(document.getElementById('score')); subject.addSub(ob); // 大功告成！！！ 3、发布订阅模式 下次更新 |
【本文地址】
今日新闻 |
推荐新闻 |