rxjs -- 响应式编程

最新推荐文章于 2024-06-18 09:38:26 发布

Justin0223

最新推荐文章于 2024-06-18 09:38:26 发布

阅读量1.2k

点赞数 1

分类专栏： AngularJs2 文章标签：响应式编程 rxjs

本文链接：https://blog.csdn.net/u010377383/article/details/76794398

版权

响应式编程

英文原文：In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic data flows with ease in the programming languages used, and that the underlying execution model will automatically propagate changes through the data flow

在计算领域，响应式编程一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

官方网址
http://reactivex.io/documentation/observable.html

与传统编程比较(入门)

这都说的什么啊？没关系，概念永远是抽象的，我们来举几个例子。比如说在传统的编程中 a=b+c，表示将表达式的结果赋给a，而之后改变b或c 的值不会影响a。但在响应式编程中，a的值会随着b或c的更新而更新。

var a,b=1,c=2;

a=b+c;
console.error('b='+b);
console.error('c='+c);
console.error('a='+a);
b=3;
c=2;
console.error('a='+a);
/** 结果
 *  b=1
   c=2
   a=3
   a=3
* */

那么用响应式编程方法写出来就是这个样子，可以看到随着b和c的变化a也会随之变化。

var Rx = require('rx');

let b$ =Rx.Observable.from([1,3]);
let c$ =Rx.Observable.from([2,2]);

let a$ = Rx.Observable.zip(b$,c$,(b,c)=>{
   console.error('b='+b);
   console.error('c='+c);
   return b+c;
});
a$.subscribe(a=>console.error('a='+a));
/**
* b=1
 c=2
 a=3
 b=3
 c=2
 a=5
* */

Rx的特点

看出来一些不一样的思维方式了吗？响应式编程需要描述数据流，而不是单个点的数据变量，我们需要把数据的每个变化汇聚成一个数据流。如果说传统编程方式是基于离散的点，那么响应式编程就是线。
上面的代码虽然很短，但体现出Rx的一些特点

Lamda表达式，对，就是那个看上去像箭头的东西 => 。你可以把它想象成一个数据流的指向，我们从箭头左方取得数据流，在右方做一系列处理后或者输出成另一个数据流或者做一些其他对于数据的操作。
操作符：这个例子中的 from, zip 都是操作符。Rx中有太多的操作符，从大类上讲分为：创建类操作符、变换类操作符、过滤类操作符、合并类操作符、错误处理类操作符、工具类操作符、条件型操作符、数学和聚集类操作符、连接型操作符等等。
Rx再体验

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>测试fromEvent</title>
</head>
<body>
<input id="inputText" type="text"/>
<script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>
<script>
   let inps = document.getElementById('inputText');
   let input$ = Rx.Observable.fromEvent(inps,'keyup');
   input$.subscribe(input => console.log(input.target.value))
</script>
</body>
</html>

这几行代码很简单：首先我们得到HTML中id为inputText的输入框对象，然后定义一个观察者对象将inputText这个输入框的keyup事件转换成一个数据流，最后订阅这个数据流并在console中输出我们接收到的input事件的值。我们从这个例子中可以观察到几个现象：

1.数据流：你每次在输入框中输入时都会有新的数据被推送过来。本例中，你会发现连续输入“1，2，3，4”，在console的输出是“1，12，123，1234”，也就是说每次keyup事件我们都得到了完整的输入框中的值。而且这个数据流是无限的，只要我们不停止订阅，它就会一直在那里待命。

2.我们观察的是todo上发生的keyup这个事件，那如果我一直按着某个键不放会怎么样呢？你的猜测是对的，一直按着的时候，数据流没有更新，直到你抬起按键为止（你看到截图里面有2条一模一样的含有多个5的数据是因为我用的Surface Pro截图时的快捷键也被截获了，但由于是控制键所以文字内容没有改变）

结果演示

如果观察的足够仔细的话，你会发现console中输出的值其实是 input.target.value，我们观察的对象其实是id为todo的这个对象上发生的keyup事件（Rx.Observable.fromEvent(todo, ‘keyup’)）。那么其实在订阅的代码段中的input其实是keyup事件才对。好，我们看看到底是什么，将 console.log(input.target.value) 改写成 console.log(input)，看看会怎样呢？是的，我们得到的确实是KeyboardEvent

console

4.1. filter（filter-map类似ES5数组新增API,不明白可以参照的ES5的更新。）

过滤出 keyCode=32 的事件，keyCode是Ascii码，那么这就是要把空格滤出来

let inps = document.getElementById('inputText');
let input$ = Rx.Observable.fromEvent(inps,'keyup');
input$
.filter(ev=>ev.keyCode===32)
.subscribe(input => console.log(input.target.value))

结果我们看到了，按123456789都没有反应，直到按了空格
console

4.2. map

你可

最低0.47元/天解锁文章

Justin0223

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
rxjs -- 响应式编程

1. 响应式编程英文原文：In computing, reactive programming is a programming paradigm oriented around data flows and the propagation of change. This means that it should be possible to express static or dynamic da
复制链接

扫一扫

专栏目录