前端代码规范（强烈推荐 | 转载非原创）

最新推荐文章于 2022-07-23 09:34:41 发布
置顶 最新推荐文章于 2022-07-23 09:34:41 发布
阅读量569 收藏 3
点赞数 1
分类专栏： javascript 文章标签： 前端代码规范

ES6 Style Guide

用更合理的方式写 JavaScript

翻译自 Airbnb JavaScript Style Guide 。 翻译原文地址

转载于github.com/Yunkou

因为自己团队用删减部分见谅 如有需要，请看原版

团队代码缩进为2个空格，行末不加分号，不作为讨论范围

目录

  1. 类型
  2. 引用
  3. 对象
  4. 数组
  5. 解构
  6. 字符串
  7. 函数
  8. 箭头函数
  9. 构造函数
  10. 模块
  11. Iterators & Generators
  12. 属性
  13. 变量
  14. 提升
  15. 比较运算符 & 等号
  16. 代码块
  17. 注释
  18. 空白
  19. 逗号
  20. 分号
  21. 类型转换
  22. 命名规则
  23. 存取器
  24. 事件
  25. jQuery
  26. ECMAScript 5 兼容性

  27. ECMAScript 6 编码规范

    ​

类型

  • 1.1 基本类型: 直接存取基本类型。

    • 字符串
    • 数值
    • 布尔类型
    • null
    • undefined
    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

⬆ 返回目录

引用

  • 2.1 对所有的引用使用 const ；不要使用 var。

    为什么？这能确保你无法对引用重新赋值，也不会导致出现 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
}

  • 2.3 注意 let 和 const 都是块级作用域。

    // const 和 let 只存在于它们被定义的区块内。
{
let a = 1
const b = 1
}
console.log(a) // ReferenceError
console.log(b) // ReferenceError

⬆ 返回目录

对象

  • 3.1 使用字面值创建对象。

    // 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
}

  • 3.3 使用同义词替换需要使用的保留字。

    // bad
const superman = {
class: 'alien',
}

// bad
const superman = {
klass: 'alien',
}

// good
const superman = {
type: 'alien',
}

  • 3.4 创建有动态属性名的对象时，使用可被计算的属性名称。

    为什么？因为这样可以让你在一个地方定义所有的对象属性。


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
}


- 3.5 使用对象方法的简写。

  // bad
  const atom = {
    value: 1,
    addValue: function (value) {
      return atom.value + value
    }
  };

  // good
  const atom = {
    value: 1,
    addValue(value) {
      return atom.value + value
    },
  }
  ```

  <a name="es6-object-concise"></a>
- [3.6](#3.6) <a name='3.6'></a> 使用对象属性值的简写。

  > 为什么？因为这样更短更有描述性。

```javascript
const lukeSkywalker = 'Luke Skywalker'

// bad
const obj = {
  lukeSkywalker: lukeSkywalker,
}

// good
const obj = {
  lukeSkywalker
}




<div class="se-preview-section-delimiter"></div>

  • 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
}




<div class="se-preview-section-delimiter"></div>

⬆ 返回目录

数组

  • 4.1 使用字面值创建数组。

    // bad
const items = new Array();

// good
const items = [];

  • 4.2 向数组添加元素时使用 Arrary#push 替代直接赋值。

    const someStack = []
// bad
someStack[someStack.length] = 'abracadabra'

// good
someStack.push('abracadabra')

  • 4.3 使用拓展运算符 ... 复制数组。

    // 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)

⬆ 返回目录

解构

  • 5.1 使用解构存取和使用多属性对象。

    为什么？因为解构能减少临时引用属性。

// 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}`
}




<div class="se-preview-section-delimiter"></div>

  • 5.2 对数组使用解构赋值。

    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);




<div class="se-preview-section-delimiter"></div>

⬆ 返回目录

Strings

  • 6.1 字符串使用单引号 '' 。

    // bad
const name = "Capt. Janeway"

// good
const name = 'Capt. Janeway'

  • 6.2 字符串超过 80 个字节应该使用字符串连接号换行。

  • 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.'

  • 6.4 程序化生成字符串时，使用模板字符串代替字符串连接。

    为什么？模板字符串更为简洁，更具可读性。

// 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}?`;
}




<div class="se-preview-section-delimiter"></div>

⬆ 返回目录

