开发者米饭

开发者米饭 查看完整档案

上海编辑中北大学  |  通信工程 编辑盈峰环境  |  移动开发工程师 编辑 github.com/mifind 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

开发者米饭 收藏了文章 · 2018-10-12

mobx学习总结

Mobx解决的问题

传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控并可追踪。要实现该目标,便需要进行相关的约束。Redux由此引出了dispatch action reducer等概念,对state的概念进行强约束。然而对于一些项目来说,太过强,便失去了灵活性。Mobx便是来填补此空缺的。

这里对Redux和Mobx进行简单的对比:

1. Redux的编程范式是函数式的而Mobx是面向对象的;

2. 因此数据上来说Redux理想的是immutable的,每次都返回一个新的数据,而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;

3. 然而和Redux相比,使用Mobx的组件可以做到精确更新,这一点得益于Mobx的observable;对应的,Redux是用dispath进行广播,通过Provider和connect来比对前后差别控制更新粒度,有时需要自己写SCU;Mobx更加精细一点。

 Mobx核心概念

图片来自官方文档

Mobx的核心原理是通过action触发state的变化,进而触发state的衍生对象(computed value & Reactions)。

State

在Mobx中,State就对应业务的最原始状态,通过observable方法,可以使这些状态变得可观察。

通常支持被observable的类型有三个,分别是Object, Array, Map;对于原始类型,可以使用Obserable.box。

值得注意的一点是,当某一数据被observable包装后,他返回的其实是被observable包装后的类型。


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);
console.log("ob is Array:", Array.isArray(obArray));
console.log("ob:", obArray);

控制台输出为:


ob is Array: false
ob: ObservableArray {}

对于该问题,解决方法也很简单,可以通过Mobx原始提供的observable.toJS()转换成JS再判断,或者直接使用Mobx原生提供的APIisObservableArray进行判断。

computed

Mobx中state的设计原则和redux有一点是相同的,那就是尽可能保证state足够小,足够原子。这样设计的原则不言而喻,无论是维护性还是性能。那么对于依赖state的数据而衍生出的数据,可以使用computed。

简而言之,你有一个值,该值的结果依赖于state,并且该值也需要被obserable,那么就使用computed。

通常应该尽可能的使用计算属性,并且由于其函数式的特点,可以最大化优化性能。如果计算属性依赖的state没改变,或者该计算值没有被其他计算值或响应(reaction)使用,computed便不会运行。在这种情况下,computed处于暂停状态,此时若该计算属性不再被observable。那么其便会被Mobx垃圾回收。

简单介绍computed的一个使用场景

假如你观察了一个数组,你想根据数组的长度变化作出反应,在不使用computed时代码是这样的


const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
autorun(() => console.log(numbers.length));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 0;
// 输出 '4'

最后一行其实只是改了数组中的一个值,但是也触发了autorun的执行。此时如果用computed便会解决该问题。


const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 1;

autorun

另一个响应state的api便是autorun。和computed类似,每当依赖的值改变时,其都会改变。不同的是,autorun没有了computed的优化(当然,依赖值未改变的情况下也不会重新运行,但不会被自动回收)。因此在使用场景来说,autorun通常用来执行一些有副作用的。例如打印日志,更新UI等等。

action

在redux中,唯一可以更改state的途径便是dispatch一个action。这种约束性带来的一个好处是可维护性。整个state只要改变必定是通过action触发的,对此只要找到reducer中对应的action便能找到影响数据改变的原因。强约束性是好的,但是Redux要达到约束性的目的,似乎要写许多样板代码,虽说有许多库都在解决该问题,然而Mobx从根本上来说会更加优雅。

首先Mobx并不强制所有state的改变必须通过action来改变,这主要适用于一些较小的项目。对于较大型的,需要多人合作的项目来说,可以使用Mobx提供的api configure来强制。


Mobx.configure({enforceActions: true})

其原理也很简单


function configure(options){

    if (options.enforceActions !== undefined) {
        globalState.enforceActions = !!options.enforceActions
        globalState.allowStateChanges = !options.enforceActions
    }

}

通过改变全局的strictMode以及allowStateChanges属性的方式来实现强制使用action。

Mobx异步处理

和Redux不同的是,Mobx在异步处理上并不复杂,不需要引入额外的类似redux-thunkredux-saga这样的库。

唯一需要注意的是,在严格模式下,对于异步action里的回调,若该回调也要修改observable的值,那么

该回调也需要绑定action。


