sxlwar
sxlwar

Rxjs 核心概念

又一年要过去了，回顾2017，rxjs始终是我在项目里使用最频繁的库，在我看来，它是一个非常优秀的数据处理工具。年初的时候就计划写点什么，碍于目前公司的项目实在抽不出时间，这一拖就到了年底。
临近新年，总算忙里偷闲，但又不知道从何写起，于是乎偷了个懒拿起了官方文档开始翻译。以下的文字仅供各位参考，还是强烈建议去看官方文档。

Rxjs概述

简介

rxjs是一个使用观察者模式来整合异步操作和事件系统的js库，通过一系列可观测的流（observable）将它们串联起来。Observable是这个库的核心类型，此外还包括诸如Observer，Schedulers，Subjects等类型。还包括一些和数组方法类似或经过演化的操作符，用来协助处理数据。

  • _可以把 rxjs 想像成一个可以发射事件的 lodash 库。_

响应式设计结合了观察者模式，迭代模式和基于集合的函数式编程风格，从而提供了一种处理事件序列的理想方式。

在rxjs中用来处理异步事件的核心概念包括：

  • observable: 代表了未来可能会产生的一系列的值或事件的集合；
  • observer: 回调函数的集合，它知道如何去处理observable上产生的值或者事件，当然也包括异常。
  • subscription: 代表当前正在订阅的observable，主要作用是用来取消订阅行为。
  • operators: 纯函数，以函数式的风格通过各种各样的操作符相互配合对observable上产生的数据集合进处理。
  • subject: 相当于一个事件发射器，允许将相同的值传递给多个订阅者。
  • schedulers: 协调observable上数据的发射方式。

示例

在javascript中通常使用以下方式来注册事件：

var button = document.querySelector('button');

button.addEventListener('click', () => console.log('Clicked'));

使用rxjs的方式实现如下：

var button = document.querySelector('button');

Rx.Observable.fromEvent(button, 'click')
    .subscribe(() => console.log('Clicked'));

纯度

使用不纯的函数时，函数可能会改变外部数据的状态，比如：

var count = 0;

var button = document.querySelector('button');

button.addEventListener('click', () => console.log(`Clicked ${++count} times`));

当使用rxjs时，必须把这些状态隔离出去，比如：

var button = document.querySelect('button');

Rx.Observable.fromEvent(button, 'click')
    .scan(count => count + 1, 0)
    .subscribe(count => console.log(`Clicked ${count} times`));

这里的scan操作符的行为和数组的reduce方法的行为非常类似，它提供一个初始值给迭代函数，迭代函数运行后的值将作为下一次迭代的初始值。

流

rxjs提供了一套非常丰富的操作符来帮助用户控制数据或事件如何在observable中进行流动。假如我们需要控制用户在一个按钮上每秒最多只能点击一次

使用普通的javascript代码:

var count = 0;

var rate = 1000;

var lastClick = Date.now() - rate;

var button = document.querySelector('button');

button.addEventListener('click', () => {
    if(Date.now() - lastClick >= rate) {
        console.log(`Clicked ${++count} timers`);
        lastClick = Date.now();
    }
});

使用rxjs：

var button = button.querySelector('button');

Rx.Observable.fromEvent(button, 'click')
    .throttleTime(1000)
    .scan(count => count + 1, 0)
    .subscribe(count => console.log(`Click ${count} times`));

诸如此类对流进行控制的操作符还有：filter, delay, debounceTime, take, takeUntil, distinct, distinctUntilChanged等等。

值

你可以对流中的数据进行转换，当我们需要得到每一次鼠标点击时的x轴坐标时，

使用普通的javascript代码:

var count = 0;

var rate = 1000;

var lastClick = Date.now() - rate;

var button = document.querySelector('button');

button.addEventListener('click', (event) => {
    if(Date.now() - lastClick >= rate) {
        count += event.clientX;
        console.log(count);
        lastClick = Date.now();
    }
});

使用rxjs：

var button = button.querySelector('button');

Rx.Observable.fromEvent(button, 'click')
    .throttleTime(1000)
    .map(event => event.ClientX)
    .scan((count,clientX) => count + clientX, 0)
    .subscribe(count => console.log(count));

诸如此类可以产生新值的操作符还有：pluck，pairwise，sample等等。

可观测序列-Observable

可观测序列可以推送多个值，并且它的推送方式是‘懒’的，它满足下面表格中列出的条件

single multiple
pull function iterator
push promise observable

下面这个例子中的observable在被订阅时可以立即推送出1，2，3这个三个值，1秒以后推送第四的值4，然后立即结束。

var observable = Rx.Observable.create(function(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
    },1000);
});

为了获取到这个observable上的值， 我们需要对它进行订阅：

var observable = Rx.Observable.create(function(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    setTimeout(() => {
        observer.next(4);
        observer.complete();
    },1000);
});

console.log('just before subscribe');

observable.subscribe({
    next: x => console.log('got value ' + x),
    error: err => console.error('something wrong occurred: ' + err),
    complete: () => console.log('done'),
});

