這篇文章帶給大家的內容是關於Javascript中編碼規範的介紹(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
命名規格
標準變數採用駝峰式命名
'ID'在變數名中全大寫
常數全大寫,用底線連接建構函數,大寫第一個字母
jquery物件必須以'$'開頭命名
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');
局部變數命名規格
s:表示字串。例如:sName,sHtml;
n:表示數字。例如:nPage,nTotal;
b:表示邏輯。例如:bChecked,bHasLogin;
a:表示陣列。例如:aList,aGroup;
r:表示正規表示式。例如:rDomain,rEmail;
f:表示函數。例如:fGetHtml,fInit;
o:表示以上未涉及的其他對象,例如:oButton,oDate;
函數命名
小駝峰命名法,可使用共同動詞約定:
#can 判斷是否可執行某個動作,函數傳回一個布林值。 true:可執行;false:不可執行
has 判斷是否含有某個值,函數傳回一個布林值。 true:含有此值;false:不含此值
is 判斷是否為某個值,函數傳回一個布林值。 true:為某個值;false:不為某個值
get 取得某個之,函數傳回一個非布林值
set 設定某個值,無回傳值、傳回是否設定成功或傳回鍊式物件load 載入某些資料,無回傳值或傳回是否載入完成的結果
// 是否可阅读 function canRead() { return true; } // 获取名称 function getName() { return this.name; }
引用References
對所有的引用使用 const ;不要使用 var。
eslint: prefer-const, no-const-assign
這可以確保你無法對引用重新分配,重新分配可能會導致 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 = {};
它們允許你在一個地方定義一個物件的所有屬性。
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, };
#更容易看出哪些屬性在使用速記語法
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
一般來說,我們認為比較容易閱讀。它改進了語法高亮顯示,並且更容易被許多JS引擎優化。
// 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;
您可以隨著時間的推移添加新的屬性或更改排序,而不會改變呼叫時的位置。
// bad function processInput(input) { return [left, right, top, bottom]; } // 调用者需要考虑返回数据的顺序 const [left, __, top] = processInput(input); // good function processInput(input) { return { left, right, top, bottom }; } // 调用者只选择他们需要的数据 const { left, top } = processInput(input);
eslint: quotes jscs: validateQuoteMarks
// bad const name = "Capt. Janeway"; // bad - 模板字面量应该包含插值或换行符 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
##函数声明很容易被提升(Hoisting),这对可读性和可维护性来说都是不利的;
/ bad function foo() { // ... } // bad const foo = function () { // ... }; // good // 用明显区别于变量引用调用的词汇命名 const short = function longUniqueMoreDescriptiveLexicalFoo() { // ... };
eslint: wrap-iife jscs: requireParenthesesAroundIIFE
一个立即调用函数表达式是一个单独的单元 – 将函数表达式包裹在括号中,后面再跟一个调用括号,这看上去很紧凑。
// 立即调用函数表达式 (IIFE) (function () { console.log('Welcome to the Internet. Please follow me.'); }());
使用 … 能明确你要传入的参数。另外 rest(剩余)参数是一个真正的数组,而 arguments 是一个类数组(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) { // 更加糟糕: 如果参数 opts 是 falsy(假值) 的话,它将被设置为一个对象, // 这可能是你想要的,但它可以引起一些小的错误。 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
操作作为参数传入的对象,可能会在调用原始对象时造成不必要的变量副作用。(对象是引用类型)
// 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
它创建了一个在 this 上下文中执行的函数的版本,这通常是你想要的,而且这样的写法更为简洁。
// 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; } }
因为 extends 是一个内置的原型继承方法并且不会破坏 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;
这样能确保你只有一个默认 export(导出)。
// bad import * as AirbnbStyleGuide from './AirbnbStyleGuide'; // good import AirbnbStyleGuide from './AirbnbStyleGuide';
虽然一行代码简洁明了,但有一个明确的 import(导入) 方法和一个明确的 export(导出) 方法,使事情能保持一致。
// 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
一般应该避免可变性,特别是在导出可变绑定时。虽然一些特殊情况下,可能需要这种技术,但是一般而言,只应该导出常量引用。
// bad let foo = 3; export { foo }; // good const foo = 3; export { foo };
eslint: import/prefer-default-export
为了鼓励更多的文件只有一个 export(导出),这有利于模块的可读性和可维护性。
// bad export function foo() {} // good export default function foo() {}
eslint: import/first
由于 import 被提升,保持他们在顶部,防止意外的行为。
// bad import foo from 'foo'; foo.init(); import bar from 'bar'; // good import foo from 'foo'; import bar from 'bar'; foo.init();
// bad import {longNameA, longNameB, longNameC, longNameD, longNameE} from 'path'; // good import { longNameA, longNameB, longNameC, longNameD, longNameE, } from 'path';
eslint: dot-notation jscs: requireDotNotation
const luke = { jedi: true, age: 28, }; // bad const isJedi = luke['jedi']; // good const isJedi = luke.jedi;
const luke = { jedi: true, age: 28, }; function getProp(prop) { return luke[prop]; } const isJedi = getProp('jedi');
eslint: no-restricted-properties.
// bad const binary = Math.pow(2, 10); // good const binary = 2 ** 10;
eslint: no-undef prefer-const
// bad superPower = new SuperPower(); // good const superPower = new SuperPower();
当你需要把已分配的变量分配给一个变量时非常有用
// 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;
eslint: no-multi-assign
链接变量赋值会创建隐式全局变量。
// bad (function example() { // JavaScript 将其解析为 // let a = ( b = ( c = 1 ) ); // let关键字只适用于变量a; // 变量b和c变成了全局变量。 let a = b = c = 1; }()); console.log(a); // 抛出 ReferenceError(引用错误) console.log(b); // 1 console.log(c); // 1 // good (function example() { let a = 1; let b = a; let c = a; }()); console.log(a); // 抛出 ReferenceError(引用错误) console.log(b); // 抛出 ReferenceError(引用错误) console.log(c); // 抛出 ReferenceError(引用错误) // 同样适用于 `const`
根据 eslint 文档,一元递增和递减语句会受到自动插入分号的影响,并可能导致应用程序中的值递增或递减,从而导致无提示错误。使用像 num += 1 而不是 num++ 或 num ++ 这样的语句来改变你的值也更具有表现力。不允许一元递增和递减语句也会阻止您无意中预先递增/递减值,这也会导致程序中的意外行为。
// 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;
eslint: eqeqeq
// bad if (isValid === true) { // ... } // good if (isValid) { // ... } // bad if (name) { // ... } // good if (name !== '') { // ... } // bad if (collection.length) { // ... } // good if (collection.length > 0) { // ... }
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 {} } }
eslint: no-nested-ternary
// bad const foo = maybe1 > maybe2 ? "bar" : value1 > value2 ? "baz" : null; // 拆分成2个分离的三元表达式 const maybeNull = value1 > value2 ? 'baz' : null; // better const foo = maybe1 > maybe2 ? 'bar' : maybeNull; // best const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
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;
eslint: no-mixed-operators
这可以提高可读性,并清晰展现开发者的意图。
/ 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;
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; }
eslint: brace-style
// bad if (test) { thing1(); thing2(); } else { thing3(); } // good if (test) { thing1(); thing2(); } else { thing3(); }
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; } }
// 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(); }
/** * @param {Grid} grid 需要合并的Grid * @param {Array} cols 需要合并列的Index(序号)数组;从0开始计数,序号也包含。 * @param {Boolean} isAllSome 是否2个tr的cols必须完成一样才能进行合并。true:完成一样;false(默认):不完全一样 * @return void * @author 单志永 2018/11/8 */ function mergeCells(grid, cols, isAllSome) { // Do Something }
// 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; }
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; }
lass Calculator extends Abacus { constructor() { super(); // FIXME: shouldn’t use a global here total = 0; } }
class Calculator extends Abacus { constructor() { super(); // TODO: total should be configurable by an options param this.total = 0; } }
// bad function foo() { ∙∙∙∙let name; } // bad function bar() { ∙let name; } // good function baz() { ∙∙let name; }
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', });
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!'); }
eslint: space-infix-ops jscs: requireSpaceBeforeBinaryOperators, requireSpaceAfterBinaryOperators
// bad const x=y+5; // good const x = y + 5;
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;
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);
// bad function bar( foo ) { return foo; } // good function bar(foo) { return foo; } // bad if ( foo ) { console.log(foo); } // good if (foo) { console.log(foo); }
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]);
// bad const foo = {clark: 'kent'}; // good const foo = { clark: 'kent' };
eslint: no-new-wrappers
// => this.reviewScore = 9; // bad const totalScore = new String(this.reviewScore); // typeof totalScore 是 "object" 而不是 "string" // bad const totalScore = this.reviewScore + ''; // 调用 this.reviewScore.valueOf() // bad const totalScore = this.reviewScore.toString(); // 不能保证返回一个字符串 // good const totalScore = String(this.reviewScore);
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;
eslint: id-length
// bad function q() { // ... } // good function query() { // ... }
eslint: camelcase jscs: requireCamelCaseOrUpperCaseIdentifiers
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {}
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', });
function makeStyleGuide() { // ... } export default makeStyleGuide;
const AirbnbStyleGuide = { es6: { }, }; export default AirbnbStyleGuide;
存取器 Accessors
属性的存取器函数不是必须的。
別使用 JavaScript 的 getters/setters,因为它们会导致意想不到的副作用,而且很难测试,维护和理解。相反,如果要使用存取器函数,使用 getVal() 及 setVal(‘hello’)。
// bad class Dragon { get age() { // ... } set age(value) { // ... } } // good class Dragon { getAge() { // ... } setAge(value) { // ... } }
// bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; } )
以上是Javascript中編碼規格的介紹(程式碼範例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!