×

Loading...

学了学RxJs,写一点学习笔记,对初学者或许有一点帮助

binghongcha76 (一只大猫)
本文发表在 rolia.net/zh 相约加拿大网上社区枫下论坛
此文非常简单,就是为了帮助初学者理解一个基本概念,帮助初学者从零建立一个测试环境,
一旦理解了这个概念,后面就是自己查网站资料学习一些如何用api的活,但是如果基本概念理解不好,很难用好

RxJs 全称 ReactiveJs,是为了把异步编程简单化而写的一个框架:

下面我们开始建立一个能运行hello world的测试环境:

2016年以后的web前端开发,建议用typescript,方便、高效,语法检查,面向对象,函数式编程,好处说不完;
打开vs 2015 update 3,建立一个HTML applicatipon with TypeScript:

1) 删掉app.ts里的所有内容,
2) 导入RxJs => 右键点击project => Mangage Nuget Packages... => 选择Browse, 输入RxJs-All => Click Install
3) vs2015会把所有的RxJs框架代码全都下载到一个Scripts folder中,一般用不到所有这些,而且这会导致编译冲突错误
4) 仅仅保留 rx.all.d.ts 和 rs.all.js 两个文件,其他的全部exculde from project
5) 试着编译一下,确保没有错误
6) 需要在我们的typescript代码中reference RxJs的typescript类, 在app.ts中输入以下代码:
/// <reference path="scripts/rx.all.d.ts" />
7) 为了让浏览器的javascript引擎理解的RxJs代码,在index.html中的<head></head>输入
<script src="Scripts/rx.all.js"></script>
因为typescript最终要被编译成js代码运行,这一步是必须的

下面开始在app.ts中写一个RxJs based 程序,输入以下代码:
let marks: number[] = [1, 2, 3, 4, 5, 6]; // 建立一个number array
let markStream = Rx.Observable.create(observer => {
for (let n of marks)
observer.onNext(n);

observer.onCompleted();
});

markStream.subscribe(s => alert(s));

这段代码要表达的意思很简单: 设定一个number数组,把这段数组变成一个Observable的对象,一旦这个Observable的对象有人试图订阅(subscribe),就把这个数组发送给订阅者

如果按F5运行,可以看到1,2,3,4,5,6依次被alert pop up出来

我写的这些就是翻译msdn的东西,回想起我刚学那会,读完这段话和没读没啥区别,完全懵逼,那么我把这段代码分解一下,或许初学者能马上理解
我用c#伪代码示范一下Rx.Observable.create, subscribe运行的时候是个什么样子:

class Observable
{
private Action<IObserver> defaultObserver;
public Observable(Action<IObserver> observer)
{
this.defaultObserver = observer;
}

public void subscribe(IObserver observer)
{
if(this.defaultObserver != null)
this.defaultObserver(observer);
}

public void subscribe(Action<object> onNext)
{
DefaultObserver = new DefaultObserver(onNext);
if(this.defaultObserver != null)
this.defaultObserver(DefaultObserver);
}

public static void create(Action<IObserver> observer)
{
return new Observable(observer)
}
}

这段伪代码是我根据Rx的运行结果推断出来的,目的是更好的让初学者理解Rx的基本运行原理,实际上msdn啰嗦一大堆,看的人晕头转向,
其实只要大概列一些后台运行伪代码,很多程序员就能很快明白是怎么回事

闲来无事,纯粹抛砖引玉
更多精彩文章及讨论,请光临枫下论坛. 网址: rolia.net/zh
(#10608220@0)
2017-2-13 -05:00
Reply
Page address has been copied.
To share, click to copy page address.
Share Online by QR Code

Back To Topic: 学了学RxJs,写一点学习笔记,对初学者或许有一点帮助

Back To Forum: HOME枫下论坛枫下论坛主坛工作学习学科技术