飙血推荐
  • HTML教程
  • MySQL教程
  • JavaScript基础教程
  • php入门教程
  • JavaScript正则表达式运用
  • Excel函数教程
  • AngularJS教程
  • UEditor使用文档
  • ThinkPHP5.0教程

JavaScript书写规范

时间:2021-11-24  作者:匿名  

书写规范

我们的代码必须尽可能的清晰和易读,这样我们才能在隔了一段时间再回头看的时候,读懂自己的程序。

语法

下面列出了一些建议的规则(详情请参阅下文):

image.png

没有什么规则是“必须”的,这些是风格偏好,为的是能更好的编写代码。

花括号

在大多数的 JavaScript 项目中,花括号以 “Egyptian” 风格(译注:“egyptian” 风格又称 K&R 风格 — 代码段的开括号位于一行的末尾,而不是另起一行的风格)书写,左花括号与相应的关键词在同一行上 — 而不是新起一行。左括号前还应该有一个空格,如下所示:

if (condition) {
  // do this
  // ...and that
  // ...and that
}

单行构造(如 if (condition) doSomething())也是一个重要的用例。我们是否应该使用花括号?如果是,那么在哪里?

下面是这几种情况的注释,你可以自己判断一下它们的可读性:

初学者常这样写。非常不好!这里不需要花括号:

if (n < 0) {alert(`Power ${n} is not supported`);}

拆分为单独的行,不带花括号。强烈建议不要这样做,添加新行很容易出错:

if (n < 0)
  alert(`Power ${n} is not supported`);

如果代码短的话写成一行,不带花括号,也是可以的:

if (n < 0) alert(`Power ${n} is not supported`);

下面才是最好的方式,也是我们推荐的书写方式:

if (n < 0) {
  alert(`Power ${n} is not supported`);
}

对于很短的代码,写成一行是可以的:例如 if (cond) return null。但是如果包含代码块则推荐使用上面例子这样的书写方式。

缩进

有两种类型的缩进:

水平方向上的缩进:2 或 4 个空格。

一个水平缩进通常由 2 或 4 个空格或者 “Tab” 制表符(Tab 键)构成,但是使用空格更普遍一点。

例如,我们可以将参数与左括号对齐,像下面这样:

show(parameters,
     aligned, // 左边有 5 个空格
     one,
     after,
     another
  ) {
  // ...
}

垂直方向上的缩进:用于将代码拆分成逻辑块的空行。

即使是单个函数通常也被分割为数个逻辑块。在下面的示例中,初始化的变量、主循环结构和返回值都被垂直分割了:

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

插入一个额外的空行有助于使代码更具可读性。写代码时,不应该出现连续超过 9 行都没有被垂直分割的代码。

分号

每一个语句后面都应该有一个分号,就算它不写也能正常运行,也要习惯性加上分号。

嵌套的层级

尽量避免代码嵌套层级过深。

例如,在循环中,有时候使用 continue 指令以避免额外的嵌套是一个好主意。

例如,不应该像下面这样添加嵌套的 if 条件:

for (let i = 0; i < 10; i++) {
  if (cond) {
    ... // <- 又一层嵌套
  }
}

我可以使用 continue 指令以避免额外的嵌套:

for (let i = 0; i < 10; i++) {
  if (!cond) continue;//遇到非cond的情况直接跳过,执行下一次循环
  ...  // <- 没有额外的嵌套
}

使用 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 createElement() {
  ...
}
function setHandler(elem) {
  ...
}
function walkAround() {
  ...
}
// 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();

2、先写调用代码,再写函数

// 调用函数的代码
let elem = createElement();
setHandler(elem);
walkAround();
// --- 辅助函数 ---
function createElement() {
  ...
}
function setHandler(elem) {
  ...
}
function walkAround() {
  ...
}

3、混合:在第一次使用一个函数时,对该函数进行声明。

大多数情况下,第二种方式更好。第三种情况使用混合的方法,会造成到处是函数,你都不知道函数在哪里的尴尬。

搜你所爱
JavaScript基础教程:目录
湘ICP备14001474号-3  投诉建议:234161800@qq.com   部分内容来源于网络,如有侵权,请联系删除。