console.log('just after subscribe);

这段代码执行后将会得到如下结果：

just before subscribe
got value 1
got value 2
got value 3
just after subscribe
got value 4
done

pull vs push

这里使用 pull 和 push 来描述值的生产者和消费者之间是如何发生联系的，它们是两种完全不同的协议。

在pull的系统中，值的消费决定什么时间从生产者上获取数据，生产者本身并不关心数据什么时间分发给消费者。

每一个javascript函数都可以看作一个 pull 类型的系统。函数可以产生值，但这是通过调用者主动调用函数，函数运行产生出值返回给调用者的方式进行的，所以可以理解为调用者主动去函数上拉取了值。

ES2015中介绍另外两种 pull 类型的系统，generator函数 和 iterator。对于它们来讲，遍历器对象的 next 方法可以视作值的消费者，通过iterator.next()可以获取到多个值。

Producer Consumer
pull 被动：当被调用时产生值 主动：决定何时发起调用
push 主动：按自身的设置产生值 被动：响应接收到的值

在push的系统中，生产者决定什么时候发送值给消费者，消费者并知道什么时候可以接收到值。

ES6中的 promise 就是一个非常典型的 push 系统，promise 将 resolve 的结果传递给注册在它内部的回调函数，这与普通的函数有很大的不同，回调函数何时可以接收到数据完全取决于 promise 什么时间向它传递数据。

rxjs的 Observable 也是一种 push 类型的系统，一个 Observable 可以产生多个值，然后推送给它的订阅者。

  • Function 是一个 ‘懒’ 的求值过程，只有在被调用时它才会同步的返回一个值给调用者。
  • generator 也是一个 ’懒‘ 的求值过种，在遍历的过程中同步的返回0个或多个值给调用者。
  • Promise 经过运算后可能产生一个值，当然也可能产生一个错误。
  • Observable 也是一个‘懒’的求值过程，当它被订阅后可以同步或者异步的产生出0个或者无限多个值给调用者，这个过程将一直持续到订阅被取消或者流结束。

Observable 概述

很多人认为Observable就是一个事件发射器或可以产生多个值的promise，实际上这种观点是不正确的。在某些情况下Observable的行为可能与事件发射器的行为类似，例如使用Subject来发射值时，但通常情况下它们的行为与事件发射器有很大的不同。

  • _可以把 Observable 想像成一个不接受参数的函数，但是它却可以产生出很多的值。_

请思考以下代码：

function foo() {
    console.log('hello');
    return 42;
}

var x = foo.call();

console.log(x);

var y = foo.call();

console.log(y);

运行后的输出：

"hello"
42
"hello"
42

使用rxjs的方式：

var foo = Rx.Observable.create(function(observer) {
    console.log('hello');
    observable.next(42);
});

foo.subscribe(function (x) {
    console.log(x);
});

foo.subscribe(function (y) {
    console.log(y);
});

运行后的输出依然是：

"hello"
42
"hello"
42

首先，函数和Observable的求值过程都是‘懒’的，如果你不调用foo函数，console.log('hello')将不会执行，这对于Observable也是一样的，只要不订阅，console.log('hello')同样也不会执行。另外，每一次的订阅（subscribe）和调用（call）都是互不干扰的，两次函数调用会触发两次执行过程，产生两次副作用，同样，两次订阅也会触发两次订阅过程。对于事件发射器来说却不同，它产生的副作用会传递给每一个事件接收者，它并不理会有没有接收者接收事件，都会把事件发射出去，这与Observable有很大的不同。

  • _订阅一个Observable与调用一个函数的过程类似。_

你可能会认为Observable都是异步的，事实上并不是这样，我们看一下函数的调用过程：

console.log('before');
console.log('foo.call()');
console.log('after');

执行后的输出：

"before"
"hello"
42
"after"

然后以同样的顺序，但是使用Observable：

console.log('before');
foo.subscribe(function(x) {
    console.log(x);
});
console.log('after');

你会发现结果是相同的：

"before"
"hello"
42
"after"

这个结果证明了foo这个Observable完全是同步执行的，和调用一个函数没有什么两样。

  • _Observable传递值的方式可以是同步也可以是异步的。_

那么Observable与函数之间有什么样的区别？Observable被订阅后可以返回多个值，这是普通的函数所无法做到的。例如，你无法像下面这样去实现一个函数：

function foo() {
    console.log('hello');
    return 42;
    return 100; // 这句永远不会执行
}

因为函数只能返回一个值，return 100; 会被解释器忽略，如果是在typescript中，编译器会告诉你这里有一个错误。然而这对于Observable来说却不是问题：

var foo = Rx.Observable.create(function (observer) {
    console.log('hello');
    observer.next(42);
    observer.next(100); // '返回‘另外一个值
    observer.next(200); // 同上
});

console.log('before');
foo.subscribe(function(x) {
    console.log(x);
});
console.log('after');

上面的代码执行后会以同步的方式输出：

"before"
"Hello"
100
42
200
"after"

当然， 你也可以让它以异步的方式来返回值：

var foo = Rx.Observable.create(function (observer) {
    console.log('hello');
    observer.next(42);
    observer.next(100); // '返回‘另外一个值
    observer.next(200); // 同上
    setTimeout(() => {
        observer.next(300);
    },1000);
});

console.log('before');
foo.subscribe(function(x) {
    console.log(x);
});
console.log('after');

执行后的输出：

"before"
"Hello"
100
42
200
"after"
300

总结：

  • func.call() 表示以同步的方式返回一个值。
  • observable.subscribe() 表示以同步或者异步的方式返回一些值。

Observable详解

我们可以使用Rx.Observable.create方法或者那些可以创建 Observable 的操作符来创建 Observable，然后使用一个观察者来观察 Observable，当 Observable 被订阅时它就会通过 next/error/complete/ 方法来通知观察者，当观察者放弃观察行为时如何处理 Observable 运行产生的数据。这四个动作都被编码在一个可观察的实例中，但其中一些动作与其它动作是相关的，如观察和订阅。

使用Observable时要关注的核心问题：

  • 如何创建
  • 被谁订阅
  • 怎么去执行
  • 废弃时如何处理

创建Observable

Rx.Observable.create方法实际是 Observable 类的构造函数的别名，它接受一个参数——订阅函数。下面这个示例会创建一个observable，它会每秒发一个 string 类型的值‘hi’ 给它的观察者。

var observable = Rx.Observable.create(function subscribe(observer) {
    var id = setInterval(() => {
        observer.next('hi');
    },1000);
});
  • _可以通过 create 方法来创建 Observable，但实际情况下我们使用更多的是那些可以创建出 Observable 的操作符，例如：from, interval 等。_

上面代码中的 subscribe 函数对于解释 Observable 来说是非常重要的一部分，接下来解释如何去理解它。

订阅Observable

上面例子中的observable可以这样被订阅：

observable.subscribe(x => console.log(x));

observable变量上有 subscribe 方法，同样 Observable.create(function subscribe(observer) { ... }) 也有subscribe 方法，这并不是一个巧合。在库的实现中，这两个subscribe是不一样的，但在实际使用中你可以认为它们在概念上是相等的。

这个示例很好的展示了为什么订阅行为在多个订阅者之间是不会共享的。当我们使用一个观察者来订阅 observable 时，传入 create 方法的 subscribe 函数就会为这个观察者运行一次。每次调用 observable.subscribe 都会为给定的观察者触发它自己的独立设置。

  • _订阅Observable和执行一个函数很类似，都可以提供一个回调函数来接收将要产生的值。_

这个过程与诸如 addEventListener/removeEventListener 等事件处理API有很大的区别。在 observable.subscribe 的过程中，给定的观察者并没有注册成为 Observable 上的监听者。Observable 甚至不需要维护一个观察者名单。

通过 subscribe 这种简单的方式就可以使一个 Observable 开始执行，并且将产生的数据或事件传递给当前 Observable 环境上的观察者。

执行Observable

Observable.create(function subscribe(observer) { ... })内部的代码代表了 Observable 的执行，一个‘懒’执行过程——仅在有观察者订阅它的时候执行，当它被执行后就可以以同步或异步的方式不断的生产值。

Observable 执行后可以产生三种类型的值：

  • ’Next‘：发送一个正常的值，比如String， Number 或者 Object 等。
  • ‘Error’：发送一个javascript的错误或者抛出异常。
  • ’Complete‘：停止发送值。

Next类型的通知是最重要也是最常用的一种，它代表了将要传递给观察者的数据。Error 和 Complete 类型的通知在整个Observable的执行过程中只可以发生一次，并且它们是互斥的，只有一个可以发生。

以正则表达式来表述三者之间的关系的话，应该是：

next*(error|complete)?
  • _在Observable执行的过程中，可以发生0个或无限多个Next类型的通知，但是当 Error 或 Complete 类型的通知中有一个发生后，Observable将不会再传递任何数据。_

下面的代码展示了一个可以产生三个 Next 类型通知的 Observable，最后发送一个 Complete 通知：

var observable = Rx.Observable.create(function subscribe(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
});

Observable 将严格遵守上述规则，所以试图在Observable完成后继续传递值的行为是无效的。

var observable = Rx.Observable.create(function subscribe(observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
    observer.next(4); // 不会传递成功
});

如果Observable在执行过程中发生异常，我们可以在subscribe函数内部使用 try/catch 块来捕获它：

var observable = Rx.Observable.create(function subscribe(observer) {
    try {
        observer.next(1);
        observer.next(2);
        observer.next(3);
        observer.complete();
    } catch(error) {
        observer.error(error); // 传递错误
    }
});

处理Observable

由于 Observable 可能产生出无限多个值，但观察者可能在某时间点想停止观察行为，这就需要有一种方法来取消 Observable 的执行。由于每个执行只对应一个观察者，一旦观察者完成接收值，它就需要知道如何停止执行，以避免浪费计算或内存资源。

当我们调用 observable.subscribe 时，观察者会被附加在新创建的可观察上下文中，同时这次调用会返回一个对象，它就是 Subscription 。

var subscription = observable.subscribe(x => console.log(x));

Subscription 代表了正在执行的上下文，它拥有一个可以取消 Observable 执行的方法——unsubscribe。调用这个方法 subscription.unsubscribe() 就可以取消执行。

var observable = Rx.Observable.from([10,20,30]);
var subscription = observable.subscribe(x => console.log(x));
// 一段时间以后
subscription.unsubscribe();
  • _当你对一个 Observable 进行订阅时，就会获得一个代表当前执行的 Subscription ，只需要调用它的 unsubscribe 方法就可以取消订阅。_

当我们使用 Observable.create 方法来创建 Observable 时，必须定义当取消订阅时如何去释放执行时的资源，此时可以返回一个自定义的 unsubscribe 函数。

我们可以给之前的例子添加上它的 unsubscribe 方法：

var observable  Rx.Observable.create(function subscribe(observer) {
    var intervalID = setInterval(() => {
        observer.next('hi');
    },1000);

    return function unsubscribe() {
        clearInterval(intervalID);
    }
});

与 observable.unsubscribe 一样，我们可通过调用 unsubscribe 方法对这个流取消订阅，这两个 unsubscribe 在概念上是完全相同的。

事实上在这个例子中，假如我们把响应式的外壳剥离的话，它完全就是一个普普通通的javascript函数：

function subscribe(observer) {
    var intervalID = setInterval(() => {
        observer.next('hi');
    },1000);

    return function unsubscribe() {
        clearInterval(intervalID);
    }
}

var unsubscribe = subscribe({next: (x) => console.log(x)});

尽管如此，我们依然有理由去使用Rx这种响应式的编程，通过 Observable，Observer，Subscription，配合各种操作符来实现更高效安全的数据处理。

观察者——Observer

观察者实际就是可观察序列——Observable的消费者。Observer 会设置一些回调函数来对应 Observable 的各个通知类型（next/error/complete)，从这些通知中接收值，然后对它们进行处理。

