5.4 Observer（观察者）

• 为那些在目标发生改变时需获得通知的对象定义一个更新接口。

export default  class Observer {constructor( ) {}Update(subject){console.log(`Observer 继承次类，重写此类方法，订阅者获取到消息`);}}

5.5 ConcreteSubject（具体目标） 

• 将有关状态存入各ConcreteObserver对象。 
• 当它的状态发生改变时,向它的各个观察者发出通知。 

import Subject  from './Subject.js'; export default  class DataModel extends Subject {a;b;c;constructor( ) {super();}SetValue(a,b,c){this.a=a;this.b=b;this.c=c;super.Notify();}GetValue(){return {a:this.a,b:this.b,c:this.c}}}

5.6 ConcreteObserver（具体观察者） 

• 维护一个指向ConcreteSubject对象的引用。 
• 存储有关状态，这些状态应与目标的状态保持一致。
• 实现Observer的更新接口以使自身状态与目标的状态保持一致。

import Observer  from '../OneDataModel/Observer.js';export default  class Widge extends Observer{ctx;rect;constructor(ctx,rect ) {super();this.ctx=ctx;this.rect=rect;}Draw(){}}

import Widget from '../Widget.js';
import Observer from '../../OneDataModel/Observer.js';export default class BarShow extends Widget {barValue;constructor(ctx, rect) {super(ctx, rect);}Draw() {this.ctx.clearRect(this.rect.startx, this.rect.starty, this.rect.width, this.rect.height);this.ctx.lineWidth = 1;this.ctx.strokeRect(this.rect.startx, this.rect.starty, this.rect.width, this.rect.height);let x = this.rect.startx;let y = this.rect.starty;//以下效果代码this.ctx.beginPath();this.ctx.lineWidth = "4";this.ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);this.ctx.fillRect(x + 20, y + 150, 20, -this.barValue.a);this.ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);this.ctx.fillRect(x + 60, y + 150, 20, -this.barValue.b);this.ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);this.ctx.fillRect(x + 100, y + 150, 20, -this.barValue.c);this.ctx.stroke();this.ctx.font="12px Arial";this.ctx.fillText(`BarShow a:` + this.barValue.a + `%  b:` + this.barValue.b + `%  c:` + this.barValue.c+ `%`,x+10,this.rect.starty+this.rect.width-30);//效果代码end}Update(subject) {this.barValue = subject.GetValue();console.log(`BarShow a:` + this.barValue.a + ` b:` + this.barValue.b + ` c:` + this.barValue.c);this.Draw();}}

import Widget from '../Widget.js';
import Observer from '../../OneDataModel/Observer.js';
export default class PieShow extends Widget {value;constructor(ctx, rect) {super(ctx, rect);}Draw() {this.ctx.clearRect(this.rect.startx, this.rect.starty, this.rect.width, this.rect.height);this.ctx.lineWidth = 1;this.ctx.strokeRect(this.rect.startx, this.rect.starty, this.rect.width, this.rect.height);let x = this.rect.startx;let y = this.rect.starty;let aPer = this.value.a / 100;let bPer = this.value.b / 100;let cPer = this.value.c / 100;//以下效果代码let start = 0;let end = aPer;//产生随机颜色this.ctx.beginPath();this.ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);this.ctx.moveTo(x + 100, y + 100);this.ctx.arc(x + 100, y + 100, 50, start * Math.PI * 2, end * Math.PI * 2)this.ctx.fill();this.ctx.stroke();start = end;end=aPer+bPer;this.ctx.beginPath();this.ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);this.ctx.moveTo(x + 100, y + 100);this.ctx.arc(x + 100, y + 100, 50, start * Math.PI * 2, end * Math.PI * 2)this.ctx.fill();this.ctx.stroke();start = end;end=aPer+bPer+cPer;this.ctx.beginPath();this.ctx.fillStyle = '#' + Math.floor(Math.random() * 0xffffff).toString(16);this.ctx.moveTo(x + 100, y + 100);this.ctx.arc(x + 100, y + 100, 50, start * Math.PI * 2, end * Math.PI * 2)this.ctx.fill();this.ctx.stroke();//效果代码endthis.ctx.font = "12px Arial";this.ctx.fillText(`PieShow a:` + this.value.a + `% b:` + this.value.b + `% c:` + this.value.c+ `%`, x + 10, this.rect.starty + this.rect.width - 30);}Update(subject) {this.value = subject.GetValue();console.log(`PieShow a:` + this.value.a + ` b:` + this.value.b + ` c:` + this.value.c);this.Draw();}
}

5.7  Client

import DataModel  from './OneDataModel/DataModel.js';
import BarShow  from './Widget/impl/BarShow.js'; 
import PieShow  from './Widget/impl/PieShow.js'; export default class Client{constructor(ctx,zooRect) {let dataModel=new DataModel();let barShow=new BarShow(ctx,{startx:50,starty:50,width:200,height:200});dataModel.Attach(barShow);let pieShow=new PieShow(ctx,{startx:350,starty:50,width:200,height:200});dataModel.Attach(pieShow);dataModel.SetValue(50,30,20);/**模拟等待三秒后，实际调用**/setInterval(() => { 	 console.log(` 定时更新 dataModel`);let end=true;let a,b,c;do{a=Math.floor(Math.random()*(100-1)+1);b=Math.floor(Math.random()*(100-1)+1);c=100-a-b;if(c>0) end=false;}while(end)dataModel.SetValue(a,b,c);}	, 3000 )}}

5.8 测试HTML

测试结果：

六、源代码下载

        下载链接：https://pan.baidu.com/s/1XuPqp84cccBNVkbnMY3sKw 
         提取码：q2ut