函数

  • 7.1 使用函数声明代替函数表达式。

    为什么？因为函数声明是可命名的，所以他们在调用栈中更容易被识别。此外，函数声明会把整个函数提升（hoisted），而函数表达式只会把函数的引用变量名提升。这条规则使得箭头函数可以取代函数表达式。

// bad
const foo = function () {
};

// good
function foo() {
}




<div class="se-preview-section-delimiter"></div>

  • 7.2 函数表达式:

    // 立即调用的函数表达式 (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('')
}




<div class="se-preview-section-delimiter"></div>


- 7.7 直接给函数的参数指定默认值，不要使用一个变化的函数参数。

“`javascript
// 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 = {}) {
// …
}
“`

  • 7.8 直接给函数参数赋值时需要避免副作用。

    为什么？因为这样的写法让人感到很困惑。

  var b = 1;
  // bad
  function count(a = b++) {
    console.log(a);
  }
  count();  // 1
  count();  // 2
  count(3); // 3
  count();  // 3




<div class="se-preview-section-delimiter"></div>

⬆ 返回目录

箭头函数

  • 8.1 当你必须使用函数表达式（或传递一个匿名函数）时，使用箭头函数符号。

    为什么?因为箭头函数创造了新的一个 this 执行环境（译注：参考 Arrow functions - JavaScript | MDN 和 ES6 arrow functions, syntax and lexical scoping），通常情况下都能满足你的需求，而且这样的写法更为简洁。

    为什么不？如果你有一个相当复杂的函数，你或许可以把逻辑部分转移到一个函数声明上。

// bad
[1, 2, 3].map(function (x) {
  return x * x
})

// good
[1, 2, 3].map((x) => {
  return x * x
})




<div class="se-preview-section-delimiter"></div>

  • 8.2 如果一个函数适合用一行写出并且只有一个参数，那就把花括号、圆括号和 return 都省略掉。如果不是，那就不要省略。

    为什么？语法糖。在链式调用中可读性很高。

    为什么不？当你打算回传一个对象的时候。

// good
[1, 2, 3].map(x => x * x)

// good
[1, 2, 3].reduce((total, n) => {
  return total + n
}, 0)




<div class="se-preview-section-delimiter"></div>

⬆ 返回目录

构造器

  • 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
  }
}




<div class="se-preview-section-delimiter"></div>

  • 9.2 使用 extends 继承。

    为什么？因为 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];
  }
}




<div class="se-preview-section-delimiter"></div>

  • 9.3 方法可以返回 this 来帮助链式调用。

    // 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




<div class="se-preview-section-delimiter"></div>

  • 10.2 不要使用通配符 import。

    为什么？这样能确保你只有一个默认 export。

// bad
import * as AirbnbStyleGuide from './AirbnbStyleGuide'

// good
import AirbnbStyleGuide from './AirbnbStyleGuide'




<div class="se-preview-section-delimiter"></div>

  • 10.3 不要从 import 中直接 export。

    为什么？虽然一行代码简洁明了，但让 import 和 export 各司其职让事情能保持一致。

// bad
// filename es6.js
export { es6 as default } from './airbnbStyleGuide'

// good
// filename es6.js
import { es6 } from './AirbnbStyleGuide'
export default es6




<div class="se-preview-section-delimiter"></div>

⬆ 返回目录

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




<div class="se-preview-section-delimiter"></div>

  • 11.2 现在还不要使用 generators。

    为什么？因为它们现在还没法很好地编译到 ES5。 (译者注：目前(2016/03) Chrome 和 Node.js 的稳定版本都已支持 generators)

⬆ 返回目录

属性

  • 12.1 使用 . 来访问对象的属性。

    const luke = {
jedi: true,
age: 28
}

// bad
const isJedi = luke['jedi']

// good
const isJedi = luke.jedi

  • 12.2 当通过变量访问属性时使用中括号 []。

    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();

  • 13.2 使用 const 声明每一个变量。

    为什么？增加新变量将变的更加容易，而且你永远不用再担心调换错 ; 跟 ,。

    // 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'

  • 13.3 将所有的 const 和 let 分组

    为什么？当你需要把已赋值变量赋值给未赋值变量时非常有用。

// 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




<div class="se-preview-section-delimiter"></div>

  • 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');
}
}

  • 14.4 函数声明的名称和函数体都会被提升。

    function example() {
superPower(); // => Flying

function superPower() {
  console.log('Flying')
}
}

  • 想了解更多信息，参考 Ben Cherry 的 JavaScript Scoping & Hoisting。

