当前位置：网站首页>6个规则去净化你的代码

6个规则去净化你的代码

2022-08-09 21:16:00 【51CTO】

6个规则去净化你的代码_代码风格

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

1、注重命名

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

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

       
       function 
       
       mergeNumberListIntoUniqueList(
       
       listOne, 
       
       listTwo) {
       
       return [
       
       ...
       
       new 
       
       Set([
       
       ...
       
       listOne, 
       
       ...
       
       listTwo])]
       
}
      
1.
2.
3.

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

       
       function 
       
       mergeLists(
       
       listOne, 
       
       listTwo) {
       
       return [
       
       ...
       
       listOne, 
       
       ...
       
       listTwo]
       
}
       
       function 
       
       createUniqueList(
       
       list) {
       
       return [
       
       ...
       
       new 
       
       Set(
       
       list)]
       
}
      
1.
2.
3.
4.
5.
6.
7.

2、IF语句简化

假设我们有下面的代码：

我们可以这样解决：

       
       const 
       
       options 
       
       = [
       
       'duck', 
       
       'dog', 
       
       'cat'];
       
       if (
       
       options.
       
       includes(
       
       value)) {
       
       // ...
      
1.
2.
3.

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

3、及早返回

有下面的代码：

       
       function 
       
       handleEvent(
       
       event) {
       
       if (
       
       event) {
       
       const 
       
       target 
       
       = 
       
       event.
       
       target;
       
       if (
       
       target) {
       
       // Your awesome piece of code that uses target
      
1.
2.
3.
4.
5.

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

       
       function 
       
       handleEvent(
       
       event) {
       
       if (
       
       !
       
       event 
       
       || 
       
       !
       
       event.
       
       target) {
       
       return;
       
  }
       
       // Your awesome piece of code that uses target
      
1.
2.
3.
4.
5.

4、解构赋值

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

例如：

       
       // 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
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.