rxjs开发文档

所需积分/C币:12 2018-01-25 15:22:20 2.32MB PDF

RxJS 是使用 Observables 的响应式编程的库,它使编写异步或基于回调的代码更容易。
combineall 5.9 combinelatest 5.10 Introduction RXJS-Chinese 自己学习时的一点心得’由于本人能力有限,所以疏漏和错误之处不可避免。初衷 是为了自己能够加深理解能够方便大家。如大家发现疏漏错误的地方请及时告知 以免误导他人。最后’我强烈建议大家有能力的最好能阅读英文官方原文并以此为 标准,而把译文当做参考。 学习该文档的基础知识链接: 阮老师的ES6入门教程ES6 TS中文文档 Type Script Rookie primer 本篇对应于官方的介绍篇·因英文介绍与 giftbook文件名冲突’所以改了一下 RxJs是一个通过使用可观察序列来构建异步和基于事件的程序的库。它提供了一个 核心类型 bservable丶卫星类型(大概是这些类型均围绕于○ bservable’也就是 Observable是根基,而这些是辅助类型) Observer丶 Schedulers丶 Subjects)和操 作符-衍生自一些数组方法,使得我们可以把异步事件以集合的方式进行处理 把RxS当做一个针对事件的 Lodash(一个s库) Reactive将观察者模式与迭代器模式和使用集合的函数式编程组合在一起’来满 足这种管理事件序列的理想方式 RxJs中解决异步事件管理的基本概念如下 Observable可观察对象:表示一个可调用的未来值或者事件的集合° Observer观察者:一个回调函数集合,它知道怎样去监听被○ bservable发送的 值 Subscription订阅:表示一个可观察对象的执行’主要用于取消执行 Operators操作符:纯粹的函数’使得以函数编程的方式处理集合比 oo: map, filter, contact, flatmap · Subject(主题)∶等同于一个事件驱动器,是将一个值或者事件广播到多个观察 者的唯一途径。 · Schedulers(调度者):用来控制并发’当计算发生的时候允许我们协调,比如 setTimeout, requestAnimation Frame 第一个例子 通常你这样注册事件监听 var button document. queryselector( button )i button. addEventListener(click,(=> console. log(clicked! )i 使用RXJS创建一个可观察对象 var button document. q ueryselector( button )i RX Observable. fromEvent(button , click) subscribe((=> console. log(clicked! ) Rookie primer Purity RxJX能够使用纯函数的方式生产值的能力使得它强大无比。这意味着你的代码不再 那么频繁的出现错误提示。 通常情况下你会创造一个非纯粹的函数,然后你的代码的其他部分可能搞乱你的程 序状态 var count=回 var button = document. queryselector( button )i button addEventListener (click,(=> console. log( clicked $f++ count times ) 使用RxS来隔离你的状态 var button document query selector( button )i RX Observable. fromEvent(button ,click) scan( count count + 1, 0) subscribe(count = console log( clicked sicount times ) scan操作符和数组申 reduce方法的类似,它需要一个传递给回调函数的参数值。 回调函数的返回值将成为下一次回调函数运行时要传递的下一个参数值 F|oW流 RκJs有着众多的操作符可以帮助您控制事件如何流入可观察对象 observables 每秒最多只能点击一次的实现·使用纯 Java Script: Rookie primer var count = 0: var rate 1000 var lastclick Date. nowo-rate var but ton = document. querySelector( button )i button. addEventListener(click(=>i if (Date. now ()-lastclick > rate)t console. log( clicked s++count times i lastclick= Date. now (; 使用RxJS var but ton =document. querySelector( button); RXObservable. fromEvent(button,'click) throttleTime (1000) scan(count count 1, 0) subscribe(count = console log( Clicked Scount times)) 其他的流操作符是fter, delay, debounce time,take, takeuntil, distinct, distinctunti| Changed等等。 Values值 你可以通过可观察对象来转化值 下面的程序可以在每次点击鼠标时获取X坐标位置 纯的JS实现 Rookie primer var count =0r var rate = 1000: var lastclick= Date. nowo- rate; var button =document. queryselector(button ) button addEventListener( click(event)=> i if (Date. now(-lastclick > rate)t console. log (++count event client) lastclick =Date. now ( i }); RXJS实现 var button document. queryselector(button) RX Observable. fromEvent(button,click) throttleTime(1000) map (event = event client) scan((count, clientx)=> count clientx, o) subscribe(count = console log(count)) 其他的值生产者还有 pluck, paIrwise, sample等等. Observable observable可观察对象 可观察对象以惰性的方式推送多值的集合 Single单值 Mujp|e多值 pu山拉豆 Function Iterator push推 Promise Observable 下面的例子是一个推送1,2·3,4数值的可观察对象’一旦它被订阅1,2·3,就会被推 送4则会在订阅发生一秒之后被推送,紧接着完成推送 var observable =RX Observable create(function (observer)t observer. next(1); observer. next(2); observer. next(3) setTimeout((=> t observer. next(4); observer. complete },1⊙00) }) 调用可观察对象然后得到它所推送的值’我们订阅它,如下 console.log( just before subscribe ) observable subscribe(i next: x=> console. log( got value error: err = console error( something wrong occurred:+err) complete:()=> console. log(done) ) console.log( just after subscribe ' )i 结果如下 Observable just before subscribe got value 1 got value 2 got value 3 just after subscribe got value 4 done Pu拉取 VS Push推送 拉和推是数据生产者和数据的消费者两种不同的交流协议(方式) 什么是"PⅧ∥拉"?在"拉"体系中,数据的消费者决定何时从数据生产者那里获取数 据,而生产者自身并不会意识到什么时候数据将会被发送给消费者。 每一个JS函数都是一个“拉”体系,函数是数据的生产者,调用函数的代码通过“拉 出”一个单一的返回值来消费该数据( return语句) ES6介绍了 iterator选代器和 Generator生成器—另一种“拉”体系,调用 iterator next()的代码是消费者’可从中拉取多个值。 producer Consumer pu|Pase(被动的一方)被请求的Acve(起主导的一方)决定何时请求 拉 时候产生数据 数据 pusnActive:按自己的节奏生产数据 Passive:对接收的数据做出反应(处 推 理接收到的数据) 什么是"Push推"?在推体系中,数据的生产者决定何时发送数据给消费者’消费者 不会在接收数据之前意识到它将要接收这个数据 Promise(承诺)是当今JS中最常见的Push推体系,一个 Promise(数据的生产者)发 送一^ resolved value(成功状态的佤)来注册一个回调(数据消费者)’但是不同于函 数的地方的是: Promise决定着何时数据才被推送至这个回调函数 RXJS引入了 Observables(可观察对象),一个全新的"推体系"。一个可观察对象是 个产生多值的生产者’并"推送给" Observer(观察者)。 Function∷只在调用时惰性的计算后同步地返回一个值 · Generator(生成器)}惰性计算’在迭代时同步的返回零到无限个值(如果有可能

...展开详情
试读 113P rxjs开发文档
img
budingmi

关注 私信 TA的资源

上传资源赚积分,得勋章
    最新推荐
    rxjs开发文档 12积分/C币 立即下载
    1/113
    rxjs开发文档第1页
    rxjs开发文档第2页
    rxjs开发文档第3页
    rxjs开发文档第4页
    rxjs开发文档第5页
    rxjs开发文档第6页
    rxjs开发文档第7页
    rxjs开发文档第8页
    rxjs开发文档第9页
    rxjs开发文档第10页
    rxjs开发文档第11页
    rxjs开发文档第12页
    rxjs开发文档第13页
    rxjs开发文档第14页
    rxjs开发文档第15页
    rxjs开发文档第16页
    rxjs开发文档第17页
    rxjs开发文档第18页
    rxjs开发文档第19页
    rxjs开发文档第20页

    试读已结束,剩余93页未读...

    12积分/C币 立即下载 >