这是一个很典型的 Observer：

var observer = {
    next: x => console.log('Observer got a next value: ' + x),
    error: err => console.error('Observer got an error: ' + err),
    complete: () => console.log('Observer got a complete notification')
};

我们可以使用它来观察一个 Observable：

observable.subscribe(observer);
  • _观察者就是一个简单对象，拥有三个方法，每一个方法对应处理可观察序列上的相应类型的通知。_

Rxjs中的观察者允许只实现这三个方法中的某几个，这对 Observable 的执行过程不会产生影响，仅仅是被忽略方法的对应通知无法得到处理，因为观察者想要处理相应通知上的数据时必须实现对应的方法。

下面这个示例的 Observer 就没有实现处理 complete 方法：

var observer = {
    next: x => console.log('Observer got a next value: ' + x),
    error: err => console.error('Observer got an error: ' + err),
};

当需要订阅一个 Observable 时，可以只传入一个回调函数作为参数，而不必传入观察者对象：

observable.subscribe(x => console.log('Observer got a next value: ' + x));

实际上在库的内部实现中会根据传入的参数为我们创建出一个 Observer 对象，此时，传入的第一个函数作为next方法的回调，第二个是error回调，第三个是complete回调。也就是说我们可以这样去订阅一个 Observable ：

observable.subscribe(
    x => console.log('Observer got a next value: ' + x),
    err => console.error('Observer got an error: ' + err),
    () => console.log('Observer got a complete notification')
);

