JavaScript指南第2部分:代码样式和程序结构

今天,我们将发布JavaScript手册下一部分的翻译。 在这里,我们讨论代码的风格和程序的词汇结构。

第1部分:第一个程序,语言功能,标准
第2部分:代码样式和程序结构
第3部分:变量,数据类型,表达式,对象
第4部分:功能
第5部分:数组和循环
第6部分:异常,分号,通配符文字
第7部分:严格模式,此关键字,事件,模块,数学计算
第8部分:ES6功能概述
第9部分:ES7,ES8和ES9标准概述



程式风格


“编程风格”或“编码标准”或“代码风格”是在编写程序时使用的一组约定。 它们控制代码设计的特征以及使用歧义结构的过程。 就我们而言,我们正在谈论用JavaScript编写的程序。 如果程序员自己从事某个项目,那么他使用的代码风格就代表了他与自己的“契约”。 如果我们谈论的是团队,则这些是所有团队成员都使用的协议。 使用特定规则集编写的代码使软件项目的代码库统一,提高了代码的可读性和可理解性。

有很多样式指南。 以下是JavaScript世界中最常用的两种方法:


您可以选择其中任何一个,也可以自己制定规则。 最重要的是在处理某个项目时始终使用相同的规则。 此外,例如,如果您遵守一组规则,并且在需要处理的现有项目中使用了自己的规则,则必须遵守该项目的规则。

您可以手动设置代码格式,也可以在此过程中使用自动化工具。 实际上,格式化JS代码并在启动之前检查它是一个单独的大主题。 这是我们针对相关工具及其使用功能的出版物之一。

本指南中使用的样式


该材料的作者以自己的风格指南为例,引用了他在编写代码时尝试遵循的一组规则。 他说示例中的代码着重于标准的最新版本,该版本可在现代版本的浏览器中使用。 这意味着要在旧版浏览器中运行此类代码,您将需要使用诸如Babel之类的编译器。 JS编译器允许您转换使用该语言的新功能编写的代码,以便可以在不支持这些新功能的浏览器中运行它。 编译器可以为尚不标准的语言功能提供支持,也就是说,即使在最现代的浏览器中也无法实现。

这是有问题的规则的列表。

  • 对齐方式。 要对齐代码块,使用空格(每1个对齐级别2个空格),不使用制表符。
  • 分号。 不使用分号。
  • 线长 80个字符(如果可能)。
  • 一行注释。 此类注释在代码中使用。
  • 多行注释。 这些注释用于记录代码。
  • 未使用的代码。 未使用的代码不会保留在程序中已注释掉的情况下,以备以后使用。 如果仍然需要这样的代码,则可以在版本控制系统中找到它(如果使用了它),也可以在设计为存储此类代码的程序员说明中找到它们。
  • 评论规则。 无需对明显的事物进行注释,无需在代码中添加注释,这有助于理解其本质。 如果代码通过精心选择的函数名称和变量以及函数的JSDoc描述来解释自身,则不应在此代码中添加其他注释。
  • 变量声明。 始终明确声明变量,以防止污染全局对象。 不使用var关键字。 如果没有计划在程序执行期间更改变量的值,则使用const关键字以常量的形式声明(类似的常量,通常也称为“变量”),默认情况下使用const关键字-计划更改变量的值的情况除外。 在这种情况下,将使用let关键字。
  • 常数 如果程序中的某些值是常量,则其名称由大写字母组成。 例如, CAPS 。 下划线( _ )用于分隔由几个单词组成的名称部分。
  • 功能介绍 函数声明使用箭头语法。 常规函数声明仅在特殊情况下适用。 特别是在对象方法或设计者中。 这是由于this的功能而完成的。 必须使用const关键字声明const ,如果可能,必须从函数中显式返回其工作结果。 禁止使用嵌套函数,以便从主代码中隐藏一些辅助机制。

这是一对简单箭头功能的示例:

 const test = (a, b) => a + b const another = a => a + 2 

  • 命名实体。 函数,变量和对象方法的名称始终以小写字母开头,由多个单词组成的名称使用骆驼样式(诸如camelCase类的名称)编写。 仅构造函数和类的名称以大写字母开头。 如果您使用对实体命名有特殊要求的框架,请使用其规定的规则。 文件名必须由小写字母组成,名称中的各个单词用短划线( - )分隔。
  • 构造和格式化表达式的规则。

如果 。 以下是一些写条件if

 if (condition) { statements } if (condition) { statements } else { statements } if (condition) { statements } else if (condition) { statements } else { statements } 

。 要组织循环,可以使用构造标准,下面提供一个示例,或者使用for of循环。 for in .hasOwnProperty()应避免-除非将它们与.hasOwnProperty()构造一起使用。 这是一个for循环图:

 for (initialization; condition; update) { statements } 

一会儿 。 这是while的示意图示例:

 while (condition) { statements } 

。 这是do循环的结构:

 do { statements } while (condition); 

