Skip to main content
 首页 » 编程设计

Javascript代码风格

2022年07月19日125tuyile006

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.混合方式,函数在第一次调用时定义。

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

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

总结

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


本文参考链接:https://blog.csdn.net/neweastsun/article/details/71787090