从链式调用到管道组合

最新推荐文章于 2022-10-11 20:26:38 发布
最新推荐文章于 2022-10-11 20:26:38 发布
阅读量178 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5c9d87aee51d453f2a25e079
版权

写在前面的

在开始正文之前我想谈些与此文相关性很低的话题。对这部分不感兴趣的读者可直接跳过。

在我发表上一篇文章或许我们在 JavaScript 中不需要 this 和 class之后，看到一种评论比较有代表性。此评论认为我们应该以 MDN 文档为指南。MDN 推荐的写法，应当是无需质疑的写法。

我不这么看。

MDN 文档不是用来学习的，它是你在不确定某个具体语法时的参考指南。它是 JavaScript 使用说明书。说明书一般都不带主观思辨，它无法提供指引。就比如你光是把市面上的所有调味料买来，看它们的说明书，你还是学不会怎么做菜的……

很碰巧我看的比较多的一些 JS 教程，都比较主观，与 MDN 有很多偏差。比如 Kyle Simpson 认为 JS 里面根本没有继承，提供 new 操作符以及 class 语法糖是在误导开发者。JS 原型链的正确用法应该是代理而不是继承。（我同意他）

更明显的例子是 Douglas Crockford，他认为 JS 中处理异步编程的主流方案—— callback hell, promise, async/await 全都错了。你在看他的论述之前有十足把握断定他在胡说吗？他在 How JavaScript Works 里面论述了他对事件编程(Eventual Programming)的看法，并写了个完整的库，提供他的解决方案。

批判和辩证地看问题，我们才能进步。

引言

我之前有两篇文章写过 JS 里面惰性求值的实现，但都是浅尝辄止，没有过横向扩展的打算。相关工作已经有人做了(如 lazy.js)，我再做意义就不大了。这周在 GitHub 上看到有人写了个类似的库，用原生 Generator/Iterator 实现，人气还很高。我一看还是有人在写，我也试试吧。然后我就用 Douglas Crockford 倡导的一种编程风格去写这个库，想验证下这种写法是否可行。

Crockford 倡导的写法是，不用 this 和原型链，不用 ES6 Generator/Iterator，不用箭头函数…… 数据封装则用工厂函数来实现。

Douglas Functions

首先，如果不用 ES6 Generator 的话，我们得自己实现一个 Generator，这个比较简单：

function getGeneratorFromList(list) {
  let index = 0;
  return function next() {
    if (index < list.length) {
      const result = list[index];
      index += 1;
      return result;
    }
  };
}

// 例子：
const next = getGeneratorFromList([1, 2, 3]);
next(); // 1
next(); // 2
next(); // 3
next(); // undefined
复制代码

ES6 给数组提供了 [Symbol.Iterator] 属性，给数据赋予了行为，很方便我们进行惰性求值操作。而抛弃了 ES6 提供的这个便利之后，我们就只有手动将数据转换成行为了。来看看怎么做：

function Sequence(list) {
  const iterable = Array.isArray(list)
    ? { next: getGeneratorFromList(list) }
    : list;
}
复制代码

如果给 Sequence 传入原生数组的话，它会将数组传给 getGeneratorFromList，生成一个 Generator，这样就完成了数据到行为的转换

最核心的这两个功能写完之后，我们来实现一个 map：

function createMapIterable(mapping, { next }) {
  function map() {
    const value = next();
    if (value !== undefined) {
      return mapping(value);
    }
  }
  return { next: map };
}

function Sequence(list) {
  const iterable = Array.isArray(list)
    ? { next: getGeneratorFromList(list) }
    : list;

  function map(mapping) {
    return Sequence(createMapIterable(mapping, iterable));
  }

  return {
    map,
  };
}
复制代码

map 写完后，我们还需要一个函数帮我们把行为转换回数据：

function toList(next) {
  const arr = [];
  let value = next();
  while (value !== undefined) {
    arr.push(value);
    value = next();
  }
  return arr;
}
复制代码

然后我们就有一个半完整的惰性求值的库了，虽然现在它只能 map：

