消除 JavaScript 的一些“异味”

2022-09-19 10:52:52 浏览数 (1)

「这是我参与2022首次更文挑战的第5天，活动详情查看：2022首次更文挑战」

主体通译自 your-javascript-smells

打开 IDE，来找一些有“异味”的代码，就像打开冰箱，找到一些发臭的食物，再将它们清理出去。虽然有“异味”的代码，不处理，也许没那么要紧，但是这种“异味”，是“糜烂”、进而影响整个冰箱食物的预警。

上代码：

代码语言：javascript复制
let a = "start";
let b;

for(let i = 0; i < 5; i  ) {
  b  = a[i].toUpperCase();
}

会不会觉得有点味道？把每个字母编程大写，用另外一个值去承接，整个暂且不论，更扯的是循环的次数 5 是被写死的，这样没有任何可扩展可言。

先稍微把这点“异味”处理下先：

代码语言：javascript复制
let a = "start";
let b;

for(let i = 0; i < a.length; i  ) {
  b  = a[i].toUpperCase()
}

然后尽量省去这个中间值，用函数封装一个通用方法；

代码语言：javascript复制
let a='start'
let upperCaseStrFn=(str)=>{
    return str.split("").map(i=>i.toUpperCase()).join("")
}
console.log(upperCaseStrFn(a)) // START

这样，异味就被消除啦。

看到 upperCaseStrFn，不需要知道它内部的实现，就知道这个函数是把一个字符串每个字母变成大写的方法，这就是可读性；同时，这个函数不止能处理 a 变量，还能处理其它变成，或者在函数内部再进行扩展，就是可扩展性；

关于可读性的另外一个问题：

代码语言：javascript复制
let total_cost = order.getCost() * 1.52;

看到这一行代码，噢，它是用来计算总数的，订单的花费，乘以 1.52...不对！这个 1.52 是什么？

解决异味：

代码语言：javascript复制
const MADRID_TAX_RATE = 1.52;

let total_cost = order.getCost() * MADRID_TAX_RATE;

噢噢，这个 1.52 是 MADRID 税率。

将数据声明和数据处理分开，就是低耦合、高内聚的代码，修改起来也方便，改一处，多处生效；

还有？

单一职责原则 可以有效去除“异味”。

把功能拆分成乐高积木，拆的越精细、紧凑，可组合的灵活性就越大。每个积木都有着单一的功能。

代码语言：javascript复制
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);

    ///....
}

优化后：

代码语言：javascript复制
function saveUser(usr: User) {                                                
    //...
    let age: number = usr.getAge();
    //...
}

优化后的代码虽然没全部展示，但是关键部分更易读，不是吗？不需要知道 getAge() 的具体做了什么，只要知道它是做什么的就行。因为你的目光是聚焦在 saveUser() 这个方法上。

还有，常常会遇到这类代码：

代码语言：javascript复制
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 函数体太大了，并且还有可能变得更大。所以，要消除这个“异味”：

代码语言：javascript复制
/// 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 的方式可以很好的处理多个判断条件的局面。本瓜对此点深有体会：

代码语言：javascript复制
if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}

改写为：

代码语言：javascript复制
let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

还有：

重复的代码需要封装抽象，这会帮助你的同事，帮助他们用你的方法，是一种“善举”，其实就相当于在团队小范围内在造轮子造福大家了。

小感：

把数据声明和数据处理分离开来，真的很重要！！

让我们一起来为 JavaScript 消除异味吧~~

我是掘金安东尼，输出暴露输入，技术洞见生活，再会~

数据处理

0 人点赞