SNS项目笔记<七>--深入探究RXjs
摘要：弄懂本篇文章，首先请看SNS项目笔记<四>--RX简要用法
在正常使用RX做监听的时，时不时有些页面需要重复点击进入，这样在进入该页面的时候，会产生多次触发subscribe方法，这个时候往往会出现多次赋值或者多次提交操作，即浪费资源，也让某些功能直接成为了Bug。于是博主就寻找了一天的源码与探讨了方法，特此记录下来。
1、优化封装provider
在查找出现这样的原因的时候，博主首先认为是单例问题，这里先贴出原来封装好的provider:
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class RxBus{
private param: any;
private subject: Subject<any> = new Subject()
setListener(param: any): void {
this.param= param;
this.subject.next(param);
}
bus(): Observable<any> {
return this.subject.asObservable();
}
}这里subject直接为new的一个Subject对象，这样可能造成多次回调问题，于是为了保险起见，我重新整理了自定义单例的代码:
//自定义单例类
export class MySubject extends Subject<any>{
public static readonly instance:MySubject = new MySubject()
private constructor(){
super()
}
}这样完成了单例对象的建立，本以为问题得以解决，殊不知还是没有解决重复问题，于是开始翻阅源码
2、RXjs部分源代码
Subject源代码.png
从subject源码上我们难以看出问题，其中有complete()和unsubscribe()供以使用，但是我试了下竟然将所有的监听移除了，这里可以看出并没有写complete()与unsubscribe()的使用情况于是继续深入寻找js源码：
JS源码--complete方法.png
JS源码--unsubscribe方法.png
说明： "this.isStopped" 处理该subject对象是否继续处理事件监听，"this,obervers" 存储监听回调的对象Array，显然在这两个方法一个将数组置空，一个将数组直接赋值为null，并且isStopped状态直接为true。这样整个subscribe系统处于瘫痪状态，需要重新另起Subject对象来完成新的监听动态。
3、重写方法
掌握好其原理后，就好重写方法来完成我们的需求，这里我们先整理下思路：
1、需要时刻保持subject活跃
2、需要在页面pop过后进行解绑其监听以达到不重复情况
3、注意的是在返回pop页面的时候的监听不可取消
于是重构代码：
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class RxBus{
private param: any;
private subject: MySubject<any> = MySubject.instance
setListener(param: any): void {
this.param= param;
this.subject.next(param);
}
bus(): Observable<any> {
return this.subject.asObservable();
}
//公开方法
complete(){
this.subject.finish()
}
}
//自定义单例类
export class MySubject extends Subject<any>{
public static readonly instance:MySubject = new MySubject()
private constructor(){
super()
}
//解除最后一个绑定的observe
finish(){
if (this.closed) {
return
}
let len = this.observers.length;
let observers = this.observers.splice(len-1,1);
}
}在page里面调用生命周期方法：
ionViewDidLeave(){
this.rxbus.compelete()
}这样便完成了只有一次回调了