文档章节

RxJS的另外四种实现方式(二)——代码最小的库(续)

一个灰
 一个灰
发布于 09/16 15:32
字数 772
阅读 25
收藏 0

接上篇 RxJS的另外四种实现方式(一)——代码最小的库

上篇我们展示了生产者interval和操作符filter的实现,接下来我们看一下消费者subscriber的实现

callbag的实现

const subscribe = (listener = {}) => source => {
  if (typeof listener === "function") {
    listener = { next: listener };
  }

  let { next, error, complete } = listener;
  let talkback;

  source(0, (t, d) => {
    if (t === 0) {
      talkback = d;
    }
    if (t === 1 && next) next(d);
    if (t === 1 || t === 0) talkback(1);  // Pull
    if (t === 2 && !d && complete) complete();
    if (t === 2 && !!d && error) error( d );
  });

  const dispose = () => {
    if (talkback) talkback(2);
  }

  return dispose;
}

module.exports = subscribe;

最小库的实现

exports.subscribe = (n, e, c) => source => source(n, err => err ? e && e(err) : c && c())

我们可以看到,如果让读者自行扩展其他操作符或者生产者都是十分容易的。相反如果要写出正确的callbag的话,就十分考验技术了。

大家可以自行验证两个库的运行情况是否正确:

//pipe语法
interval(1000) |> filter(x => x > 4) |> subscribe(console.log)
//使用pipe函数代替
pipe(interval(1000),filter(x => x > 4) ,subscribe(console.log))

最后再展示一个skip操作符的实现源码

exports.skip = count => source => (n, c) => {
    let _count = count;
    let _n = () => (--_count === 0 && (_n = n));
    return source(d => _n(d), c)
}

最小库实现技术手段

与callbag相似,最小库使用高阶函数来代替传统的observable、observer等对象,所以不需要核心库(基类)。传统方式在创建observable的时候传入observer对象,作为代替方案,是向observable高阶函数传入next和complete回调函数作为订阅行为。next和complete回调函数合起来可以看成是observer对象。而observer分成了next和complete回调函数的好处是,可以进行分开传递,有时候就可以直接透传,如上文的skip函数中的complete回调函数c,直接透传到源observable里面。订阅行为即调用observable函数返回值被利用来作为dispose行为,很多时候就会隐含的进行传递如上面的skip操作符。js的许多语法可以使得代码更加短小精悍,例如:

  • 箭头函数为表达式的时候,无需写大括号,以及return
  • js的逗号表达式,可以返回表达式最后一个逗号后面的值
  • js的逻辑运算符&&、||可以用来代替if语句等
  • js的函数变量可以替换成新的函数,使得行为发生变化

当然这个库最核心的就是函数闭包,本质上来说,定义函数就相当于定义了一个类,闭包里面的变量都是这个函数调用后的伪对象的属性,这导致了,虽然代码已经极端短小,但性能却不是最高的原因。下一篇我将介绍最高性能的库的实现方法。

(未完待续)

© 著作权归作者所有

共有 人打赏支持
一个灰
粉丝 25
博文 30
码字总数 18816
作品 3
南京
高级程序员
私信 提问
RxJS的另外四种实现方式(序)

本文适合人群:了解Rx编程人士、发烧友 - 本文涉及概念:响应型编程、NodeJs、函数式编程 背景 本人自从读过一篇来自Info的《函数式反应型编程(FRP) —— 实时互动应用开发的新思路》后便迷恋...

一个灰
09/15
0
2
RxJS的另外四种实现方式(后记)—— 同时实现管道和链式编程

目录 RxJS的另外四种实现方式(序) RxJS的另外四种实现方式(一)——代码最小的库 RxJS的另外四种实现方式(二)——代码最小的库(续) RxJS的另外四种实现方式(三)——性能最高的库 Rx...

一个灰
09/24
0
0
RxJS的另外四种实现方式(三)——性能最高的库

接上篇 RxJS的另外四种实现方式(二)——代码最小的库(续) 代码最小的库虽然在性能测试中超过了callbag,但和most库较量的时候却落败了,于是我下载了most库,要解开most库性能高的原因。...

一个灰
09/18
0
0
[译] 使用响应式编程来实现简易版的无限滚动加载

原文链接: hackernoon.com/naive-infin… 本文为 RxJS 中文社区 翻译文章,如需转载,请注明出处,谢谢合作! 如果你也想和我们一起,翻译更多优质的 RxJS 文章以奉献给大家,请点击【这里】...

SangKa
03/07
0
0
高手问答第 200 期 — 兼具函数式和响应式编程的 RxJS,了解一下?

OSCHINA 本期高手问答(2018 年 6 月 5 日 — 6 月 11 日)我们邀请到了程墨老师@程墨Morgan 和大家一起讨论关于 RxJS 的问题。 程墨,资深架构师,曾任职于摩托罗拉、雅虎和微软,云鸟配送平台...

局长
06/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是自然语言处理技术

自然语言处理(NLP)是计算机科学,人工智能,语言学关注计算机和人类(自然)语言之间的相互作用的领域。自然语言处理是计算机科学领域与人工智能领域中的一个重要方向。它研究能实现人与计...

本宫没空2
23分钟前
2
0
移动端关闭虚拟键盘

那么document.activeElement.blur()为什么可以阻止虚拟键盘弹出呢?原因是:当你点击input的时候,document.activeElement获得了DOM中被聚焦的元素,也就是你点击的input,而调用.blur()方法...

niuhongxia
24分钟前
3
0
Ubuntu18.04安装RabbitMQ(正确安装)

1、安装erlang 由于rabbitMq需要erlang语言的支持,在安装rabbitMq之前需要安装erlang sudo apt-get install erlang-nox 2、安装Rabbitmq 更新源 sudo apt-get update 安装 sudo apt-get ins...

hansonwong
33分钟前
2
0
如何在以太坊开发发行自己的ERC-20数字货币

今天我将向你展示如何在以太坊区块链上开发你自己的加密货币并将其出售!我将向你展示如何使用以太坊智能合约逐步创建自己的ERC-20代币和众筹销售,如何测试智能合约,如何将智能合约部署到以...

geek12345
34分钟前
3
0
Vlock用于有多个用户访问控制台的共享 Linux 系统

当你在共享的系统上工作时,你可能不希望其他用户偷窥你的控制台中看你在做什么。如果是这样,我知道有个简单的技巧来锁定自己的会话,同时仍然允许其他用户在其他虚拟控制台上使用该系统。 ...

linuxprobe16
34分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部