Javascript编码规范

### JavaScript编码规范详解 #### 一、前言 本文档主要介绍了JavaScript的编码规范，旨在通过统一的编码标准来提高代码的可读性和可维护性。文档参考了百度fex-team团队制定的相关规范，适用于所有使用JavaScript进行开发的项目。 #### 二、代码风格 ##### 2.1 文件 - **编码格式**：所有的JavaScript文件应采用无BOM的UTF-8编码。UTF-8编码可以确保文件在全球范围内的一致性和兼容性。 - **文件结束**：每个文件的末尾应保留一个空行，这有助于某些编辑器正确地显示文件结尾，并且在进行版本控制时能够更好地处理文件变更。 ##### 2.2 结构 ###### 2.2.1 缩进 - **通用规则**：使用两个空格作为每一级的缩进，这样既简洁又易于阅读。 - **特殊情况**：`switch`语句下的`case`和`default`子句需额外增加一级缩进。例如： ```javascript switch (variable) { case '1': // do something break; case '2': // do something break; default: // do something } ``` 这样的缩进方式使得每个`case`或`default`分支更加清晰，便于理解逻辑结构。 **错误示例**： ```javascript switch (variable) { case '1': // 缩进错误 // do something break; case '2': // 缩进错误 // do something break; default: // 缩进错误 // do something } ``` 此种缩进方式会降低代码的可读性。 ###### 2.2.2 空格 - **运算符两侧**：二元运算符两侧必须有一个空格，而一元运算符与操作对象之间不允许有空格。 - **正确示例**： ```javascript var a = !arr.length; a++; a = b + c; ``` - **错误示例**： ```javascript var a =! arr.length; a ++; a=b+c; ``` - **代码块起始**：用作代码块起始的左花括号`{`前面必须有一个空格。 - **正确示例**： ```javascript if (condition) {} while (condition) {} function funcName() {} ``` - **错误示例**： ```javascript if (condition){} while (condition){} function funcName(){} ``` - **关键字后空格**：`if`、`else`、`for`、`while`、`function`、`switch`、`do`、`try`、`catch`、`finally`等关键字后面必须有一个空格。 - **正确示例**： ```javascript if (condition) {} while (condition) {} (function () {})(); ``` - **错误示例**： ```javascript if(condition) {} while(condition) {} (function() {})(); ``` - **对象属性冒号空格**：在对象创建时，属性中的`:`之后必须有空格，`:`之前不允许有空格。 - **正确示例**： ```javascript var obj = { a: 1, b: 2, c: 3 }; ``` - **错误示例**： ```javascript var obj = { a : 1, b:2, c :3 }; ``` - **函数名与括号间空格**：函数声明、具名函数表达式、函数调用中，函数名和`(`之间不允许有空格。 - **正确示例**： ```javascript function funcName() {} var funcName = function funcName() {}; funcName(); ``` - **错误示例**： ```javascript function funcName () {} var funcName = function funcName () {}; funcName (); ``` - **逗号和分号前后的空格**：逗号`,`前后不允许有空格，而分号`;`前不允许有空格。 - **正确示例**： ```javascript callFunc(a, b); ``` - **错误示例**： ```javascript callFunc(a , b) ; ``` - **括号内空格**：在函数调用、函数声明、括号表达式、属性访问、`if`/`for`/`while`/`switch`/`catch`等语句中，括号内的空格需要遵循特定的规则。 - **正确示例**： ```javascript callFunc(param1, param2, param3); save(this.list[this.indexes[i]]); needIncream && (variable += increament); if (num > list.length) {} while (len--) {} ``` - **错误示例**： ```javascript callFunc( param1, param2, param3 ); save( this.list[ this.indexes[ i ] ] ); needIncreament && ( variable += increament ); if ( num > list.length ) {} while ( len-- ) {} ``` - **单行声明数组与对象的空格**：单行声明的数组与对象，如果包含元素，`{}`和`[]`内紧贴括号部分不允许包含空格。 - **正确示例**： ```javascript var arr1 = [1, 2, 3]; var obj1 = {a: 1, b: 2, c: 3}; ``` - **错误示例**： ```javascript var arr1 = [ 1, 2, 3 ]; var obj1 = { a: 1, b: 2, c: 3 }; ``` 这些规则不仅有助于提高代码的整洁度，还能减少因不一致的编码风格导致的潜在问题。遵循这些规范可以确保项目中的代码风格统一，易于维护。