前端编码规范之JavaScript规范

JS文件名称规范

使用小写英文、-（-不能开头）组合成文件名。

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.js 不能通过 London.js 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.js 可以通过 London.js 或 london.js 访问。

你必须保持统一的风格，建议统一使用小写的文件名。

JS文件后缀规范

统一使用.js为文件后缀。压缩文件以.min.js为文件后缀。如有版本，需加上版本号，如：js-name-1.9.0.js。

JS格式规范

缩进：用两个空格来代替制表符（tab）。

这是唯一能保证在所有环境下获得一致展现的方法。（包含HTML和css）

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格

– Example –

-js// 不推荐var tax=0.20;var price=0.20+(10*10);// 推荐var tax = 0.20;var price = 0.20 + (10 * 10);

语句规则

始终使用;结束一行声明语句。}后面不要跟;

– Example –

-js// 不推荐var tax = 0.20function fnName() {var price = 1}// 推荐var tax = 0.20;function fnName() {var price = 1;}

对于数组和对象不要使用多余的,（兼容IE）。

– Example –

-js// 不推荐var arr = [1,2,];var person = {name: 'name',age: 20,}// 推荐var arr = [1, 2];var person = {name: 'name',age: 20}

,前不要空格，,后需空格。

– Example –

-js// 不推荐var arr = [1,2,];var person = {name: 'name',age: 20,}// 推荐var arr = [1, 2];var person = {name: 'name',age: 20}

推荐行末,，不推荐行首,。

– Example –

-js// 不推荐var foo = 1, bar = 2, baz = 3;var obj = {foo: 1, bar: 2, baz: 3}// 推荐var foo = 1,bar = 2,baz = 3;var obj = {foo: 1,bar: 2,baz: 3}