const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;

  @action
  changeA() {
    this.a = 0;
    setTimeout(this.changeB, 1000);
  }
  @action.bound
  changeB() {
    this.a = 1000;
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

这里用了action.bound语法糖,目的是为了解决javascript作用域问题。

另外一种更简单的写法是直接包装action


const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;
  @action
  changeA() {
    this.a = 0;
    setTimeout(action('changeB',()=>{
      this.a = 1000;
    }), 1000);
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

如果不想到处写action,可以使用Mobx提供的工具函数runInAction来简化操作。


...

 @action
  changeA() {
    this.a = 0;
    setTimeout(
      runInAction(() => {
        this.a = 1000;
      }),
      1000
    );
  }

通过该工具函数,可以将所有对observable值的操作放在一个回调里,而不是命名各种各样的action。

最后,Mobx提供的一个工具函数,其原理redux-saga,使用ES6的generator来实现异步操作,可以彻底摆脱action的干扰。


@asyncAction
  changeA() {
    this.a = 0;
    const data = yield Promise.resolve(1)
    this.a = data;
  }

Mobx原理分析

autorun

Mobx的核心就是通过observable观察某一个变量,当该变量产生变化时,对应的autorun内的回调函数就会发生变化。


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const ob = observable({ a: 1, b: 1 });
autorun(() => {
  console.log("ob.b:", ob.b);
});

ob.b = 2;

执行该代码会发现,log了两遍ob.b的值。其实从这个就能猜到,Mobx是通过代理变量的getter和setter来实现的变量更新功能。首先先代理变量的getter函数,然后通过预执行一遍autorun中回调,从而触发getter函数,来实现观察值的收集,依次来代理setter。之后只要setter触发便执行收集好的回调就ok了。
具体源码如下:

function autorun(view, opts){
    reaction = new Reaction(name, function () {
           this.track(reactionRunner);
    }, opts.onError);
   function reactionRunner() {
        view(reaction);
    }
}

autorun的核心就是这一段,这里view就是autorun里的回调函数。具体到track函数,比较关键到代码是:

Reaction.prototype.track = function (fn) {
    var result = trackDerivedFunction(this, fn, undefined);
}

trackDerivedFunction函数中会执行autorun里的回调函数,紧接着会触发obserable中代理的函数:

function generateObservablePropConfig(propName) {
    return (observablePropertyConfigs[propName] ||
        (observablePropertyConfigs[propName] = {
            configurable: true,
            enumerable: true,
            get: function () {
                return this.$mobx.read(this, propName);
            },
            set: function (v) {
                this.$mobx.write(this, propName, v);
            }
        }));
}

在get中会将回调与其绑定,之后更改了obserable中的值时,都会触发这里的set,然后随即触发绑定的函数。

Mobx的一些坑

通过autorun的实现原理可以发现,会出现很多我们想象中应该触发,但是没有触发的场景,例如:

1. 无法收集新增的属性


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
autorun(() => {
  if(ob.c){
    console.log("ob.c:", ob.c);
  }
});
ob.c = 1

对于该问题,可以通过extendObservable(target, props)方法来实现。


const Mobx = require("mobx");
const { observable, autorun, computed, extendObservable } = Mobx;
var numbers = observable({ a: 1, b: 2 });
extendObservable(numbers, { c: 1 });
autorun(() => console.log(numbers.c));
numbers.c = 3;

// 1

// 3

extendObservable该API会可以为对象新增加observal属性。

当然,如果你对变量的entry增删非常关心,应该使用Map数据结构而不是Object。

2. 回调函数若依赖外部环境,则无法进行收集


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
let x = 0;
autorun(() => {
  if(x == 1){
    console.log("ob.c:", ob.b);
  }
});
x = 1;
ob.b = 2;

很好理解,autorun的回调函数在预执行的时候无法到达ob.b那一行代码,所以收集不到。

参考链接:

1. https://www.zhihu.com/question/52219898
2. http://taobaofed.org/blog/2016/08/18/react-redux-connect
3. https://Mobx.js.org/index.html

查看原文

开发者米饭 赞了文章 · 2018-10-12

mobx学习总结

Mobx解决的问题

传统React使用的数据管理库为Redux。Redux要解决的问题是统一数据流,数据流完全可控并可追踪。要实现该目标,便需要进行相关的约束。Redux由此引出了dispatch action reducer等概念,对state的概念进行强约束。然而对于一些项目来说,太过强,便失去了灵活性。Mobx便是来填补此空缺的。

这里对Redux和Mobx进行简单的对比:

1. Redux的编程范式是函数式的而Mobx是面向对象的;

2. 因此数据上来说Redux理想的是immutable的,每次都返回一个新的数据,而Mobx从始至终都是一份引用。因此Redux是支持数据回溯的;

3. 然而和Redux相比,使用Mobx的组件可以做到精确更新,这一点得益于Mobx的observable;对应的,Redux是用dispath进行广播,通过Provider和connect来比对前后差别控制更新粒度,有时需要自己写SCU;Mobx更加精细一点。

 Mobx核心概念

图片来自官方文档

Mobx的核心原理是通过action触发state的变化,进而触发state的衍生对象(computed value & Reactions)。

State

在Mobx中,State就对应业务的最原始状态,通过observable方法,可以使这些状态变得可观察。

通常支持被observable的类型有三个,分别是Object, Array, Map;对于原始类型,可以使用Obserable.box。

值得注意的一点是,当某一数据被observable包装后,他返回的其实是被observable包装后的类型。


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const obArray = observable([1, 2, 3]);
console.log("ob is Array:", Array.isArray(obArray));
console.log("ob:", obArray);

控制台输出为:


ob is Array: false
ob: ObservableArray {}

对于该问题,解决方法也很简单,可以通过Mobx原始提供的observable.toJS()转换成JS再判断,或者直接使用Mobx原生提供的APIisObservableArray进行判断。

computed

Mobx中state的设计原则和redux有一点是相同的,那就是尽可能保证state足够小,足够原子。这样设计的原则不言而喻,无论是维护性还是性能。那么对于依赖state的数据而衍生出的数据,可以使用computed。

简而言之,你有一个值,该值的结果依赖于state,并且该值也需要被obserable,那么就使用computed。

通常应该尽可能的使用计算属性,并且由于其函数式的特点,可以最大化优化性能。如果计算属性依赖的state没改变,或者该计算值没有被其他计算值或响应(reaction)使用,computed便不会运行。在这种情况下,computed处于暂停状态,此时若该计算属性不再被observable。那么其便会被Mobx垃圾回收。

简单介绍computed的一个使用场景

假如你观察了一个数组,你想根据数组的长度变化作出反应,在不使用computed时代码是这样的


const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
autorun(() => console.log(numbers.length));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 0;
// 输出 '4'

最后一行其实只是改了数组中的一个值,但是也触发了autorun的执行。此时如果用computed便会解决该问题。


const Mobx = require("mobx");
const { observable, autorun, computed } = Mobx;
var numbers = observable([1, 2, 3]);
var sum = computed(() => numbers.length);
autorun(() => console.log(sum.get()));
// 输出 '3'
numbers.push(4);
// 输出 '4'
numbers[0] = 1;

autorun

另一个响应state的api便是autorun。和computed类似,每当依赖的值改变时,其都会改变。不同的是,autorun没有了computed的优化(当然,依赖值未改变的情况下也不会重新运行,但不会被自动回收)。因此在使用场景来说,autorun通常用来执行一些有副作用的。例如打印日志,更新UI等等。

action

在redux中,唯一可以更改state的途径便是dispatch一个action。这种约束性带来的一个好处是可维护性。整个state只要改变必定是通过action触发的,对此只要找到reducer中对应的action便能找到影响数据改变的原因。强约束性是好的,但是Redux要达到约束性的目的,似乎要写许多样板代码,虽说有许多库都在解决该问题,然而Mobx从根本上来说会更加优雅。

首先Mobx并不强制所有state的改变必须通过action来改变,这主要适用于一些较小的项目。对于较大型的,需要多人合作的项目来说,可以使用Mobx提供的api configure来强制。


Mobx.configure({enforceActions: true})

其原理也很简单


function configure(options){

    if (options.enforceActions !== undefined) {
        globalState.enforceActions = !!options.enforceActions
        globalState.allowStateChanges = !options.enforceActions
    }

}

通过改变全局的strictMode以及allowStateChanges属性的方式来实现强制使用action。

Mobx异步处理

和Redux不同的是,Mobx在异步处理上并不复杂,不需要引入额外的类似redux-thunkredux-saga这样的库。

唯一需要注意的是,在严格模式下,对于异步action里的回调,若该回调也要修改observable的值,那么

该回调也需要绑定action。


const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;

  @action
  changeA() {
    this.a = 0;
    setTimeout(this.changeB, 1000);
  }
  @action.bound
  changeB() {
    this.a = 1000;
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

这里用了action.bound语法糖,目的是为了解决javascript作用域问题。

另外一种更简单的写法是直接包装action


const Mobx = require("mobx");
Mobx.configure({ enforceActions: true });
const { observable, autorun, computed, extendObservable, action } = Mobx;
class Store {
  @observable a = 123;
  @action
  changeA() {
    this.a = 0;
    setTimeout(action('changeB',()=>{
      this.a = 1000;
    }), 1000);
  }
}
var s = new Store();
autorun(() => console.log(s.a));
s.changeA();

如果不想到处写action,可以使用Mobx提供的工具函数runInAction来简化操作。


...

 @action
  changeA() {
    this.a = 0;
    setTimeout(
      runInAction(() => {
        this.a = 1000;
      }),
      1000
    );
  }

通过该工具函数,可以将所有对observable值的操作放在一个回调里,而不是命名各种各样的action。

最后,Mobx提供的一个工具函数,其原理redux-saga,使用ES6的generator来实现异步操作,可以彻底摆脱action的干扰。


@asyncAction
  changeA() {
    this.a = 0;
    const data = yield Promise.resolve(1)
    this.a = data;
  }

Mobx原理分析

autorun

Mobx的核心就是通过observable观察某一个变量,当该变量产生变化时,对应的autorun内的回调函数就会发生变化。


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
const ob = observable({ a: 1, b: 1 });
autorun(() => {
  console.log("ob.b:", ob.b);
});

ob.b = 2;

执行该代码会发现,log了两遍ob.b的值。其实从这个就能猜到,Mobx是通过代理变量的getter和setter来实现的变量更新功能。首先先代理变量的getter函数,然后通过预执行一遍autorun中回调,从而触发getter函数,来实现观察值的收集,依次来代理setter。之后只要setter触发便执行收集好的回调就ok了。
具体源码如下:

function autorun(view, opts){
    reaction = new Reaction(name, function () {
           this.track(reactionRunner);
    }, opts.onError);
   function reactionRunner() {
        view(reaction);
    }
}

autorun的核心就是这一段,这里view就是autorun里的回调函数。具体到track函数,比较关键到代码是:

Reaction.prototype.track = function (fn) {
    var result = trackDerivedFunction(this, fn, undefined);
}

trackDerivedFunction函数中会执行autorun里的回调函数,紧接着会触发obserable中代理的函数:

function generateObservablePropConfig(propName) {
    return (observablePropertyConfigs[propName] ||
        (observablePropertyConfigs[propName] = {
            configurable: true,
            enumerable: true,
            get: function () {
                return this.$mobx.read(this, propName);
            },
            set: function (v) {
                this.$mobx.write(this, propName, v);
            }
        }));
}

在get中会将回调与其绑定,之后更改了obserable中的值时,都会触发这里的set,然后随即触发绑定的函数。

Mobx的一些坑

通过autorun的实现原理可以发现,会出现很多我们想象中应该触发,但是没有触发的场景,例如:

1. 无法收集新增的属性


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
autorun(() => {
  if(ob.c){
    console.log("ob.c:", ob.c);
  }
});
ob.c = 1

对于该问题,可以通过extendObservable(target, props)方法来实现。


const Mobx = require("mobx");
const { observable, autorun, computed, extendObservable } = Mobx;
var numbers = observable({ a: 1, b: 2 });
extendObservable(numbers, { c: 1 });
autorun(() => console.log(numbers.c));
numbers.c = 3;

// 1

// 3

extendObservable该API会可以为对象新增加observal属性。

当然,如果你对变量的entry增删非常关心,应该使用Map数据结构而不是Object。

2. 回调函数若依赖外部环境,则无法进行收集


const Mobx = require("mobx");
const { observable, autorun } = Mobx;
let ob = observable({ a: 1, b: 1 });
let x = 0;
autorun(() => {
  if(x == 1){
    console.log("ob.c:", ob.b);
  }
});
x = 1;
ob.b = 2;

很好理解,autorun的回调函数在预执行的时候无法到达ob.b那一行代码,所以收集不到。

参考链接:

1. https://www.zhihu.com/question/52219898
2. http://taobaofed.org/blog/2016/08/18/react-redux-connect
3. https://Mobx.js.org/index.html

查看原文

赞 49 收藏 32 评论 3

开发者米饭 赞了文章 · 2018-02-27

RxJS - Subject

Observer Pattern

观察者模式定义

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。

我们可以使用日常生活中,期刊订阅的例子来形象地解释一下上面的概念。期刊订阅包含两个主要的角色:期刊出版方和订阅者,他们之间的关系如下:

  • 期刊出版方 - 负责期刊的出版和发行工作

  • 订阅者 - 只需执行订阅操作,新版的期刊发布后,就会主动收到通知,如果取消订阅,以后就不会再收到通知

在观察者模式中也有两个主要角色:Subject (主题) 和 Observer (观察者) 。它们分别对应例子中的期刊出版方和订阅者。接下来我们来看张图,从而加深对上面概念的理解。

图片描述

观察者模式结构

图片描述

观察者模式实战

Subject 类定义

class Subject {
    
    constructor() {
        this.observerCollection = [];
    }
    
    addObserver(observer) { // 添加观察者
        this.observerCollection.push(observer);
    }
    
    deleteObserver(observer) { // 移除观察者
        let index = this.observerCollection.indexOf(observer);
        if(index >= 0) this.observerCollection.splice(index, 1);
    }
    
    notifyObservers() { // 通知观察者
        this.observerCollection.forEach((observer)=>observer.notify());
    }
}

Observer 类定义

class Observer {
    constructor(name) {
        this.name = name;
    }
    
    notify() {
        console.log(`${this.name} has been notified.`);
    }
}

使用示例

let subject = new Subject(); // 创建主题对象

let observer1 = new Observer('semlinker'); // 创建观察者A - 'semlinker'
let observer2 = new Observer('lolo'); // 创建观察者B - 'lolo'

subject.addObserver(observer1); // 注册观察者A
subject.addObserver(observer2); // 注册观察者B
 
subject.notifyObservers(); // 通知观察者

subject.deleteObserver(observer1); // 移除观察者A

subject.notifyObservers(); // 验证是否成功移除

以上代码成功运行后控制台的输出结果:

semlinker has been notified.
lolo has been notified.
lolo has been notified.

Observable subscribe

在介绍 RxJS - Subject 之前,我们先来看个示例:

const interval$ = Rx.Observable.interval(1000).take(3);

interval$.subscribe({
  next: value => console.log('Observer A get value: ' + value);
});

setTimeout(() => {
  interval$.subscribe({
      next: value => console.log('Observer B get value: ' + value);
  });
}, 1000);

以上代码运行后,控制台的输出结果:

Observer A get value: 0
Observer A get value: 1
Observer B get value: 0
Observer A get value: 2
Observer B get value: 1
Observer B get value: 2

通过以上示例,我们可以得出以下结论:

  • Observable 对象可以被重复订阅

  • Observable 对象每次被订阅后,都会重新执行

上面的示例,我们可以简单地认为两次调用普通的函数,具体参考以下代码:

function interval() {
  setInterval(() => console.log('..'), 1000);
}

interval();

setTimeout(() => {
  interval();
}, 1000);

Observable 对象的默认行为,适用于大部分场景。但有些时候,我们会希望在第二次订阅的时候,不会从头开始接收 Observable 发出的值,而是从第一次订阅当前正在处理的值开始发送,我们把这种处理方式成为组播 (multicast),那我们要怎么实现呢 ?回想一下我们刚才介绍过观察者模式,你脑海中是不是已经想到方案了。没错,我们可以通过自定义 Subject 来实现上述功能。

自定义 Subject

Subject 类定义

class Subject {   
    constructor() {
        this.observers = [];
    }
    
    addObserver(observer) { 
        this.observers.push(observer);
    }
    
    next(value) {  
        this.observers.forEach(o => o.next(value));    
    }
   
    error(error){ 
        this.observers.forEach(o => o.error(error));
    }
    
    complete() {
        this.observers.forEach(o => o.complete());
    }
}

使用示例

const interval$ = Rx.Observable.interval(1000).take(3);
let subject = new Subject();

let observerA = {
    next: value => console.log('Observer A get value: ' + value),
    error: error => console.log('Observer A error: ' + error),
    complete: () => console.log('Observer A complete!')
};

var observerB = {
    next: value => console.log('Observer B get value: ' + value),
    error: error => console.log('Observer B error: ' + error),
    complete: () => console.log('Observer B complete!')
};

subject.addObserver(observerA); // 添加观察者A
interval$.subscribe(subject); // 订阅interval$对象
setTimeout(() => {
   subject.addObserver(observerB); // 添加观察者B
}, 1000);

以上代码运行后,控制台的输出结果:

Observer A get value: 0
Observer A get value: 1
Observer B get value: 1
Observer A get value: 2
Observer B get value: 2
Observer A complete!
Observer B complete!

通过自定义 Subject,我们实现了前面提到的功能。接下来我们进入正题 - RxJS Subject。

RxJS Subject

首先我们通过 RxJS Subject 来重写一下上面的示例:

const interval$ = Rx.Observable.interval(1000).take(3);
let subject = new Rx.Subject();

let observerA = {
    next: value => console.log('Observer A get value: ' + value),
    error: error => console.log('Observer A error: ' + error),
    complete: () => console.log('Observer A complete!')
};

var observerB = {
    next: value => console.log('Observer B get value: ' + value),
    error: error => console.log('Observer B error: ' + error),
    complete: () => console.log('Observer B complete!')
};

subject.subscribe(observerA); // 添加观察者A
interval$.subscribe(subject); // 订阅interval$对象
setTimeout(() => {
   subject.subscribe(observerB); // 添加观察者B
}, 1000);

RxJS Subject 源码片段

/**
 * Suject继承于Observable 
 */
export class Subject extends Observable {
    constructor() {
        super();
        this.observers = []; // 观察者列表
        this.closed = false;
        this.isStopped = false;
        this.hasError = false;
        this.thrownError = null;
    }
  
    next(value) {
        if (this.closed) {
            throw new ObjectUnsubscribedError();
        }
        if (!this.isStopped) {
            const { observers } = this;
            const len = observers.length;
            const copy = observers.slice();
            for (let i = 0; i < len; i++) { // 循环调用观察者next方法,通知观察者
                copy[i].next(value);
            }
        }
    }
  
    error(err) {
        if (this.closed) {
            throw new ObjectUnsubscribedError();
        }
        this.hasError = true;
        this.thrownError = err;
        this.isStopped = true;
        const { observers } = this;
        const len = observers.length;
        const copy = observers.slice();
        for (let i = 0; i < len; i++) { // 循环调用观察者error方法
            copy[i].error(err);
        }
        this.observers.length = 0;
    }
  
    complete() {
        if (this.closed) {
            throw new ObjectUnsubscribedError();
        }
        this.isStopped = true;
        const { observers } = this;
        const len = observers.length;
        const copy = observers.slice();
        for (let i = 0; i < len; i++) { // 循环调用观察者complete方法
            copy[i].complete();
        }
        this.observers.length = 0; // 清空内部观察者列表
    }
}

通过 RxJS Subject 示例和源码片段,对于 Subject 我们可以得出以下结论:

  • Subject 既是 Observable 对象,又是 Observer 对象

  • 当有新消息时,Subject 会对内部的 observers 列表进行组播 (multicast)

Angular 2 RxJS Subject 应用

在 Angular 2 中,我们可以利用 RxJS Subject 来实现组件通信,具体示例如下:

message.service.ts

import { Injectable } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MessageService {
    private subject = new Subject<any>();

    sendMessage(message: string) {
        this.subject.next({ text: message });
    }

    clearMessage() {
        this.subject.next();
    }

    getMessage(): Observable<any> {
        return this.subject.asObservable();
    }
}

home.component.ts

import { Component } from '@angular/core';

import { MessageService } from '../_services/index';

@Component({
    moduleId: module.id,
    templateUrl: 'home.component.html'
})

export class HomeComponent {
    constructor(private messageService: MessageService) {}
    
    sendMessage(): void { // 发送消息
        this.messageService.sendMessage('Message from Home Component to App Component!');
    }

    clearMessage(): void { // 清除消息
        this.messageService.clearMessage();
    }
}

app.component.ts

import { Component, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';

import { MessageService } from './_services/index';

@Component({
    moduleId: module.id,
    selector: 'app',
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnDestroy {
    message: any;
    subscription: Subscription;

    constructor(private messageService: MessageService) {
        this.subscription = this.messageService.getMessage()
              .subscribe(message => { this.message = message; });
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }
}

以上示例实现的功能是组件之间消息通信,即 HomeComponent 子组件,向 AppComponent 父组件发送消息。代码运行后,浏览器的显示结果如下:

图片描述

Plunker 示例

Subject 存在的问题

因为 Subject 在订阅时,是把 observer 存放到观察者列表中,并在接收到新值的时候,遍历观察者列表并调用观察者上的 next 方法,具体如下:

next(value) {
        if (this.closed) {
            throw new ObjectUnsubscribedError();
        }
        if (!this.isStopped) {
            const { observers } = this;
            const len = observers.length;
            const copy = observers.slice();
            for (let i = 0; i < len; i++) { // 循环调用观察者next方法,通知观察者
                copy[i].next(value);
            }
        }
}

这样会有一个大问题,如果某个 observer 在执行时出现异常,却没进行异常处理,就会影响到其它的订阅者,具体示例如下:

const source = Rx.Observable.interval(1000);
const subject = new Rx.Subject();

const example = subject.map(x => {
    if (x === 1) {
        throw new Error('oops');
    }
    return x;
});
subject.subscribe(x => console.log('A', x));
example.subscribe(x => console.log('B', x));
subject.subscribe(x => console.log('C', x));

source.subscribe(subject);

以上代码运行后,控制台的输出结果:

A 0
B 0
C 0
A 1
Rx.min.js:74 Uncaught Error: oops

JSBin - Subject Problem Demo

在代码运行前,大家会认为观察者B 会在接收到 1 值时抛出异常,观察者 A 和 C 仍会正常运行。但实际上,在当前的 RxJS 版本中若观察者 B 报错,观察者 A 和 C 也会停止运行。那么应该如何解决这个问题呢?目前最简单的方式就是为所有的观察者添加异常处理,更新后的代码如下:

const source = Rx.Observable.interval(1000);
const subject = new Rx.Subject();

const example = subject.map(x => {
    if (x === 1) {
        throw new Error('oops');
    }
    return x;
});

subject.subscribe(
    x => console.log('A', x),
    error => console.log('A Error:' + error)
);
    
example.subscribe(
    x => console.log('B', x),
    error => console.log('B Error:' + error)
);

subject.subscribe(
    x => console.log('C', x),
    error => console.log('C Error:' + error)
);

source.subscribe(subject);

JSBin - RxJS Subject Problem Solved Demo

RxJS Subject & Observable

Subject 其实是观察者模式的实现,所以当观察者订阅 Subject 对象时,Subject 对象会把订阅者添加到观察者列表中,每当有 subject 对象接收到新值时,它就会遍历观察者列表,依次调用观察者内部的 next() 方法,把值一一送出。

Subject 之所以具有 Observable 中的所有方法,是因为 Subject 类继承了 Observable 类,在 Subject 类中有五个重要的方法:

  • next - 每当 Subject 对象接收到新值的时候,next 方法会被调用

  • error - 运行中出现异常,error 方法会被调用

  • complete - Subject 订阅的 Observable 对象结束后,complete 方法会被调用

  • subscribe - 添加观察者

  • unsubscribe - 取消订阅 (设置终止标识符、清空观察者列表)

BehaviorSubject

BehaviorSubject 定义

BehaviorSubject 源码片段

export class BehaviorSubject extends Subject {
    constructor(_value) { // 设置初始值
        super();
        this._value = _value;
    }
    get value() { // 获取当前值
        return this.getValue();
    }
    _subscribe(subscriber) {
        const subscription = super._subscribe(subscriber);
        if (subscription && !subscription.closed) {
            subscriber.next(this._value); // 为新的订阅者发送当前最新的值
        }
        return subscription;
    }
    getValue() {
        if (this.hasError) {
            throw this.thrownError;
        }
        else if (this.closed) {
            throw new ObjectUnsubscribedError();
        }
        else {
            return this._value;
        }
    }
    next(value) { // 调用父类Subject的next方法,同时更新当前值
        super.next(this._value = value);
    }
}

BehaviorSubject 应用

有些时候我们会希望 Subject 能保存当前的最新状态,而不是单纯的进行事件发送,也就是说每当新增一个观察者的时候,我们希望 Subject 能够立即发出当前最新的值,而不是没有任何响应。具体我们先看一下示例:

var subject = new Rx.Subject();

var observerA = {
    next: value => console.log('Observer A get value: ' + value),
    error: error => console.log('Observer A error: ' + error),
    complete: () => console.log('Observer A complete!')
};

var observerB = {
    next: value => console.log('Observer B get value: ' + value),
    error: error => console.log('Observer B error: ' + error),
    complete: () => console.log('Observer B complete!')
};

subject.subscribe(observerA);

subject.next(1);
subject.next(2);
subject.next(3);

setTimeout(() => {
  subject.subscribe(observerB); // 1秒后订阅
}, 1000);

以上代码运行后,控制台的输出结果:

Observer A get value: 1
Observer A get value: 2
Observer A get value: 3

通过输出结果,我们发现在 observerB 订阅 Subject 对象后,它再也没有收到任何值了。因为 Subject 对象没有再调用 next() 方法。但很多时候我们会希望 Subject 对象能够保存当前的状态,当新增订阅者的时候,自动把当前最新的值发送给订阅者。要实现这个功能,我们就需要使用 BehaviorSubject。

BehaviorSubject 跟 Subject 最大的不同就是 BehaviorSubject 是用来保存当前最新的值,而不是单纯的发送事件。BehaviorSubject 会记住最近一次发送的值,并把该值作为当前值保存在内部的属性中。接下来我们来使用 BehaviorSubject 重新一下上面的示例:

var subject = new Rx.BehaviorSubject(0); // 设定初始值

var observerA = {
    next: value => console.log('Observer A get value: ' + value),
    error: error => console.log('Observer A error: ' + error),
    complete: () => console.log('Observer A complete!')
};

var observerB = {
    next: value => console.log('Observer B get value: ' + value),
    error: error => console.log('Observer B error: ' + error),
    complete: () => console.log('Observer B complete!')
};

subject.subscribe(observerA);

subject.next(1);
subject.next(2);
subject.next(3);

setTimeout(() => {
  subject.subscribe(observerB); // 1秒后订阅
}, 1000);

以上代码运行后,控制台的输出结果:

Observer A get value: 0
Observer A get value: 1
Observer A get value: 2
Observer A get value: 3
Observer B get value: 3

JSBin - BehaviorSubject

ReplaySubject

ReplaySubject 定义

ReplaySubject 源码片段

export class ReplaySubject extends Subject {
    constructor(bufferSize = Number.POSITIVE_INFINITY, 
                windowTime = Number.POSITIVE_INFINITY, 
                scheduler) {
        super();
        this.scheduler = scheduler;
        this._events = []; // ReplayEvent对象列表
        this._bufferSize = bufferSize < 1 ? 1 : bufferSize; // 设置缓冲区大小
        this._windowTime = windowTime < 1 ? 1 : windowTime;
    }
  
    next(value) {
        const now = this._getNow();
        this._events.push(new ReplayEvent(now, value));
        this._trimBufferThenGetEvents();
        super.next(value);
    }
  
  _subscribe(subscriber) {
        const _events = this._trimBufferThenGetEvents(); // 过滤ReplayEvent对象列表
        let subscription;
        if (this.closed) {
            throw new ObjectUnsubscribedError();
        }
        ...
        else {
            this.observers.push(subscriber);
            subscription = new SubjectSubscription(this, subscriber);
        }
          ...
        const len = _events.length;
        // 重新发送设定的最后bufferSize个值
        for (let i = 0; i < len && !subscriber.closed; i++) {
            subscriber.next(_events[i].value);
        }
        ...
        return subscription;
    }
}

class ReplayEvent {
    constructor(time, value) {
        this.time = time;
        this.value = value;
    }
}

ReplaySubject 应用

有些时候我们希望在 Subject 新增订阅者后,能向新增的订阅者重新发送最后几个值,这时我们就可以使用 ReplaySubject ,具体示例如下:

var subject = new Rx.ReplaySubject(2); // 重新发送最后2个值

var observerA = {
    next: value => console.log('Observer A get value: ' + value),
    error: error => console.log('Observer A error: ' + error),
    complete: () => console.log('Observer A complete!')
};

var observerB = {
    next: value => console.log('Observer B get value: ' + value),
    error: error => console.log('Observer B error: ' + error),
    complete: () => console.log('Observer B complete!')
};

subject.subscribe(observerA);

subject.next(1);
subject.next(2);
subject.next(3);

setTimeout(() => {
  subject.subscribe(observerB); // 1秒后订阅
}, 1000);

以上代码运行后,控制台的输出结果:

Observer A get value: 1
Observer A get value: 2
Observer A get value: 3
Observer B get value: 2
Observer B get value: 3

可能会有人认为 ReplaySubject(1) 是不是等同于 BehaviorSubject,其实它们是不一样的。在创建BehaviorSubject 对象时,是设置初始值,它用于表示 Subject 对象当前的状态,而 ReplaySubject 只是事件的重放。

JSBin - ReplaySubject

AsyncSubject

AsyncSubject 定义

AsyncSubject 源码片段

export class AsyncSubject extends Subject {
    constructor() {
        super(...arguments);
        this.value = null;
        this.hasNext = false;
        this.hasCompleted = false; // 标识是否已完成
    }
    _subscribe(subscriber) {
        if (this.hasError) {
            subscriber.error(this.thrownError);
            return Subscription.EMPTY;
        }
        else if (this.hasCompleted && this.hasNext) { // 等到完成后,才发出最后的值
            subscriber.next(this.value);
            subscriber.complete();
            return Subscription.EMPTY;
        }
        return super._subscribe(subscriber);
    }
    next(value) {
        if (!this.hasCompleted) { // 若未完成,保存当前的值
            this.value = value;
            this.hasNext = true;
        }
    }
}

AsyncSubject 应用

AsyncSubject 类似于 last 操作符,它会在 Subject 结束后发出最后一个值,具体示例如下:

var subject = new Rx.AsyncSubject();

  var observerA = {
    next: value => console.log('Observer A get value: ' + value),
    error: error => console.log('Observer A error: ' + error),
    complete: () => console.log('Observer A complete!')
  };

  var observerB = {
    next: value => console.log('Observer B get value: ' + value),
    error: error => console.log('Observer B error: ' + error),
    complete: () => console.log('Observer B complete!')
  };

  subject.subscribe(observerA);

  subject.next(1);
  subject.next(2);
  subject.next(3);

  subject.complete();

  setTimeout(() => {
    subject.subscribe(observerB); // 1秒后订阅
  }, 1000);

以上代码运行后,控制台的输出结果:

Observer A get value: 3
Observer A complete!
Observer B get value: 3
Observer B complete!

JSBin - AsyncSubject

参考资源

查看原文

赞 43 收藏 60 评论 5

开发者米饭 回答了问题 · 2017-05-10

关于室内定位的问题

室内定位这种米级别的和高德百度没有关系,一般使用蓝牙,可以看一下ibeacon技术,有相关平台,但是成本会很高,当然成本不是技术人员的事情了

关注 6 回答 4

开发者米饭 赞了回答 · 2017-05-10

登录拦截逻辑问题?

用户认证成功后,服务端返回的 token 值,前端一般存在 localStorage 里。
每次发出请求的时候,把该 token 放在请求头即可。
下面以 axios为例:


// http request 拦截器
api.interceptors.request.use(config => {
  if (window.localStorage.ACCESS_TOKEN) {
    config.headers.Authorization = 'Bearer ' + window.localStorage.ACCESS_TOKEN
  }
  return config
}, error => {
  return Promise.reject(error)
})

// http response 拦截器
api.interceptors.response.use(response => {
  if (response.status === 401) { // token过期
    window.localStorage.removeItem('ACCESS_TOKEN')
    router.replace({
      path: '/user/login',
      query: {
        redirect: router.currentRoute.fullPath
      }
    })
  }
  return response
}, error => {
  return Promise.reject(error)
})

页面的登录拦截以 vue.jsvue-router 为例:

// 导航钩子
router.beforeEach((to, from, next) => {
  // 检查登录状态
  store.commit(types.CHECKOUT_LOGIN_STATUS)
  if (to.matched.some(record => record.meta.requiresAuth)) { // 判断该路由是否需要登录权限
    if (window.localStorage.ACCESS_TOKEN) { // 如果本地存在 access_token,则继续导航
      next()
    } else {
      if (name === 'userLogin') {
        next()
      } else {
        next({ // 登录成功后,自动跳转到之前的页面
          path: '/user/login',
          query: {
            redirect: to.fullPath
          }
        })
      }
    }
  } else {
    next()
  }
})

另外 token 值一般是很难伪造的,因为每次请求都会向后端去验证该 token 值的有效性。

关注 4 回答 2

开发者米饭 赞了回答 · 2017-05-10

react navigation 在安卓上如何将导航条设置为在底部?

你把tabBarPosition: 'bottom'的位置写错了。
你应该写成这样的:

tabBarOptions: {
    tabBarComponent: TabBarBottom,
    ...
},
tabBarPosition: 'bottom',

也就是说tabBarPosition这一个选项并不是写在tabBarOptions里面的

关注 2 回答 1

开发者米饭 关注了用户 · 2017-04-19

KingMario @kingmario

《学习 Vue 你需要知道的 webpack 知识》https://segmentfault.com/l/15...

组件及 webpack 相关的 Vue.js 代码详解
https://cdn.rawgit.com/KingMa...

VMware Frontend Tech lead
VMware is hiring

关注 508

开发者米饭 赞了回答 · 2017-04-19

vue 需要将所有状态都放在vuex里吗?其实有些状态是局部的,页面跳转了也就可以销毁了。

当然没有必要全放到 vuex 里啦,其实你心中已经有答案啦:全局的放vuex,局部的放在component的data里

关注 2 回答 3

开发者米饭 关注了标签 · 2017-04-19

react-native

LEARN ONCE, WRITE ANYWHERE: BUILD MOBILE APPS WITH REACT

Build Native Mobile Apps using JavaScript and React.

关注 1052

开发者米饭 赞了回答 · 2017-04-19

解决能否让vue-cli的express修改express重启服务

https://nodemon.io/

这个工具会自动监视你的文件路由改变并且重启服务器

关注 5 回答 3

认证与成就

  • 获得 0 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-13
个人主页被 100 人浏览