从6个方面净化你的Js代码

2020-12-07 10:07:55 浏览数 (1)

记录一下怎样写出整洁规范的代码,用于共勉进步。对于什么是整洁的代码,书中给出了大师们的总结:

Bjarne Stroustrup:优雅且高效;直截了当;减少依赖;只做好一件事 Grady booch:简单直接 Dave thomas:可读,可维护,单元测试 Ron Jeffries:不要重复、单一职责,表达力(Expressiveness)

其中,我最喜欢的是表达力(Expressiveness)这个描述,这个词似乎道出了好代码的真谛:用简单直接的方式描绘出代码的功能,不多也不少。

可读性代码就是可维护性代码!

1、注重命名

为一个事件命名是很困难的。虽然困难但是非常有必要。

想象以下,将两个数组合并成一个数组,并生成一个唯一值的数组。那么你会怎么命名它呢?我们也许会这样命名?

代码语言:javascript复制
function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}

上面的命名并不糟糕,但是还不是很友好。你可以将一个功能函数拆分为两个功能函数,这样命名更友好和函数复用性更好。

代码语言:javascript复制
function mergeLists(listOne, listTwo) {
  return [...listOne, ...listTwo]
}

function createUniqueList(list) {
  return [...new Set(list)]
}

2、IF语句简化

假设我们有下面的代码:

代码语言:javascript复制
if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}

我们可以这样解决:

代码语言:javascript复制
const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
  // ...
}

将乱七八糟的条件判断放到一个变量中存储,比看臃肿的表达式要好很多。

3、及早返回

有下面的代码:

代码语言:javascript复制
function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // Your awesome piece of code that uses target
    }
  }
}

及早返回使得我们的代码更加易读:

代码语言:javascript复制
function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // Your awesome piece of code that uses target
}

4、解构赋值

在JavaScript中,我们可以对objects和arrays进行解构赋值。

例如:

代码语言:javascript复制
// object 解构赋值
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// array 解构赋值
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2

5、童子军规则

童子军有一条规则:永远保持离开时的露营比你发现它时更整洁。如果你在地面上发现了脏东西,那么无论是否是你留下的,你都要将它清理干净。你要有意地为下一组露营者改善环境。

我们编写代码也是这样子,如果你在代码中发现了脏代码,那么你可以尝试去修改它,即使是一个没有被引用到的变量名。

6、代码风格

在你的团队中使用一种代码风格,比如限定代码缩进的规范是两空格呢还是四空格;使用单引号呢还是双引号呢;使用同类的一种框架呢,还是流行两种解决方案的框架呢...这样团队中人员接手项目的成本就会降低,开发人员的心里减少排斥感~

所以,在开发的工作中为了不给别人造成排斥感,尽量去写出整洁的代码,既方便自己也方便别人!!!

0 人点赞