⬆ 返回目录

比较运算符 & 等号

  • 15.1 优先使用 === 和 !== 而不是 == 和 !=.

  • 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
}

  • 15.3 使用简写。

    // 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。

⬆ 返回目录

代码块

  • 16.1 使用大括号包裹所有的多行代码块。

    // 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。

  • 17.4 使用 // FIXME: 标注问题。

    class Calculator {
constructor() {
  // FIXME: shouldn't use a global here
  total = 0;
}
}

  • 17.5 使用 // TODO: 标注问题的解决方式。

    class Calculator {
constructor() {
  // TODO: total should be configurable by an options param
  this.total = 0;
}
}

⬆ 返回目录

空白

  • 18.1 使用 2 个空格作为缩进。

    // bad
function() {
∙∙∙∙const name
}

// bad
function() {
∙const name
}

// good
function() {
∙∙const name
}

  • 18.2 在花括号前放一个空格。

    // 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!')
}

  • 18.4 使用空格把运算符隔开。

    // bad
const x=y+5

// good
const x = y + 5

  • 18.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);

  • 18.6 在块末和新语句前插入空行。

    // 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;

⬆ 返回目录

逗号

  • 19.1 行首逗号：不需要。

    // 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'
};

⬆ 返回目录

类型转换

  • 21.1 在语句开始时执行类型转换。

  • 21.2 字符串：

    //  => 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 布尔:

    const age = 0;

// bad
const hasAge = new Boolean(age);

// good
const hasAge = Boolean(age);

// good
const hasAge = !!age;

⬆ 返回目录

命名规则

  • 22.1 避免单字母命名。命名应具备描述性。

    // bad
function q() {
// ...stuff...
}

// good
function query() {
// ..stuff..
}

  • 22.2 使用驼峰式命名对象、函数和实例。

    // bad
const OBJEcttsssss = {};
const this_is_my_object = {};
function c() {}

// good
const thisIsMyObject = {};
function thisIsMyFunction() {}

  • 22.3 使用帕斯卡式命名构造函数或类。

    // 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',
});

  • 22.4 使用下划线 _ 开头命名私有属性。

    // bad
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;

  • 22.8 当你导出单例、函数库、空对象时使用帕斯卡式命名。

    const AirbnbStyleGuide = {
es6: {
}
};

export default AirbnbStyleGuide;

⬆ 返回目录

存取器

  • 23.1 属性的存取函数不是必须的。

  • 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')

  • 25.2 缓存 jQuery 查询。

    // 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();

⬆ 返回目录

ECMAScript 5 兼容性

⬆ 返回目录

ECMAScript 6 规范

⬆ 返回目录

性能

⬆ 返回目录

资源

Learning ES6

Read This

Tools

Other Styleguides

Other Styles

Further Reading

Books

Blogs

Podcasts

⬆ 返回目录

