Schaffen Sie weiter, beschleunigen Sie das Wachstum! Dies ist der N-te Tag meiner Teilnahme an der „Nuggets Daily New Plan · October Update Challenge“, klicken Sie hier, um die Details der Veranstaltung anzuzeigen
Vorwort
Zu Beginn des Projekts gibt es oft „große Jungs“ in der Gruppe, die das von einem Projekt verwendete Frontend-Projektframework für uns aufbauen oder transformieren, das normalerweise einige häufig verwendete Bibliotheken und Funktionen enthält: wie Router-Routing, Store Datenfreigabe, Anmelde- und Ausnahmeseiten, dynamisches Routing und Umgang mit Schaltflächenberechtigungen usw. Aber im Prozess des Projekts müssen alle mitmachen! Egal, ob es sich um einen Anfänger oder einen großen Kerl handelt, wenn Sie sich mit einigen Grundformen befassen, sollten die Grundideen und die Codelogik ähnlich sein.
Um den Code dieses Teils der Funktion zu vereinheitlichen und wiederzuverwenden, um die Codemenge zu reduzieren und die Zeit zu verkürzen, die "kleine Weiße" zum Schreiben von Code benötigen, erstellen wir daher ein Utils - Tool-Funktionsverzeichnis zum Speichern aller Tools, die wir extrahiert haben.
Wie kann man also eine Utility-Funktion extrahieren und kapseln? Wir müssen mit diesen Schritten unten beginnen.
1. Anfängliche logische Abstraktion
Dieser Teil passiert im Allgemeinen, wenn wir erkennen, dass das Stück Code, das wir jetzt schreiben, wahrscheinlich in Zukunft verwendet werden wird, und wir uns überlegen, wie wir damit umgehen können.
Nehmen Sie als Beispiel ein Beispiel in meinem Projekt: Es gibt ein großes Dictionary-Objekt, das alle vom Front- und Backend definierten Feldarrays speichert, aber wenn die Detailseite angezeigt wird, muss in der Regel das entsprechende Label über den Wert gefunden werden aufstellen.
Zu diesem Zeitpunkt wird im Allgemeinen eine Funktion erstellt, die zum Suchen verwendet wird, oder das Feldarray wird in ein Kartenformat konvertiert (derzeit werden im Allgemeinen Objekte verwendet). Wir haben uns damals für die zweite Option entschieden:
export const Enums = {
protocolType: [
{ label: "label 1", value: 1 },
{ label: "label 2", value: 2 },
{ label: "label 3", value: 3 }
],
nodeType: [
{ label: "label 1", value: 1 },
{ label: "label 2", value: 2 }
]
}
export function arr2map (arr) {
return arr.reduce((mmap, item) => {
mmap[item.value] = item.label;
return mmap;
}, {});
}
export const EnumsMap = Object.keys(Enum).reduce((eEmap, groupName) => {
eEmap[groupName] = arr2map(Enum[groupName]);
return eEmap;
}, {});
复制代码Hier haben wir eine Funktion arr2map geschrieben , um das Array von Objekten unseres Wörterbuchs in ein Objekt des value: labelFormats umzuwandeln .
An dieser Stelle gibt es kein Problem mit dieser Logik in der aktuellen Situation.
2. Probleme haben
Aber später stießen wir auf ein neues Problem: arr2map unterstützt nur [{ label: xxx, value: xxx }]das Format von und kann nicht in anderen Szenarien verwendet werden.
所以，我们又对其进行了一次改造（当然，改造必须影响最小化，即不会影响以前的代码，也不需要重新对以前的代码进行修改）
export function notNull(val) {
return val !== undefined && val !== null;
}
export function arr2map(arr = [], props = { label: "label", value: "value" }) {
return arr.reduce((mmap, item) => {
mmap[item[props.value]] = notNull(props.label) ? item[props.label] : true;
return mmap;
}, {});
}
复制代码这时我们的数组转对象的函数就算是比较成熟了。可以支持一个配置项来控制我们从对象数组中提取对象的哪些元素来生成新的对象。
3. 新的调整
上面的 arr2map 函数，我相信也已经适应了大部分的使用场景。但是，我们又遇到了一个更难受的问题：不只是需要转成 {value: label} 的情况，还需要得到对应字段的所有属性。
比如 [{label: 'label1', value: 1, disabled: true, author: 'xxx'}] 需要转成 { 1: {label: 'label1', value: 1, disabled: true, author: 'xxx'}}
所以此时有需要对 arr2map 进行新的改造。
export function notNull(val) {
return val !== undefined && val !== null;
}
export function arr2map(arr = [], props = { label: "label", value: "value" }, retain = false) {
return arr.reduce((mmap, item) => {
if (retain) {
mmap[item[props.value]] = item
} else {
mmap[item[props.value]] = notNull(props.label) ? item[props.label] : true;
}
return mmap;
}, {});
}
复制代码4. 其他挑战
上面的一部分代码我相信大部分的同学都能正确的处理，或者想到更优秀完善的代码。
但是在后续的项目推进中，又接到了产品的一系列新的需求。其中一个就是：根据一个值从树型数组中拿到所有上级节点的 label 值组成一个完整的字符串路径返回。
这个功能一般在 组织机构树、关系树 等场景中。为了做到后续能兼容更多的场景更多的数据类型，所以然需要接收一些配置项。最终的代码如下：
/**
* 获取一个数据在树形数组中对应的名称 ( 场景：根据code在组织树中查询对应的组织名称 )
* @param { array } tree 包含子节点的数据对象
* @param { * } value 当前查询的值, 一般是字符串或者数字
* @param {{key?: string, label?: string, children?: string}} props 默认关键字(key: 查询值键名，label: 名称键名)
* @param { ?object } options 配置项
* @return { string | undefined } 名称
* */
export function getTreeNodeLabel(tree, value, props = {}, options = {}) {
let { key = "code", label = "label", children = "children" } = props;
let { splice = true, hideFirst = false } = options;
for (let node of tree) {
if (node[key] === value) {
return node[label];
}
if (notEmpty(node[children])) {
let res = getTreeNodeLabel(node[children], value, props, { splice });
if (res) {
if (hideFirst) {
return res;
}
return splice ? `${node[label]}/${res}` : res;
}
}
}
return undefined;
}
复制代码这里接收两个配置对象：props 和 options。
- props: 用来配置数据获取以及确认递归对象，保证可以通过配置这几个参数来适应多种属性数据格式
- options：用来配置输出数据格式；splice 确认是否需要分割线，hideFirst 是否需要隐藏顶级节点
后面其实还可以扩展，如果将隐藏顶级节点 label 改为 隐藏几级节点的label，分割线也可以配置，或者支持用函数来处理等等。
5. 总结
Von den beiden oben genannten Szenarien besteht die Werkzeugfunktion hauptsächlich darin, "Geschäftsdaten zu verarbeiten, um ein anderes erwartetes Datenformat zu erhalten" , dann "dasselbe Geschäftsszenario zu behandeln oder einen einheitlichen Anzeigestil zu benötigen usw." . Verwenden Sie im Allgemeinen Encapsulate-Geschäftskomponenten fertigstellen.
Datenverarbeitung (Transformation), ich persönlich denke, dass die Operation von Arrays oder Objekten am häufigsten ist, sei es das Zusammenführen, Abflachen usw. beim Schreiben solcher Werkzeugfunktionen. Wir können nicht nur unsere Aufmerksamkeit beim Schreiben von Werkzeugen erhöhen Das Verstehen kann auch unsere Beherrschung von Algorithmen und funktionaler Programmierung verbessern.