消除 JavaScript 的一些“异味”
「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」
主体通译自 your-javascript-smells
打开 IDE，来找一些有“异味”的代码，就像打开冰箱，找到一些发臭的食物，再将它们清理出去。虽然有“异味”的代码，不处理，也许没那么要紧，但是这种“异味”，是“糜烂”、进而影响整个冰箱食物的预警。
上代码：
let a = "start";
let b;
for(let i = 0; i < 5; i++) {
b += a[i].toUpperCase();
}会不会觉得有点味道？把每个字母编程大写，用另外一个值去承接，整个暂且不论，更扯的是循环的次数 5 是被写死的，这样没有任何可扩展可言。
先稍微把这点“异味”处理下先：
let a = "start";
let b;
for(let i = 0; i < a.length; i++) {
b += a[i].toUpperCase()
}然后尽量省去这个中间值，用函数封装一个通用方法；
let a='start'
let upperCaseStrFn=(str)=>{
return str.split("").map(i=>i.toUpperCase()).join("")
}
console.log(upperCaseStrFn(a)) // START这样，异味就被消除啦。
看到 upperCaseStrFn，不需要知道它内部的实现，就知道这个函数是把一个字符串每个字母变成大写的方法，这就是可读性；同时，这个函数不止能处理 a 变量，还能处理其它变成，或者在函数内部再进行扩展，就是可扩展性；
关于可读性的另外一个问题：
let total_cost = order.getCost() * 1.52;看到这一行代码，噢，它是用来计算总数的，订单的花费，乘以 1.52...不对！这个 1.52 是什么？
解决异味：
const MADRID_TAX_RATE = 1.52;
let total_cost = order.getCost() * MADRID_TAX_RATE;噢噢，这个 1.52 是 MADRID 税率。
将数据声明和数据处理分开，就是低耦合、高内聚的代码，修改起来也方便，改一处，多处生效；
还有？
单一职责原则 可以有效去除“异味”。
把功能拆分成乐高积木，拆的越精细、紧凑，可组合的灵活性就越大。每个积木都有着单一的功能。
function saveUser(name: string, address: string, birthdate: Date, phone_number: string) {
//...
let diff_ms = Date.now() - birthdate.getTime();
let age_dt = new Date(diff_ms);
let age: number = Math.abs(age_dt.getUTCFullYear() - 1970);
///....
}优化后：
function saveUser(usr: User) {
//...
let age: number = usr.getAge();
//...
}优化后的代码虽然没全部展示，但是关键部分更易读，不是吗？不需要知道 getAge() 的具体做了什么，只要知道它是做什么的就行。因为你的目光是聚焦在 saveUser() 这个方法上。
还有，常常会遇到这类代码：
function configureChristmasTreeLights(tree, mode) {
switch(mode) {
'rgb_blinking':
tree.setColors('rgb', {
'blinking': true,
'frequency': 10
})
break;
'rgb_fixed':
tree.setColors('rgb', {
'blinking': false
})
break;
'white_smooth':
tree.setColor('white', {
'blinking': true,
'frequency': 1
})
break;
default:
throw new Error("Unrecognized mode used")
break;
}
}switch 函数体太大了，并且还有可能变得更大。所以，要消除这个“异味”：
/// Helper functions
function blinkingRGBLights(tree) {
tree.setColor('rgb', {
'blinking': true,
'frequency': 10
})
}
function fixedRGBLights(tree){
tree.setColor('rgb', { 'blinking': false})
}
function whiteSmoothLights(tree) {
tree.setColor('white', {
'blinking': true,
'frequency': 1
})
}
//The actual function
function configureChristmasTreeLights(tree, mode) {
const mapping = {
'rgb_blinking': blinkingRGBLights,
'rgb_fixed': fixedRGBLights,
'white_smooth': whiteSmoothLights
}
try {
mapping[mode](tree);
} catch (e) {
throw new Error("Unrecognized mode used")
}
}采用 map 的方式可以很好的处理多个判断条件的局面。本瓜对此点深有体会：
if(x===a){
res=A
}else if(x===b){
res=B
}else if(x===c){
res=C
}else if(x===d){
//...
}改写为：
let mapRes={
a:A,
b:B,
c:C,
//...
}
res=mapRes[x]还有：
重复的代码需要封装抽象，这会帮助你的同事，帮助他们用你的方法，是一种“善举”，其实就相当于在团队小范围内在造轮子造福大家了。
小感：
把数据声明和数据处理分离开来，真的很重要！！
让我们一起来为 JavaScript 消除异味吧~~
我是掘金安东尼，输出暴露输入，技术洞见生活，再会~
腾讯云开发者