开关 。 以下是switch条件switch的示意图:

 switch (expression) { case expression:   statements default:   statements } 

尝试一下 。 这是try-catch构造的一些设计选项。 第一个示例显示了这种结构,没有finally块,第二个示例显示了这种块。

 try { statements } catch (variable) { statements } try { statements } catch (variable) { statements } finally { statements } 

  • 空间 。 应该明智地使用空格,以便它们有助于提高代码的可读性。 因此,将空格放在关键字后面,并在其后加上一个圆括号,并在空格中将两个运算符( +-/*&&等)应用于运算符。 在每个分号后的for循环内使用空格,以使循环头的各个部分彼此分开。 在逗号后放置空格。
  • 空行 。 空行标记包含彼此逻辑连接的操作的代码块。
  • 引号 。 使用字符串时,使用单引号( ' ),而不使用双引号( " )。通常在HTML属性中使用双引号,因此使用单引号有助于避免在处理HTML字符串时出现问题。如果需要对字符串执行某些操作,则意味着,例如,应使用其串联,模板文字,并使用反引号( ` )进行绘制。

JavaScript代码的词汇结构


让我们谈谈JavaScript代码的构建块。 特别是关于Unicode编码的使用,分号,空格,语言对字符大小写的敏感性,注释,文字,标识符和保留字。

▍Unicode


JavaScript代码使用Unicode编码表示。 尤其是,这意味着在代码中,您可以使用表情符号字符作为变量名。 当然,不建议这样做。 在此很重要的是,标识符的名称必须遵守某些规则 ,并且可以用任何语言(例如日语或中文)书写。

▍分号


JavaScript语法类似于C语法,您可以找到许多项目,其中每一行的末尾都有一个分号。 但是,JavaScript行尾的分号是可选的。 在大多数情况下,您可以不使用分号。 在JS之前使用不使用分号的语言的开发人员倾向于在JavaScript中避免使用它们。

如果在编写代码时不使用奇怪的结构,或者不以括号或方括号开头,那么在99.9%的情况下,您不会犯错(如果有的话,短绒棉袜会警告您可能的错误)。 例如,以“奇怪的设计”为例:

 return variable 

对于每个程序员来说,是否使用分号都是个人的事。 例如,本手册的作者说,他决定不在不需要的地方使用分号,因此,在这里给出的示例中,分号非常罕见。

▍缺口


JavaScript不注意空格。 当然,在某些情况下,缺少空格将导致错误(以及不应包含的不适当空格),但是在程序的特定部分缺少空格与存在一个或多个空格之间通常没有区别。 一个类似的说法不仅适用于空格,而且适用于换行符和制表符。 例如,在缩小的代码上,这尤其明显。 例如,看一下使用Closure Compiler处理的代码变成了什么。

总的来说,应该注意的是,格式化程序代码时,最好不要遵循某些规则。

▍区分大小写


JavaScript是区分大小写的语言。 这意味着它可以区分例如变量somethingSomething的名称。 任何标识符也是如此。

▍评论


您可以在JavaScript中使用两种类型的注释。 第一种是单行注释:

 //   

顾名思义,它们位于一行上。 //字符后的所有内容均视为注释。

第二种是多行注释:

 /*   */ 

在这里,注释是字符/**/组合之间的所有内容。

▍文字和标识符


文字是在程序的源代码中写入的某个值。 例如,它可以是字符串,数字,逻辑值或更复杂的结构-对象文字(允许您创建使用大括号格式化的对象)或数组文字(允许您创建使用方括号格式化的数组)。 以下是一些示例:

 5 'Test' true ['a', 'b'] {color: 'red', shape: 'Rectangle'} 

启动遇到这种结构的程序并不会带来特别的好处。 为了在程序中使用文字,它们首先被分配给变量或传递给函数。

标识符是可以用来标识变量,函数,对象的字符序列。 它可以以字母,美元符号( $ )或下划线( _ )开头,可以包含数字,并在必要时包含诸如表情符号的Unicode字符(尽管如前所述,最好不要这样做)。 以下是一些标识符示例:

 Test test TEST _test Test1 $test 

创建存储对DOM元素的引用的标识符时,通常使用美元符号。

▍保留字


以下是该语言保留的单词列表。 您不能将它们用作标识符。

  • break
  • do
  • instanceof
  • typeof
  • case
  • else
  • new
  • var
  • catch
  • finally
  • return
  • void
  • continue
  • for
  • switch
  • while
  • debugger
  • function
  • this
  • with
  • default
  • if
  • throw
  • delete
  • in
  • try
  • class
  • enum
  • extends
  • super
  • const
  • export
  • import
  • implements
  • let
  • private
  • public
  • interface
  • package
  • protected
  • static
  • yield

总结


今天,我们讨论了用JavaScript编写的程序的样式和结构。 下次,我们将讨论变量,数据类型,表达式和对象。

亲爱的读者们! 您使用什么JavaScript样式指南?

Source: https://habr.com/ru/post/zh-CN429556/


All Articles