关于 RxJS 的数据流

RxJS

在写 Android 的时候,RxJava 和 RxAndroid 几乎是每个项目的标配,同时,RxJava 也是 Rx 系列里 GitHub star 数最多的,可见 Rx 在 Java 领域的普及度很高,而 RxJava 的各种文章也真心多。而在前端领域,RxJS 就相对没那么流行了。

至于原因,一方面前端的各种框架 Vue 等等也可以做到类似的功能,有时候并没有必要再引入 RxJS,另一方面是 RxJS 上手有点难(当初入门 RxJava 的时候,扔物线大大的入门文章我反复看了好几遍。。。),还有就是我觉得吧,是 Java 本身的异步有点难用。。。

但毋庸置疑,RxJS 的数据流操作能力是相当强大且富有想象力的。

饿了么前端的 RxJS 入门文章

最近看了饿了么前端博客里的 RxJS 入门文章–让我们一起来学习 RxJS,文章写得还是很易懂的,里面用『画板』这个例子初步展示了 RxJS 的强大数据流操作能力。

说 Rx 就必然要说 Rx 里五花八门的操作符(operator)了。『画板』这个例子里面主要用到了mapswitchMapswitchMapTobufferCount这几个操作符。饿了么这篇文章并没有具体介绍这几个操作符,我就看着文档,敲着 demo,试图理解并区分这几个操作符,真的会晕。。。

  • map

    map操作符是比较常用的,用于映射数据,说白了就是对数据做操作与转换。比如把源数据1, 2, 3通过map((data) => (data * 10))转换为10, 20, 30

  • switchMap

    switchMap用于改变 Observable,应该是等同于map+switch

  • switchMapTo

    switchMapTo类似于switchMap,区别在于switchMapTo不接收参数,也就是说,它不可以对上游数据进行操作,仅仅只是改变数据流的 Observable;而switchMap接收参数,可以对上游数据进行操作,并据此发出相应的 Observable

  • bufferCount

    用于将数据按照参数的设置集合在一起。在旧版本的 RxJS 中,并没有bufferCount这个操作符,但是有bufferWithCount,作用是一样的。bufferCount可接收两个参数,第一个参数是数据集合的大小,第二个参数是跳过的数据的数量。第二个参数是可选的。举个栗子:设源数据是1, 2, 3,经过bufferCount(2, 1)之后,得到的数据就是[1, 2], [2, 3]

阅读更多

水波纹效果的前端实现

前言

在学 Android 开发的时候,一直很喜欢 Material Design,经常翻看官方的指南。其中有个很出众的 UI 效果 – 水波纹。Android 开发者对这个效果应当是不陌生的,可以说这是 Material Design 的一大特性了吧。

个人觉得这个设计的动效还是很赞的,于是就想在前端简陋地实现一下。

阅读更多

初试 BottomNavigationView

前言

最近,Android Support Library 更新到 25.0.0,其中就包括了 BottomNavigationView,也就是底部导航栏。其实在这之前早就有了 Bottom navigation 的 Material design 规范,然而目前 25.0.0 这个版本实现的 BottomNavigationView 还是比较简陋的,跟 GitHub 上关于这个的其他实现(例如:BottomNavigationBottomBar)比起来,实现的功能还是少了点。如果要说 Google 官方的这个版本有什么优势的话,那就是它是官方的,手动滑稽…

阅读更多

SwipeRefreshLayout的圈圈无法显示的问题

onResume()这个函数在 Activity 变得可见时被调用,执行完onResume()之后,Activity 就会请求 AMS 渲染它所管理的视图。

这是《从小工到专家》书上的说法,也没错。

最近在使用SwipeRefreshLayout时,想在 Activity 一可见时就调用setRefreshing(true),达到自动刷新的效果,以期能有更好的用户体验,这也是大多 App 所采取的做法。于是乎,我就在onResume()中调用了mRefreshLay.setRefreshing(true),按道理应该是没什么问题的,我就开心地边等编译边玩手机。

阅读更多

仿支付宝的刷新View--SmilingFaceView

前言

最近我在学习自定义 View,碰巧遇上支付宝 App 大更新,UI 改了很多,其中的「生活」Tab 有一个下拉刷新的 View,如图:

Alipay

支付宝这个效果乍看之下,觉得不算复杂,按我自己目前的渣渣能力应该还是可以实现的吧,之后就着手开搞了。由于对自定义 View 还不够熟练,模仿实现的过程还是有点头疼的,幸好实现的效果还不错啦。

阅读更多