关于JavaScript语法规范

JavaScript因为互联网而生，紧随着浏览器的出现而问世。

标识符的命名规范

ECMAScript标识符遵循以下标准命名规则：

第一字符必须是为字母、下划线(_)或者美元符号($)。

其他字符可以是字母、下划线、美元符号或数字，最好不要包含其他字符。

不能把关键字或者保留字作为标识符。

例如下面的代码都是错误的：

var 5count=0; //首字符不能使用数字var yes/no=false; //包含非法字符“/”var undefined="undefined";  //undefined是内建常量关键字123复制代码类型：[javascript]

程序注释

(1)单行注释和尾随注释

使用双斜线“//”可以定义单行注释或尾随注释。

例如下面的代码：

var oDate=new Date();   // 创建新的日期对象// 检查今天是否是星期日if(day=="sun"){
}1234复制代码类型：[javascript]

(2)多行注释

多行注释又被称为块注释，可以使用“/*”和“*/”进行定义，位于注释开始标签“/*”和注释结束标签“*/”之间的任何字符都将被解释为注释并忽略。

例如下面的代码：

/* 本例采用多行的注释方式
*/12复制代码类型：[javascript]

(3)文档注释

文档注释以“/**”开始，以“*/”结束，且每行都以一个星号“*”开头。

例如下面的代码：

/**
  * 该类为文档注释示例类
  * @author pengjunlee
  * @versioin 1.0.0.1
  * @since js 1.5
  */
  function HelloWorld(){}1234567复制代码类型：[javascript]

(4)HTML注释

HTML注释以“”结束。

例如下面的代码：

<!--这里是HTML注释-->1复制代码类型：[javascript]

常用标识符命名方法

(1)驼峰命名法（CamelNotation）

第一个单词首字母小写，其余所有单词首字母大写。变量、函数、方法、属性等基本都采用这种命名方法。

例如下面的定义：

function displayUserInfo(){};var userName;12复制代码类型：[javascript]

(2)帕斯卡名法（PascalNotation）

所有单词首字母大写。经常被用在类、接口的声明中，例如，HelloWorld就可以作为一个类名，而接口名经常在前面加一个大写字母I，例如IHelloWorld。

(3)匈牙利命名法（HungarianNotation）

在标识符前面增加小写字母做前缀，多用于C、C++的标识符命名。其基本规则是：

标识符名称=特性前缀+功能描述

例如变量m_wndStatusBar，前缀m_表示类的成员，wnd也是前缀，表示的是变量对象特性，这里wnd的意义是窗口，所以m_wnd表示窗口类的成员，而StatusBar则是变量的功能描述。

ECMAScript5严格模式

严格模式（StrictMode）是ECMAScript5新增的功能，使用严格模式可以捕捉到一些常见的代码错误，抛出异常。当一些相对来说不安全的操作执行时，使用严格模式可以阻止或者抛出异常。

要在全局范围内使用严格模式，只需在程序第一行定义下面的一行代码：

"use strict";1复制代码类型：[javascript]

要在函数内使用严格模式，只需在函数体内第一行定义下面的一行代码：

function fnInStrictMode(){   "use strict";   //... 其他代码 ...}1234复制代码类型：[javascript]

采用小写驼峰式命名

// goodstudentInfo// badstudentinfo
STUDENTINFO123456复制代码类型：[javascript]

常量命名方式

// goodconst COL_NUM = 10;// badconst col_num = 10;12345复制代码类型：[javascript]

使用字面量

// goodconst obj = { name:'faker'}// badlet obj = {};
obj.name = 'faker';12345678复制代码类型：[javascript]

函数参数使用解构

// goodfunction createPerson({ name, age }) {  // ...}
createPerson({  name: 'Faker',  age: 18,
});// badfunction createPerson(name, age) {  // ...}12345678910111213复制代码类型：[javascript]

使用参数默认值

// goodfunction createMicrobrewery(name = 'faker') {  // ...}// badfunction createMicrobrewery(name) {  const breweryName = name || 'faker';  // ...}12345678910复制代码类型：[javascript]

函数式编程

// goodconst programmerOutput = [
  { name: 'Uncle Bobby', linesOfCode: 500
  }, { name: 'Suzie Q', linesOfCode: 1500
  }, { name: 'Jimmy Gosling', linesOfCode: 150
  }, { name: 'Gracie Hopper', linesOfCode: 1000
  }
];let totalOutput = programmerOutput
  .map(output => output.linesOfCode)
  .reduce((totalLines, lines) => totalLines + lines, 0)// badconst programmerOutput = [
  { name: 'Uncle Bobby', linesOfCode: 500
  }, { name: 'Suzie Q', linesOfCode: 1500
  }, { name: 'Jimmy Gosling', linesOfCode: 150
  }, { name: 'Gracie Hopper', linesOfCode: 1000
  }
];let totalOutput = 0;for (let i = 0; i < programmerOutput.length; i++) {
 totalOutput += programmerOutput[i].linesOfCode;
}123456789101112131415161718192021222324252627282930313233343536373839404142复制代码类型：[javascript]

