mocheng / dissecting-rxjs Goto Github PK

View Code? Open in Web Editor NEW

404.0 20.0 101.0 270 KB

《深入浅出RxJS》代码库

License: MIT License

JavaScript 86.38% HTML 13.00% CSS 0.62%

dissecting-rxjs's Introduction

《深入浅出RxJS》已经由机械工业出版社发行，这个repo存放的是书中所有的代码。

配合响应式编程（包括React和RxJS)的探讨，作者会在知乎专栏《进击的React》中持续更新，欢迎关注。

任何技术问题可以通过知乎私信或者值乎咨询，有问必答。

执行repo里的code，首先运行npm install安装对应依赖包，然后利用npx来执行对应的JavaScript文件，例如:

npx babel-node chapter-01/declarative/addOne.js

部分代码在浏览器中执行，用浏览器打开对应HTML文件即可。

dissecting-rxjs's People

Contributors

Stargazers

Watchers

Forkers

libertyalone psh686868 leeeeeem chenqian0824 xdnice aaronisme smith187647 lovepanda603 iecy liukx08 ragecoke1466 zhaoweilong bossion peterchen1997 biggress johowoo jkhhuse esmio xietao91 hzjanger kenmlee df1163 bigmeowcoding sawyerbutton jiaoguanwen 411805576 yumo-mt fengluhome qqaimh viktorwong wakegiser errylee bubblem ghrhomeebook dsize1 baodingfengyun boyce-yijian algobot76 panda-hjn ejayyoung 986982229 magicbing fenggaoyao shuangzhiling meatroll zhailb666 panshihuan zborwen kulry lisong996 peterlin0625 gxkai ocean95966 lethargic929 yves-zhou lllllliulei wukun666 kangjs7854 yynlove miki-long huyinglin laughsun0513 wqzwh crystal2030 owenhe0813 meow-fork liudi1991 huangskar ericxiaobo shuishiyuan relorder songchudong lijun0 chenxitaozhiyaoyao sundjly wuyuan2009123 mofelee smallflower 996666925 github50673488 coder-yuanqingwei king-dai-queen-wang ark-65 w-xuefeng cellinlab perdream luojiyin1987 maxboren kunoka redbayberry magicfold catzillaorz wenuanhappy sl-nancy gerryge skybluefly huanglotus chenuvi bujiangjiuzhang

dissecting-rxjs's Issues

关于 import ，但是node环境 commonjs 如何方便测试你的代码呢？

如题？
购买你的书没有看到怎么运行demo

代码又都是cmd，不会每一个代码都改成commonjs的方法吧，所以麻烦说明一下你是怎么行运，用webpack 搭一个环境，还是我没有看到书那里有说明

谢谢

第一章第一个rxjs示例有问题

https://github.com/mocheng/dissecting-rxjs/blob/master/chapter-01/rxjs/timingSenseTest.js#L5

这里使用了 withLatestFrom。

相比于 jQuery 的版本，这里有个 bug：

第一次，正常点击一次鼠标，得到结果
第二次，使用鼠标点击空白处，再将鼠标移动至按钮上松开，会错误计时。

combineAll执行的问题

consoleWithTime('now')
const ho$ = interval(1000).pipe(
  take(2),
  map((x, i) => interval(1500).pipe(
    map(y => `(${i}) ${x} : ${y}`),
    take(3)
  )),
  combineAll()
)

ho$.subscribe(consoleWithTime)

执行结果

13:07:28.004 now
13:07:31.525 [ '(0) 0 : 0', '(1) 1 : 0' ] // (2 + 1.5)s
13:07:33.030 [ '(0) 0 : 1', '(1) 1 : 0' ] //**
13:07:33.031 [ '(0) 0 : 1', '(1) 1 : 1' ] //**
13:07:34.532 [ '(0) 0 : 2', '(1) 1 : 1' ] //**
13:07:34.532 [ '(0) 0 : 2', '(1) 1 : 2' ] //**

