Airbnb JavaScript Style Guide()
用更合理的方式写 JavaScript
类型
-
[1.1]基本类型: 直接存取基本类型。
字符串数值布尔类型nullundefined
const foo = 1; let bar = foo; bar = 9; console.log(foo, bar); // => 1, 9 -
[1.2] 复杂类型: 通过引用的方式存取复杂类型。
对象数组函数
const foo = [1, 2]; const bar = foo; bar[0] = 9; console.log(foo[0], bar[0]); // => 9, 9
引用
-
为什么？这能确保你无法对引用重新赋值，也不会导致出现 bug 或难以理解。
// bad var a = 1; var b = 2; // good const a = 1; const b = 2; -
2.2 如果你一定需要可变动的引用，使用
let代替var。为什么？因为
let是块级作用域，而var是函数作用域。// bad var count = 1; if (true) { count += 1; } // good, use the let. let count = 1; if (true) { count += 1; } -
// const 和 let 只存在于它们被定义的区块内。 { let a = 1; const b = 1; } console.log(a); // ReferenceError console.log(b); // ReferenceError
对象
-
// bad const item = new Object(); // good const item = {}; -
3.2 如果你的代码在浏览器环境下执行，别使用 保留字 作为键值。这样的话在 IE8 不会运行。 更多信息。 但在 ES6 模块和服务器端中使用没有问题。
// bad const superman = { default: { clark: 'kent' }, private: true, }; // good const superman = { defaults: { clark: 'kent' }, hidden: true, }; -
// bad const superman = { class: 'alien', }; // bad const superman = { klass: 'alien', }; // good const superman = { type: 'alien', };
-
为什么？因为这样可以让你在一个地方定义所有的对象属性。
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, };
-
// bad const atom = { value: 1, addValue: function (value) { return atom.value + value; }, }; // good const atom = { value: 1, addValue(value) { return atom.value + value; }, };
-
为什么？因为这样更短更有描述性。
const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { lukeSkywalker: lukeSkywalker, }; // good const obj = { lukeSkywalker, }; -
3.7 在对象属性声明前把简写的属性分组。
为什么？因为这样能清楚地看出哪些属性使用了简写。
const anakinSkywalker = 'Anakin Skywalker'; const lukeSkywalker = 'Luke Skywalker'; // bad const obj = { episodeOne: 1, twoJedisWalkIntoACantina: 2, lukeSkywalker, episodeThree: 3, mayTheFourth: 4, anakinSkywalker, }; // good const obj = { lukeSkywalker, anakinSkywalker, episodeOne: 1, twoJedisWalkIntoACantina: 2, episodeThree: 3, mayTheFourth: 4, };
数组
-
// bad const items = new Array(); // good const items = []; -
4.2 向数组添加元素时使用 Arrary#push 替代直接赋值。
const someStack = []; // bad someStack[someStack.length] = 'abracadabra'; // good someStack.push('abracadabra');
-
// bad const len = items.length; const itemsCopy = []; let i; for (i = 0; i < len; i++) { itemsCopy[i] = items[i]; } // good const itemsCopy = [...items]; -
[4.4]使用 Array#from 把一个类数组对象转换成数组。
const foo = document.querySelectorAll('.foo'); const nodes = Array.from(foo);
解构
-
为什么？因为解构能减少临时引用属性。
// bad function getFullName(user) { const firstName = user.firstName; const lastName = user.lastName; return `${firstName} ${lastName}`; } // good function getFullName(obj) { const { firstName, lastName } = obj; return `${firstName} ${lastName}`; } // best function getFullName({ firstName, lastName }) { return `${firstName} ${lastName}`; } -
const arr = [1, 2, 3, 4]; // bad const first = arr[0]; const second = arr[1]; // good const [first, second] = arr; -
[5.3] 需要回传多个值时，使用对象解构，而不是数组解构。
为什么？增加属性或者改变排序不会改变调用时的位置。
// bad function processInput(input) { // then a miracle occurs return [left, right, top, bottom]; } // 调用时需要考虑回调数据的顺序。 const [left, __, top] = processInput(input); // good function processInput(input) { // then a miracle occurs return { left, right, top, bottom }; } // 调用时只选择需要的数据 const { left, right } = processInput(input);
⬆ 返回目录
Strings
-
// bad const name = "Capt. Janeway"; // good const name = 'Capt. Janeway'; -
6.3 注：过度使用字串连接符号可能会对性能造成影响。jsPerf 和 讨论.
// bad const errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.'; // bad const errorMessage = 'This is a super long error that was thrown because \ of Batman. When you stop to think about how Batman had anything to do \ with this, you would get nowhere \ fast.'; // good const errorMessage = 'This is a super long error that was thrown because ' + 'of Batman. When you stop to think about how Batman had anything to do ' + 'with this, you would get nowhere fast.';
-
为什么？模板字符串更为简洁，更具可读性。
// bad function sayHi(name) { return 'How are you, ' + name + '?'; } // bad function sayHi(name) { return ['How are you, ', name, '?'].join(); } // good function sayHi(name) { return `How are you, ${name}?`; }
⬆ 返回目录
函数
-
为什么？因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。
// bad const foo = function () { }; // good function foo() { } -
// 立即调用的函数表达式 (IIFE) (() => { console.log('Welcome to the Internet. Please follow me.'); })(); 7.3 永远不要在一个非函数代码块（
if、while等）中声明一个函数，把那个函数赋给一个变量。浏览器允许你这么做，但它们的解析表现不一致。-
7.4 注意: ECMA-262 把
block定义为一组语句。函数声明不是语句。阅读 ECMA-262 关于这个问题的说明。// bad if (currentUser) { function test() { console.log('Nope.'); } } // good let test; if (currentUser) { test = () => { console.log('Yup.'); }; } -
7.5 永远不要把参数命名为
arguments。这将取代原来函数作用域内的arguments对象。// bad function nope(name, options, arguments) { // ...stuff... } // good function yup(name, options, args) { // ...stuff... }
-
7.6 不要使用
arguments。可以选择 rest 语法...替代。为什么？使用
...能明确你要传入的参数。另外 rest 参数是一个真正的数组，而arguments是一个类数组。// bad function concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join(''); } // good function concatenateAll(...args) { return args.join(''); }
-
7.7 直接给函数的参数指定默认值，不要使用一个变化的函数参数。
// really bad function handleThings(opts) { // 不！我们不应该改变函数参数。 // 更加糟糕: 如果参数 opts 是 false 的话，它就会被设定为一个对象。 // 但这样的写法会造成一些 Bugs。 //（译注：例如当 opts 被赋值为空字符串，opts 仍然会被下一行代码设定为一个空对象。） opts = opts || {}; // ... } // still bad function handleThings(opts) { if (opts === void 0) { opts = {}; } // ... } // good function handleThings(opts = {}) { // ... }
为什么？因为这样的写法让人感到很困惑。
var b = 1;
// bad
function count(a = b++) {
console.log(a);
}
count(); // 1
count(); // 2
count(3); // 3
count(); // 3
⬆ 返回目录
箭头函数
-
8.1 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。
为什么？因为箭头函数创造了新的一个
this执行环境（译注：参考 Arrow functions - JavaScript | MDN 和 ES6 arrow functions, syntax and lexical scoping），通常情况下都能满足你的需求，而且这样的写法更为简洁。为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。
// bad [1, 2, 3].map(function (x) { const y = x + 1; return x * y; }); // good [1, 2, 3].map((x) => { const y = x + 1; return x * y; }); -
8.2 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和
return都省略掉。如果不是，那就不要省略。为什么？语法糖。在链式调用中可读性很高。
为什么不？当你打算回传一个对象的时候。
// good [1, 2, 3].map(x => x * x); // good [1, 2, 3].reduce((total, n) => { return total + n; }, 0);
⬆ 返回目录
构造器
-
9.1 总是使用
class。避免直接操作prototype。为什么? 因为
class语法更为简洁更易读。// 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]; } } -
// bad Jedi.prototype.jump = function() { this.jumping = true; return true; }; Jedi.prototype.setHeight = function(height) { this.height = height; }; const luke = new Jedi(); luke.jump(); // => true luke.setHeight(20); // => undefined // good class Jedi { jump() { this.jumping = true; return this; } setHeight(height) { this.height = height; return this; } } const luke = new Jedi(); luke.jump() .setHeight(20);
-
9.4 可以写一个自定义的
toString()方法，但要确保它能正常运行并且不会引起副作用。class Jedi { constructor(options = {}) { this.name = options.name || 'no name'; } getName() { return this.name; } toString() { return `Jedi - ${this.getName()}`; } }
⬆ 返回目录
模块
-
10.1 总是使用模组 (
import/export) 而不是其他非标准模块系统。你可以编译为你喜欢的模块系统。为什么？模块就是未来，让我们开始迈向未来吧。
// 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;
⬆ 返回目录
Iterators and Generators
-
11.1 不要使用 iterators。使用高阶函数例如
map()和reduce()替代for-of。为什么？这加强了我们不变的规则。处理纯函数的回调值更易读，这比它带来的副作用更重要。
const numbers = [1, 2, 3, 4, 5]; // bad let sum = 0; for (let num of numbers) { sum += num; } sum === 15; // good let sum = 0; numbers.forEach((num) => sum += num); sum === 15; // best (use the functional force) const sum = numbers.reduce((total, num) => total + num, 0); sum === 15;
为什么？因为它们现在还没法很好地编译到 ES5。 (译者注：目前(2016/03) Chrome 和 Node.js 的稳定版本都已支持 generators)
⬆ 返回目录
属性
-
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');
⬆ 返回目录
变量
-
13.1 一直使用
const来声明变量，如果不这样做就会产生全局变量。我们需要避免全局命名空间的污染。地球队长已经警告过我们了。（译注：全局，global 亦有全球的意思。地球队长的责任是保卫地球环境，所以他警告我们不要造成「全球」污染。）// bad superPower = new SuperPower(); // good const superPower = new SuperPower(); -
为什么？增加新变量将变的更加容易，而且你永远不用再担心调换错
;跟,。// bad const items = getItems(), goSportsTeam = true, dragonball = 'z'; // bad // (compare to above, and try to spot the mistake) const items = getItems(), goSportsTeam = true; dragonball = 'z'; // good const items = getItems(); const goSportsTeam = true; const dragonball = 'z'; -
为什么？当你需要把已赋值变量赋值给未赋值变量时非常有用。
// 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; -
13.4 在你需要的地方给变量赋值，但请把它们放在一个合理的位置。
为什么？
let和const是块级作用域而不是函数作用域。// good function() { test(); console.log('doing stuff..'); //..other stuff.. const name = getName(); if (name === 'test') { return false; } return name; } // bad - unnecessary function call function(hasName) { const name = getName(); if (!hasName) { return false; } this.setFirstName(name); return true; } // good function(hasName) { if (!hasName) { return false; } const name = getName(); this.setFirstName(name); return true; }
⬆ 返回目录
Hoisting
-
14.1
var声明会被提升至该作用域的顶部，但它们赋值不会提升。let和const被赋予了一种称为「暂时性死区（Temporal Dead Zones, TDZ）」的概念。这对于了解为什么 type of 不再安全相当重要。// 我们知道这样运行不了 // （假设 notDefined 不是全局变量） function example() { console.log(notDefined); // => throws a ReferenceError } // 由于变量提升的原因， // 在引用变量后再声明变量是可以运行的。 // 注：变量的赋值 `true` 不会被提升。 function example() { console.log(declaredButNotAssigned); // => undefined var declaredButNotAssigned = true; } // 编译器会把函数声明提升到作用域的顶层， // 这意味着我们的例子可以改写成这样： function example() { let declaredButNotAssigned; console.log(declaredButNotAssigned); // => undefined declaredButNotAssigned = true; } // 使用 const 和 let function example() { console.log(declaredButNotAssigned); // => throws a ReferenceError console.log(typeof declaredButNotAssigned); // => throws a ReferenceError const declaredButNotAssigned = true; } -
14.2 匿名函数表达式的变量名会被提升，但函数内容并不会。
function example() { console.log(anonymous); // => undefined anonymous(); // => TypeError anonymous is not a function var anonymous = function() { console.log('anonymous function expression'); }; } -
14.3 命名的函数表达式的变量名会被提升，但函数名和函数函数内容并不会。
function example() { console.log(named); // => undefined named(); // => TypeError named is not a function superPower(); // => ReferenceError superPower is not defined var named = function superPower() { console.log('Flying'); }; } // the same is true when the function name // is the same as the variable name. function example() { console.log(named); // => undefined named(); // => TypeError named is not a function var named = function named() { console.log('named'); } } -
function example() { superPower(); // => Flying function superPower() { console.log('Flying'); } } 想了解更多信息，参考 Ben Cherry 的 JavaScript Scoping & Hoisting。
⬆ 返回目录
比较运算符和等号
-
15.2 条件表达式例如
if语句通过抽象方法ToBoolean强制计算它们的表达式并且总是遵守下面的规则：- 对象 被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true
- 字符串 如果是空字符串
''被计算为 false，否则为 true
if ([0]) { // true // An array is an object, objects evaluate to true } -
// bad if (name !== '') { // ...stuff... } // good if (name) { // ...stuff... } // bad if (collection.length > 0) { // ...stuff... } // good if (collection.length) { // ...stuff... } 15.4 想了解更多信息，参考 Angus Croll 的 Truth Equality and JavaScript。
⬆ 返回目录
代码块
-
// bad if (test) return false; // good if (test) return false; // good if (test) { return false; } // bad function() { return false; } // good function() { return false; } -
16.2 如果通过
if和else使用多行代码块，把else放在if代码块关闭括号的同一行。// bad if (test) { thing1(); thing2(); } else { thing3(); } // good if (test) { thing1(); thing2(); } else { thing3(); }
⬆ 返回目录
注释
-
17.1 使用
/** ... */作为多行注释。包含描述、指定所有参数和返回值的类型和值。// bad // make() returns a new element // based on the passed in tag name // // @param {String} tag // @return {Element} element function make(tag) { // ...stuff... return element; } // good /** * make() returns a new element * based on the passed in tag name * * @param {String} tag * @return {Element} element */ function make(tag) { // ...stuff... return element; } -
17.2 使用
//作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行。// 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; } 17.3 给注释增加
FIXME或TODO的前缀可以帮助其他开发者快速了解这是一个需要复查的问题，或是给需要实现的功能提供一个解决方式。这将有别于常见的注释，因为它们是可操作的。使用FIXME -- need to figure this out或者TODO -- need to implement。-
class Calculator { constructor() { // FIXME: shouldn't use a global here total = 0; } } -
class Calculator { constructor() { // TODO: total should be configurable by an options param this.total = 0; } }
⬆ 返回目录
空白
-
// bad function() { ∙∙∙∙const name; } // bad function() { ∙const name; } // good function() { ∙∙const name; } -
// 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', }); -
18.3 在控制语句（
if、while等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。// bad if(isJedi) { fight (); } // good if (isJedi) { fight(); } // bad function fight () { console.log ('Swooosh!'); } // good function fight() { console.log('Swooosh!'); } -
// bad const x=y+5; // good const x = y + 5; -
// bad (function(global) { // ...stuff... })(this);// bad (function(global) { // ...stuff... })(this);↵ ↵// good (function(global) { // ...stuff... })(this);↵ -
18.5 在使用长方法链时进行缩进。使用前面的点
.强调这是方法调用而不是新语句。// 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').class('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); -
// bad if (foo) { return bar; } return baz; // good if (foo) { return bar; } return baz; // bad const obj = { foo() { }, bar() { }, }; return obj; // good const obj = { foo() { }, bar() { }, }; return obj;
⬆ 返回目录
逗号
-
// bad const story = [ once , upon , aTime ]; // good const story = [ once, upon, aTime, ]; // bad const hero = { firstName: 'Ada' , lastName: 'Lovelace' , birthYear: 1815 , superPower: 'computers' }; // good const hero = { firstName: 'Ada', lastName: 'Lovelace', birthYear: 1815, superPower: 'computers', }; -
为什么? 这会让 git diffs 更干净。另外，像 babel 这样的转译器会移除结尾多余的逗号，也就是说你不必担心老旧浏览器的尾逗号问题。
// bad - git diff without trailing comma const hero = { firstName: 'Florence', - lastName: 'Nightingale' + lastName: 'Nightingale', + inventorOf: ['coxcomb graph', 'modern nursing'] } // good - git diff with trailing comma const hero = { firstName: 'Florence', lastName: 'Nightingale', + inventorOf: ['coxcomb chart', 'modern nursing'], } // bad const hero = { firstName: 'Dana', lastName: 'Scully' }; const heroes = [ 'Batman', 'Superman' ]; // good const hero = { firstName: 'Dana', lastName: 'Scully', }; const heroes = [ 'Batman', 'Superman', ];
⬆ 返回目录
分号
-
// bad (function() { const name = 'Skywalker' return name })() // good (() => { const name = 'Skywalker'; return name; })(); // good (防止函数在两个 IIFE 合并时被当成一个参数) ;(() => { const name = 'Skywalker'; return name; })();Read more.
⬆ 返回目录
类型转换
-
// => this.reviewScore = 9; // bad const totalScore = this.reviewScore + ''; // good const totalScore = String(this.reviewScore); -
21.3 对数字使用
parseInt转换，并带上类型转换的基数。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); -
21.4 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决性能问题时，留个注释说清楚原因和你的目的。
// good /** * 使用 parseInt 导致我的程序变慢， * 改成使用位操作转换数字快多了。 */ const val = inputValue >> 0; -
21.5 注: 小心使用位操作运算符。数字会被当成 64 位值，但是位操作运算符总是返回 32 位的整数（参考）。位操作处理大于 32 位的整数值时还会导致意料之外的行为。关于这个问题的讨论。最大的 32 位整数是 2,147,483,647：
2147483647 >> 0 //=> 2147483647 2147483648 >> 0 //=> -2147483648 2147483649 >> 0 //=> -2147483647 -
const age = 0; // bad const hasAge = new Boolean(age); // good const hasAge = Boolean(age); // good const hasAge = !!age;
⬆ 返回目录
命名规则
-
// bad function q() { // ...stuff... } // good function query() { // ..stuff.. } -
// bad const OBJEcttsssss = {}; const this_is_my_object = {}; function c() {} // good const thisIsMyObject = {}; function thisIsMyFunction() {} -
// 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', }); -
// bad this.__firstName__ = 'Panda'; this.firstName_ = 'Panda'; this._firstName = 'Panda'; // good this.firstName = 'Panda'; -
22.5 别保存
this的引用。使用箭头函数或 Function#bind。// bad function foo() { const self = this; return function() { console.log(self); }; } // bad function foo() { const that = this; return function() { console.log(that); }; } // good function foo() { return () => { console.log(this); }; } -
22.6 如果你的文件只输出一个类，那你的文件名必须和类名完全保持一致。
// file contents class CheckBox { // ... } export default CheckBox; // in some other file // bad import CheckBox from './checkBox'; // bad import CheckBox from './check_box'; // good import CheckBox from './CheckBox'; -
22.7 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致。
function makeStyleGuide() { } export default makeStyleGuide; -
const AirbnbStyleGuide = { es6: { } }; export default AirbnbStyleGuide;
⬆ 返回目录
存取器
-
23.2 如果你需要存取函数时使用
getVal()和setVal('hello')。// bad dragon.age(); // good dragon.getAge(); // bad dragon.age(25); // good dragon.setAge(25); -
23.3 如果属性是布尔值，使用
isVal()或hasVal()。// bad if (!dragon.age()) { return false; } // good if (!dragon.hasAge()) { return false; } -
23.4 创建
get()和set()函数是可以的，但要保持一致。class Jedi { constructor(options = {}) { const lightsaber = options.lightsaber || 'blue'; this.set('lightsaber', lightsaber); } set(key, val) { this[key] = val; } get(key) { return this[key]; } }
⬆ 返回目录
事件
-
24.1 当给事件附加数据时（无论是 DOM 事件还是私有事件），传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器。例如，不好的写法：
// bad $(this).trigger('listingUpdated', listing.id); ... $(this).on('listingUpdated', function(e, listingId) { // do something with listingId });更好的写法：
// good $(this).trigger('listingUpdated', { listingId : listing.id }); ... $(this).on('listingUpdated', function(e, data) { // do something with data.listingId });
⬆ 返回目录
jQuery
-
25.1 使用
$作为存储 jQuery 对象的变量名前缀。// bad const sidebar = $('.sidebar'); // good const $sidebar = $('.sidebar'); -
// bad function setSidebar() { $('.sidebar').hide(); // ...stuff... $('.sidebar').css({ 'background-color': 'pink' }); } // good function setSidebar() { const $sidebar = $('.sidebar'); $sidebar.hide(); // ...stuff... $sidebar.css({ 'background-color': 'pink' }); } 25.3 对 DOM 查询使用层叠
$('.sidebar ul')或 父元素 > 子元素$('.sidebar > ul')。 jsPerf-
25.4 对有作用域的 jQuery 对象查询使用
find。// bad $('ul', '.sidebar').hide(); // bad $('.sidebar').find('ul').hide(); // good $('.sidebar ul').hide(); // good $('.sidebar > ul').hide(); // good $sidebar.find('ul').hide();
⬆ 返回目录