Subscription

Subscription是一个代表着当前正在执行的 Observable 的对象。它有一个非常重要的方法 unsubscribe ，这个方法不接受任何参数，仅仅是用来释放 Observable 执行时的资源。在旧版本的Rxjs中，它也叫做 Disposable 。

var observable = Rx.Observable.interval(1000);
var subscription = observable.subscribe(x => console.log(x));
// 执行一段时间后

// 下面的操作将会取消上面已经订阅的 Observable 的执行。
subscription.unsubscribe();
  • _Subscription本质上可以只有一个 unsubscribe 方法，用来取消已经订阅的 Observable 的执行。_

Subscription 可以被组合在一起，这样只要调用一次 unsubscribe 方法就可以将多个 Observable 的执行取消掉。我们可以通过 subscription 的 add 方法将它们添加在一起。

var observable1 = Rx.Observable.interval(400);
var observable2 = Rx.Observable.interval(300);

var subscription = observable1.subscribe(x => console.log('first: ' + x));

var childSubscription = observable2.subscribe(x => console.log('second: ' + x));

subscription.add(childSubscription);

setTimeout(() => {
    // 取消上面的两次订阅
    subscription.unsubscribe();
},1000);

执行后将输出：

second:0
first:0
second:1
first:1
second:2

当然，可以添加，就可以移除，Subscription同样拥有一个remove方法，用来从一组subscription 中移除指定的子 subscription。

Subject

Subject 是 Observable 的一种特殊类型，它允许把值同时传播给多个 Observer，也就是说它是多播的。相比之下，普通的Observable 是单播的，每一个 Observer 在订阅 Observable 时都有其独立的执行上下文。

  • _Subject 类似于 Observable ，但它可以把值同时广播给多个观察者。它也类似于一个事件发射器，因此它会维护一个属于自己的监听者列表。_

每一个 Subject 都是一个 Observable。你可以提供一个订阅者来订阅 Subject，从而在它上面取值。从观察者的角度来看，并不能区分出数据是从 Subject 上获取的还是从 Observable 上获取的。

在 Subject 的内部实现中，并不会产生新的执行上下文来传递数据，它仅仅是简单的将 Observer 注册在自己的监听者列表中，这与其它的库或语言中添加事件的机制是类似的。

每一个 Subject 都是一个 Observer。每一个 Subject 上都有自己的 next，error，complete方法。当需要给 Subject 上添加一个值时，只要调用它的next方法，接下来它就会把这个值广播给注册在监听者列表中的多个监听者。

下面的例子中，我们给 Subject 添加了两个观察者，然后给它添加一些值：

var subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

subject.subscribe({
    next: v => console.log('observerB: ' + v)
});

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

执行后的输出：

observerA: 1
observerB: 1
observerA: 2
observerB: 2

由于 Subject 也是一个 Observer ，所以你可以把他传递给一个 Observable 的subscribe方法：