时序图


                                         0:0   0:1         0:1   0:2         0:2
                                         1:0   1:0         1:1   1:1         1:2
                                          ^     ^           ^     ^           ^
                                          |     |           |     |           |
                                          |     |           |     |           |
                                          |     |           |     |           |
                                          |     |           |     |           |
                                          +     |           +     |           +
                        +-----------------0-----------------1-----------------2------------------->
                        X                       |                 |
                        X                       |                 |
                        X                       +                 +
            +-----------------0-----------------1-----------------2------------------------------->
            X           X
            X           X
            X           X
+----- -----0----- -----1----- -----2----- -----3----- -----4----- -----5----- -----6----- ------->

注意输出里, **的那几行是同时输出的, 说明combineAll只是将最终map出来的所有流进行了combineLatest, 本例中就相当于直接combineLatest了两个interval(1500)

对比combineLatest和merge, combineAll和mergeAll的结果是不符合预期的

如果希望能按照3.5s, 4s, 5s, 5.5s, 6.5s时输出, 应该如何做?

Cannot read property 'isStopped' of undefined

不是本书的问题, 但是想请教一下作者

const source$ = Observable.create(({ next }) => {
  next(1)
  next(2)
  next(3)
})

source$.subscribe(console.log)

// 会报错误: TypeError: Cannot read property 'isStopped' of undefined

const source$ = Observable.create((observer) => {
  observer.next(1)
  observer.next(2)
  observer.next(3)
})

source$.subscribe(console.log)
// 运行正常: 1 2 3

不知作者知道内部到底是什么原因吗

breakout 示例球拍左右移动过程中有明显卡顿，是哪里处理的有问题还是rxjs性能问题呢

是不是用箭头函数表示更简洁，更函数式一些？

function addOne(arr) {
  return arr.map(item => item + 1);
}

const addOne = arr => arr.map(item => item + 1)

~~借助 ramda~~

const addOne = R.map(R.inc)

maybe an error in Chapter 6 about ‘isEmpty’

isEmpty第一段示例代码，不是应该在吐出第一条数据的时候吐出false吗？书上写的true

const source$ = interval(10000);

const isEmpty$ = source$.pipe(
isEmpty()
);
isEmpty$
.subscribe(
console.log,
() => {
console.log('error');
},
() => {
console.log('complete');
}
);

// 10秒后
// false
// complete

感谢第一章的例子

感谢第一章的例子
让我重新想起来 <meta charset="utf-8">
被IDE养懒了，看到乱码一时竟忘记怎么设置 utf-8

笔误

PAGE37:
第二行
const cold$=
应该是
const hot$=

[bug] P279 async asap queue 例子输出错误

书上给的输出和说明一看就不一致了。

before schedule
queue
after schedule
async
asap

又因为 asap 使用的是 Micro Task，所以它的任务会抢在 async 之前完成。

Some typos in book

书中第二章，第37页例子

const producer = new �Producer()
const cold$ = new Observable(observer => {...})

这里应该为 hot$, 因为数据的产生与observable 是独立的。

第39页代码例子第3行

mapped subscribe(console.log)

缺一个点

48页第21行

上面代码导入的模块是node_modules/rxjs/add/observable/of.js, 其中的代码是再Observable的prototype属性上增加一个函数，

of 应该是静态操作符，应该是在Observable上添加of 方法，而不是prototype上。

184页顶部关于第一个参数与第二个参数的问题，“如果使用了第二个参数，那么第一个参数依然是时间区间的长度，但是每间隔第二个参数startWindowEvery的毫秒数，就会新开一个时间区间。”该描述与文档有出入，此方法两个参数与时间无关，与数量有关。
文档：
https://rxjs-dev.firebaseapp.com/api/operators/windowCount
https://cn.rx.js.org/class/es6/Observable.js~Observable.html#instance-method-windowCount

217页retry例子的描述

"还是利用throwOnUnlucky"来产生错误，retry的参数是3……第二次失败之后……"，按理解来看retry的参数是2，"第二次失败之后"应该为"第二次重试失败之后"，第二次失败之后会进行第二次重试，第三次失败之后会传递至catch

阅读中碰到的一些错误

p26

while(iterator.isDone()) -> while(!iterator.isDone())

p30
显示调用 -> 显式调用

第四章 defer操作符解释有误吧

ajax创建的Observable实例本来就只在订阅时才发请求，
这个说明有问题，
官方例子更准确