OveUI博客
老前端的戎码生涯

如何写出更优雅的代码- JavaScript 篇

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

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

变量命名

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

  1. 不要缩写/简写单词,除非这些单词已经公认可以被这样缩写/简写。这样做导致可读性下降,意义表达不明确。反例:Association ass 、StringBuilder sb
  2. 普通变量命名则使用名词及名词短语。比如 valueoptionsfileTextcolumnName 等
  3. boolean 命名,如果表示“是不是”用 is...,表示“有没有”用 has...,表示“能不能”用 can...,表示“能不能怎么样”用 ...able
  4. function 命名采用动词/宾语顺序。比如 getUserInfoinsertRowsclearValue 等
  5. 避免使用 _ 开头、tempmy 之类命名临时变量,临时变量也是有意义的,这些都会增加阅读代码时的噪点
  6. 避免无意义的命名,你起的每一个名字都要能表明意思。比如 userInfoclickCount 反例 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<T, K>;
}

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

结合 prettier + eslint

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

结语

想写出优雅的代码其实很简单,千里之行,始于足下。我们需要不断优化自己的代码,不要畏惧改善代码质量所需付出的努力。理解这些准则并实践,假以时日,相信我们每个人写代码都能做到像写诗一样行云流水。

赞(0)
未经允许不得转载:UI树意境 » 如何写出更优雅的代码- JavaScript 篇

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址