文章目录
对象
- 使用字面值创建对象
1 | // bad |
- 不要使用保留字 reserved words 作为键
1 | // bad, 三个 key 都是保留字 |
数组
- 使用字面值创建数组
1 | // bad |
- 如果你不知道数组的长度, 使用push
1 | var someStack = []; |
- 当你需要拷贝数组时使用slice.jsPerf
1 | var len = items.length, |
- 使用slice将类数组的对象转成数组.
1 | function trigger() { |
字符串
- 对字符串使用单引号
''
1 | // bad |
- 超过80个字符的字符串应该使用字符串连接换行
- 注: 如果过度使用, 长字符串连接可能会对性能有影响.jsPerf & Discussion
1 | // bad |
- 编程时使用join而不是字符串连接来构建字符串, 特别是IE: jsPerf.
1 | var items, |
函数
- 函数表达式:
1 | // 匿名函数表达式 |
- 绝对不要在一个非函数块里声明一个函数, 把那个函数赋给一个变量. 浏览器允许你这么做, 但是它们解析不同.
- 注: ECMA-262定义把
块
定义为一组语句, 函数声明不是一个语句.阅读ECMA-262对这个问题的说明.
1 | // bad |
- 绝对不要把参数命名为
arguments
, 这将会逾越函数作用域内传过来的arguments
对象.
1 | // bad |
属性
- 当使用变量访问属性时使用中括号.
1 | var luke = { |
变量
- 总是使用
var
来声明变量, 如果不这么做将导致产生全局变量, 我们要避免污染全局命名空间.
1 | // bad |
- 使用一个
var
以及新行声明多个变量, 缩进4个空格.
1 | // bad |
- 最后再声明未赋值的变量, 当你想引用之前已赋值变量的时候很有用.
1 | // bad |
- 在作用域顶部声明变量, 避免变量声明和赋值引起的相关问题.
1 | // bad |
条件表达式和等号
-
适当使用
===
和!==
以及==
和!=
. -
条件表达式的强制类型转换遵循以下规则:
- 对象 被计算为 true
- Undefined 被计算为 false
- Null 被计算为 false
- 布尔值 被计算为 布尔的值
- 数字 如果是 +0, -0, or NaN 被计算为 false , 否则为 true
- 字符串 如果是空字符串
''
则被计算为 false, 否则为 true
1 | if ([0]) { |
- 使用快捷方式.
1 | // bad |
- 阅读 Truth Equality and JavaScript 了解更多
块
- 给所有多行的块使用大括号
1 | // bad |
注释
- 使用
/** ... */
进行多行注释, 包括描述, 指定类型以及参数值和返回值
1 | // bad |
- 使用
//
进行单行注释, 在评论对象的上面进行单行注释, 注释前放一个空行.
1 | // bad |
- 如果你有一个问题需要重新来看一下或如果你建议一个需要被实现的解决方法的话需要在你的注释前面加上
FIXME
或TODO
帮助其他人迅速理解
1 | function Calculator() { |
1 | function Calculator() { |
空白
- 将tab设为4个空格
1 | // bad |
- 大括号前放一个空格
1 | // bad |
- 在做长方法链时使用缩进.
1 | // bad |
逗号
- 不要将逗号放前面
1 | // bad |
- 不要加多余的逗号, 这可能会在IE下引起错误, 同时如果多一个逗号某些ES3的实现会计算多数组的长度.
1 | // bad |
分号
- 语句结束一定要加分号
1 | // bad |
类型转换
- 在语句的开始执行类型转换.
- 字符串:
1 | // => this.reviewScore = 9; |
- 对数字使用
parseInt
并且总是带上类型转换的基数.
1 | var inputValue = '4'; |
- 布尔值:
1 | var age = 0; |
命名约定
- 避免单个字符名, 让你的变量名有描述意义.
1 | // bad |
- 当命名对象、 函数和实例时使用驼峰命名规则
1 | // bad |
- 当命名构造函数或类时使用驼峰式大写
1 | // bad |
- 命名私有属性时前面加个下划线
_
1 | // bad |
- 当保存对
this
的引用时使用_this
.
1 | // bad |
存取器
- 属性的存取器函数不是必需的
- 如果你确实有存取器函数的话使用getVal() 和 setVal(‘hello’)
1 | // bad |
- 如果属性是布尔值, 使用isVal() 或 hasVal()
1 | // bad |
- 可以创建get()和set()函数, 但是要保持一致
1 | function Jedi(options) { |
构造器
- 给对象原型分配方法, 而不是用一个新的对象覆盖原型, 覆盖原型会使继承出现问题.
1 | function Jedi() { |
- 方法可以返回
this
帮助方法可链.
1 | // bad |
- 可以写一个自定义的toString()方法, 但是确保它工作正常并且不会有副作用.
1 | function Jedi(options) { |
事件
- 当给事件附加数据时, 传入一个哈希而不是原始值, 这可以让后面的贡献者加入更多数据到事件数据里而不用找出并更新那个事件的事件处理器
1 | // bad |
更好:
1 | // good |
模块
- 模块应该以
!
开始, 这保证了如果一个有问题的模块忘记包含最后的分号在合并后不会出现错误 - 这个文件应该以驼峰命名, 并在同名文件夹下, 同时导出的时候名字一致
- 加入一个名为noConflict()的方法来设置导出的模块为之前的版本并返回它
- 总是在模块顶部声明
'use strict';
1 | // fancyInput/fancyInput.js |
jQuery
- 缓存jQuery查询
1 | // bad |
- 对DOM查询使用级联的
$('.sidebar ul')
或$('.sidebar ul')
, jsPerf - 对有作用域的jQuery对象查询使用
find
1 | // bad |