fe-star / exercise17 Goto Github PK

ob.sum = 0;
val = Math.random() * 1e9 >> 0;
subject.removeObserver(ob);
assert.ok(subject.observers.count() === 0);
subject.notify(val);
assert.ok(ob.sum !== val);

SimpleObservable.ts
class SimpleObservable {
  private observer: Array<Function>;
  constructor() {
    this.observer = [];
  }
  subscribe(_observer: Function) {
    this.observer.push(_observer);
    let _index = this.observer.length - 1;
    let that = this;
    return {
      _index: _index,
      unsubscribe: function () {
        console.log("before:unsubscribe:", that.observer);
        that.observer.splice(this._index, 1);
        console.log("after  :unsubscribe:", that.observer);
      }
    };
  }
  next(_data: any) {
    for (let i = 0, len = this.observer.length; i < len; i++) {
      this.observer[i](_data);
    }
  }
}
export default SimpleObservable;

demo1.ts
import SimpleObservable from './SimpleObservable';
let subscriptions=[];
let headerTitleObservable = new SimpleObservable();
let headerTitle_subscriptsion = headerTitleObservable 
      .subscribe(_title => {
        console.log(`the header title is change to${_title }`);
      });
subscriptions.push(headerTitle_subscriptsion );

// 触发
this.headerTitleObservable.next('page1');

// 在组件生命周期结束时，清除所有observers
subscriptions.forEach(subscription => {
      subscription.unsubscribe();
    });

demo2.ts
/**
 * 这里模拟了一个登录modal组件
 */
class LoginModalComponent {
  constructor() { }
  open() {
    console.log('##检测到access_token已经过期，打开login模态框##');
    console.log('请输入账号和密码,点击登录');
  }
}

/**
 * 这里模拟了一个http拦截器
 */
class HttpInterceptor {
  loginModalComponent: LoginModalComponent = new LoginModalComponent();;
  constructor() { }
  handleHttpRes() {
    if (this.checkLoginInvalid) {
      this.loginModalComponent.open();
    }
  }
  // 检查登录是否失效
  checkLoginInvalid() {
    return true;
  }
}

let httpInterceptor = new HttpInterceptor();
httpInterceptor.handleHttpRes();

demo3.ts
class SimpleObservable {
  private observer: Array<Function>;
  constructor() {
    this.observer = [];
  }
  subscribe(_observer: Function) {
    this.observer.push(_observer);
    let _index = this.observer.length - 1;
    let that = this;
    return {
      _index: _index,
      unsubscribe: function () {
        console.log("before:unsubscribe:", that.observer);
        that.observer.splice(this._index, 1);
        console.log("after  :unsubscribe:", that.observer);
      }
    };
  }
  next(_data: any) {
    for (let i = 0, len = this.observer.length; i < len; i++) {
      this.observer[i](_data);
    }
  }
}
/**
 * 这里模拟了一个登录modal组件
 */
class LoginModalComponent {
  constructor() { }
  open() {
    console.log('##检测到access_token已经过期，打开login模态框##');
    console.log('请输入账号和密码,点击登录');
  }
}

/**
 * 通过一个service来作为中间者，从而解除HttpInterceptor和LoginModalComponent强耦合状态。
 */
class HttpStatusService {
  login_invalid_observable = new SimpleObservable();
  constructor() { }
  getLoginInvalidObservable() {
    return this.login_invalid_observable;
  }
  triggerLoginInvalidObservable() {
    this.login_invalid_observable.next('access_token is invalid.')
  }
}

/**
 * 创建一个HttpStatusService的实例，全局可用，实际的做法是采用ts的依赖注入
 */
let httpStatusService: HttpStatusService = new HttpStatusService();
/**
 * 这里模拟了一个http拦截器
 */
class HttpInterceptor {
  constructor() { }
  handleHttpRes() {
    if (this.checkLoginInvalid) {
      httpStatusService.triggerLoginInvalidObservable();
    }
  }
  // 模拟一个登录失败的状态，实际的情况是，拦截到http请求的服务器响应信息
  checkLoginInvalid() {
    return true;
  }
}


/**
 * AppComponent,一个页面跟组件
 */
class AppComponent {
  loginModalComponent: LoginModalComponent = new LoginModalComponent();
  subscriptions: Array<any> = [];
  constructor() {
    this.init();
  }
  init() {
    let subscription1 = httpStatusService.getLoginInvalidObservable().subscribe((err_msg) => {
      this.loginModalComponent.open();
    });
    this.subscriptions.push(subscription1);
  }
  onDestroy() {
    this.subscriptions.forEach(subscription => {
      subscription.unsubscribe();
    });
  }
}

let appComponent = new AppComponent();
/**
 * 此时appComponent已经在监听httpStatusService里的login_invalid_observable
 */
let httpInterceptor = new HttpInterceptor();
httpInterceptor.handleHttpRes();

appComponent.onDestroy();