var subject = new Rx.Subject();

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

subject.subscribe({
    next: v => console.log('observerB: ' + v)
});

var observable = Rx.Observable.from([1,2,3]);

observable.subscribe(subject); // 通过 Subject 来订阅这条 Observable

执行后输出：

observerA: 1
observerB: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

通过上面的方法，我们基本上就借助 Subject 把一个单播的 Observable 转换成了多播的。这个示例仅仅是演示了一种将一个执行上下文分享给多个观察者的方法。

在 Subject 类型下，还有一些比较特殊的 Subject 类型：BehaviorSubject，ReplaySubject，AsyncSubject。

多播的Observable

一个‘多播’的 Observable 可以借助于 Subject 实现将数据通知给多个观察者，然而单播的 Observable 仅仅只能把通知发送给一个观察者。

  • _多播的 Observable 会使用 Subject 作为钩子来实现将同一个 Observable 的执行传递给多个观察者。_

这就是那些多播的操作符实现时的真实情况：观察者订阅底层的一个 Subject，使用这个 Subject 来订阅产生源数据的 Observable。

下面这个例子和之前那个使用 subject 来订阅 Observable 的例子非常类似：

var source = Rx.Observable.from([1,2,3]);
var subject = new Rx.Subject();
var multicasted = source.multicast(subject);

// 使用 subject.subscribe({...}) 实现
multicasted.subscribe({

   next: v => console.log('observerA: ' + v)

});
multicasted.subscribe({

   next: v => console.log('observerB: ' + v)

});

//使用 source.subscribe(subject) 实现

multicasted.connect();

上面代码中的multicast方法返回的 Observable 看起来像一个普通的 Observable，但是当它被订阅时，执行的方式却和 Subject 一样是多播的，同时这个 Observable 还有一个connect方法，可以将多个流串联在一起。

何时调用这个connect方法非常重要，因为它决定了这条可以共享的流什么时间开始执行。由于connect方法在内部执行了 source.subscribe(subject) ，因此它会返回一个 Subscription ，可以通过它来取消这个共享的 Observable 的执行。

引用计数

通过手动调用connect方法来得到 Subscription 多少显得有些笨重，通常情况下，我们希望当第一个观察者抵达时可以自动的调用connect方法，当最后一个观察者取消订阅时自动的取消这个共享 Observable 的执行。

请考虑实现如以下列表所概述的订阅：

  1. 第一个观察者订阅多播流。
  2. 多播流被connect。
  3. 0 被传递给第一个订阅者。
  4. 第二个观察者订阅这条多播流。
  5. 1 被传递给第一个订阅者。
  6. 1 被传递给第二个订阅者。
  7. 第一个订阅者取消订阅多播流。
  8. 2 被 传递给第二个订阅者。
  9. 第二个订阅者取消订阅多播流。
  10. 取消这条多播流的订阅。

为了达到这个效果，我们需要显式的调用connect方法：

var source = Rx.Observable.interval(500);
var subject = new Rx.Subject();
var multicasted = source.multicast(subject);
var subscription1, subscription2, subscriptionConnect;

subscription1 = multicasted.subscribe({
    next: v => console.log('observerA: ' + v)
});

// 在这里我们需要显示的调用connect方法以使第一个订阅者可以开始接收值
subscriptionConnect = multicasted.connect();

setTimeout(() => {
    subscription2 = multicasted.subscribe({
        next: v => console.log('observerB: ' + v)
    });
}, 600);

setTimeout(() => {
    subscription1.unsubscribe();
},1200);

// 在这里我们需要把多播流的订阅取消掉，因为从此以后再也没有订阅者订阅它了。
setTimeout(() => {
    subscription2.unsubscribe();
    subscriptionConnect.unsubscribe();
},2000);

我们可以通过使用 ConnectableObservable 的refCount方法来避免显式的调用connect方法，这个方法会返回一个 Observable 用来追踪当前有多少订阅者正在订阅多播流。当订阅者的数量从0增加到1时，它帮助我们调用connect方法以开始订阅，当订阅者的数量从1变为0时，它帮助我们取消订阅以停止多播流的继续执行。

  • _refCount使得多播流在第一个订阅者到达时开始执行，在最后一个订阅者离开后停止执行。_

请看下面的例子：

var source = Rx.Observable.interval(500);
var subject = new Rx.Subject();
var refCount = source.multicast(subject).refCount();
var subscription1, subscription2, subscriptionConnect;

// 这次调用会执行connect方法
console.log('observerA subscribed');
subscription1 = refCounted.subscribe({
    next: v => console.log('observerA: ' + v)
});

setTimeout(() => {
    console.log('observerB subscribed');
    subscription2 = refCounted.subscribe({
        next: v => console.log('observerB: ' + v)
    })
},600);

setTimeout(() => {
    console.log('observerA unsubscribed');
    subscription1.unsubscribe();
}, 1200);

// 这里会调用多播流的unsubscribe方法
setTimeout(() => {
    console.log('observerB unsubscribed');
    subscription2.unsubscribe();
},2000);

执行后的输出：

observerA subscribed
observerA: 0
observerB subscribed
observerA: 1
observerB: 1
observerA unsubscribed
observerB: 2
observerB unsubscribed

refCount方法仅存在于 ConnectableObservable 上，它返回的是一个新的 Observable 而不是另一个 ConnectableObservable 。

BehaviorSubject