function Sequence(list) {
  const iterable = Array.isArray(list)
    ? { next: getGeneratorFromList(list) }
    : list;

  function map(mapping) {
    return Sequence(createMapIterable(mapping, iterable));
  }

  return {
    map,
    toList: () => toList(iterable.next);
  };
}

// 例子：
const double = x => x * 2 // 箭头函数这样用是没问题的啊啊啊，破个例吧
Sequence([1, 3, 6])
  .map(double)
  .toList() // [2,6,12]
复制代码

再给 Sequence 加个 filter 方法就差不多完整了，其它方法再扩展很简单了。

function createFilterIterable(predicate, { next }) {
  function filter() {
    const value = next();
    if (value !== undefined) {
      if (predicate(value)) {
        return value;
      }
      return filter();
    }
  }
  return {next: filter};
}

function Sequence(list) {
  const iterable = Array.isArray(list)
    ? { next: getGeneratorFromList(list) }
    : list;

  function map(mapping) {
    return Sequence(createMapIterable(mapping, iterable));
  }

  function filter(predicate) {
    return Sequence(createFilterIterable(predicate, iterable));
  }

  return {
    map,
    filter,
    toList: () => toList(iterable.next);
  };
}

// 例子：
Sequence([1, 2, 3])
  .map(triple)
  .filter(isEven)
  .toList() // [6]
复制代码

看样子接着上面的例子继续扩展就没问题了。

问题

我继续写了十几个函数，如 take, takeWhile, concat, zip 等。直到写到我不知道接着写哪些了，然后我去参考了下 lazy.js 的 API，一看倒吸一口凉气。lazy.js 快 200 个 API 吧（没数过，目测），写完代码还要写文档。我实在不想这么折腾了。更严重的问题不在于工作量，而是这么庞大的 API 数量让我意识到我这种写法的问题。

在使用工厂函数实现链式调用的时候，每次调用都返回了一个新的对象，这个新对象包含了所有的 API。假设有 200 个 API，每次调用都是只取了其中一个，剩下 199 个全扔掉了…… 内存再够用也不能这么玩吧。我有强迫症，受不了这种浪费。

结论就是，如果想实现链式调用，还是用原型链实现比较好。

然而链式调用本身就没问题了吗？虽然用原型链实现的链式调用能省去后续调用的对象创建，但是在初始化的时候也无可避免浪费内存。比如，原型链上有 200 个方法，我只调用其中 10 个，剩下的那 190 个都不需要，但它们还是会在初始化时创建。

我想到了 Rx.js 在版本 5 升级到版本 6 的 API 变动。

// rx.js 5 的写法：
Source.startWith(0)
  .filter(predicate)
  .takeWhile(predicate2)
  .subscribe(() => {});

// rx.js 6 的写法：
import { startWith, filter, takeWhile } from 'rxjs/operators';

Source.pipe(
  startWith(0),
  filter(predicate),
  takeWhile(predicate2)
).subscribe(() => {});
复制代码

RxJS 6 里面采用了管道组合替代了链式调用。这样子改动之后，想用什么操作符就引用什么，没有多余的操作符初始化，也利于 tree shaking。那么我们就模仿 Rxjs 6 的 API 改写上面的 Sequence 库吧。

用管道组合实现惰性求值

操作符的实现和上面没太大区别，主要区别在操作符的组合方式变了：

function getGeneratorFromList(list) {
  let index = 0;
  return function generate() {
    if (index < list.length) {
      const result = list[index];
      index += 1;
      return result;
    }
  };
}

function toList(sequence) {
  const arr = [];
  let value = sequence();
  while (value !== undefined) {
    arr.push(value);
    value = sequence();
  }
  return arr;
}

// Sequence 函数本身非常轻量，操作符按需引入
function Sequence(list) {
  const initSequence = getGeneratorFromList(list);
  
  function pipe(...args) {
    return args.reduce((prev, current) => current(prev), initSequence);
  }
  return { pipe };
}

function filter(predicate) {
  return function(sequence) {
    return function filteredSequence() {
      const value = sequence();
      if (value !== undefined) {
        if (predicate(value)) {
          return value;
        }
        return filteredSequence();
      }
    };
  };
}

function map(mapping) {
  return function(sequence) {
    return function mappedSequence() {
      const value = sequence();
      if (value !== undefined) {
        return mapping(value);
      }
    };
  };
}

