Angular 个人深究（二）【发布与订阅】
1. 再入正题之前，首先说明下[ 发布与订阅模式]（也叫观察者模式）
1) 定义：定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时会通知所有观察者对象，使它们能够自动更新。
2) 结构图：
3) 解释：Subject类，可翻译为主题或抽象的通知者，一般是抽象类或者接口。Observer是抽象观察者，为所有的具体观察者定义一个接口。ConcreteSubject类，叫做具体通知者。ConcreteObserver是具体的观察者。
5) 代码实现：（用TypeScript实现）
/* 代码使用Typescript 编写，Angular中使用的他，需要编译成Javascript代码然后使用node js 运行*/ //抽象观察者
abstract class abstract_observer{
name:string;
message:string;
constructor(name:string){
this.name = name;
}
abstract handle_publish(msg);
}
//抽象主题
abstract class abstract_subject{
subject_name:string;
observers: abstract_observer[]= [];
current_message:string;
constructor(name:string){
this.subject_name = name;
}
//提供订阅入口
subscribe(observer:abstract_observer){
this.observers.push(observer);
console.log(observer.name+"成功订阅"+this.subject_name);
}
//提供取消订阅入口
unsubscribe(observer:abstract_observer ){
this.observers.splice(this.observers.indexOf(observer),1);
console.log(observer.name+"成功取消订阅"+this.subject_name);
}
update_message(msg){
this.current_message = msg;
}
//发布消息
publish(){
console.log("Server 开始发布消息");
for (let observer of this.observers){
console.log("发布消息给"+observer.name+"!");
observer.handle_publish(this.current_message);
}
console.log("所有订阅"+this.subject_name+"的人已经收到消息！");
}
}
//具体观察者
class concrete_observer extends abstract_observer{
constructor(name:string){
super(name);
}
handle_publish(msg){
this.message = msg;
console.log(this.name+": 已经接到消息:"+this.message);
}
}
//具体股票主题
class concrete_subject_gupiao extends abstract_subject{
publish(){
console.log('发送股票新消息');
super.publish();
}
update_message(updatemsg){
console.log("股票消息更新:"+updatemsg);
super.update_message(updatemsg);
}
}
//具体NBA主题
class concrete_subject_nba extends abstract_subject{
publish(){
console.log('发送NBA新消息');
super.publish();
}
update_message(updatemsg){
console.log("NBA消息更新："+updatemsg);
super.update_message(updatemsg);
}
}
//订阅发布主逻辑
var observer1 = new concrete_observer("小明");
var observer2 = new concrete_observer("小强");
var observer3 = new concrete_observer("小红");
var subject_gupiao = new concrete_subject_gupiao("股票");
var subject_nba = new concrete_subject_nba("NBA");
console.log("小明订阅了股票");
subject_gupiao.subscribe(observer1);
console.log("小明订阅了NBA");
subject_nba.subscribe(observer1);
console.log("小强订阅了股票");
subject_gupiao.subscribe(observer2);
console.log("小红订阅了NBA");
subject_nba.subscribe(observer3);
console.log("---------------------------------");
subject_gupiao.update_message("大盘下跌");
subject_nba.update_message("骑士总冠军");
console.log("---------------------------------");
subject_gupiao.publish();
console.log("---------------------------------");
subject_nba.publish();
console.log("---------------------------------");
console.log("小明取消订阅股票");
subject_gupiao.unsubscribe(observer1);
console.log("小明取消订阅NBA");
subject_nba.unsubscribe(observer1);
console.log("---------------------------------");
subject_gupiao.update_message("大盘上涨");
subject_nba.update_message("骑士蝉联总冠军");
console.log("---------------------------------");
subject_gupiao.publish();
console.log("---------------------------------");
subject_nba.publish();
console.log("---------------------------------");
输入结果如下：
小明订阅了股票
小明成功订阅股票
小明订阅了NBA
小明成功订阅NBA
小强订阅了股票
小强成功订阅股票
小红订阅了NBA
小红成功订阅NBA
---------------------------------
股票消息更新:大盘下跌
NBA消息更新：骑士总冠军
---------------------------------
发送股票新消息
Server 开始发布消息
发布消息给小明!
小明: 已经接到消息:大盘下跌
发布消息给小强!
小强: 已经接到消息:大盘下跌
所有订阅股票的人已经收到消息！
---------------------------------
发送NBA新消息
Server 开始发布消息
发布消息给小明!
小明: 已经接到消息:骑士总冠军
发布消息给小红!
小红: 已经接到消息:骑士总冠军
所有订阅NBA的人已经收到消息！
---------------------------------
小明取消订阅股票
小明成功取消订阅股票
小明取消订阅NBA
小明成功取消订阅NBA
---------------------------------
股票消息更新:大盘上涨
NBA消息更新：骑士蝉联总冠军
---------------------------------
发送股票新消息
Server 开始发布消息
发布消息给小强!
小强: 已经接到消息:大盘上涨
所有订阅股票的人已经收到消息！
---------------------------------
发送NBA新消息
Server 开始发布消息
发布消息给小红!
小红: 已经接到消息:骑士蝉联总冠军
所有订阅NBA的人已经收到消息！
---------------------------------
说明：实现了订阅与发布不同主题的情况，并可以取消订阅。
4) 分享一个设计模式很好的书籍【大话设计模式——程杰】
百度网盘下载地址: https://pan.baidu.com/s/1iyUe5p0yAHNq3Hw2Z4L1Qg 提取码：n1pd
感兴趣的可以去看看。
2.下面开始说明Angular中的发布与订阅
注：本人在使用angular时，为了实现父子组件之间的变量传递，才研究到了其中的发布与订阅
功能实现：子组件更改数据到父组件（方法一）
//test1.component.ts
import { Component, OnInit } from '@angular/core';
import {EmitserviceService} from '../emitservice.service';
@Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.css']
})
export class Test1Component implements OnInit {
data_from_child:string;
constructor(private emitter:EmitserviceService) {}
ngOnInit() {
this.emitter.emitter.subscribe((data)=>{
console.log(data);
this.data_from_child = data;
});
}
}
//test2.component.ts
import { Component, OnInit,EventEmitter } from '@angular/core';
import {EmitserviceService} from '../emitservice.service';
@Component({
selector: 'app-test2',
templateUrl: './test2.component.html',
styleUrls: ['./test2.component.css']
})
export class Test2Component implements OnInit {
constructor(private emitter:EmitserviceService) {}
ngOnInit() {
}
onTest(value:string){
this.emitter.emitter.emit(value);
}
}
//emitservice.service.ts
import { Injectable,EventEmitter } from '@angular/core'; @Injectable({
providedIn: 'root'
})
export class EmitserviceService {
public emitter:any;
constructor() {
this.emitter = new EventEmitter ;
}
}
//test1component.html
<div>
<div><h1>这是父组件test1</h1></div>
<h2>子组件的数据(子到父)</h2>
<h3>显示子组件的数据：{{data_from_child}}</h3>
<div>
<app-test2></app-test2>
</div>
</div>
//test2.component.html
<div><h1>这是子组件test2</h1></div>
输入数据传递到父组件：
<input type="text" (change)="onTest($event.target.value)">
底层代码探究：
需要用到的文件有：
\node_modules\@angular\core\fesm2015\core.js
\node_modules\rxjs\_esm5\internal\Subject.js
\node_modules\rxjs\_esm5\internal\Subscriber.js
\node_modules\rxjs\_esm5\internal\Observable.js
\node_modules\rxjs\_esm5\internal\util\toSubscriber.js
core.js
//core.js 部分代码
//实际上是继承了Subject类，是Angular的部分 Subject是Rxjs的部分
class EventEmitter extends Subject {
//定义了发射数据函数，并调用Subject的next方法
emit(value) { super.next(value); }
//定义了 订阅 方法，并调用了Subject 依赖的Observable 的 subscibe方法
subscribe(generatorOrNext, error, complete) {
//省略部分代码
const /** @type {?} */ sink = super.subscribe(schedulerFn, errorFn, completeFn);
//省略部分代码
}
}
core.js代码 是angular的代码，实际上就是定义了class EvemtEmitter 这个类，方便angluar中的使用，内部提供了emit与subscribe方法实现发布与订阅功能，实际上也是使用了rxjs的subject类
Subject.js
var Subject = /*@__PURE__*/ (function (_super) {
// Subject 继承 Observable
tslib_1.__extends(Subject, _super);
console.log(_super);
function Subject() {
var _this = _super.call(this) || this;
_this.observers = [];
_this.closed = false;
_this.isStopped = false;
_this.hasError = false;
_this.thrownError = null;
return _this;
}
Subject.prototype[rxSubscriberSymbol] = function () {
return new SubjectSubscriber(this);
};
Subject.prototype.lift = function (operator) {
var subject = new AnonymousSubject(this, this);
subject.operator = operator;
return subject;
};
//next 函数，将发布消息给observer
Subject.prototype.next = function (value) {
if (this.closed) {
throw new ObjectUnsubscribedError();
}
if (!this.isStopped) {
var observers = this.observers;
var len = observers.length;
var copy = observers.slice();
for (var i = 0; i < len; i++) {
copy[i].next(value);
}
}
};
//错误处理
Subject.prototype.error = function (err) {
if (this.closed) {
throw new ObjectUnsubscribedError();
}
this.hasError = true;
this.thrownError = err;
this.isStopped = true;
var observers = this.observers;
var len = observers.length;
var copy = observers.slice();
for (var i = 0; i < len; i++) {
copy[i].error(err);
}
this.observers.length = 0;
};
//手动完成
Subject.prototype.complete = function () {
if (this.closed) {
throw new ObjectUnsubscribedError();
}
this.isStopped = true;
var observers = this.observers;
var len = observers.length;
var copy = observers.slice();
for (var i = 0; i < len; i++) {
copy[i].complete();
}
this.observers.length = 0;
};
//取消订阅
Subject.prototype.unsubscribe = function () {
this.isStopped = true;
this.closed = true;
this.observers = null;
};
Subject.prototype._trySubscribe = function (subscriber) {
if (this.closed) {
throw new ObjectUnsubscribedError();
}
else {
return _super.prototype._trySubscribe.call(this, subscriber);
}
};
//在observable中调用_subscribe 将observer添加到this.Observable中
Subject.prototype._subscribe = function (subscriber) {
console.log(subscriber);
if (this.closed) {
throw new ObjectUnsubscribedError();
}
else if (this.hasError) {
subscriber.error(this.thrownError);
return Subscription.EMPTY;
}
else if (this.isStopped) {
subscriber.complete();
return Subscription.EMPTY;
}
else {
this.observers.push(subscriber);
return new SubjectSubscription(this, subscriber);
}
};
Subject.prototype.asObservable = function () {
var observable = new Observable();
observable.source = this;
return observable;
};
Subject.create = function (destination, source) {
return new AnonymousSubject(destination, source);
};
return Subject;
}(Observable));
export { Subject };
Subject.js中的subject类定义了 next、complete、error、_subscirbe等方法，实现订阅与发布
Subscriber.js：在Subject的Observers中存放的就是Subscriber 理解为订阅者。
Observable.js：提供了订阅方法。
toSubscriber.js：将返回Subscriber对象
- 整体的代码流程
1.test1组件中使用core.js的方法订阅了数据，并传入一个处理订阅数据的函数。
2.在core.js中订阅函数会调用Observable的订阅函数Subscribe，在这个函数中将传入的处理函数转成 subscirber
3.由于这种方式Observable的operator是空的，所有会回调到subject.js中的_subscribe()方法将subscriber放到subject的observers中
4.test2组件中某个定义是事件触发core.js中的emit方法
5.emit方法又调用了subject的next方法
6.调用subscriber中的next方法
7.调用subscirber中的_next方法
8.调用SafeSubscriber中的next方法（在subscriber的构造函数中会将destination转化成SafeSubscriber）
9.调用SafeSubscriber中的_tryOrUnsub方法,执行test1传进来的函数
- 总结：
关于RXJS的Subject还有很多扩展的地方，本文意在完成父子组件之间的数据传递。如有任何概念性错误望指正，谢谢！