×

Loading...
Ad by
  • 最优利率和cashback可以申请特批,好信用好收入offer更好。请点链接扫码加微信咨询,Scotiabank -- Nick Zhang 6478812600。
Ad by
  • 最优利率和cashback可以申请特批,好信用好收入offer更好。请点链接扫码加微信咨询,Scotiabank -- Nick Zhang 6478812600。

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

本文发表在 rolia.net 枫下论坛此文非常简单,就是为了帮助初学者理解一个基本概念,帮助初学者从零建立一个测试环境,
一旦理解了这个概念,后面就是自己查网站资料学习一些如何用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
Sign in and Reply Report

Replies, comments and Discussions:

  • 工作学习 / 学科技术 / 学了学RxJs,写一点学习笔记,对初学者或许有一点帮助 +2
    本文发表在 rolia.net 枫下论坛此文非常简单,就是为了帮助初学者理解一个基本概念,帮助初学者从零建立一个测试环境,
    一旦理解了这个概念,后面就是自己查网站资料学习一些如何用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
    • 这个要顶,希望lz继续分享
    • 用typescript和javascript是不是一样的?typescript有什么好处?
      • 语法书写上不一样,ts的代码是要被微软的编译器编译成js代码在浏览器中运行,browser不认识ts代码。ts更接近c#,java这样的语言,所以俺作为c#老司机一接触typescript便深深地被吸引,以前觉得web前端编程是世界上最无聊的工作之一,现在用typescript觉得很舒服
        • ts编辑成js,能选择版本吗,比如ES5或者ES6之类的吗?
          • 可以的,就拿我举的例子来说,右键点击project => 选择properties => Typescript Build => General => ECMAScript version 选择ES6,5,3
        • 这么说来是学习GWT的思路了。GWT更彻底,直接用java写,GWT帮你编译成javascript。VAADIN更是让你用Java写code,不用预先编译,运行时VAADIN帮你生成前台Javascript。微软落后好几年了。
          • cool,不过这俩我没听说过,可能不是web这行的。不过既然gwt等这么有名,为啥google的angular team不用它们重新写angular2呢?angular2 完全是typescript写成的,所以我猜typescript还是比它的竞争对手有更强的地方,
            • 最近新玩意学得少了, Angular1和2都没有玩过。我并不是比较GWT和typescript谁强大,这问题就像比较Java和c#谁强大一样,没有答案。我仅仅是说typescript借鉴了GWT的思路,而GWT更彻底,让你直接用Java写前端。微软应该让人直接用c#写前端,这样更好。
          • 现在几乎所有的前端语言都是编译成JS,比如dart, clojureJS, ScalaJS和ELM。两个因素 interoperability 和 paradigm,决定它们的成败。
            java 很难直接调用JS的库,反过来也一样;JS 语法上直接支持functional programming,Java憋了多年才挤出个lambda。所以大浪淘沙,GWT现在基本上没人用了。
            • 这个不是直接调用JS的事。无论GWT,
              还是typescript都是让你用另一种语言写code,编译器帮你生成javascript。我很长时间没换工作了,不知道现在市场如何,我们公司6,7年前就开始用GWT了。在我印象中,GWT是第一个把其他语言转换成javascript的成功框架。所以我说typescript借鉴了GWT的思路。这个说法和现在的市场占有率无关。
              • 这个说法很对,然而typescript并不是compile,最多算transpile. dart 最接近你的比喻。其它几个都是借助了google的js库。
      • typescript是javascript超集,可以直接在typescript里写javascript,现有的javascript代码基本都可以直接用
      • 我感觉javascripe这一块还没完全成熟起来,各种框架新思路还在互相奋力拼杀。
      • 使用和编译typescript,是不是一定要用微软的vs?哪个版本的vs比较好?
        • 目前应该是这样,不过即使是vs也是用一个叫tsc的command命令来做的,你可以用notepad.exe编辑一个typescript文件,然后用tsc编译成js
        • 用vs2015的好处是ts代码可以设置断点,调试非常方便,随时观看断点处的变量状态
    • 有没有TS写的代码,JS实现不了的(不能转换为JS)?
      • 这个不可能,当初就是这么设计的
    • 赞自觉自学精神!
    • 有空可以看看BuckleScript,楼上已经有人提了 NLM。而且看了ES6,那就上手写 React + ES6 + Webpack 走起。 +1
    • 然而例子举错了,要emit数组元素的RxJs写法是 var source = Rx.Observable.of(1,2,3,4,5,6,7), 不建议在create里面用for loop. +2