BehaviorSubject 是 Subject 的一个变种上，关于它的一个重要概念是’当前值‘。它会把最后一次发送给订阅者的值保存下来，当另外一个订阅者开始订阅时，它会把这个值立即发送给新的订阅者。

  • _BehaviorSubject 对于表示随时间变化的值是非常有用的。例如，表示生日的事件流可以用 Subject，但是一个人的年龄的事件流可以用 BehaviorSubject。_

下面的例子中，BehaviorSubject初始化了一个值0，当第一个订阅者开始订阅时，这个值被发送出去。接下来当第二个订阅者开始订阅时，将会接收到值2，即使这个值已经被发送过了。

var subject = new Rx.BehaviorSubject(0);

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

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

subject.subscribe({
    next: v => console.log('observerB: ' + v)
});

subject.next(3);

执行后的输出：

observerA: 0
observerA: 1
observerA: 2
observerB: 2
observerA: 3
observerB: 3

ReplaySubject

ReplaySubject 和 BehaviorSubject 很类似，它们都可以把过去的值发送给新的订阅者，不同的是它可以把 Observable 执行时产生的一部分值记录下来。

  • _ReplaySubject 记录 Observable 执行时的多个值，并将它们传递给新加入的订阅者。_

在创建 ReplaySubject 时，我们可以指定需要重复发送的值的数量：

var subject = new Rx.ReplaySubject(3); // 传递3个值给新加入的订阅者

subject.subscribe({
    next: (v) => console.log('observerA: ' + v)
});

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

subject.subscribe({
    next: (v) => console.log('observerB: ' + v)
});

subject.next(5);

执行后的输出：

observerA: 1
observerA: 2
observerA: 3
observerA: 4
observerB: 2
observerB: 3
observerB: 4
observerA: 5
observerB: 5

还可以指定一个以毫秒为单位的时间，配合记录的数量共同决定究竟有个多少个值需要被重复发送。

下面的这个例子，使用了一个比较大的数量，但是时间上只限制了只发送500毫秒内的值：

var subject = new ReplaySubject(100, 500/* windowTime */);

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

var i = 1;
setInterval(() => subject.next(i++), 200);

setTimeout(() => {
    subject.subscribe({
        next: v => console.log('observerB: ' + v)
    });
},1000);

第二个订阅者只能接收到最近的500毫秒内发出的值，下面是执行后的输出，

observerA: 1
observerA: 2
observerA: 3
observerA: 4
observerA: 5
observerB: 3
observerB: 4
observerB: 5
observerA: 6
observerB: 6
...

AsyncSubject

它也是 Subject 的一个变种，AsyncSubject仅在流执行结束后把最后一个值发送给它的订阅者。

var subject = new Rx.AsyncSubject();

subject.subscribe({
    next: v => console.log('observerA: ' + v)
});

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

subject.subscribe({
    next: v => console.log('observerB: ' + v);
});

subject.next(5);
subject.complete();

执行后的输出：

observerA: 5
observerB: 5

AsyncSubject 的行为与last操作符的行为非常相似，都是在等待完成后再发送一个值。你应该还记得之前提到的当 Observable 发出Complete通知或Error通知后就不能再发送值，AsyncSubject看起来违背了这个原则，其实不然，我们可以看一下它的源码：

constructor() {
    super(...arguments);
    this.value = null;
    this.hasNext = false;
    this.hasCompleted = false;
}
complete() {
    this.hasCompleted = true;
    if (this.hasNext) {
        super.next(this.value);
    }
    super.complete();
}

这里只摘录出了AsyncSubject的构造函数和它的complete方法，首先AsyncSubject是继承自Subject的，所以这里的super类就是Subject，那么就很明显了，在AsyncSubject实例上调用complete方法时并没有违背之前提到的原则，依然是先发出了Next通知，最后才发出Complete通知。

操作符

虽然 Observable 是构建rxjs的基石，但是真正精彩的部分应该是操作符。操作符的组合使用使得以声明式的方式解决复杂的异步场景变得非常简单，它构成rxjs必不可少的一部分。

什么是操作符

操作符是 Observable 类上的方法，例如： .map(...)，.filter(...)，.merge(...)等。当我们调用它们时，并不会去改变已有 Observable 实例，取而代之的是创建一个全新的 Observable ，它是订阅逻辑是基于第一个 Observable 的。

  • _操作符是一个纯函数，它不会改变已有的 Observable 实例，而是基于当前的Observable 创建一个新的 Observable。_

理解操作符时非常重要的一点是时刻谨记它是一个纯函数，它接受一个 Observable 作为输入然后生成一个新的 Observable 作为输出。当订阅输出 Observable 的同时也就订阅了输入 Observable 。

下面的例子中，我们自定义了一个操作函数，它将输入的每一个值都乘以10：

function multiplyByTen(input) {
    var output = Rx.Observable.create(function subscribe(observer) {
        input.subscribe({
            next: v => observer.next(10 * v),
            error: err => observer.error(error),
            complete: () => observer.complete()
        });
    });

    return output;
}

var input = Rx.Observable.from([1,2,3,4]);
var output = multiplyByTen(input);
output.subscribe(x => console.log(x));

执行后的输出：

10
20
30
40

注意：我们只是订阅了输出-——output，但这同时导致input被订阅，这称之为’操作符的链式订阅‘。

实例的操作符 VS 静态操作符

