闭包与链式设计的使用示例
source link: https://anran758.github.io/blog/2020/12/22/closure-and-function-chaining/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
闭包与链式设计的使用示例
最近遇到了个按需请求数据的需求，非常适合用于讲解闭包与链式设计的例子，故来分享一下思路。
大致需求如下: 目前有个 list, list 中每项 item 都是可展开的折叠项。当展开某个折叠项时，需要根据 item 的 code 另外去取 name 的映射。考虑到列表的数据量非常大，且一次性查询过多 code 时，接口的查询效率会明显降低，故采用按需请求映射的方案。
屏蔽与本例无关的属性，瘦身后的 list 数据结构大致如下:
interface DataType {
code: string;
paymentTransaction: string[];
}
type ListType = DataType[];
我们知道大型企业中的数据会比较复杂，比较常见的一种情况是数据中有一个 id 或 code 是用于跟另一个数据项相关联的。学习过数据库的同学很容易就联想到了外键这个概念。
现在我们就要取出这些 code 发送给服务端去查询。考虑到 code 可能会有重复，因此可以将 codes 存入 Set 中，利用 Set 的特性去重。除此之外，为了使 name 映射可以被复用，每次从接口返回的 name 映射将会被缓存起来。若下次再触发事件时有对应的 key，便不再查询。
我们可以将这段逻辑抽离出来作为一个依赖收集的函数:
const mapping = new Map();
function collectionCodes(initCodes?: string[] | Set<string>) {
const codes = new Set<string>(initCodes)
return {
append(code: string) {
if (!mapping.has(code)) {
codes.add(code);
}
return this;
},
empty() {
return !codes.size;
},
value() {
return codes;
},
}
}
collectionCodes 函数是用于收集 codes。它内部利用了闭包的特性将 codes 缓存了起来，并且在添加新的 code 之前会判断 code 在 local 的映射中是否已经存在。append 返回的 this 是经典的链式调用设计，允许多次链式添加。当本次依赖收集结束后，调用 value 方法获取最终的 codes。
可以写一些简单的 mock 数据进行尝试:
function handleNameMapping(data: DataType) {
const codes = collectionCodes()
.append(data.code)
.append('code-append-1')
.append('code-append-1')
.append('code-append-2');
data.paymentTransaction.forEach(code => codes.append(code));
if (codes.empty()) {
console.log('can get values from existing mapping.')
return;
}
// 如果请求的数据需要转为数组，可以 Array.from 进行转换
const list = Array.from(codes.value());
console.log('fetch data before, codes --> ', list);
// mock 获取数据后拿到 name mapping 后，存入 mapping 中的行为.
// 注意，Set 类型也可以用 forEach 方法，不一定得转为数组才可以操作
list.forEach(code => mapping.set(code, `random-name-${Math.random()}`))
}
const mockItemData = {
code: 'code-main',
paymentTransaction: [
'code-payment-4',
'code-payment-1',
'code-payment-2',
'code-payment-1',
'code-payment-3',
]
}
handleNameMapping(mockItemData);
// fetch data before, codes --> (7) ["code-main", "code-append-1", "code-append-2", "code-payment-4", "code-payment-1", "code-payment-2", "code-payment-3"]
handleNameMapping(mockItemData);
// can get values from existing mapping.
handleNameMapping 在发起请求前会做 code 收集，若本次收集中没有需要 fetch 的 code，那就避免发送无用的 HTTP 请求，从而达到了优化的目的。
最终示例的 TS 代码如下。若想直接在控制台尝试效果的话，可以通过 ts 官网中的 Playground 编译为可直接运行的 js 代码:
interface DataType {
code: string;
paymentTransaction: string[];
}
const mapping = new Map();
function collectionCodes(initCodes?: string[] | Set<string>) {
const codes = new Set<string>(initCodes);
return {
append(code: string) {
if (!mapping.has(code)) {
codes.add(code);
}
return this;
},
empty() {
return !codes.size;
},
value() {
return codes;
},
};
}
function handleNameMapping(data: DataType) {
const codes = collectionCodes()
.append(data.code)
.append('code-append-1')
.append('code-append-1')
.append('code-append-2');
data.paymentTransaction.forEach((code) => codes.append(code));
if (codes.empty()) {
console.log('can get values from existing mapping.');
return;
}
// 如果请求的数据需要转为数组，可以 Array.from 进行转换
const list = Array.from(codes.value());
console.log('fetch data before, codes --> ', list);
// mock 获取数据后拿到 name mapping 后，存入 mapping 中的行为.
// 注意，Set 类型也可以用 forEach 方法，不一定得转为数组才可以操作
list.forEach(code => mapping.set(code, `random-name-${Math.random()}`))
}
const mockItemData = {
code: 'code-main',
paymentTransaction: [
'code-payment-4',
'code-payment-1',
'code-payment-2',
'code-payment-1',
'code-payment-3',
],
};
handleNameMapping(mockItemData);
// fetch data before, codes --> (7) ["code-main", "code-append-1", "code-append-2", "code-payment-4", "code-payment-1", "code-payment-2", "code-payment-3"]
handleNameMapping(mockItemData);
// can get values from existing mapping.
本例的分析就到此结束了，虽然在本例中链式调用没有充分展示出自己的优势，但也可以作为一个设计思路用于参考。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK