前端代碼規范 2 · liuyichi

# 前端代碼規范 # 命名規范 ~~~ - 1.組件名遵從駝峰形式，第一個字母大寫 - 2.方法名、參數名、成員變量、局部變量遵從駝峰形式，第一個字母必須小寫 - 3.常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長； - 4.私有方法，方法名前面加下劃線復制代碼 ~~~ # 注釋 ~~~ - 1.公共組件使用說明 - 2.各組件中重要函數或者類說明 - 3.復雜的業務邏輯處理說明 - 4.特殊情況的代碼處理說明,對于代碼中特殊用途的變量、存在臨界值、使用了某種算法或思路等需要進行注釋描述復制代碼 ~~~ # eslint編碼規范 * 使用兩個空格進行縮進。 #### eslint:`indent` ~~~ function hello (name) { console.log('hi', name) } 復制代碼 ~~~ * 除需要轉義的情況外，字符串統一使用單引號。 #### eslint:`quotes` ~~~ console.log('hello there') $("<div class='box'>") 復制代碼 ~~~ * 不要定義未使用的變量。 #### eslint:`no-unused-vars` ~~~ function myFunction () { var result = something() // ? avoid } 復制代碼 ~~~ * 關鍵字后面加空格。 #### eslint:`keyword-spacing` ~~~ if (condition) { ... } // ? ok if(condition) { ... } // ? avoid 復制代碼 ~~~ * 函數聲明時括號與函數名間加空格。 #### eslint:`space-before-function-paren` ~~~ function name (arg) { ... } // ? ok function name(arg) { ... } // ? avoid run(function () { ... }) // ? ok run(function() { ... }) // ? avoid 復制代碼 ~~~ * 始終使用`===`替代`==`。例外：`obj == null`可以用來檢查`null || undefined`。 #### eslint:`eqeqeq` ~~~ if (name === 'John') // ? ok if (name == 'John') // ? avoid if (name !== 'John') // ? ok if (name != 'John') // ? avoid 復制代碼 ~~~ * 字符串拼接操作符 (Infix operators) 之間要留空格。 #### eslint:`space-infix-ops` ~~~ // ? ok var x = 2 var message = 'hello, ' + name + '!' // ? avoid var x=2 var message = 'hello, '+name+'!' 復制代碼 ~~~ * 逗號后面加空格。 #### eslint:`comma-spacing` ~~~ // ? ok var list = [1, 2, 3, 4] function greet (name, options) { ... } // ? avoid var list = [1,2,3,4] function greet (name,options) { ... } 復制代碼 ~~~ * else 關鍵字要與花括號保持在同一行。 #### eslint:`brace-style` ~~~ // ? ok if (condition) { // ... } else { // ... } // ? avoid if (condition) { // ... } else { // ... } 復制代碼 ~~~ * 多行 if 語句的的括號不能省。 #### eslint:`curly` ~~~ // ? ok if (options.quiet !== true) console.log('done') // ? ok if (options.quiet !== true) { console.log('done') } // ? avoid if (options.quiet !== true) console.log('done') 復制代碼 ~~~ * 不要丟掉異常處理中err參數。 #### eslint:`handle-callback-err` ~~~ // ? ok run(function (err) { if (err) throw err window.alert('done') }) // ? avoid run(function (err) { window.alert('done') }) 復制代碼 ~~~ * 使用瀏覽器全局變量時加上 window. 前綴。`Exceptions are: document, console and navigator.` #### eslint:`no-undef` `window.alert('hi') // ? ok` * 不允許有連續多行空行。 #### eslint:`no-multiple-empty-lines` ~~~ // ? ok var value = 'hello world' console.log(value) // ? avoid var value = 'hello world' console.log(value) 復制代碼 ~~~ * 對于三元運算符 ? 和 : 與他們所負責的代碼處于同一行 #### eslint:`operator-linebreak` ~~~ // ? ok var location = env.development ? 'localhost' : 'www.api.com' // ? ok var location = env.development ? 'localhost' : 'www.api.com' // ? avoid var location = env.development ? 'localhost' : 'www.api.com' 復制代碼 ~~~ * 每個 var 關鍵字單獨聲明一個變量。 #### eslint:`one-var` ~~~ // ? ok var silent = true var verbose = true // ? avoid var silent = true, verbose = true // ? avoid var silent = true, verbose = true 復制代碼 ~~~ * 條件語句中賦值語句使用括號包起來。這樣使得代碼更加清晰可讀，而不會認為是將條件判斷語句的全等號（`===`）錯寫成了等號（`=`）。 #### eslint:`no-cond-assign` ~~~ // ? ok while ((m = text.match(expr))) { // ... } // ? avoid while (m = text.match(expr)) { // ... } 復制代碼 ~~~ * 單行代碼塊兩邊加空格。 #### eslint:`block-spacing` ~~~ function foo () {return true} // ? avoid function foo () { return true } // ? ok 復制代碼 ~~~ * 對于變量和函數名統一使用駝峰命名法。 #### eslint:`camelcase` ~~~ function my_function () { } // ? avoid function myFunction () { } // ? ok var my_var = 'hello' // ? avoid var myVar = 'hello' // ? ok 復制代碼 ~~~ * 不允許有多余的行末逗號。 #### eslint:`comma-dangle` ~~~ var obj = { message: 'hello', // ? avoid } 復制代碼 ~~~ * 始終將逗號置于行末。 #### eslint:`comma-style` ~~~ var obj = { foo: 'foo' ,bar: 'bar' // ? avoid } var obj = { foo: 'foo', bar: 'bar' // ? ok } 復制代碼 ~~~ * 點號操作符須與屬性需在同一行。 #### eslint:`dot-location` ~~~ console. log('hello') // ? avoid console .log('hello') // ? ok 復制代碼 ~~~ * 文件末尾留一空行。 ` #### eslint:`eol-last` * 函數調用時標識符與括號間不留間隔。 #### eslint:`func-call-spacing` ~~~ console.log ('hello') // ? avoid console.log('hello') // ? ok 復制代碼 ~~~ * 鍵值對當中冒號與值之間要留空白。 #### eslint:`key-spacing` ~~~ var obj = { 'key' : 'value' } // ? avoid var obj = { 'key' :'value' } // ? avoid var obj = { 'key':'value' } // ? avoid var obj = { 'key': 'value' } // ? ok 復制代碼 ~~~ * 構造函數要以大寫字母開頭。 #### eslint:`new-cap` ~~~ function animal () {} var dog = new animal() // ? avoid function Animal () {} var dog = new Animal() // ? ok 復制代碼 ~~~ * 無參的構造函數調用時要帶上括號。 #### eslint:`new-parens` ~~~ function Animal () {} var dog = new Animal // ? avoid var dog = new Animal() // ? ok 復制代碼 ~~~ * 對象中定義了存值器，一定要對應的定義取值器。 #### eslint:`accessor-pairs` ~~~ var person = { set name (value) { // ? avoid this.name = value } } var person = { set name (value) { this.name = value }, get name () { // ? ok return this.name } } 復制代碼 ~~~ * 子類的構造器中一定要調用 super #### eslint:`constructor-super` ~~~ class Dog { constructor () { super() // ? avoid } } class Dog extends Mammal { constructor () { super() // ? ok } } 復制代碼 ~~~ * 使用數組字面量而不是構造器。 #### eslint:`no-array-constructor` ~~~ var nums = new Array(1, 2, 3) // ? avoid var nums = [1, 2, 3] // ? ok 復制代碼 ~~~ * 避免使用 arguments.callee 和 arguments.caller。 #### eslint:`no-caller` ~~~ function foo (n) { if (n <= 0) return arguments.callee(n - 1) // ? avoid } function foo (n) { if (n <= 0) return foo(n - 1) } 復制代碼 ~~~ * 避免對類名重新賦值。 #### eslint:`no-class-assign` ~~~ class Dog {} Dog = 'Fido' // ? avoid 復制代碼 ~~~ * 避免修改使用 const 聲明的變量。 #### eslint:`no-const-assign` ~~~ const score = 100 score = 125 // ? avoid 復制代碼 ~~~ * 避免使用常量作為條件表達式的條件（循環語句除外）。 #### eslint:`no-constant-condition` ~~~ if (false) { // ? avoid // ... } if (x === 0) { // ? ok // ... } while (true) { // ? ok // ... } 復制代碼 ~~~ * 正則中不要使用控制符。 #### eslint:`no-control-regex` ~~~ var pattern = /\x1f/ // ? avoid var pattern = /\x20/ // ? ok 復制代碼 ~~~ * 不要使用 debugger。 #### eslint:`no-debugger` ~~~ function sum (a, b) { debugger // ? avoid return a + b } 復制代碼 ~~~ * 不要對變量使用 delete 操作。 #### eslint:`no-delete-var` ~~~ var name delete name // ? avoid 復制代碼 ~~~ * 不要定義冗余的函數參數。 #### eslint:`no-dupe-args` ~~~ function sum (a, b, a) { // ? avoid // ... } function sum (a, b, c) { // ? ok // ... } 復制代碼 ~~~ * 類中不要定義冗余的屬性。 #### eslint:`no-dupe-class-members` ~~~ class Dog { bark () {} bark () {} // ? avoid } 復制代碼 ~~~ * 對象字面量中不要定義重復的屬性。 #### eslint:`no-dupe-keys` ~~~ var user = { name: 'Jane Doe', name: 'John Doe' // ? avoid } 復制代碼 ~~~ * switch 語句中不要定義重復的 case 分支。 #### eslint:`no-duplicate-case` ~~~ switch (id) { case 1: // ... case 1: // ? avoid } 復制代碼 ~~~ * 同一模塊有多個導入時一次性寫完。 #### eslint:`no-duplicate-imports` ~~~ import { myFunc1 } from 'module' import { myFunc2 } from 'module' // ? avoid import { myFunc1, myFunc2 } from 'module' // ? ok 復制代碼 ~~~ * 正則中不要使用空字符。 #### eslint:`no-empty-character-class` ~~~ const myRegex = /^abc[]/ // ? avoid const myRegex = /^abc[a-z]/ // ? ok 復制代碼 ~~~ * 不要解構空值。 #### eslint:`no-empty-pattern` ~~~ const { a: {} } = foo // ? avoid const { a: { b } } = foo // ? ok 復制代碼 ~~~ * 不要使用 eval()。 #### eslint:`no-eval` ~~~ eval( "var result = user." + propName ) // ? avoid var result = user[propName] // ? ok 復制代碼 ~~~ * catch 中不要對錯誤重新賦值。 #### eslint:`no-ex-assign` ~~~ try { // ... } catch (e) { e = 'new value' // ? avoid } try { // ... } catch (e) { const newVal = 'new value' // ? ok } 復制代碼 ~~~ * 不要擴展原生對象。 #### eslint:`no-extend-native` ~~~ Object.prototype.age = 21 // ? avoid 復制代碼 ~~~ * 避免多余的函數上下文綁定。 #### eslint:`no-extra-bind` ~~~ const name = function () { getName() }.bind(user) // ? avoid const name = function () { this.getName() }.bind(user) // ? ok 復制代碼 ~~~ * 避免不必要的布爾轉換。 #### eslint:`no-extra-boolean-cast` ~~~ const result = true if (!!result) { // ? avoid // ... } const result = true if (result) { // ? ok // ... } 復制代碼 ~~~ * 不要使用多余的括號包裹函數。 #### eslint:`no-extra-parens` ~~~ const myFunc = (function () { }) // ? avoid const myFunc = function () { } // ? ok 復制代碼 ~~~ * switch 一定要使用 break 來將條件分支正常中斷。 #### eslint:`no-fallthrough` ~~~ switch (filter) { case 1: doSomething() // ? avoid case 2: doSomethingElse() } switch (filter) { case 1: doSomething() break // ? ok case 2: doSomethingElse() } switch (filter) { case 1: doSomething() // fallthrough // ? ok case 2: doSomethingElse() } 復制代碼 ~~~ * 不要省去小數點前面的0。 #### eslint:`no-floating-decimal` ~~~ const discount = .5 // ? avoid const discount = 0.5 // ? ok 復制代碼 ~~~ * 避免對聲明過的函數重新賦值。 #### eslint:`no-func-assign` ~~~ function myFunc () { } myFunc = myOtherFunc // ? avoid 復制代碼 ~~~ \*不要對全局只讀對象重新賦值。 ####eslint:`no-global-assign` ~~~ window = {} // ? avoid 復制代碼 ~~~ * 注意隱式的 eval()。 ####eslint:`no-implied-eval` ~~~ setTimeout("alert('Hello world')") // ? avoid setTimeout(function () { alert('Hello world') }) // ? ok 復制代碼 ~~~ * 嵌套的代碼塊中禁止再定義函數。 #### eslint: `no-inner-declarations` ~~~ if (authenticated) { function setAuthUser () {} // ? avoid } 復制代碼 ~~~ * 不要向 RegExp 構造器傳入非法的正則表達式。 #### eslint: `no-invalid-regexp` ~~~ RegExp('[a-z') // ? avoid RegExp('[a-z]') // ? ok 復制代碼 ~~~ * 不要使用非法的空白符。 #### eslint: `no-irregular-whitespace` `function myFunc () /*<NBSP>*/{} // ? avoid` * 禁止使用 `__iterator__`。 ####eslint: `no-iterator` `Foo.prototype.__iterator__ = function () {} // ? avoid` * 外部變量不要與對象屬性重名。 #### eslint: `no-label-var` ~~~ var score = 100 function game () { score: 50 // ? avoid } 復制代碼 ~~~ * 不要使用標簽語句。 #### eslint: `no-labels` ~~~ label: while (true) { break label // ? avoid } 復制代碼 ~~~ * 不要書寫不必要的嵌套代碼塊。 #### eslint: `no-lone-blocks` ~~~ function myFunc () { { // ? avoid myOtherFunc() } } function myFunc () { myOtherFunc() // ? ok } 復制代碼 ~~~ * 不要混合使用空格與制表符作為縮進。 #### eslint: `no-mixed-spaces-and-tabs` * 除了縮進，不要使用多個空格。 #### eslint: `no-multi-spaces` ~~~ const id = 1234 // ? avoid const id = 1234 // ? ok 復制代碼 ~~~ * 不要使用多行字符串。 #### eslint: `no-multi-str` ~~~ const message = 'Hello \ world' // ? avoid new 創建對象實例后需要賦值給變量。 eslint: no-new new Character() // ? avoid const character = new Character() // ? ok 復制代碼 ~~~ * 禁止使用 Function 構造器。 #### eslint: `no-new-func` `var sum = new Function('a', 'b', 'return a + b') // ? avoid` * 禁止使用 Object 構造器。 #### eslint: `no-new-object` `let config = new Object() // ? avoid` * 禁止使用 new require。 #### eslint: `no-new-require` `const myModule = new require('my-module') // ? avoid` * 禁止使用 Symbol 構造器。 #### eslint: `no-new-symbol` `const foo = new Symbol('foo') // ? avoid` * 禁止使用原始包裝器。 #### eslint: `no-new-wrappers` `const message = new String('hello') // ? avoid` * 不要將全局對象的屬性作為函數調用。 #### eslint: `no-obj-calls` `const math = Math() // ? avoid` * 不要使用八進制字面量。 #### eslint: `no-octal` ~~~ const num = 042 // ? avoid const num = '042' // ? ok 復制代碼 ~~~ * 字符串字面量中也不要使用八進制轉義字符。 #### eslint: `no-octal-escape` `const copyright = 'Copyright \251' // ? avoid` * 使用 `__dirname` 和`__filename` 時盡量避免使用字符串拼接。 #### eslint: `no-path-concat` ~~~ const pathToFile = __dirname + '/app.js' // ? avoid const pathToFile = path.join(__dirname, 'app.js') // ? ok 復制代碼 ~~~ * 使用 getPrototypeOf 來替代 `__proto__`。 #### eslint: `no-proto` ~~~ const foo = obj.__proto__ // ? avoid const foo = Object.getPrototypeOf(obj) // ? ok 復制代碼 ~~~ * 不要重復聲明變量。 #### eslint: `no-redeclare` ~~~ let name = 'John' let name = 'Jane' // ? avoid let name = 'John' name = 'Jane' // ? ok 復制代碼 ~~~ * 正則中避免使用多個空格。 #### eslint: `no-regex-spaces` ~~~ const regexp = /test value/ // ? avoid const regexp = /test {3}value/ // ? ok const regexp = /test value/ // ? ok 復制代碼 ~~~ * return 語句中的賦值必需有括號包裹。 #### eslint: `no-return-assign` ~~~ function sum (a, b) { return result = a + b // ? avoid } function sum (a, b) { return (result = a + b) // ? ok } 復制代碼 ~~~ * 避免將變量賦值給自己。 #### eslint: `no-self-assign` `name = name // ? avoid` * 避免將變量與自己進行比較操作。 #### esint: `no-self-compare` `if (score === score) {} // ? avoid` * 避免使用逗號操作符。 #### eslint: `no-sequences` `if (doSomething(), !!test) {} // ? avoid` * 不要隨意更改關鍵字的值。 #### eslint: `no-shadow-restricted-names` `let undefined = 'value' // ? avoid` * 禁止使用稀疏數組（`Sparse arrays`）。 #### eslint: `no-sparse-arrays` `let fruits = ['apple',, 'orange'] // ? avoid` * 不要使用制表符。 #### eslint: `no-tabs` * 正確使用 ES6 中的字符串模板。 #### eslint: `no-template-curly-in-string` ~~~ const message = 'Hello ${name}' // ? avoid const message = `Hello ${name}` // ? ok 復制代碼 ~~~ * 使用 this 前請確保 super() 已調用。 #### eslint: `no-this-before-super` ~~~ class Dog extends Animal { constructor () { this.legs = 4 // ? avoid super() } } 復制代碼 ~~~ * 用 throw 拋錯時，拋出 Error 對象而不是字符串。 #### eslint: `no-throw-literal` ~~~ throw 'error' // ? avoid throw new Error('error') // ? ok 復制代碼 ~~~ * 行末不留空格。 #### eslint: `no-trailing-spaces` * 不要使用 undefined 來初始化變量。 #### eslint: `no-undef-init` ~~~ let name = undefined // ? avoid let name name = 'value' // ? ok 復制代碼 ~~~ * 循環語句中注意更新循環變量。 #### eslint: `no-unmodified-loop-condition` ~~~ for (let i = 0; i < items.length; j++) {...} // ? avoid for (let i = 0; i < items.length; i++) {...} // ? ok 復制代碼 ~~~ * 如果有更好的實現，盡量不要使用三元表達式。 #### eslint: `no-unneeded-ternary` ~~~ let score = val ? val : 0 // ? avoid let score = val || 0 // ? ok\ 復制代碼 ~~~ * return，throw，continue 和 break 后不要再跟代碼。 ### eslint: `no-unreachable` ~~~ function doSomething () { return true console.log('never called') // ? avoid } 復制代碼 ~~~ * finally 代碼塊中不要再改變程序執行流程。 #### eslint: `no-unsafe-finally` ~~~ try { // ... } catch (e) { // ... } finally { return 42 // ? avoid } 復制代碼 ~~~ * 關系運算符的左值不要做取反操作。 #### eslint: `no-unsafe-negation` `if (!key in obj) {} // ? avoid` * 避免不必要的 .call() 和 .apply()。 #### eslint: `no-useless-call` `sum.call(null, 1, 2, 3) // ? avoid` * 避免使用不必要的計算值作對象屬性。 #### eslint: `no-useless-computed-key` ~~~ const user = { ['name']: 'John Doe' } // ? avoid const user = { name: 'John Doe' } // ? ok 復制代碼 ~~~ * 禁止多余的構造器。 #### eslint: `no-useless-constructor` ~~~ class Car { constructor () { // ? avoid } } 復制代碼 ~~~ * 禁止不必要的轉義。 #### eslint: `no-useless-escape` `let message = 'Hell\o' // ? avoid` * `import`, `export` 和解構操作中，禁止賦值到同名變量。 #### eslint: `no-useless-rename` ~~~ import { config as config } from './config' // ? avoid import { config } from './config' // ? ok 復制代碼 ~~~ * 屬性前面不要加空格。 #### eslint: `no-whitespace-before-property` ~~~ user .name // ? avoid user.name // ? ok 復制代碼 ~~~ * 禁止使用 with。 #### eslint: `no-with` `with (val) {...} // ? avoid` * 對象屬性換行時注意統一代碼風格。 #### eslint: `object-property-newline` ~~~ const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' // ? avoid } const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' } // ? ok const user = { name: 'Jane Doe', age: 30, username: 'jdoe86' } // ? ok 復制代碼 ~~~ * 代碼塊中避免多余留白。 #### eslint: `padded-blocks` ~~~ if (user) { // ? avoid const name = getName() } if (user) { const name = getName() // ? ok } 復制代碼 ~~~ * 展開運算符與它的表達式間不要留空白。 #### eslint: `rest-spread-spacing` ~~~ fn(... args) // ? avoid fn(...args) // ? ok 復制代碼 ~~~ * 遇到分號時空格要后留前不留。 #### eslint: `semi-spacing` ~~~ for (let i = 0 ;i < items.length ;i++) {...} // ? avoid for (let i = 0; i < items.length; i++) {...} // ? ok 復制代碼 ~~~ * 代碼塊首尾留空格。 #### eslint: `space-before-blocks` ~~~ if (admin){...} // ? avoid if (admin) {...} // ? ok 復制代碼 ~~~ * 圓括號間不留空格。 #### eslint: `space-in-parens` ~~~ getName( name ) // ? avoid getName(name) // ? ok 復制代碼 ~~~ * 一元運算符后面跟一個空格。 #### eslint: `space-unary-ops` ~~~ typeof!admin // ? avoid typeof !admin // ? ok 復制代碼 ~~~ * 注釋首尾留空格。 #### eslint: `spaced-comment` ~~~ //comment // ? avoid // comment // ? ok /*comment*/ // ? avoid /* comment */ // ? ok 復制代碼 ~~~ * 模板字符串中變量前后不加空格。 #### eslint: `template-curly-spacing` ~~~ const message = `Hello, ${ name }` // ? avoid const message = `Hello, ${name}` // ? ok 復制代碼 ~~~ * 檢查 NaN 的正確姿勢是使用 isNaN()。 #### eslint: `use-isnan` ~~~ if (price === NaN) { } // ? avoid if (isNaN(price)) { } // ? ok 復制代碼 ~~~ * 用合法的字符串跟 typeof 進行比較操作。 #### eslint: `valid-typeof` ~~~ typeof name === 'undefimed' // ? avoid typeof name === 'undefined' // ? ok 復制代碼 ~~~ * 自調用匿名函數 (IIFEs) 使用括號包裹。 #### eslint: `wrap-iife` ~~~ const getName = function () { }() // ? avoid const getName = (function () { }()) // ? ok const getName = (function () { })() // ? ok 復制代碼 ~~~ * yield \* 中的 \* 前后都要有空格。 #### eslint: `yield-star-spacing` ~~~ yield* increment() // ? avoid yield * increment() // ? ok 復制代碼 ~~~ * 請書寫優雅的條件語句（avoid Yoda conditions）。 #### eslint: `yoda` ~~~ if (42 === age) { } // ? avoid if (age === 42) { } // ? ok 復制代碼 ~~~ * 不要使用分號。 (參見：1，2，3) #### eslint: `semi` ~~~ window.alert('hi') // ? ok window.alert('hi'); // ? avoid 復制代碼 ~~~ * 不要使用 (, \[, or ``` 等作為一行的開始。在沒有分號的情況下代碼壓縮后會導致報錯，而堅持這一規范則可避免出錯。 #### eslint: `no-unexpected-multiline` ~~~ // ? ok ;(function () { window.alert('ok') }()) // ? avoid (function () { window.alert('ok') }()) // ? ok ;[1, 2, 3].forEach(bar) // ? avoid [1, 2, 3].forEach(bar) // ? ok ;`hello`.indexOf('o') // ? avoid `hello`.indexOf('o') 復制代碼 ~~~ > 備注：上面的寫法只能說聰明過頭了。 #### 相比更加可讀易懂的代碼，那些看似投巧的寫法是不可取的。 #### 譬如： `;[1, 2, 3].forEach(bar)` #### 建議的寫法是： ~~~ var nums = [1, 2, 3] nums.forEach(bar) 復制代碼 ~~~ #### 其它 > 控制臺輸出，用完即刪除或注釋原文鏈接：https://juejin.im/post/5d68a8f0e51d45620d2cb930