通常在提到操作符时，我们指的是 Observable 实例上的操作符。假如上面例子中我们定义的操作函数 multiplyByTen 是一个操作符的话，它看起来应该是这样：

Rx.Observable.prototype.multiplyByTen = function multiplyByTen() {
    var input = this;
    return Rx.Observable.create(function subscribe(observer) {
        input.subscribe({
            next: v => observer.next(10 * v),
            error: err => observer.error(err),
            complete: () => observer.complete()
        });
    });
}
  • _实例操作符是使用this关键字来推断输入 Observable 的函数。_

在这里输入的 Observable 不再通过 multiplyByTen 的参数获得，而是通过this关键字来获取，这就允许我们可以像下面这样链式的调用：

var observable = Rx.Observable.from([1,2,3,4]).multiplyByTen();

observable.subscribe(x = console.log(x));

除了实例操作符，还有静态操作符，它们是直接定义在 Observable 类上的静态方法。静态操作符不会使用this关键字来推断输入，它的输入完全依赖于输入的参数。

  • _静态操作符时附加在 Observable 类上的静态函数，通常用来从头创建 Observable。_

常见的静态操作符都是一些可创建类型的操作符，与通常情况下操作符接收输入流，输出输出流不同，它们大多接收一些非 Observable 类型的参数，例如一个数字，然后创建出一条流。

var observable = Rx.Observable.interval(1000 /* 毫秒数 */);

另外的例子就是create，我们在之前的例子中已经多次使用过了。

然后，静态操作符并非只是那些简单创建流的操作符，一些组合类的操作符也可以有它的静态类型，例如：merge，combineLatest，concat等。这样做的意义在于我们接收多个流作为输入而不仅仅是一个。

var observable1 = Rx.Observable.interval(1000);
var observable2 = Rx.Observable.interval(400);

var merge = Rx.Observable.merge(observable1, observable2);

弹珠图

单纯靠文字可能还不足解释的清楚操作符是如何工作的，许多操作符是与时间相关的，它们可能以不同的方式来影响值的发射，比如：delay，throttle，sample等。对于这些操作符来说图表的形式会更加直观。弹珠图可以模拟出操作符是如何工作的，可以直观的表现出输入流，操作符，参数与输出流之间的联系。

下面来详细解释弹珠图各部分的含义：

// 这条从左到右的横线代表随时间的推移，输入流的执行过程。
// 横线上的值代表从流上发射出的值
// 横线尾部的竖线代表complete通知执行的时间点，表示这条流已经成功的执行完成。
----------4------6--------------a-------8-------------|---->

            multipleByTen // 使用的操作符

// 这条从左到右的横线代表经过操作符转换后的输出流。
// 横线尾部的X代表在这个时间点上流发生了错误，至此之后不应该再有 Next 通知或 Complete 通知从流上发出。
---------40-----60--------------X--------------------------->

在整个文档中，我们都使用这种弹珠图来解释操作符是如何工作的。这种弹珠图在其它场景中也是非常有用的，比如在白板演示或者单元测试中。

如何选择合适的操作符

如果你明确自己需要解决的问题，但是不清楚应该使用哪一个操作符，可以在官网的 Manual > Operators > Choose an operator 中通过选择符合问题的描述来找到你所需要的操作符。

操作符类别

为了解决不同的问题，rxjs针对性的设计了各种各样的操作符，大体上可以分为几类：创建型、转换型、过滤型、组合型、多播型、错误处理型、工具类等等。

关于操作符，将会在专门的文档中进行解释。

Scheduler

Scheduler决定了subscription什么时候开始以及什么时候开始分发值。它由3个部分组成：

  • 一个Scheduler就是一段数据结构：它知道如何去存储数据，以及基于优先级或其它标准来排列任务的顺序。
  • 一个Scheduler就是一个执行环境：决定什么时间在什么样的环境下去执行任务， 是立即执行还是在回调中执行，亦或是在定时器到达时，还是下一次事件循环开始时执行。
  • Scheduler有自己的虚拟时钟：被调度任务的执行时间只由虚拟时钟决定。只会它的虚拟时钟的环境中执行。

Scheduler类型

  • null： 按正常的规则发送值。
  • queue: 按当前事件队列中的顺序来发送值。
  • asap：按更小的单元上的事件队列中的顺序发送值。
  • async: 按异步顺序来发送值。

可以传入scheduler的操作符：

  • bindCallback
  • bindNodeCallback
  • combineLatest
  • concat
  • empty
  • from
  • fromPromise
  • interval
  • merge
  • of
  • range
  • throw
  • timer