缩进

统一使用一个tab作为缩进

空格

二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。

用作代码块起始的左花括号{前必须有一个空格。

// goodvar a = !arr.length;
a++;
a = b + c;// goodif (condition) {
}while (condition) {
}function funcName() {
}// badif (condition){
}while (condition){
}function funcName(){
}123456789101112131415161718192021222324复制代码类型：[javascript]

禁止使用var，使用let、const代替

// goodlet a = 123;// badvar a = 123;12345复制代码类型：[javascript]

js中使用单引号'，在dom中使用双引号"

// goodconst str = '我是一个字符串';<div className="div" />// badconst str = "我是一个字符串";<div className='div' />1234567复制代码类型：[javascript]

使用模板字符拼接字符串``

// goodconst name = 'faker';const str = `我叫${a}`;// badconst name = 'faker';const str = '我叫' + a;1234567复制代码类型：[javascript]

变量命名语义化

// goodconst student = 'faker';// badconst a = 'faker';12345复制代码类型：[javascript]

注释

单行注释：必须独占一行。//后跟一个空格，缩进与下一行被注释说明的代码一致

多行注释：避免使用/.../这样的多行注释。有多行注释内容时，使用多个单行注释

文档化注释：为了便于代码阅读和自文档化，以下内容必须包含以/*.../形式的块注释中。

每个js文件在头部需要给出该页面的信息

// good/*
 * 充值记录页面
 * @Author: Jiang
 * @Date: 2019-06-12 15:21:19
 * @Last Modified by: Jiang
 * @Last Modified time: 2019-07-23 10:55:51
*/// bad无任何注释1234567891011复制代码类型：[javascript]

不要省略分号

// goodconst student = 'faker';// badconst student = 'faker'12345复制代码类型：[javascript]

外链式注意点

外链式的script代码块中不能编写js代码,即便写了也不会执行

由于每次加载外链式的js文件都会发送一次请求,这样非常消耗性能,所以在企业开发中推荐将多个JS文件打包成为一个JS文件,以提升网页的性能和加载速度。

页内式注意点

<script></script>标签中的js代码一半写在文档的尾部；

网页是从上至下加载,而js代码通常是给标签添加交互(操作元素),所以需要先加载HTML,否则如果执行js代码时HTML还未被加载,那么js代码将无法添加交互(操作元素);

HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续。所以如果把js代码如果写在head中,那么js代码执行完毕之前后续网页无法被加载。

行内式

<button onclick="alert('今天天气很好！');">今天天气很好！</button>1复制代码类型：[javascript]

页内式

</body>
   ......  <script type="text/javascript">
  alert("今天天气很好！");  </script>
 </body>1234复制代码类型：[javascript]

外链式格式

<script type="text/javascript" src="01-js书写格式.js"></script>1复制代码类型：[javascript]
<script type="text/javascript" src="index.js">
   alert("今天天气很好！"); // 不会被执行
 </script>1234复制代码类型：[javascript]

严格模式仅仅是使用一行文本字符串声明来实现，所以对于旧的不支持严格模式的浏览器来说不存在兼容性问题，因此可以放心大胆地使用。

赞 (0)

相关推荐