主体通译自 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 消除异味吧~~
我是掘金安东尼，输出暴露输入，技术洞见生活，再会~
