30 天精通 RxJS 笔记3

最新推荐文章于 2022-04-29 14:55:05 发布

何去何从2857

最新推荐文章于 2022-04-29 14:55:05 发布

阅读量140

点赞数

分类专栏： Angular 文章标签： RxJS

本文链接：https://blog.csdn.net/hequhecong10857/article/details/110285087

版权

Angular 专栏收录该内容

20 篇文章 2 订阅

订阅专栏

文章目录

Observable Operators & Marble Diagrams
简易拖拉实作- take, first, takeUntil, concatAll
- Operators
- 简易拖拉

Observable Operators & Marble Diagrams

什么是 Operator？

Operators 就是一个个被附加到 Observable 上的函数，例如像是 map, filter, … 等等

Marble diagrams（弹珠图）

rxmarbles
在这里插入图片描述

Operators

map
与数组的map方法功能一样，起到映射的作用

const { interval } = rxjs;
const { map, mapTo, filter } = rxjs.operators;
var source = interval(1000);
var newest = source.pipe(map(x => x + 2))
newest.subscribe(console.log);

2
3
4
...

mapTo
可以把传进来的值改成一个固定的值

const { interval } = rxjs;
const { map, mapTo, filter } = rxjs.operators;
var source = interval(1000);
var newest = source.pipe(mapTo(2))
newest.subscribe(console.log);

2
2
2
...

filter
过滤出符合条件的结果

const { interval } = rxjs;
const { map, mapTo, filter } = rxjs.operators;
var source = interval(1000);
var newest = source.pipe(filter(x => x % 2 === 0))
newest.subscribe(console.log);

0
2
4
6
...

简易拖拉实作- take, first, takeUntil, concatAll

Operators

take：取前几个元素后就结束

var source = interval(1000);
var example = source.pipe(take(3));
example.subscribe({
  next: (value) => {
    console.log(value);
  },
  error: (err) => {
    console.log('Error: ' + err);
  },
  complete: () => {
    console.log('complete');
  }
});

0
1
2

first：第1 个元素之后就直接结束，行为跟take(1) 一致。

var source = interval(1000);
var example = source.pipe(first());
example.subscribe({
  next: (value) => {
    console.log(value);
  },
  error: (err) => {
    console.log('Error: ' + err);
  },
  complete: () => {
    console.log('complete');
  }
});
// 0
// complete

takeUntil：在某件事情发生时，让一个observable 直送出完成(complete)讯息

var source = interval(1000);
var click = fromEvent(document, 'click');
var example = source.pipe(takeUntil(click));
example.subscribe({
  next: (value) => {
    console.log(value);
  },
  error: (err) => {
    console.log('Error: ' + err);
  },
  complete: () => {
    console.log('complete');
  }
});
// 0
// 1
// 2
// 3
// complete (點擊body了

concatAll：摊平成一维阵列

var obs1 = interval(1000).pipe(take(5));
var obs2 = interval(500).pipe(take(2));
var obs3 = interval(2000).pipe(take(1));

var source = of(obs1, obs2, obs3);
var example = source.pipe(concatAll());

example.subscribe({
  next: (value) => {
    console.log(value);
  },
  error: (err) => {
    console.log('Error: ' + err);
  },
  complete: () => {
    console.log('complete');
  }
});
// 0
// 1
// 2
// 3
// 4
// 0
// 1
// 0
// complete

concatAll的行为永远都是先处理第一个observable，等到当前处理的结束后才会再处理下一个。

简易拖拉

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/rxjs/6.6.3/rxjs.umd.js"></script>
  <style>
    html,
    body {
      height: 100%;
      background-color: tomato;
      position: relative;
    }

    #drag {
      position: absolute;
      display: inline-block;
      width: 100px;
      height: 100px;
      background-color: #fff;
      cursor: all-scroll;
    }
  </style>
</head>

<body>
  <div id="drag"></div>
  <script>
    const {
      fromEvent
    } = rxjs;
    const {
      takeUntil,
      concatAll,
      map,
    } = rxjs.operators;

    const dragDOM = document.getElementById('drag');
    const body = document.body;

    const mouseDown = fromEvent(dragDOM, 'mousedown');
    const mouseUp = fromEvent(body, 'mouseup');
    const mouseMove = fromEvent(body, 'mousemove');

    mouseDown
      .pipe(
        // 当mouseDown 时，转成mouseMove 的事件
        map(event => mouseMove.pipe(takeUntil(mouseUp))),
        concatAll(),
        map(event => ({
          x: event.clientX,
          y: event.clientY
        }))
      )
      .subscribe(pos => {
        dragDOM.style.left = pos.x + 'px';
        dragDOM.style.top = pos.y + 'px';
      })
  </script>
</body>

</html>

何去何从2857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
30 天精通 RxJS 笔记3

文章目录Observable Operators & Marble Diagrams什麼是 Operator？Marble diagrams（弹珠图）Operators简易拖拉实作- take, first, takeUntil, concatAllOperators简易拖拉Observable Operators & Marble Diagrams什麼是 Operator？Operators 就是一個個被附加到 Observable 上的函数，例如像是 map, filter, …
复制链接

扫一扫

专栏目录