{前添加一空格，{后需换行，}独占一行

– Example –

-js// 不推荐function fnName(){var price = 1;}function fnName(){var price = 1;}function fnName(){var price = 1;}// 推荐function fnName() {var price = 1;}

:前不要空格，:后需空格

– Example –

-js// 不推荐var obj = {foo:1,bar:2,baz:3}// 推荐var obj = {foo: 1,bar: 2,baz: 3}

语句结构中的代码块要进行Tab缩进。

– Example –

-js// 不推荐if(true) {var price = 10;}function fnName(){var price = 1;}// 推荐if(true) {var price = 10;}function fnName() {var price = 1;}

参数与括号间是否有空格

参数与括号之间不要空格。

参数与参数之间,前不要空格，,后需空一格。

– Example –

-js// 不推荐function fn( arg1, arg2 ) {// ...}if ( true ) {// ...}// 推荐function fn(arg1, arg2) {// ...}if(true) {// ...}

每行代码字符小于 80

为了便于阅读每行字符建议小于数 80 个，

建议在 运算符、逗号或者括号后换行;

运算符处换行时，运算符必须在新行的行首

– Example –

-jsdocument.getElementById("demo").innerHTML = "Hello W3Cschool.";var result = number1 + number2 + number3+ number4 + number5;

不同行为或逻辑的语句集，使用空行隔开

易于阅读。

变量名

建议：尽量在变量名字中体现所属类型，如:length、count等表示数字类型；而包含name、title表示为字符串类型。

区分大小写，允许包含字母、数字、美元符号($)和下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；长度应该尽可能的短，并抓住要点，尽量在变量名中体现出值的类型；命名应该是有意义的，看命知其意；不能为JavaScript中的关键词、保留字全名；切勿使用拼音，拼音首字母缩写；前缀应当是名词建议使用驼峰命名；全局变量为大写；

– Example –

-js// 不推荐var jiage = 10;var 1jiage = 10;var jia-ge = 10;// 推荐var price = 10;var intPrice = 10;

常量名

常量 (如 PI) 为大写，多单词以_隔开；

– Example –

-js// 不推荐const max_count = 10;const maxCount = 10;// 推荐const MAX_COUNT = 10;

let 和 var

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。

在函数外声明的变量作用域是全局的：全局变量在 JavaScript 程序的任何地方都可以访问。

在函数内声明的变量作用域是局部的（函数内）：函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量。

JavaScript 块级作用域(Block Scope)

使用 var 关键字声明的变量，不具备块级作用域的特性，它在 {} 外依然能被访问到。

使用 let 关键字声明的变量，只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问。

– Example –

-js{var x = 2; }// 这里可以使用 x 变量//------------------------------------------------{let x = 2;}// 这里不能使用 x 变量

重新定义变量

使用 var 关键字声明的变量，在块中重新声明变量也会重新声明块外的变量：

使用 let 关键字声明的变量，只在 let 命令所在的代码块 {} 内有效。

– Example –

-jsvar x = 10;// 这里输出 x 为 10{var x = 2;// 这里输出 x 为 2}// 这里输出 x 为 2//------------------------------------------------var x = 10;// 这里输出 x 为 10{let x = 2;// 这里输出 x 为 2}// 这里输出 x 为 10

循环作用域

使用 var 关键字声明的变量，它声明的变量是全局的，包括循环体内与循环体外：

使用 let 关键字声明的变量，变量作用域只在循环体内，循环体外的变量不受影响。

– Example –

-jsvar i = 5;for (var i = 0; i < 10; i++) {// 一些代码...}// 这里输出 i 为 10//------------------------------------------------let i = 5;for (let i = 0; i < 10; i++) {// 一些代码...}// 这里输出 i 为 5

在函数体内使用 var 和 let 关键字声明的变量，作用域都是局部的。

在函数体外或代码块外使用 var 和 let 关键字声明的变量，作用域都是全局的。

const 关键字

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。

使用 const 定义的对象或者数组，其实是可变的。

– Example –

-js// 创建常量对象const car = {type:"Fiat", model:"500", color:"white"};// 修改属性:car.color = "red";// 添加属性car.owner = "Johnson";// 创建常量数组const cars = ["Saab", "Volvo", "BMW"];// 修改元素cars[0] = "Toyota";// 添加元素cars.push("Audi");//------------------------------------------------// 但是我们不能对常量对象重新赋值const car = {type:"Fiat", model:"500", color:"white"};car = {type:"Volvo", model:"EX60", color:"red"};// 错误const cars = ["Saab", "Volvo", "BMW"];cars = ["Toyota", "Volvo", "Audi"];// 错误

函数名

区分大小写，允许包含字母、数字、下划线，但第一个字符不允许是数字，不允许包含空格和其他标点符号；

长度应该尽可能的短，并抓住要点，尽量在函数名中体现出函数的功能；

不能为JavaScript中的关键词、保留字全名；

切勿使用拼音，拼音首字母缩写；

建议使用驼峰命名；

前缀应当为动词；

函数名常用的动词:

字符串

统一使用单引号，不要使用双引号。

– Example –

-js// 不推荐var str = "字符串";var str = "<div id='test'></div>";// 推荐var str = '字符串';var str = '<div id="test"></div>';

使用 数组 或 + 拼接字符串

– Example –

-js// 使用数组拼接字符串var str = [// 推荐换行开始并缩进开始第一个字符串, 对齐代码, 方便阅读.'<ul>','<li>第一项</li>','<li>第二项</li>','</ul>'].join('');// 使用 `+` 拼接字符串var str2 = '' // 建议第一个为空字符串, 第二个换行开始并缩进开始, 对齐代码, 方便阅读+ '<ul>',+ '<li>第一项</li>',+ '<li>第二项</li>',+ '</ul>';

注释

单行注释。

//后需空一格

多行注释。

/**开头并独占一行，*/结束并独占一行，*在同一列对齐;

如果是注释函数，需注明函数功能、参数介绍（@param）、返回参数（@return）

– Example –

-js/*** @param {Object} len*/function fn(len) {// ...}

代码注释。

– Example –

-js/**function fn(len) {}*/

文档化注释。

文档注释前必须空一行。

自文档化的文档说明 what，而不是 how。

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

文件（@file/@author/@DateTime）namespace（@namespace ）类（@class）函数或方法（@param/@return/@type）类属性（@public/@protected/@private）事件（@event）全局变量（@var/@type）常量（@const/@type）AMD 模块（@module/@exports）

用 TODO 来标记待办事项。

完成后必须删除。

VSCode可下载TODO Highlight（TODO高亮）、Todo Tree（TODO树）两个扩展插件。

对象声明

使用字面值创建对象。

– Example –

-js// 不推荐let user = new Object();// 推荐let user = {}

使用字面量来代替对象构造器。

– Example –

-js// 不推荐var user = new Object();user.age = 0;user.name = 0;user.city = 0;// 推荐var user = {age: 0,name: 1,city: 3}

对象创建时，如果一个对象的所有 属性 均可以不添加引号，建议所有 属性 不添加引号。

– Example –

-js// 不推荐var info = {name: 'someone','age': 28}// 推荐var info = {name: 'someone',age: 28}

对象创建时，如果任何一个 属性 需要添加引号，则所有 属性 建议添加'。

– Example –

-js// 不推荐var info = {name: 'someone','user-token': ''}// 推荐var info = {'name': 'someone','user-token': ''}

数组声明

使用字面值创建数组。

– Example –

-js// 不推荐var arr = new Array();// 推荐var arr = [];

关于空行

不要无缘无故添加空行。为每个逻辑功能块添加空行，这样更易于阅读。比较短的代码间不要使用不必要的空行和缩进。

使用 ES6,7

优先使用 ES6,7 中新增的语法糖和函数。比如箭头函数、await/async ， 解构， let ， for…of 等等

undefined判断

不要直接使用undefined进行变量判断；使用typeof和字符串undefined对变量进行判断。

– Example –

-js// 不推荐if (typeof person === 'undefined') {// ...}// 推荐if (person === undefined) {// ...}

条件判断和循环最多三层

条件判断能使用三元运算符和逻辑运算符解决的，就不要使用条件判断；

循环嵌套不能超过3层。

this 的转换命名

建议使用_self来转换命名

– Example –

-js// 不推荐var a = this// 推荐var _self = this

慎用 console.log

调试完，一定要删除日志输出。

禁止正式版运行时有日志输出。

尽可能使用简洁的表达式

– Example –

-js// 字符串为空// 推荐if (!name) {// ......}// 不推荐if (name === '') {// ......}// -----------------------------------------// 字符串非空// 推荐if (name) {// ......}// 不推荐if (name !== '') {// ......}// -----------------------------------------// 数组非空// 推荐if (collection.length) {// ......}// 不推荐if (collection.length > 0) {// ......}// -----------------------------------------// 布尔不成立// 推荐if (!notTrue) {// ......}// 不推荐if (notTrue === false) {// ......}// -----------------------------------------// null 或 undefined// 推荐if (typeof noValue === 'undefined') {// ......}// 不推荐if (noValue === undefined) {// ......}