【JS】1150- 如何写出更优雅的 JavaScript 代码-技术圈

有人说好的代码像一首诗，优雅而有内涵。

在日常开发中，维护别人老代码的时候是不是总感觉逻辑混乱，无法入手，就跟屎山一样？改一个 BUG 就如同在这座屎山上面艰难地再拉一坨……今天，我们从日常开发的角度上面谈谈如何让自己的代码更清晰，更易于维护，让别人看起来更有逼格。

变量命名

要写出好代码，变量命名至关重要。我们尽量采用富有表现力的词，英文不好多用翻译软件，保证不出现错误单词。编辑器可以安装相关的拼写检查、翻译插件。

不要缩写/简写单词，除非这些单词已经公认可以被这样缩写/简写。这样做导致可读性下降，意义表达不明确。反例：Association ass 、StringBuilder sb
普通变量命名则使用名词及名词短语。比如 value、options、fileText、columnName 等
boolean 命名，如果表示“是不是”用 is...，表示“有没有”用 has...，表示“能不能”用 can...，表示“能不能怎么样”用 ...able
function 命名采用动词/宾语顺序。比如 getUserInfo、insertRows、clearValue 等
避免使用 _ 开头、temp、my 之类命名临时变量，临时变量也是有意义的，这些都会增加阅读代码时的噪点
避免无意义的命名，你起的每一个名字都要能表明意思。比如 userInfo、clickCount 反例 info 、count

代码结构

好的代码结构有助于我们保持理性的思路，降低心智负担。

使用 `const` 定义

如果没有复杂的逻辑，用 const 就足够了，这样不用担心变量被重新赋值而引起意外情况。当这种模式写多之后，你会发现在项目中几乎找不到几个用 let 的地方。

// Bad
let result = false;
if (userInfo.age > 30) {
  result = true;
}

// Good
const result = userInfo.age > 30;

逻辑归类

在复杂的逻辑中，相关的逻辑尽量放在一起，并插入空行分开。使代码结构看起来清晰明了。

提前返回

在 function 中经常会遇到变量值为 undefined 的情况，这个时候则需要提前判断并阻止执行，避免一些不必要的分支（无 else），让代码更精炼。

if (!userInfo) {
  return;
}

if (!hasMoney) {
  return;
}

// 执行业务逻辑

优雅的条件判断

简单的判断 if + return 就提前返回了。复杂逻辑 if else if 面条式代码不够优雅，想用 switch case？实际情况看来 if else 和 switch case 用法区别不大。

// if else
if (status == 1) {
  console.log('processing');
} else if (status == 2) {
  console.log('fail');
} else if (status == 3) {
  console.log('success');
} else if (status == 4) {
  console.log('cancel');
} else {
  console.log('other');
}

// switch case
switch (status) {
  case 1:
    console.log('processing');
    break;
  case 2:
    console.log('fail');
    break;
  case 3:
    console.log('success');
    break;
  case 4:
    console.log('cancel');
    break;
  default:
    console.log('other');
    break;
}

在上面代码中可以看出 switch case 比 if else 代码行数还多，break 关键字也是必不可少，还不忘写 default。这里我们推荐用 Object 或 Map 作为条件存储。

const actions = {
  1: 'processing',
  2: 'fail',
  3: 'success',
  4: 'cancel',
  default: 'other',
};

console.log(actions[status] ?? actions.default);

Map 则更为强大，对象的键只能是一个字符串或符号，但 Map 的键可以是对象或更多，可以作为条件联合判断。

const actions = new Map([
  [/^sign_[1-3]$/, () => 'A'],
  [/^sign_5$/, () => 'B'],
  //...
]);

const action = [...actions].filter(([key, value]) => key.test(`sign_${status}`));
action.forEach(([key, value]) => value());

善用表达式

善用表达式，避免面条式代码。简单的条件判断可以用三元运算符代替。普通的 for 循环可以用 map、 forEach 代替。

降低复杂度

一个逻辑的代码行数越多，维护起来越困难，这个时候我们就需要将相关的逻辑抽离到另一个 function 中，从而降低上下文的复杂度。这里我们建议是一个 function 的代码量在 120 个字符的宽度下不超过一个屏幕。

