Javascript代码风格

Javascript代码风格

代码必须清晰且尽可能易读。
编程确实为一门艺术——完成一项复杂的任务，以一定方式组织代码实现，既要正确也要易读。
好的代码风格是非常有必要的。

语法

代码风格规则图示：

现在让我们讨论上图中的规则和原因。
没有什么是不能变的，上述内容都是可选的且能改变：因为这是代码风格，不是宗教教条。

大括号

大多数javascript项目大括号写在同一行，不是新的一行，一般称为”埃及“风格，在其实大括号前面有一个空格。
一个情形是单行的IF/FOR。我们是否使用大括号，如果是，在哪？

这里有几个书写方式，所以你能根据自己去看判断可读性：

总结下：
- 确实很短的代码放在一行可以接受：如if(cond) return null 。
- 但括号里的每条语言单独分为一行通常更好。

行长度

应该限制行最大长度，没有人喜欢看很长的一行代码，最好打断分为多行。

最大的行长度每个团队有自己的规范，通常为80 或 120 字符。

缩进

有两种类型的缩进

• 水平缩进2或4个空格

水平缩进使用2或4个空格组成，也可以使用”tab“字符。如何选择是一种旧的的圣神战争。空格现在更通用。
空格比TAB的优势是可以更灵活配置缩进。
举例，我们能对其参数到前括号，如下：

    show(parameters,
         aligned, // 5 spaces padding at the left
         one,
         after,
         another
      ) {
      // ...
    }

• 垂直缩进：使用空行分割代码逻辑块。

即使单个函数能把代码在逻辑上分为块，在下面的示例中，初始化变量，主循环和返回结果也被垂直分割：

    function pow(x, n) {
      let result = 1;
      //              <--
      for (let i = 0; i < n; i++) {
        result *= x;
      }
      //              <--
      return result;
    }

插入额外的新行，可以让代码更易读。一般不应该超过9行代码，都没有一个空行作为垂直缩进。

分号

每行都应该有分号，即使分号有时可以被忽略。
一些语言分号确实是可选的，这很少使用。
但在javascirpt中很少有这种情况，当一个换行符不被解析为分号，这也可能引起编程错误，所以总是加上分号；

嵌套级别

不应该有太多的嵌套级别。
有时可以在循环中直接使用”continue“，减少额外的嵌套if(…)}{…}:

替换下面代码：

    for (let i = 0; i < 10; i++) {
      if (cond) {
        ... // <- one more nesting level
      }
    }

我们可以写成：

    for (let i = 0; i < 10; i++) {
      if (!cond) continue;
      ...  // <- no extra nesting level
    }

类似的可以使用：if/else 和 return .

举例，下面两个结果是一样的。
第一个：

    function pow(x, n) {
      if (n < 0) {
        alert("Negative 'n' not supported");
      } else {
        let result = 1;

        for (let i = 0; i < n; i++) {
          result *= x;
        }

        return result;
      }
    }

另一个：

    function pow(x, n) {
      if (n < 0) {
        alert("Negative 'n' not supported");
        return;
      }

      let result = 1;

      for (let i = 0; i < n; i++) {
        result *= x;
      }

      return result;
    }

但第二个更易读，因为边界情况 n < 0 被首先处理，下面是主代码，没有额外的嵌套。

后置函数声明

如果写几个辅助函数，然后代码中使用他们，有三种代码实现方式。

1.函数在上面，后面调用它们：

    // function declarations
    function createElement() {
      ...
    }

    function setHandler(elem) {
      ...
    }

    function walkAround() {
      ...
    }

    // the code which uses them
    let elem = createElement();
    setHandler(elem);
    walkAround();

2.调用代码在前，然后是函数定义：
// the code which uses the functions
let elem = createElement();
setHandler(elem);
walkAround();

    // --- helper functions ---

    function createElement() {
      ...
    }

    function setHandler(elem) {
      ...
    }

    function walkAround() {
      ...
    }

3.混合方式，函数在第一次调用时定义。

大多数情况，第二种情况被采纳。

因为当读一段代码时，我们首先向知道”它干什么“。如果首先是调用代码，那它提供这样信息，因为我们可能根本不需要读具体函数代码，
特别是当函数名词已经可以足够清楚描述其功能时候。

总结

本节总结所有内容都是为了提升代码的可读性，所有内容都可以探讨的。