你可能感兴趣的:(rxjs,javascript)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 【JS】前端文件读取FileReader操作总结 程序员-张师傅 前端前端javascript开发语言
    前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
  • webstorm报错TypeError: this.cliEngine is not a constructor Blue_Color
    点击Details在控制台会显示报错的位置TypeError:this.cliEngineisnotaconstructoratESLintPlugin.invokeESLint(/Applications/RubyMine.app/Contents/plugins/JavaScriptLanguage/languageService/eslint/bin/eslint-plugin.js:97:
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • 了解 UNPKG：前端开发者的包管理利器 小于负无穷 前端javascripttypescriptcsshtml5node.js
    在现代前端开发中，JavaScript包管理和模块化是至关重要的，而npm则是最流行的JavaScript包管理器之一。不过，随着前端项目复杂性的增加，有时候我们希望快速引入外部依赖，而无需本地安装和构建。此时，CDN（内容分发网络）成为了一种方便快捷的解决方案，而UNPKG就是这种方式中的佼佼者。什么是UNPKG？UNPKG是一个基于npm的内容分发网络（CDN），它允许开发者直接通过URL从n
  • 2019-05-29 vue-router的两种模式的区别 Kason晨
    1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容优点:良好的交互体验,用户不需要刷新页面,页面显示流畅,良好的前后端工作分离模式,减轻服务器压力,缺点:不利于SEO,初次加载耗时比较多2、hash模式vue-router默认的是hash
  • electron多标签页模式更像客户端 diygwcom electronjavascript前端
    Electron多标签页模式是指在Electron框架中实现的类似Web浏览器的多标签页功能。Electron是一个使用Web技术（HTML、CSS和JavaScript）来创建跨平台桌面应用程序的框架。在Electron中实现多标签页模式，通常需要借助一些特定的库或组件，如BrowserView或electron-tabs，或者通过自定义实现。实现方式1.使用BrowserViewBrowser
  • 外卖霸王餐返利外卖会员卡小程序开发 闹小艾 good506070微信小程序小程序
    外卖霸王餐返利外卖会员卡小程序开发"社交电商赋能下的外卖返利小程序"是专为商家与用户双赢而设计的创新平台。以下是其开发方案的详细步骤：一、需求梳理：首先，我们需要明确小程序的核心功能和特色。包括设定活动类型、返利策略，以及用户体验友好的界面设计。二、技术决策：技术选型是关键。我们采用小程序的开发框架，利用JavaScript作为前端开发语言，并结合微信提供的API进行后端接口调用与数据处理。三、账
  • Axure设计之全屏与退出全屏交互实现 招风的黑耳 Axureaxure交互
    在AxureRP中，设计全屏与退出全屏的交互功能可以极大地提升用户体验，尤其是在展示产品原型或进行演示时。本文将详细介绍如何在AxureRP中通过结合JavaScript代码实现全屏与退出全屏的交互效果。Axure原型设计web端交互元件库：https://1zvcwx.axshare.com一、设计思路全屏与退出全屏的交互设计主要依赖于JavaScript代码来控制浏览器的全屏模式。在Axure
  • 全面指南：用户行为从前端数据采集到实时处理的最佳实践 数字沉思 营销流量运营系统架构前端内容运营大数据
    引言在当今的数据驱动世界，实时数据采集和处理已经成为企业做出及时决策的重要手段。本文将详细介绍如何通过前端JavaScript代码采集用户行为数据、利用API和Kafka进行数据传输、通过Flink实时处理数据的完整流程。无论你是想提升产品体验还是做用户行为分析，这篇文章都将为你提供全面的解决方案。设计一个通用的ClickHouse表来存储用户事件时，需要考虑多种因素，包括事件类型、时间戳、用户信
  • EcmaScript和JavaScript的区别 每天吃八顿 前端ecmascript
    ECMAScript和JavaScript是经常被混淆的两个术语，但实际上它们之间存在一些区别：ECMAScript：ECMAScript（通常缩写为ES，并且有版本号如ES5,ES6和ES7等）是由ECMA国际（EuropeanComputerManufacturersAssociation）制定的一种脚本语言的规范。这个规范定义了语法、命令、数据类型等基本元素。ECMAScript是一种规范，
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • CesiumJS+SuperMap3D.js混用实现可视域分析 S3M图层加载 裁剪区域绘制 SteveJi666 WebGLcesiumEarthSDKSuperMap3djavascript前端arcgis
    版本简介：cesium：1.99；Supermap3D：SuperMapiClientJavaScript11i(2023)；官方下载文档链家：SuperMap技术资源中心|为您提供全面的在线技术服务示例参考：support.supermap.com.cn:8090/webgl/Cesium/examples/webgl/examples.html#analysissupport.supermap
  • html打开本地excel文件夹,html使用excel表格数据库-html读取本地excel文件并展示 睿理
    html表格如何导入到excel中在vs里面用添加数据源就可以啊,再使用数据控件,就可以操作.添加数据源可以用odbc数据源,两种方式1,是在控制面板的管理工具里在ODBC里先设置好.2,是使用连接字符串.用vs的添加数据源向导做.html中有没有类似excel表格，可以填数的表格控件？首先html不能读取本地excel文件其次就算是javascript也是不允许的这是为了安全考虑如果前端脚本可以
  • 如何在 Python 中声明一个静态属性? 潮易 python开发语言
    在Python中，静态属性的定义和使用方式与JavaScript中的类似，主要是通过`@staticmethod`装饰器来实现。静态属性不需要实例化对象就可以访问，它们属于类本身。###如何声明一个静态属性：1.首先，需要在属性名前添加`@staticmethod`装饰器。2.接下来，定义一个普通方法，该方法的第一个参数通常为`cls`（用于表示类的引用）。###代码示例：```pythoncla
  • 数据格式：什么是JSON和XML isNotNullX jsonxml
    JSON和XML都是数据交换的一种格式，用于在不同的系统和应用程序之间传输和存储数据。本文将解释JSON和XML的基础内容，并探讨两者的不同。一·什么是JSON？1.JSON（JavaScriptObjectNotation）即JavaScript对象标记法：-JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。-JSON基于JavaScript的一个子集，但JSON是
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他