Function Chaining
在 JavaScript 中,链式函数是很常见的 API 模式。由于他们
具有嵌套特性,所以可以让您的代码减少中间值,并且增加可读性。
jQuery 拥有一个常见的、可以链式使用的 API,这是
jQuery 与 DefinitelyTyped 中的类型一起使用的示例:
// 如果您在上面的行中增加了一个点(.),则会看到一长串函数。
这种模式很容易在 JavaScript 中复现。关键是要确保
返回相同的对象。
这是创建链式 API 的一个示例。关键是要有一个跟踪内部状态的
外部函数,以及一个最终返回的暴露 API 的对象。
import $ from "jquery";
// 这是使用 jQuery API 的示例:
$("#navigation").css("background", "red").height(300).fadeIn(200);
// 本例是使用 TypeScript 的类型推导来为 JavaScript 的模式
提供帮助的一种方法。
更多的例子可以查看:
- example:code-flow
const addTwoNumbers = (start = 1) => {
let n = start;
const api = {
// 实现您 API 中的所有函数
add(inc: number = 1) {
n += inc;
return api;
},
print() {
console.log(n);
return api;
},
};
return api;
};
// 允许我们使用与 jQuery 中相同的 API 风格:
addTwoNumbers(1).add(3).add().print().add(1);
// 这是一个使用类时的链式调用示例:
class AddNumbers {
private n: number;
constructor(start = 0) {
this.n = start;
}
public add(inc = 1) {
this.n = this.n + inc;
return this;
}
public print() {
console.log(this.n);
return this;
}
}
// 下面的代码可以按预期工作:
new AddNumbers(2).add(3).add().print().add(1);