6个规则让你代码结构焕然一新

admin

1、注重命名
) r: y4 i* ]# E  N. X: f/ i" R       为一个事件命名是很困难的。虽然困难但是非常有必要。
       想象以下，将两个数组合并成一个数组，并生成一个唯一值的数组。那么你会怎么命名它呢？我们也许会这样命名？

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

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

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

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

0 M8 H1 Y" N9 f* ^- O% a" U2、IF语句简化
, |, Y! b1 a1 v       假设我们有下面的代码：
' x( ]7 M: B  d7 K5 e

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

      我们可以这样解决：
' }2 h3 ~9 r1 T# t) q7 C( o

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

      将乱七八糟的条件判断放到一个变量中存储，比看臃肿的表达式要好很多。
- J+ d# D/ l  e4 _3 ]" E9 a3、及早返回
, h( ?* K4 o! ?; T. z8 y. G6 H       有下面的代码：
$ q) Y' C; q5 L# `3 l! z* I

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

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

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

4、解构赋值
2 j) q! x" ], a# }: `6 y       在javascript中，我们可以对objects和arrays进行解构赋值。例如：
: ?1 Z0 n( A% s) T) z3 f+ q

复制代码
// 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

' }. K, e& R- l9 B( ?5、童子军规则
0 \1 [8 ^. w3 P+ x       童子军有一条规则：永远保持离开时的露营比你发现它时更整洁。如果你在地面上发现了脏东西，那么无论是否是你留下的，你都要将它清理干净。你要有意地为下一组露营者改善环境。
       我们编写代码也是这样子，如果你在代码中发现了脏代码，那么你可以尝试去修改它，即使是一个没有被引用到的变量名。
# b0 _" J8 P% q0 [, K5 [% ~' `6、代码风格
; {. v! Y! W/ Q8 M' l      在你的团队中使用一种代码风格，比如限定代码缩进的规范是两空格呢还是四空格；使用单引号呢还是双引号呢;使用同类的一种框架呢，还是流行两种解决方案的框架呢...这样团队中人员接手项目的成本就会降低，开发人员的心里减少排斥感~
2 C+ T* [  R6 f0 u3 [/ }, H
' ^0 I0 S3 \4 r# O# ^