您好,登錄后才能下訂單哦!
這篇文章主要介紹了Javascript中編碼規(guī)范是什么,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
命名規(guī)范
標(biāo)準(zhǔn)變量采用駝峰式命名
‘ID’在變量名中全大寫
常量全大寫,用下劃線連接構(gòu)造函數(shù),大寫第一個(gè)字母
jquery對(duì)象必須以’$’開頭命名
let thisIsMyName; let goodID; let reportURL; let AndroidVersion; let iOSVersion; let MAX_COUNT = 10; function Person(name) { this.name = name; } // not good let body = $('body'); // good let $body = $('body');
局部變量命名規(guī)范
s:表示字符串。例如:sName,sHtml;
n:表示數(shù)字。例如:nPage,nTotal;
b:表示邏輯。例如:bChecked,bHasLogin;
a:表示數(shù)組。例如:aList,aGroup;
r:表示正則表達(dá)式。例如:rDomain,rEmail;
f:表示函數(shù)。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他對(duì)象,例如:oButton,oDate;
函數(shù)命名
小駝峰命名法,可使用常見動(dòng)詞約定:
can 判斷是否可執(zhí)行某個(gè)動(dòng)作,函數(shù)返回一個(gè)布爾值。true:可執(zhí)行;false:不可執(zhí)行
has 判斷是否含有某個(gè)值, 函數(shù)返回一個(gè)布爾值。true:含有此值;false:不含有此值
is 判斷是否為某個(gè)值,函數(shù)返回一個(gè)布爾值。true:為某個(gè)值;false:不為某個(gè)值
get 獲取某個(gè)之,函數(shù)返回一個(gè)非布爾值
set 設(shè)置某個(gè)值,無返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄?duì)象load 加載某些數(shù)據(jù),無返回值或者返回是否加載完成的結(jié)果
// 是否可閱讀 function canRead() { return true; } // 獲取名稱 function getName() { return this.name; }
引用 References
對(duì)所有的引用使用 const ;不要使用 var。
eslint: prefer-const, no-const-assign
這可以確保你無法對(duì)引用重新分配,重新分配可能會(huì)導(dǎo)致 bug 和難以理解的代碼。
// bad var a = 1; var b = 2; // good const a = 1; const b = 2;
eslint: no-var jscs: disallowVar
// bad var count = 1; if (true) { count += 1; } // good, 使用 let. let count = 1; if (true) { count += 1; }
eslint: no-new-object
// bad const item = new Object(); // good const item = {};
它們?cè)试S你在一個(gè)地方定義一個(gè)對(duì)象的所有屬性。
function getKey(k) { return `a key named k`; } // bad const obj = { id: 5, name: 'San Francisco', }; obj[getKey('enabled')] = true; // good const obj = { id: 5, name: 'San Francisco', [getKey('enabled')]: true, };
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
eslint: object-shorthand jscs: requireEnhancedObjectLiterals
const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, };
更容易看出哪些屬性在使用速記語(yǔ)法
const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { episodeOne: 1, twoJediWalkIntoACantina: 2, lukeSkywalker, episodeThree: 3, mayTheFourth: 4, anakinSkywalker, }; // good const obj = { lukeSkywalker, anakinSkywalker, episodeOne: 1, twoJediWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4, };
eslint: quote-props jscs: disallowQuotedKeysInObjects
一般來說,我們認(rèn)為比較容易閱讀。它改進(jìn)了語(yǔ)法高亮顯示,并且更容易被許多JS引擎優(yōu)化。
// bad const bad = { 'foo': 3, 'bar': 4, 'data-blah': 5, }; // good const good = { foo: 3, bar: 4, 'data-blah': 5, };
// very bad const original = { a: 1, b: 2 }; const copy = Object.assign(original, { c: 3 }); // `original` 是可變的 ?_? delete copy.a; // so does this // bad const original = { a: 1, b: 2 }; const copy = Object.assign({}, original, { c: 3 }); // copy => { a: 1, b: 2, c: 3 } // good const original = { a: 1, b: 2 }; const copy = { ...original, c: 3 }; // copy => { a: 1, b: 2, c: 3 } const { a, ...noA } = copy; // noA => { b: 2, c: 3 }
eslint: no-array-constructor
// bad const items = new Array(); // good const items = [];
// bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i += 1) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items];
const foo = document.querySelectorAll('.foo'); // good const nodes = Array.from(foo); // best const nodes = [...foo];
// bad const baz = [...foo].map(bar); // good const baz = Array.from(foo, bar);
eslint: prefer-destructuring jscs: requireObjectDestructuring
// bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return `firstName lastName`; } // good function getFullName(user) { const { firstName, lastName } = user; return `firstName lastName`; } // best function getFullName({ firstName, lastName }) { return `firstName lastName`; }
eslint: prefer-destructuring jscs: requireArrayDestructuring
const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr;
您可以隨著時(shí)間的推移添加新的屬性或更改排序,而不會(huì)改變調(diào)用時(shí)的位置。
// bad function processInput(input) { return [left, right, top, bottom]; } // 調(diào)用者需要考慮返回?cái)?shù)據(jù)的順序 const [left, __, top] = processInput(input); // good function processInput(input) { return { left, right, top, bottom }; } // 調(diào)用者只選擇他們需要的數(shù)據(jù) const { left, top } = processInput(input);
eslint: quotes jscs: validateQuoteMarks
// bad const name = "Capt. Janeway"; // bad - 模板字面量應(yīng)該包含插值或換行符 const name = `Capt. Janeway`; // good const name = 'Capt. Janeway';
eslint: prefer-template template-curly-spacing jscs: requireTemplateStrings
/ bad function sayHi(name) { return 'How are you, ' + name + '?'; } // bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } // bad function sayHi(name) { return `How are you, ${ name }?`; } // good function sayHi(name) { return `How are you, name?`; }
eslint: no-eval
eslint: func-style jscs: disallowFunctionDeclarations
函數(shù)聲明很容易被提升(Hoisting),這對(duì)可讀性和可維護(hù)性來說都是不利的;
/ bad function foo() { // ... } // bad const foo = function () { // ... }; // good // 用明顯區(qū)別于變量引用調(diào)用的詞匯命名 const short = function longUniqueMoreDescriptiveLexicalFoo() { // ... };
eslint: wrap-iife jscs: requireParenthesesAroundIIFE
一個(gè)立即調(diào)用函數(shù)表達(dá)式是一個(gè)單獨(dú)的單元 – 將函數(shù)表達(dá)式包裹在括號(hào)中,后面再跟一個(gè)調(diào)用括號(hào),這看上去很緊湊。
// 立即調(diào)用函數(shù)表達(dá)式 (IIFE) (function () { console.log('Welcome to the Internet. Please follow me.'); }());
使用 … 能明確你要傳入的參數(shù)。另外 rest(剩余)參數(shù)是一個(gè)真正的數(shù)組,而 arguments 是一個(gè)類數(shù)組(Array-like)。
// bad function concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join(''); } // good function concatenateAll(...args) { return args.join(''); }
// really bad function handleThings(opts) { // 更加糟糕: 如果參數(shù) opts 是 falsy(假值) 的話,它將被設(shè)置為一個(gè)對(duì)象, // 這可能是你想要的,但它可以引起一些小的錯(cuò)誤。 opts = opts || {}; // ... } // still bad function handleThings(opts) { if (opts === void 0) { opts = {}; } // ... } // good function handleThings(opts = {}) { // ... }
// bad function handleThings(opts = {}, name) { // ... } // good function handleThings(name, opts = {}) { // ... }
// bad const f = function(){}; const g = function (){}; const h = function() {}; // good const x = function () {}; const y = function a() {};
eslint: no-param-reassign
操作作為參數(shù)傳入的對(duì)象,可能會(huì)在調(diào)用原始對(duì)象時(shí)造成不必要的變量副作用。(對(duì)象是引用類型)
// bad function f1(obj) { obj.key = 1; } // good function f2(obj) { const key = Object.prototype.hasOwnProperty.call(obj, 'key') ? obj.key : 1; }
eslint: prefer-arrow-callback, arrow-spacing jscs: requireArrowFunctions
它創(chuàng)建了一個(gè)在 this 上下文中執(zhí)行的函數(shù)的版本,這通常是你想要的,而且這樣的寫法更為簡(jiǎn)潔。
// bad [1, 2, 3].map(function (x) { const y = x + 1; return x * y; }); // bad [1, 2, 3].map( _ => { return 0; }); // good [1, 2, 3].map((x) => { const y = x + 1; return x * y; }); // good [1, 2, 3].map(() => { return 0; });
// bad [1, 2, 3].map(number => { const nextNumber = number + 1; return `A string containing the nextNumber.`; }); // good [1, 2, 3].map(number => `A string containing the number.`);
// bad ['get', 'post', 'put'].map(httpMethod => Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, ) ); // good ['get', 'post', 'put'].map(httpMethod => ( Object.prototype.hasOwnProperty.call( httpMagicObjectWithAVeryLongName, httpMethod, ) ));
// bad [1, 2, 3].map((x) => x * x); // good [1, 2, 3].map(x => x * x); // good [1, 2, 3].map(number => ( `A long string with the number. It’s so long that we don’t want it to take up space on the .map line!` )); // 總是添加() // bad [1, 2, 3].map(x => { const y = x + 1; return x * y; }); // good [1, 2, 3].map((x) => { const y = x + 1; return x * y; });
// bad const itemHeight = item => item.height > 256 ? item.largeSize : item.smallSize; // bad const itemHeight = (item) => item.height > 256 ? item.largeSize : item.smallSize; // good const itemHeight = item => (item.height > 256 ? item.largeSize : item.smallSize); // good const itemHeight = (item) => { const { height, largeSize, smallSize } = item; return height > 256 ? largeSize : smallSize; };
// bad function Queue(contents = []) { this.queue = [...contents]; } Queue.prototype.pop = function () { const value = this.queue[0]; this.queue.splice(0, 1); return value; }; // good class Queue { constructor(contents = []) { this.queue = [...contents]; } pop() { const value = this.queue[0]; this.queue.splice(0, 1); return value; } }
因?yàn)?extends 是一個(gè)內(nèi)置的原型繼承方法并且不會(huì)破壞 instanceof。
// bad const inherits = require('inherits'); function PeekableQueue(contents) { Queue.apply(this, contents); } inherits(PeekableQueue, Queue); PeekableQueue.prototype.peek = function () { return this.queue[0]; }; // good class PeekableQueue extends Queue { peek() { return this.queue[0]; } }
eslint: no-useless-constructor
// bad class Jedi { constructor() {} getName() { return this.name; } } // bad class Rey extends Jedi { constructor(...args) { super(...args); } } // good class Rey extends Jedi { constructor(...args) { super(...args); this.name = 'Rey'; } }
eslint: no-dupe-class-members
// bad class Foo { bar() { return 1; } bar() { return 2; } } // good class Foo { bar() { return 1; } } // good class Foo { bar() { return 2; } }
// bad const AirbnbStyleGuide = require('./AirbnbStyleGuide'); module.exports = AirbnbStyleGuide.es6; // ok import AirbnbStyleGuide from './AirbnbStyleGuide'; export default AirbnbStyleGuide.es6; // best import { es6 } from './AirbnbStyleGuide'; export default es6;
這樣能確保你只有一個(gè)默認(rèn) export(導(dǎo)出)。
// bad import * as AirbnbStyleGuide from './AirbnbStyleGuide'; // good import AirbnbStyleGuide from './AirbnbStyleGuide';
雖然一行代碼簡(jiǎn)潔明了,但有一個(gè)明確的 import(導(dǎo)入) 方法和一個(gè)明確的 export(導(dǎo)出) 方法,使事情能保持一致。
// bad // filename es6.js export { es6 as default } from './AirbnbStyleGuide'; // good // filename es6.js import { es6 } from './AirbnbStyleGuide'; export default es6;
// bad import foo from 'foo'; // … 其他一些 imports … // import { named1, named2 } from 'foo'; // good import foo, { named1, named2 } from 'foo'; // good import foo, { named1, named2, } from 'foo';
eslint: import/no-mutable-exports
一般應(yīng)該避免可變性,特別是在導(dǎo)出可變綁定時(shí)。雖然一些特殊情況下,可能需要這種技術(shù),但是一般而言,只應(yīng)該導(dǎo)出常量引用。
// bad let foo = 3; export { foo }; // good const foo = 3; export { foo };
eslint: import/prefer-default-export
為了鼓勵(lì)更多的文件只有一個(gè) export(導(dǎo)出),這有利于模塊的可讀性和可維護(hù)性。
// bad export function foo() {} // good export default function foo() {}
eslint: import/first
由于 import 被提升,保持他們?cè)陧敳?,防止意外的行為?/blockquote>// bad import foo from 'foo'; foo.init(); import bar from 'bar'; // good import foo from 'foo'; import bar from 'bar'; foo.init();多行導(dǎo)入應(yīng)該像多行數(shù)組和對(duì)象字面量一樣進(jìn)行縮進(jìn)。
// bad import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path'; // good import { longNameA, longNameB, longNameC, longNameD, longNameE, } from 'path';屬性 Properties
使用 點(diǎn)語(yǔ)法(.) 來訪問對(duì)象的屬性。
eslint: dot-notation jscs: requireDotNotation
const luke = { jedi: true, age: 28, }; // bad const isJedi = luke['jedi']; // good const isJedi = luke.jedi;當(dāng)通過變量訪問屬性時(shí)使用中括號(hào) []。
const luke = { jedi: true, age: 28, }; function getProp(prop) { return luke[prop]; } const isJedi = getProp('jedi');求冪時(shí)使用求冪運(yùn)算符 ** 。
eslint: no-restricted-properties.
// bad const binary = Math.pow(2, 10); // good const binary = 2 ** 10;變量 Variables
總是使用 const 或 let 來聲明變量。 不這樣做會(huì)導(dǎo)致產(chǎn)生全局變量。 我們希望避免污染全局命名空間。
eslint: no-undef prefer-const
// bad superPower = new SuperPower(); // good const superPower = new SuperPower();將所有的 const 和 let 分組 。
當(dāng)你需要把已分配的變量分配給一個(gè)變量時(shí)非常有用// bad let i, len, dragonball, items = getItems(), goSportsTeam = true; // bad let i; const items = getItems(); let dragonball; const goSportsTeam = true; let len; // good const goSportsTeam = true; const items = getItems(); let dragonball; let i; let length;變量不要鏈?zhǔn)劫x值。
eslint: no-multi-assign
鏈接變量賦值會(huì)創(chuàng)建隱式全局變量。// bad (function example() { // JavaScript 將其解析為 // let a = ( b = ( c = 1 ) ); // let關(guān)鍵字只適用于變量a; // 變量b和c變成了全局變量。 let a = b = c = 1; }()); console.log(a); // 拋出 ReferenceError(引用錯(cuò)誤) console.log(b); // 1 console.log(c); // 1 // good (function example() { let a = 1; let b = a; let c = a; }()); console.log(a); // 拋出 ReferenceError(引用錯(cuò)誤) console.log(b); // 拋出 ReferenceError(引用錯(cuò)誤) console.log(c); // 拋出 ReferenceError(引用錯(cuò)誤) // 同樣適用于 `const`避免使用一元遞增和遞減運(yùn)算符(++, –)。
根據(jù) eslint 文檔,一元遞增和遞減語(yǔ)句會(huì)受到自動(dòng)插入分號(hào)的影響,并可能導(dǎo)致應(yīng)用程序中的值遞增或遞減,從而導(dǎo)致無提示錯(cuò)誤。使用像 num += 1 而不是 num++ 或 num ++ 這樣的語(yǔ)句來改變你的值也更具有表現(xiàn)力。不允許一元遞增和遞減語(yǔ)句也會(huì)阻止您無意中預(yù)先遞增/遞減值,這也會(huì)導(dǎo)致程序中的意外行為。// bad const array = [1, 2, 3]; let num = 1; num++; --num; let sum = 0; let truthyCount = 0; for (let i = 0; i < array.length; i++) { let value = array[i]; sum += value; if (value) { truthyCount++; } } // good const array = [1, 2, 3]; let num = 1; num += 1; num -= 1; const sum = array.reduce((a, b) => a + b, 0); const truthyCount = array.filter(Boolean).length;比較運(yùn)算符 Comparison Operators 和 等號(hào) Equality
使用 === 和 !== 優(yōu)先于 == 和 !=。
eslint: eqeqeq
對(duì)于布爾值使用簡(jiǎn)寫,但對(duì)于字符串和數(shù)字使用顯式比較。
// bad if (isValid === true) { // ... } // good if (isValid) { // ... } // bad if (name) { // ... } // good if (name !== '') { // ... } // bad if (collection.length) { // ... } // good if (collection.length > 0) { // ... }在 case 和 default 子句中,使用大括號(hào)來創(chuàng)建包含詞法聲明的語(yǔ)句塊(例如 let, const, function, 和 class).
eslint: no-case-declarations
// bad switch (foo) { case 1: let x = 1; break; case 2: const y = 2; break; case 3: function f() { // ... } break; default: class C {} } // good switch (foo) { case 1: { let x = 1; break; } case 2: { const y = 2; break; } case 3: { function f() { // ... } break; } case 4: bar(); break; default: { class C {} } }三元表達(dá)式不應(yīng)該嵌套,通常寫成單行表達(dá)式。
eslint: no-nested-ternary
// bad const foo = maybe1 > maybe2 ? "bar" : value1 > value2 ? "baz" : null; // 拆分成2個(gè)分離的三元表達(dá)式 const maybeNull = value1 > value2 ? 'baz' : null; // better const foo = maybe1 > maybe2 ? 'bar' : maybeNull; // best const foo = maybe1 > maybe2 ? 'bar' : maybeNull;避免不必要的三元表達(dá)式語(yǔ)句。
eslint: no-unneeded-ternary
/ bad const foo = a ? a : b; const bar = c ? true : false; const baz = c ? false : true; // good const foo = a || b; const bar = !!c; const baz = !c;當(dāng)運(yùn)算符混合在一個(gè)語(yǔ)句中時(shí),請(qǐng)將其放在括號(hào)內(nèi)。混合算術(shù)運(yùn)算符時(shí),不要將 * 和 % 與 + , -,,/ 混合在一起。
eslint: no-mixed-operators
這可以提高可讀性,并清晰展現(xiàn)開發(fā)者的意圖。/ bad const foo = a && b < 0 || c > 0 || d + 1 === 0; // bad const bar = a ** b - 5 % d; // bad if (a || b && c) { return d; } // good const foo = (a && b < 0) || c > 0 || (d + 1 === 0); // good const bar = (a ** b) - (5 % d); // good if ((a || b) && c) { return d; } // good const bar = a + b / c * d;代碼塊 Blocks
使用大括號(hào)包裹所有的多行代碼塊。
eslint: nonblock-statement-body-position
// bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function foo() { return false; } // good function bar() { return false; }如果通過 if 和 else 使用多行代碼塊,把 else 放在 if 代碼塊閉合括號(hào)的同一行。
eslint: brace-style
// bad if (test) { thing1(); thing2(); } else { thing3(); } // good if (test) { thing1(); thing2(); } else { thing3(); }如果一個(gè) if 塊總是執(zhí)行一個(gè) return 語(yǔ)句,后面的 else 塊是不必要的。在 else if 塊中的 return,可以分成多個(gè) if 塊來 return 。
eslint: no-else-return
// bad function foo() { if (x) { return x; } else { return y; } } // bad function cats() { if (x) { return x; } else if (y) { return y; } } // bad function dogs() { if (x) { return x; } else { if (y) { return y; } } } // good function foo() { if (x) { return x; } return y; } // good function cats() { if (x) { return x; } if (y) { return y; } } //good function dogs(x) { if (x) { if (z) { return y; } } else { return z; } }控制語(yǔ)句 Control Statements
如果您的控制語(yǔ)句(if, while 的)太長(zhǎng)或超過最大行長(zhǎng)度,那么每個(gè)(分組)條件可以放單獨(dú)一行。邏輯運(yùn)算符應(yīng)該放在每行起始處。
// bad if ((foo === 123 || bar === 'abc') && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening()) { thing1(); } // bad if (foo === 123 && bar === 'abc') { thing1(); } // bad if (foo === 123 && bar === 'abc') { thing1(); } // bad if ( foo === 123 && bar === 'abc' ) { thing1(); } // good if ( foo === 123 && bar === 'abc' ) { thing1(); } // good if ( (foo === 123 || bar === "abc") && doesItLookGoodWhenItBecomesThatLong() && isThisReallyHappening() ) { thing1(); } // good if (foo === 123 && bar === 'abc') { thing1(); }注釋 Comments
多行注釋使用 /* … /。
/** * @param {Grid} grid 需要合并的Grid * @param {Array} cols 需要合并列的Index(序號(hào))數(shù)組;從0開始計(jì)數(shù),序號(hào)也包含。 * @param {Boolean} isAllSome 是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true:完成一樣;false(默認(rèn)):不完全一樣 * @return void * @author 單志永 2018/11/8 */ function mergeCells(grid, cols, isAllSome) { // Do Something }單行注釋使用 // 。將單行注釋放在續(xù)注釋的語(yǔ)句上方。在注釋之前放置一個(gè)空行,除非它位于代碼塊的第一行。
// bad const active = true; // is current tab // good // is current tab const active = true; // bad function getType() { console.log('fetching type...'); // set the default type to 'no type' const type = this.type || 'no type'; return type; } // good function getType() { console.log('fetching type...'); // set the default type to 'no type' const type = this.type || 'no type'; return type; } // also good function getType() { // set the default type to 'no type' const type = this.type || 'no type'; return type; }所有注釋符和注釋內(nèi)容用一個(gè)空格隔開,讓它更容易閱讀。
eslint: spaced-comment
// bad //is current tab const active = true; // good // is current tab const active = true; // bad /** *make() returns a new element *based on the passed-in tag name */ function make(tag) { // ... return element; } // good /** * make() returns a new element * based on the passed-in tag name */ function make(tag) { // ... return element; }給注釋增加 FIXME 或 TODO 的前綴,可以幫助其他開發(fā)者快速了解這個(gè)是否是一個(gè)需要重新復(fù)查的問題,或是你正在為需要解決的問題提出解決方案。這將有別于常規(guī)注釋,因?yàn)樗鼈兪强刹僮鞯摹J褂?FIXME – need to figure this out 或者 TODO – need to implement。
使用 // FIXME: 來標(biāo)識(shí)需要修正的問題。注:如果代碼中有該標(biāo)識(shí),說明標(biāo)識(shí)處代碼需要修正,甚至代碼是錯(cuò)誤的,不能工作,需要修復(fù),如何修正會(huì)在說明中簡(jiǎn)略說明。
lass Calculator extends Abacus { constructor() { super(); // FIXME: shouldn’t use a global here total = 0; } }使用 // TODO: 來標(biāo)識(shí)需要實(shí)現(xiàn)的問題。注:如果代碼中有該標(biāo)識(shí),說明在標(biāo)識(shí)處有功能代碼待編寫,待實(shí)現(xiàn)的功能在說明中會(huì)簡(jiǎn)略說明。
class Calculator extends Abacus { constructor() { super(); // TODO: total should be configurable by an options param this.total = 0; } }空格 Whitespace
使用 2 個(gè)空格作為縮進(jìn)
// bad function foo() { ????let name; } // bad function bar() { ?let name; } // good function baz() { ??let name; }在大括號(hào)前放置 1 個(gè)空格。
eslint: space-before-blocks jscs: requireSpaceBeforeBlockStatements
// bad function test(){ console.log('test'); } // good function test() { console.log('test'); } // bad dog.set('attr',{ age: '1 year', breed: 'Bernese Mountain Dog', }); // good dog.set('attr', { age: '1 year', breed: 'Bernese Mountain Dog', });在控制語(yǔ)句(if、while 等)的小括號(hào)前放一個(gè)空格。在函數(shù)調(diào)用及聲明中,不在函數(shù)的參數(shù)列表前加空格。
eslint: keyword-spacing jscs: requireSpaceAfterKeywords
// bad if(isJedi) { fight (); } // good if (isJedi) { fight(); } // bad function fight () { console.log ('Swooosh!'); } // good function fight() { console.log('Swooosh!'); }使用空格把運(yùn)算符隔開。
eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators
// bad const x=y+5; // good const x = y + 5;在文件末尾插入一個(gè)空行。
eslint: eol-last
// bad import { es6 } from './AirbnbStyleGuide'; // ... export default es6; // bad import { es6 } from './AirbnbStyleGuide'; // ... export default es6; // good import { es6 } from './AirbnbStyleGuide'; // ... export default es6;長(zhǎng)方法鏈?zhǔn)秸{(diào)用時(shí)使用縮進(jìn)(2個(gè)以上的方法鏈?zhǔn)秸{(diào)用)。使用一個(gè)點(diǎn) . 開頭,強(qiáng)調(diào)該行是一個(gè)方法調(diào)用,不是一個(gè)新的聲明。
eslint: newline-per-chained-call no-whitespace-before-property
// bad $('#items').find('.selected').highlight().end().find('.open').updateCount(); // bad $('#items'). find('.selected'). highlight(). end(). find('.open'). updateCount(); // good $('#items') .find('.selected') .highlight() .end() .find('.open') .updateCount(); // bad const leds = stage.selectAll('.led').data(data).enter().append('svg:svg').classed('led', true) .attr('width', (radius + margin) * 2).append('svg:g') .attr('transform', `translate(${radius + margin},${radius + margin})`) .call(tron.led); // good const leds = stage.selectAll('.led') .data(data) .enter().append('svg:svg') .classed('led', true) .attr('width', (radius + margin) * 2) .append('svg:g') .attr('transform', `translate(${radius + margin},${radius + margin})`) .call(tron.led); // good const leds = stage.selectAll('.led').data(data);不要在圓括號(hào)內(nèi)加空格。
// bad function bar( foo ) { return foo; } // good function bar(foo) { return foo; } // bad if ( foo ) { console.log(foo); } // good if (foo) { console.log(foo); }不要在中括號(hào)內(nèi)添加空格。
eslint: array-bracket-spacing jscs: disallowSpacesInsideArrayBrackets
// bad const foo = [ 1, 2, 3 ]; console.log(foo[ 0 ]); // good const foo = [1, 2, 3]; console.log(foo[0]);在大括號(hào)內(nèi)添加空格
// bad const foo = {clark: 'kent'}; // good const foo = { clark: 'kent' };類型轉(zhuǎn)換 Type Casting & Coercion
在聲明語(yǔ)句的開始處就執(zhí)行強(qiáng)制類型轉(zhuǎn)換.
字符串:
eslint: no-new-wrappers
// => this.reviewScore = 9; // bad const totalScore = new String(this.reviewScore); // typeof totalScore 是 "object" 而不是 "string" // bad const totalScore = this.reviewScore + ''; // 調(diào)用 this.reviewScore.valueOf() // bad const totalScore = this.reviewScore.toString(); // 不能保證返回一個(gè)字符串 // good const totalScore = String(this.reviewScore);使數(shù)字: 使用 Number 進(jìn)行轉(zhuǎn)換,而 parseInt 則始終以基數(shù)解析字串。
eslint: radix no-new-wrappers
const inputValue = '4'; // bad const val = new Number(inputValue); // bad const val = +inputValue; // bad const val = inputValue >> 0; // bad const val = parseInt(inputValue); // good const val = Number(inputValue); // good const val = parseInt(inputValue, 10);布爾值:
eslint: no-new-wrappers
const age = 0; // bad const hasAge = new Boolean(age); // good const hasAge = Boolean(age); // best const hasAge = !!age;命名規(guī)則 Naming Conventions
避免使用單字母名稱。使你的命名具有描述性。
eslint: id-length
// bad function q() { // ... } // good function query() { // ... }當(dāng)命名對(duì)象,函數(shù)和實(shí)例時(shí)使用駝峰式命名。
eslint: camelcase jscs: requireCamelCaseOrUpperCaseIdentifiers
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {}當(dāng)命名構(gòu)造函數(shù)或類的時(shí)候使用 PascalCase 式命名,(注:即單詞首字母大寫)。
eslint: new-cap
// bad function user(options) { this.name = options.name; } const bad = new user({ name: 'nope', }); // good class User { constructor(options) { this.name = options.name; } } const good = new User({ name: 'yup', });當(dāng) 導(dǎo)出(export) 一個(gè)默認(rèn)函數(shù)時(shí)使用駝峰式命名。你的文件名應(yīng)該和你的函數(shù)的名字一致。
function makeStyleGuide() { // ... } export default makeStyleGuide;當(dāng)導(dǎo)出一個(gè) 構(gòu)造函數(shù) / 類 / 單例 / 函數(shù)庫(kù) / 純對(duì)象時(shí)使用 PascalCase 式命名,(愚人碼頭注:即單詞首字母大寫)。
const AirbnbStyleGuide = { es6: { }, }; export default AirbnbStyleGuide;存取器 Accessors
屬性的存取器函數(shù)不是必須的。
別使用 JavaScript 的 getters/setters,因?yàn)樗鼈儠?huì)導(dǎo)致意想不到的副作用,而且很難測(cè)試,維護(hù)和理解。相反,如果要使用存取器函數(shù),使用 getVal() 及 setVal(‘hello’)。
// bad class Dragon { get age() { // ... } set age(value) { // ... } } // good class Dragon { getAge() { // ... } setAge(value) { // ... } }如果屬性/方法是一個(gè) boolean, 使用 isVal() 或 hasVal() 方法。
// bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; } )感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享Javascript中編碼規(guī)范是什么內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,遇到問題就找億速云,詳細(xì)的解決方法等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。