🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
#### **缩进** * [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。 * [强制] switch 下的 case 和 default 必须增加一个缩进层级。 ``` // good switch (variable) { case '1': // do... break; case '2': // do... break; default: // do... } // bad switch (variable) { case '1': // do... break; case '2': // do... break; default: // do... } ``` #### **空格** * [强制] 二元运算符两侧必须有一个空格,一元运算符与操作对象之间不允许有空格。 ``` let a = !arr.length; a++; a = b + c; ``` * [强制] 用作代码块起始的左花括号 { 前必须有一个空格。 ``` // good if (condition) { } while (condition) { } function funcName() { } // bad if (condition){ } while (condition){ } function funcName(){ } ``` * [强制] if / else / for / while / function / switch / do / try / catch / finally 关键字后,必须有一个空格。 ``` // good if (condition) { } while (condition) { } (function () { })(); // bad if(condition) { } while(condition) { } (function() { })(); ``` * [强制] 在对象创建时,属性中的 : 之后必须有空格,: 之前不允许有空格。 ``` // good var obj = { a: 1, b: 2, c: 3 }; // bad var obj = { a : 1, b:2, c :3 }; ``` * [强制] 函数声明、具名函数表达式、函数调用中,函数名和 ( 之间不允许有空格。 ``` // good function funcName() { } var funcName = function funcName() { }; funcName(); // bad function funcName () { } var funcName = function funcName () { }; funcName (); ``` * [强制] , 和 ; 前不允许有空格。如果不位于行尾,, 和 ; 后必须跟一个空格。 ``` // good callFunc(a, b); // bad callFunc(a , b) ; ``` * [强制] 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中,() 和 [] 内紧贴括号部分不允许有空格。 ``` // good callFunc(param1, param2, param3); save(this.list[this.indexes[i]]); needIncream && (variable += increament); if (num > list.length) { } while (len--) { } // bad callFunc( param1, param2, param3 ); save( this.list[ this.indexes[ i ] ] ); needIncreament && ( variable += increament ); if ( num > list.length ) { } while ( len-- ) { } ``` * [强制] 单行声明的数组与对象,如果包含元素,{} 和 [] 内紧贴括号部分不允许包含空格。 声明包含元素的数组与对象,只有当内部元素的形式较为简单时,才允许写在一行。元素复杂的情况,还是应该换行书写。 ``` // good var arr1 = []; var arr2 = [1, 2, 3]; var obj1 = {}; var obj2 = {name: 'obj'}; var obj3 = { name: 'obj', age: 20, sex: 1 }; // bad var arr1 = [ ]; var arr2 = [ 1, 2, 3 ]; var obj1 = { }; var obj2 = { name: 'obj' }; var obj3 = {name: 'obj', age: 20, sex: 1}; ``` * [强制] 行尾不得有多余的空格。 #### **换行** * [强制] 每个独立语句结束后必须换行。 * [强制] 每行不得超过 120 个字符。 * 超长的不可分割的代码允许例外,比如复杂的正则表达式。长字符串不在例外之列。 * [强制] 运算符处换行时,运算符必须在新行的行首。 ``` // good if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { // Code } var result = number1 + number2 + number3 + number4 + number5; // bad if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin')) { // Code } var result = number1 + number2 + number3 + number4 + number5; ``` * [强制] 在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中,不允许在 , 或 ; 前换行。 ``` // good var obj = { a: 1, b: 2, c: 3 }; foo( aVeryVeryLongArgument, anotherVeryLongArgument, callback ); // bad var obj = { a: 1 , b: 2 , c: 3 }; foo( aVeryVeryLongArgument , anotherVeryLongArgument , callback ); ``` * [建议] 不同行为或逻辑的语句集,使用空行隔开,更易阅读。 ``` // 仅为按逻辑换行的示例,不代表setStyle的最优实现 function setStyle(element, property, value) { if (element == null) { return; } element.style[property] = value; } ``` * [建议] 在语句的行长度超过 120 时,根据逻辑条件合理缩进。 ``` // 较复杂的逻辑条件组合,将每个条件独立一行,逻辑运算符放置在行首进行分隔,或将部分逻辑按逻辑组合进行分隔。 // 建议最终将右括号 ) 与左大括号 { 放在独立一行,保证与 `if` 内语句块能容易视觉辨识。 if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { // Code } // 按一定长度截断字符串,并使用 + 运算符进行连接。 // 分隔字符串尽量按语义进行,如不要在一个完整的名词中间断开。 // 特别的,对于 HTML 片段的拼接,通过缩进,保持和 HTML 相同的结构。 var html = '' // 此处用一个空字符串,以便整个 HTML 片段都在新行严格对齐 + '<article>' + '<h1>Title here</h1>' + '<p>This is a paragraph</p>' + '<footer>Complete</footer>' + '</article>'; // 也可使用数组来进行拼接,相对 `+` 更容易调整缩进。 var html = [ '<article>', '<h1>Title here</h1>', '<p>This is a paragraph</p>', '<footer>Complete</footer>', '</article>' ]; html = html.join(''); // 当参数过多时,将每个参数独立写在一行上,并将结束的右括号 ) 独立一行。 // 所有参数必须增加一个缩进。 foo( aVeryVeryLongArgument, anotherVeryLongArgument, callback ); // 也可以按逻辑对参数进行组合。 // 最经典的是 baidu.format 函数,调用时将参数分为“模板”和“数据”两块 baidu.format( dateFormatTemplate, year, month, date, hour, minute, second ); // 当函数调用时,如果有一个或以上参数跨越多行,应当每一个参数独立一行。 // 这通常出现在匿名函数或者对象初始化等作为参数时,如 `setTimeout` 函数等。 setTimeout( function () { alert('hello'); }, 200 ); order.data.read( 'id=' + me.model.id, function (data) { me.attchToModel(data.result); callback(); }, 300 ); // 链式调用较长时采用缩进进行调整。 $('#items') .find('.selected') .highlight() .end(); // 三元运算符由3部分组成,因此其换行应当根据每个部分的长度不同,形成不同的情况。 var result = thisIsAVeryVeryLongCondition ? resultA : resultB; var result = condition ? thisIsAVeryVeryLongResult : resultB; // 数组和对象初始化的混用,严格按照每个对象的 `{` 和结束 `}` 在独立一行的风格书写。 var array = [ { // ... }, { // ... } ]; ``` * [建议] 对于 if...else...、try...catch...finally 等语句,推荐使用在 } 号后添加一个换行 的风格,使代码层次结构更清晰,阅读性更好。 ``` if (condition) { // some statements; } else { // some statements; } try { // some statements; } catch (ex) { // some statements; } ``` #### **语句** * [强制] 不得省略语句结束的分号。 * [强制] 在 if / else / for / do / while 语句中,即使只有一行,也不得省略块 {...}。 ``` // good if (condition) { callFunc(); } // bad if (condition) callFunc(); if (condition) callFunc(); ``` * [强制] 函数定义结束不允许添加分号。 ``` // good function funcName() { } // bad function funcName() { }; // 如果是函数表达式,分号是不允许省略的。 var funcName = function () { }; ```