打开 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 消除异味吧~~
我是掘金安东尼,输出暴露输入,技术洞见生活,再会~
评论