最近一直在研究响应式编程,读到一篇文章响应式编程（Reactive Programming）介绍,由极客学院翻译的,非常感谢极客学院!
英文原文The introduction to Reactive Programming you've been missing.
文章较长,仔细研究了这篇文章,提炼一些东西和总结一下自己的实践与理解.
1.思维转变:一切皆对象=>一切皆流
我理解的流:一段时间内的不同状态.
字符串、数字、事件、请求等等,一切都是可以转化成流
from、of等方法创建的流,也是一个流,只是这个流中只有一种状态,
2.流也有不同
1:发射完数据更新自动关闭：from, fromPromise, of, range
2:保持发射数据且不自动关闭：timer, interval, fromEvent
3:需要手动发射数据且不自动关闭：create
4:不发射直接关闭：empty
5:抛出异常后关闭：throw
6:不发射数据也不关闭：never
不关闭的流就需要手动执行unsubscribe,有一些框架已经帮你自动关闭了一些流,比如Angular中AsyncPipe在组件销毁的时候会自动取消订阅,参考:Angular 中何时取消订阅
此处有疑问,还请高手指教:在Angular中怎么从源码中找出此处需要手动执行unsubscribe还是自动?是看源码中有在ngOndestory的时候是否执行了unsubscribe吗? 不甚感激!
3.设计流的时候也可以反向推理,从最终获取的数据往前一步,正反向结合
比如文章中
suggestion1Stream=>responseStream=>requestStream
4.尝试画rxjs数据流向图,来整理设计流;看懂rxjs交互图
比如
refreshClickStream: ----------o---------o---->
requestStream: -r--------r---------r---->
responseStream: ----R----------R------R-->
suggestion1Stream: -N--s-----N----s----N-s-->
suggestion2Stream: -N--q-----N----q----N-q-->
suggestion3Stream: -N--t-----N----t----N-t-->
source1: ————————①——————————②——————————③————————————④—————————⑤——————————|——>
source2: ———————————ⓐ————————ⓑ————————————ⓒ—————————————————————ⓓ—————————|——>
combineLastest(source1, source2, (x, y) => x + y)
source: ———————(①ⓐ)—(②ⓐ)—(②ⓑ)—————(③ⓑ)—(③ⓒ)———(④ⓒ)————(⑤ⓒ)—(⑤ⓓ)——|——>
5.文章案例实践及分析
1)初始化页面和点击刷新获取数据
var refreshButton = document.querySelector('.refresh');
var closeButton1 = document.querySelector('.close1');
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
var requestStream = refreshClickStream.startWith('fff')
.map(function() {
var randomOffset = Math.floor(Math.random() * 500);
console.log(11)
return 'https://api.github.com/users?since=' + randomOffset;
})
var responseStream = requestStream.flatMap(function(requestUrl) {
console.log(requestUrl)
return Rx.Observable.fromPromise($.getJSON(requestUrl));
})
responseStream.subscribe(function (response) {
console.log(response)
})
responseStream订阅的时候,数据来源于requestStream,requestStream执行操作符startWith('fff'),即requestStream中发射了一次数据,数据再经过map(获取请求地址)=>flatmap(获取到请求的数据).
注意:文中首先把startWith放在map操作符后,这是两种不同的数据流了
后者初始化页面时时,requestStream来自于点击刷新流,此时未点击,因为map无数据,所以startWith加在map后面时,需要的参数是请求的地址,以用来执行flatMap
2)渲染第一行数据
var refreshButton = document.querySelector('.refresh');
var closeButton1 = document.querySelector('.close1');
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
var requestStream = refreshClickStream.startWith('fff').map(function() {
var randomOffset = Math.floor(Math.random() * 500);
console.log(11)
return 'https://api.github.com/users?since=' + randomOffset;
})
var responseStream = requestStream.flatMap(function(requestUrl) {
console.log(requestUrl)
return Rx.Observable.fromPromise($.getJSON(requestUrl));
})
var suggestion1Stream = responseStream.map(function(listUsers) {
return listUsers[Math.floor(Math.random() * listUsers.length)];
}).merge(refreshClickStream.map(function(event) {
console.log(event) // click的event
return null;
}))
suggestion1Stream.subscribe(function(aa) {
console.log(aa) // output:首先null,请求到数据后=response
})
反向推数据流:
suggestion1Stream=>responseStream=>requestStream=>refreshClickStream
merge操作符,使suggestion1Stream数据来源于2个,点击的时候首先merge refreshClickStream,返回是空,所以立即清空数据,待请求成功后获取到数据再赋值成功.
3)更换本行推荐
var refreshButton = document.querySelector('.refresh');
var closeButton1 = document.querySelector('.close1');
var refreshClickStream = Rx.Observable.fromEvent(refreshButton, 'click');
var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click');
var requestStream = refreshClickStream.startWith('fff')
.map(function() {
var randomOffset = Math.floor(Math.random() * 500);
console.log(11)
return 'https://api.github.com/users?since=' + randomOffset;
})
var responseStream = requestStream.flatMap(function(requestUrl) {
console.log(requestUrl)
return Rx.Observable.fromPromise($.getJSON(requestUrl));
})
suggestion1Stream = close1ClickStream.combineLatest(responseStream, function(event, listUsers) {
console.log(event)
return listUsers[Math.floor(Math.random() * listUsers.length)];
}).merge(refreshClickStream.map(function() {
return null;
})).startWith('null')
suggestion1Stream.subscribe(function(data) {
console.log(data)
})
通过combineLatest,返回组合值,但此时responseStream的状态无变化,close1ClickStream状态变化,返回的其实就是responseStream,相当于调用了缓存的数据.
如有错误,欢迎指正!
