《JavaScript应用程序设计》一一2.13 链式调用与流式API

简介:

本节书摘来华章计算机出版社《JavaScript应用程序设计》一书中的第2章,第2.13节,作者:Eric Elliott 更多章节内容可以访问云栖社区“华章计算机”公众号查看。

2.13 链式调用与流式API

链式调用是指下一次方法调用的上下文环境,由前一次方法调用的输出结果提供,下面的代码实例在jQuery中较为常见:

$('.friend').hide().filter('.active').show();

更为清晰的写法:

$('.friend')
  .hide()
  .filter('.active')
  .show();

这一连串方法调用的内在含义为: 先找出所有类名为.friend的元素并将它们隐藏,随后在其中找出所有拥有.active类名的元素并将之显示。
在页面加载时,好友列表做如下展示:

  • Mick
  • Hunz (active)
  • Yannis
    代码执行后,好友列表的展示为:
  • Hunz (active)
    链式调用最为主要的优点在于它为流式API提供了语法上的支持。简单来说,流式API意味着方法调用的过程阅读起来更像是一种自然语言,这里的自然语言并不是指代英语,而是指流式API中的方法命名应该与实际动词联系起来。

流式API应用的一个绝佳案例是jQuery,事实上,jQuery的流式编程语法已经使之成为市面上最为简单易上手的类库之一。在jQuery刚刚发布时,几乎它的所有特性其他类库都已支持,让jQuery从众多类库中脱颖而出的是它极为易学的语法。几乎所有jQuery语句都可以抽象为:“找出匹配选择器的所有元素,随后执行x(),再执行y(),选择其中部分元素,动词,动词”。
链式调用也有其缺点,它使得你在单行代码中掺杂了过多的逻辑,同时程序中过程式代码变得越来越多,加之由于很难在调用链中设置断点,所以代码调试变得异常困难。
如果你恰巧在调试链式代码时陷入了困境,这里有一个小技巧,你可以用赋值变量来捕获链式调用中任意环节的函数返回值,之后在变量上继续调用方法链中的下一个方法,并在这里穿插断点调试。这么说吧,流式API并不是让你将方法链从头写到尾。
流式API的重点不在于链式调用,而在于它能够让方法调用的过程看起来更像是人用词语与句子表达自己的想法。流式API将任务执行的结果用一组拥有明确含义的方法衔接起来。
构建一个流式API等同于构建一个微型领域特定语言,这部分内容将在第3章中做详细阐述。
警告: 流式API极易被滥用,比如在其他语言中,流式API主要是用来配置实例对象,而JavaScript在配置方面有天然的对象字面量语法,此时再引入流式API,就显得有些多余。

有时候,流式语法也让函数调用变得冗余,例如Should.js的API就采用了极长的链式调用,导致代码书写在编辑器内跨行。请在代码中始终保持简单性。
相关文章
|
6天前
|
Java API
掌握Java 8 Stream API的艺术:详解流式编程(三)
掌握Java 8 Stream API的艺术:详解流式编程
18 2
|
6天前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
37 0
|
4天前
|
设计模式 JavaScript API
Vue.js的provide/inject API实现了依赖注入
【5月更文挑战第17天】Vue.js的provide/inject API实现了依赖注入,允许父组件向深层子组件传递依赖,降低耦合,提高代码可维护性和测试性。通过provide选项提供依赖,如`provide: {foo: 'foo', bar: this.bar}`,子组件通过inject选项接收,如`inject: ['foo', 'bar']`。适用于跨组件共享数据、插件开发和高阶组件。然而,应谨慎使用以防止过度复杂化代码结构。
13 0
|
1天前
|
Web App开发 存储 开发框架
使用Node.js构建RESTful API
【5月更文挑战第20天】本文指导使用Node.js和Express构建RESTful API。首先确保安装了Node.js,然后初始化项目,安装Express框架。在`app.js`中创建API,定义GET路由`/api/users`返回用户列表。运行服务器并测试API,最后讨论如何扩展API和提升其功能。这是一个构建RESTful API的基础入门教程。
|
6天前
|
缓存 监控 JavaScript
Node.js中构建RESTful API的最佳实践
【4月更文挑战第30天】本文介绍了在Node.js中构建RESTful API的最佳实践:选择合适的框架(如Express、Koa)、设计清晰的API接口(遵循HTTP动词和资源路径)、实现认证授权(JWT、OAuth 2.0)、错误处理、限流缓存、编写文档和测试,以及监控性能优化。这些实践有助于创建健壮、可维护和易用的API。
|
6天前
|
JavaScript API 开发者
深入了解Node.js的文件系统:Node.js文件系统API的使用与探索
【4月更文挑战第30天】本文深入探讨了Node.js的文件系统API,介绍了如何引入`fs`模块进行文件操作。内容包括异步读取和写入文件、删除文件、创建目录以及使用文件流进行高效操作。此外,还提到了文件系统的监视功能,帮助开发者全面掌握在Node.js中处理文件和目录的方法。
|
6天前
|
JavaScript API
Node.js API实例讲解——FS 文件夹操作
Node.js API实例讲解——FS 文件夹操作
32 0
|
6天前
|
存储 Java 关系型数据库
掌握Java 8 Stream API的艺术:详解流式编程(一)
掌握Java 8 Stream API的艺术:详解流式编程
51 1
|
6天前
|
JavaScript 前端开发 API
如何利用Python的Flask框架与Vue.js创建RESTful API服务
【4月更文挑战第10天】本文介绍了如何使用Flask和Vue.js创建一个前后端分离的RESTful API服务。Flask作为后端框架,负责提供CRUD操作,与SQLite数据库交互;Vue.js作为前端框架,构建用户界面并利用axios库与后端API通信。通过示例代码,展示了Flask设置路由处理用户数据以及Vue组件如何调用API获取和操作数据。此基础结构为构建更复杂的Web应用提供了起点。
|
6天前
|
存储 SQL JavaScript
js常见的存储API以及应用场景?使用方式,各个优缺点?
【4月更文挑战第4天】JavaScript存储API包括`localStorage`、`sessionStorage`、`cookies`、`IndexedDB`和弃用的`Web SQL`。`localStorage`和`sessionStorage`用于页面数据存储,前者持久化,后者限当前会话。`cookies`适用于会话管理,但存储空间有限。`IndexedDB`适合大量结构化数据存储和查询。废弃的`Web SQL`曾提供关系型数据库功能。选择时需考虑数据性质、存储需求、安全性和兼容性。
27 2