在 JavaScript 中实现函数式编程的链式调用，可以通过创建一个支持链式调用的对象，并在每个方法中返回该对象自身。以下是一个示例，展示如何实现一个简单的链式调用 API。
示例：链式调用 API
假设我们要实现一个简单的数学运算库，支持链式调用。
传统方式
class Calculator {
constructor(value = 0) {
this.value = value;
}
add(number) {
this.value += number;
return this;
}
subtract(number) {
this.value -= number;
return this;
}
multiply(number) {
this.value *= number;
return this;
}
divide(number) {
if (number !== 0) {
this.value /= number;
}
return this;
}
getResult() {
return this.value;
}
}
// 使用示例
const result = new Calculator(10)
.add(5)
.subtract(3)
.multiply(4)
.divide(2)
.getResult();
console.log(result); // 24函数式编程风格
我们可以使用函数式编程的思想来实现链式调用。以下是一个示例，展示如何使用函数式编程实现链式调用 API。
实现代码
const Calculator = (value = 0) => ({
add: (number) => Calculator(value + number),
subtract: (number) => Calculator(value - number),
multiply: (number) => Calculator(value * number),
divide: (number) => (number !== 0 ? Calculator(value / number) : Calculator(value)),
getResult: () => value,
});
// 使用示例
const result = Calculator(10)
.add(5)
.subtract(3)
.multiply(4)
.divide(2)
.getResult();
console.log(result); // 24解释
高阶函数：
Calculator函数返回一个包含运算方法的对象，每个方法都是一个高阶函数。不可变性：每个运算方法返回一个新的
Calculator对象，保持原对象不变。链式调用：每个运算方法返回
Calculator对象自身，支持链式调用。
示例：链式调用处理文件上传
假设我们要实现一个文件上传工具，使用链式调用处理文件分片和上传进度。
实现代码
class FileUploader {
constructor(file, chunkSize = 5 1024 1024) {
this.file = file;
this.chunkSize = chunkSize;
this.currentChunk = 0;
this.chunks = Math.ceil(file.size / chunkSize);
this.reader = new FileReader();
this.spark = new SparkMD5.ArrayBuffer();
}
onProgress(callback) {
this.progressCallback = callback;
return this;
}
onComplete(callback) {
this.completeCallback = callback;
return this;
}
onError(callback) {
this.errorCallback = callback;
return this;
}
start() {
this.reader.onload = (e) => {
this.spark.append(e.target.result);
this.currentChunk++;
this.progressCallback?.(this.currentChunk, this.chunks);
if (this.currentChunk < this.chunks) {
this.loadNext();
} else {
const result = this.spark.end();
this.completeCallback?.(result);
}
};
this.reader.onerror = (e) => {
this.errorCallback?.('Failed to read file');
};
this.loadNext();
return this;
}
loadNext() {
const start = this.currentChunk * this.chunkSize;
const end = Math.min(start + this.chunkSize, this.file.size);
this.reader.readAsArrayBuffer(this.file.slice(start, end));
}
}
// 使用示例
const file = new File(['hello world'], 'hello.txt', { type: 'text/plain' });
new FileUploader(file)
.onProgress((current, total) => console.log(`Progress: ${current}/${total}`))
.onComplete((result) => console.log('Complete:', result))
.onError((error) => console.error('Error:', error))
.start();解释
链式调用：每个方法返回
FileUploader对象自身，支持链式调用。高阶函数：
onProgress、onComplete和onError方法接受回调函数作为参数。封装：将文件上传的逻辑封装在
FileUploader类中，保持代码简洁和可维护。
通过这种方式，你可以编写出更加简洁、可读性更高的链式调用 API。