值得注意的是， function 所定义的形参最好控制在 3 个以内，否则容易疏忽传入的顺序，从而变得不易维护。如果参数太多就需要将相关的参数聚合成对象传递。

移除重复代码

重复代码在 Bad Smell 中排在第一位，所以，竭尽你的全力去避免重复代码。因为它意味着当你需要修改一些逻辑时会有多个地方需要修改。

引入顺序

在 import 中，我们约定将 node_modules 中的包放在前面，然后是相对路径的包。有时一个 css 的 import 顺序不同就会导致执行的优先级不同。

使用声明式

声明式编程：告诉“机器”你想要的是什么(what)，让机器想出如何去做(how)。命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。世界很美妙，远离命令式，节省时间体验生活。

// 声明式：筛选我需要的结果
const result = dataSource.filter((dataItem) => dataItem.age > 10);

// 命令式：亲力而为查找/追加数据
let result = [];
dataSource.forEach((dataItem) => {
  if (dataItem.age > 10) {
    result.push(dataItem);
  }
});

这个时候有人就会说命令式编程性能好。其实我们写代码无需做过早优化，那点性能损耗与可维护性比起来可以算是九牛一毛。

写好业务注释

优秀的代码命名无需注释，代码即注释，加上注释就会冗余。这时某个业务的逻辑就离不开准确的注释，这样可以帮助我们更加理解业务的详细逻辑。需要要求的是代码改动注释也要随之更新。

函数式编程

函数式编程获得越来越多的关注，包括 react 都遵循这个理念。

函数是"第一等公民"

变量可以一个函数，可以作为另一个函数的参数

function increaseOperator(user) {
  return user.age + 1;
}

userList.filter(Boolean).map(increaseOperator);

纯函数

即相同输入，永远会得到相同输出，而且没有任何可观察的副作用。如果使用了 setTimeout 、Promise 或更多具有意外情况发生的操作。那么这类操作被称之为 "副作用" Effect。

每一个函数都可以被看做独立单元。纯函数的好处：方便组合、可缓存、可测试、引用透明、易于并发等等。

// 不纯的， minimum 可能被其他操作改变
let minimum = 21;

function checkAge(age) {
  return age >= minimum;
}

// 纯的
function checkAge(age) {
  const minimum = 21;
  return age >= minimum;
}

比如 slice 和 splice， slice 符合纯函数的定义是因为对相同输入它保证能返回相同输出。而 splice 却会改变调用它的数组，这就会产生可观察到的副作用，即这个原始数组永久地改变了。

var countList = [1, 2, 3, 4, 5];

// 纯的
countList.slice(0, 3);
//=> [1, 2, 3]

countList.slice(0, 3);
//=> [1, 2, 3]

// 不纯的
countList.splice(0, 3);
//=> [1, 2, 3]

countList.splice(0, 3);
//=> [4, 5]

不可变数据

每次操作不修改原先的值，而是返回一个新的值，这与无副作用相呼应。不可变数据模型易于调试，不用担心当前数据被别的地方更改。

// Bad 修改了参数
function updateUser(user) {
  user.age = 10;
}

// Good 返回新的对象
function updateUser(user) {
  return {
    ...user,
    age: 10,
  };
}

这里推荐 immer 作为函数式不可变数据操作。

完善的 TS 类型

typescript 拥有强大的类型系统，弥补了 javascript 在类型上的短板。我们在写 typescript 代码的时候需要注意的是，不使用隐式/显示的 any 类型，若有不确定类型的情况，首先考虑的是 泛型 去约束它，其次则用 unknown 加断言，最后才是 any。

// 典型类型完备的函数
function pick<T, K extends keyof T>(obj: T, keys: K[]) {
  return Object.fromEntries(keys.map((key) => [key, obj[key]])) as Pick;
}

pick(userInfo, ['email', 'name']);

结合 prettier + eslint

在团队协作中，统一的代码尤为重要，目前社区中的 eslint 规则层出不穷。其中 eslint-config-airbnb 限制最为严格，很多开源团队都在用。这里我们可以与 prettier 搭配用，并禁用其中互相冲突的规则。编码指南 https://github.com/airbnb/javascript