一波万波
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
这是借鉴、引用的是京东前端代码规范。
05-05
这是借鉴、引用的是京东前端代码规范。
前端代码规范文档，js，css，html等
最新发布
10-20
前端代码规范文档@js、css、html 等 本文档旨在规范前端开发过程中的代码编写，涵盖 JavaScript、CSS、HTML 等多方面的规范，旨在提高代码的可读性、可维护性和可扩展性。 命名规范 1.1.1 项目命名：全部采用小写...
JavaScript 风格指导（Airbnb版）
weixin_30677073的博客
12-19 292
JavaScript 风格指导（Airbnb版） 用更合理的方式写 JavaScript 原文 翻译自 Airbnb JavaScript Style Guide 。 目录 类型 引用 对象 数组 解构 字符串 函数 箭头函数 构造函数 模块 Iterators & Generators 属性 变量 提升 比较运算符 & 等号 代码块 注释 空白 逗号 分号 类型转换...
es6学习-201803
weixin_34214500的博客
03-27 65
1、ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。 2、变量的解构赋值 数组 对象 3、扩展运算符（...） //数组 const [a, ...b] = [1, 2, 3]; a // 1 b...
前端知识汇总【ES系列之3解构赋值】
qq_44810886的博客
06-20 1164
解构赋值
es6变量解构与函数解构
weixin_30318645的博客
09-09 193
一、变量的解构 1.什么是解构？ es6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，被称为解构（Destructuring） 对变量进行批量赋值 2.数组解构赋值 var arr=[1,2,3]; var a=arr[1],b=arr[2],c=arr[3]; ===>es6数组解构语法 var arr=[1,2,3]; let[a,b,c]=arr; console...
前端笔试总结---函数偏点
lily183的博客
10-24 177
function fn(a){    console.log(typeof(a);)   var a=2;  function a(){} console.log(typeof a); } fn(1); 结果为function number (a=2) 分析：js里面没有块级作用域，取而代之使用了函数作用域，在函数里面所有变量不管在函数哪里声明都在整个函数里面有效，所以函数会声明提
前端代码规范.rar
11-25
在前端开发领域，代码规范是确保团队协作效率、提高代码可读性和维护性的关键。"前端代码规范"这个压缩包文件很可能包含了一系列关于如何编写整洁、一致且易于理解的前端代码的指南。以下是对这些规范的一些核心内容...
前端代码规范 - v1.0.docx
06-04
前端代码规范 前端代码规范是指在前端开发过程中遵循的一些规则和约定，以确保代码的可读性、维护性和可扩展性。本文档旨在提供一个通用的前端代码规范，涵盖 HTML、CSS、JS 和 Vue 代码规范，适合公司开发人员参考...
前端代码规范.pdf
05-25
前端代码规范
前端代码编写规范.md
12-03
规范前端代码编写文档，可提高代码可阅读力，提高代码可维护力。规范开发者的代码编写方式。JFK劳动时间反抗类毒素解放开绿灯解放收到
封装一个count函数，能实现如此调用：count(a)(b)(c)(d)(e)
Genge
12-24 1966
function count(x){ var fn = function(y){ return count(x*y); } fn.toString = function(){ return x; }; return fn; }
前端代码规范和编码风格实践详解
大灰狼的小绵羊哥哥的博客
07-23 1434
文章开始之前首先思考一个问题：缩进的代码风格到底是 2 个空格还是 4 个空格是受谁控制的？VS Code 默认设置？还是 Prettier? 或者其他什么？
前端代码规范
牛马程序员进阶之路
03-08 2265
一、编程规约 (一)命名规范 1.1.1 项目命名 全部采用小写方式， 以中划线分隔。 正例：mall-management-system 反例：mall_management-system / mallManagementSystem 1.1.2 目录命名 全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数 正例：scripts / styles / components / images / utils / layouts / demo-styles / .
推荐几个大厂的前端代码规范，你也能写出诗一样的代码！
全栈修炼
11-12 2998
大家好，我是你们的 前端章鱼猫，一个不喜欢吃鱼、又不喜欢喵 的超级猫 ~简介前端章鱼猫从 2016 年加入 GitHub，到现在的 2020 年，快整整 5 个年头了。相信很多人都没有逛...
Web 前端代码规范
Xiaoming's Blog
06-25 2408
此项目用于记录规范的、高可维护性的前端代码，这是通过分析 Github 众多前端代码库，总结出来的前端代码书写规范。
【笔记63】当心字符串连接引起的性能问题
u013773608的博客
08-11 218
字符串连接操作符（+）是把多个字符串合并为一个字符串的便利途径，但是它不适合运用在大规模的场景中。 为连接n个字符串而重复使用字符串连接操作符，需要n的平方级的时间。这是由于字符串不可变所致，当两个字符串被连接在一起时，他们的内容都要被拷贝。 考虑下面的方法，它通过反复连接每个项目行，构造出一个代表该对账单的字符串。 // Inappropriate use of string conca...
readme.md html代码,前端开发规范 github_README.md 编辑
weixin_42516048的博客
06-07 301
前端开发设计实例|前端语言开发桌面程序|前端 后端 开发语言程序员都不免和github 打交道，它成为我们程序员的远程代码库，随时随地可以下载编辑，但是大家对项目描述文件README.md，编辑语法清楚吗？让我们一起来学习一下吧大标题大标题一般显示工程名,类似中标题中标题一般显示重点项,类似小标题小标题类似标题的等级表示法关于标题的等级表示法，共分为六个等级，显示的文本大小依次减小。不同等级之间以...
前端开发规范
09-29
适合中小前端团队作为开发规范文档， 尤其适用采用React作为技术栈的团队

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值