function take(n) {
  return function(sequence) {
    let count = 0;
    return function() {
      if (count < n) {
        count += 1;
        return sequence();
      }
    };
  };
}

function skipWhile(predicate) {
  return function(sequence) {
    let startTaking = false;
    return function skippedSequence() {
      const value = sequence();
      if (value !== undefined) {
        if (startTaking) {
          return value;
        } else if (!predicate(value)) {
          startTaking = true;
          return value;
        }
        return skippedSequence();
      }
    };
  };
}

function takeUntil(predicate) {
  return function(sequence) {
    return function() {
      const value = sequence();
      if (value !== undefined) {
        if (predicate(value)) {
          return value;
        }
      }
    };
  };
}

Sequence([2, 4, 6, 7, 9, 11, 13]).pipe(
  filter(x => x % 2 === 1),
  skipWhile(y => y < 10),
  toList
); // [11,13]
复制代码

参考：

Let’s experiment with functional generators and the pipeline operator in JavaScript

weixin_34112900
关注
洞悉LangChain：LangChain工程化设计，从API到智能Agent的全面探索
丨汀、的博客
07-12 482
洞悉LangChain：LangChain工程化设计，从API到智能Agent的全面探索
【LangChain编程：从入门到实践】链模块
最新发布
AI天才研究院
06-15 428
在LangChain中,链(Chain)是一个抽象的概念,表示一系列按顺序执行的组件。每个组件接收一个输入,执行某些操作,并产生一个输出,该输出又成为下一个组件的输入。通过将多个组件链接在一起,我们可以构建复杂的NLP管道。链的主要特点包括:模块化:链由独立的组件构成,每个组件都有明确定义的输入和输出接口。这种模块化设计使得组件可以灵活地组合和重用。可组合性:链可以嵌套和组合,形成更复杂的链。我们可以将多个链连接在一起,或者将一个链作为另一个链的组件。顺序执行:链中的组件按照预定义的顺序依次执行。
链式编程-函数式接口-Lambda表达式-Stream
qq_39847635的博客
02-04 631
一、链式编程二、函数式接口三、Lambda表达式四、stream 一、链式编程 概念 为了提高可读性的一种代码编写方式，即当方法本身无需返回任何信息时，可以将对象本身返回，达到链式编程的效果，非必须使用，但不可为了使用而滥用。 优点 代码简洁 可读性强 代码主体逻辑更清晰 缺点 不太利于代码调试 对开发人员的业务能力要求高 实现方式 不适用lombok时，无返回值的方法将对象本身返回，例如set方法可以返回本身，示例代码所示:public class User{ priv.
方法的链式调用
lipengyu
09-13 165
$函数。它通常返回一个HTML元素或一个HTML元素的集合，通常如下 function $(){ var element = []; for(var i=0, len=arguments.length; i
【JS面试题】实现链式调用
Milk~每天分享一点点，技术进步一点点
12-18 528
实现链式调用 链式调用的核心就在于调用完的方法将自身实例返回 链式调用完方法后，return this返回当前调用方法的对象 示例一： function a() { console.log("初始化") } a.prototype.method = function(param) { console.log(param) return this } let b = new a() // 由于new在实例化的时候，this会指向创建的对象，所以this.method这个方法会在原型链中找到 b
使用原型链或class实现链式加减乘除
SUGARaaa6的博客
10-11 764
使用原型链或class实现链式加减乘除。
关于java新特性.stream()链式编程的常用点汇总
o_nianchenzi_o的博客
07-01 1581
1.Java8对List集合对象某个字段进行排序 （1）单一属性排序 // 根据年龄倒叙，不写reversed()，默认升序 List<StudentInfo> collect = studentList.stream().sorted(Comparator.comparing(StudentInfo::getAge).reversed()).collect(Collectors.toList()); //排序后输出 StudentInfo.printStudents(studentsSor
Python-用于创建具有链式函数式编程数据管道的Python库
08-12
在数据科学中，数据管道可以有效地组织复杂的计算流程，使得数据从原始状态经过清洗、转换，最终到达分析或可视化的阶段。 在Python中，实现链式函数式编程数据管道的一种常见方式是使用方法链。例如，Pandas库中的...
程序设计优化之管道数据流
youdaotech的博客
03-10 443
前端领域的“管道数据流”要如何设计。
RxJS的另外四种实现方式（后记）—— 同时实现管道和链式编程
我不是码神
09-23 1834
目录 RxJS的另外四种实现方式（序） RxJS的另外四种实现方式（一）——代码最小的库 RxJS的另外四种实现方式（二）——代码最小的库（续） RxJS的另外四种实现方式（三）——性能最高的库 RxJS的另外四种实现方式（四）——性能最高的库（续） RxJS的另外四种实现方式（五）——使用生成器实现 RxJS的另外四种实现方式（六）——使用Stream类实现 github地址 https://g...
node读写流以及pipe的使用
热门推荐
踏雪无痕的博客
07-06 2万+
在js代码中，如果我们读取数据或者是打印数据，一般是var 或 let 一个变量，再打印出来但是这样的方法需要开辟一个新的内存，来保存这个变量当我们在网页上读取内存较大的文件时（比如视频、图片等），写入写出会极大的占用内存这时候就需要在node.js中提供给我们的流——streamstream可以边读边写，这样就可以更好的不占用太多内存，并且完成所需任务stream分为四种：readable、wr...
链式调用-普通调用
dreamzuora的博客
12-17 593
var http = require('http'); /*创建一个web服务器-链式调用*/ http.createServer(function (req, res) {/*给服务器传入一个匿名的回调函数，req获取请求相关的信息，例如：请求的类型是get还是post，res告诉服务器给请求响应内容*/ res.writeHead(200, { 'Content-Type': 'te
js 管道思想
m0_38005587的博客
12-30 2558
最近在学习es6新语法时，发现一个很有用的思想，管道思想，即一个函数的输出值是下一个函数的输入值： // pipeline 注意reduce参数的用法，将val作为reduce的第二个参数，也就是回调函数prev的默认值 const pipeLine = (...methods) =&gt;(val=0)=&gt; methods.reduce((prev,cur)=&gt;cur(...
Stream流，方法引用
hbpartty的博客
09-20 2601
  Stream流的思想：流水线思想，先拼接一个流式模型生产线 Stream操作的基础特征：1.Pipelining ：中间操作返回流对象本身                                    2.内部迭代 可以用stream流来简化容器的相关操作   获取stream流的方式：java.util.Stream&lt;T&gt;      jdk8之后出现 1.C...
nodeJS的管道流和链式流
马优晨
07-17 607
Stream 是一个抽象接口，Node 中有很多对象实现了这个接口 四种流类型 Readable - 可读操作。 Writable - 可写操作。 Duplex - 可读可写操作. Transform - 操作被写入数据，然后读出结果。 常用的事件有 data - 当有数据可读时触发。 end - 没有更多的数据可读时触发。 error - 在接收和写入过程中发生错误时触发。 finish ...
JavaScript大牛：Douglas Crockford
weixin_34377919的博客
08-29 90
转自：随网之舞 的《JavaScript大牛：Douglas Crockford》 Douglas Crockford是JavaScript开发社区最知名的权威，是JSON、JSLint、JSMin和ADSafe之父，是《JavaScript：The Good Parts》（英文版、中文版）的作者。JavaScript的发明人Brendan Eich说他是“Yoda of lambda ...
手把手教你使用Angular之管道
Tylili的博客
08-01 3619
原文转自：轻样知生 - 手把手教你使用Angular之管道 - Tylili 在日常开发过程中，我们经常面临数据获取之后无法直接使用，但如果通过代码手动转换又面临性能尴尬的问题。Angular为了解决这一类问题，产生了管道这一概念。所谓管道，就是将获取到的数据转换之后通过视图呈现出来的一种工具。这是Angular框架的特性，因此不会存在所谓的性能问题。Angular内置了一些常用管道，...
C#管道式编程实践：从介绍到实现
这样，我们就可以通过链式调用来创建管道： ```csharp double value = 3.14; string result = new DoubleToIntStep() .Step(new IntToStringStep()) .Process(value); ``` 这个例子展示了如何从一个double类型的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值