JavaScript 风格指南/编码规范(Airbnb公司版)

Airbnb 是一家位于美国旧金山的公司,本文是其内部的 JavaScript 风格指南/编码规范,在 Github 上有 11,000+ Star,2100+ fork,前端开发者可参考。

  • 基本类型:当你访问基本类型时,你是直接对它的值进行操作。
    • string
    • number
    • boolean
    • null
    • undefined
  • object
  • array
  • function

对象

  • 使用字面量语法来创建对象
  • 不要使用保留字作为“键值”,因为在IE8不能运行。More info
  • 使用容易理解的同义词来替代保留字
  • 数组

  • 使用字面量语法来创建数组
  • 如果你不知道数组长度,数组添加成员使用push方法。
  • 当你需要复制一个数组时,使用数组的slice方法。jsPerf
  • 当你需要把“类似数组对象”转为数组时,使用数组的slice方法。
  • 字符串

  • 字符串使用单引号‘’
  • 大于80个元素的字符串需要通过分隔符进行多行操作。
  • 注意:如果在长字符串中过度使用分隔符会影响性能。. jsPerf & Discussion
  • 通过编程的方式创建字符串,应该使用数组的join方法,而不是字符串链接方法。特别是对于IE而言。 jsPerf.
  • 函数

  • 函数表达式
  • 不要直接在非函数块(if,while等)里声明一个函数,最好将函数赋值给一个变量。虽然浏览器允许你在非函数块中声明函数,但是由于不同的浏览器对Javascript的解析方式不同,这样做就很可能造成麻烦。
  • 注意:ECMA-262 将块定义为一组语句,而函数声明不是语句。Read ECMA-262′s note on this issue
  • 不要将参数命名为arguments,它将在每个函数的作用范围内优先于arguments对象。
  • 属性

  • 使用点符号 . 来访问属性
  • 当你在变量中访问属性时,使用[ ]符号
  • 变量

  • 使用var来声明变量,否则将声明全局变量,我们需要尽量避免污染全局命名空间,Captain Planet这样警告过我们。
  • 多个变量时只使用一个var声明,每个变量占一新行。
  • 最后再声明未赋值的变量,这对你之后需要依赖之前变量的变量赋值会有帮助。
  • 在范围内将变量赋值置顶,这有助于避免变量声明和赋值提升相关的问题
  • 提升

  • 变量声明在范围内提升,但赋值并没有提升
  • 匿名函数表达式提升变量名,但函数赋值并没有提升,
  • 命名函数表达式提升变量名,但函数名字和函数体并没有提升。
  • 函数声明能提升他们的函数名和函数体
  • 更多的信息在JavaScript Scoping & Hoisting by Ben Cherry

 

  • 条件表达式和相等

  • 条件表达式强制使用 ToBoolean方法进行解析,并遵从以下简单的规则Object :返回 true
  • Undefined 返回 false
  • Null 返回 false
  • Booleans :返回 boolean的值
  • Numbers :如果是+0, -0, or NaN返回 false, 其他则 true
  • Strings :空字符串''返回 false 其他返回true
  • 使用简易方式
  • 更多的信息查看 Truth Equality and JavaScript by Angus Croll

  • 在多行块中使用大括号

注释

  • 多行注释使用 /** ... */ ,包括描述,指定类型、所有参数的值和返回值
  • 单行注释使用 //, 在注释的内容前另起一行进行单行注释,并在注释前留一空行。
  • 在你的注释加上FIXME或TODO的前缀可以帮助其他开发者迅速理解你指出的问题和需要的帮助,以及你建议需要完善的解决问题,这跟常规注释不一样因为其具有可行动性,FIXME——是需要解决的而TODO——是需要完善的
  • 使用// FIXME: 来标记问题
  • 使用 // TODO:给待解决问题进行标注
  • 空格

  • 使用tabs设置两个空格
  • 分支前面空一格
  • 操作符前后空一格
  • 文件末尾用换行符结束
  • 使用长方法链时使用缩进
  • 逗号

  • 不要在句首使用逗号
  • 不要使用多余的逗号,这在IE6/7 和 IE9的混杂模式中会造成问题,同样,在ES3中有些实现,如果使用多余的逗号将增加数组的长度,这在ES5中有阐明(source):
  • 分号

  • 转型&强制

  • 在语句的开头执行强制转型。
  • Strings:
  • 使用parseIntNumbers型进行强制转型。
  • 如果出于某种原因你需要做些特别的事,而parseInt是你的瓶颈,出于性能考虑你需要使用位移,那么留下你的注释来解释原因。
  • 注意:小心位移操作符,Numbers代表着64位的值,而位移操作符只能返回32位的整型,位移对于大于32位的整型的值会有不好的影响,32位最大的有符号整型是2,147,483,647。
  • (有关讨论:Discussion
  • Booleans:
  • 命名规则

  • 不要使用一个字母命名,而应该用单词描述
  • 使用驼峰法来给对象、函数、实例命名。
  • 使用驼峰式大小写给构造函数和类命名。
  • 使用下划线前缀_来命名私有属性。
  • 储存this的引用使用_this
  • 给你的函数命名,这有助于堆栈重写
  • 注意:IE8以下还有一些关于命名函数表达式的怪癖。详情见http://kangax.github.io/nfe/

 

  • 访问器

  • 如果你创建访问函数使用getVal() 和 setVal(‘hello’)

如果这个属性是boolean,使用isVal() 或者 hasVal()

 

.也可以使用get() 和 set()函数来创建,但是必须一致。

    • 构造器

    • 给原型对象添加方法,相比用新对象重写原型,重写原型会有继承问题。如果你要重写原型方法,请重写基础方法。
    • 方法返回this有助于方法链
    • 可以重写常规的toString()方法。但必须保证可以成功运行并没有别的影响
    • 将为事件加载数据时(不管是DOM事件还是其他专用事件的,比如Backbone事件)用散列表来取代原始值。因为这将允许后续添加更多的数据载入事件而不用更新每个事件的处理程序。例如:

更好的方式:

模块

  • 模块应该以 “!”开始,以确保当模块忘记包含最后一个分号时,在脚本连接时不会报错。
  • 文档需要用驼峰法命名,同一文件内要用一样的名字以及要与单个输出相匹配。
  • 增加一个叫noConflict()的方法,使模块输出早期版本并返回。
  • 在模块开始的部位声明'use strict'

jQuery

  • JQuery对象变量前缀使用$
  • jQuery缓存查找
  • 在DOM查询中使用层叠样式 $('.sidebar ul')parent > child $('.sidebar > ul')jsPerf
  • 使用find来查找jQuery对象
1 4 收藏 7 评论

关于作者:kinolee

新浪微博:@木虫草 个人主页 · 我的文章 · 12

相关文章

可能感兴趣的话题



直接登录
最新评论
  • anysong 程序猿 2014/11/14

    mark~

  • littlebug   2014/11/20

    值得收藏

  • 唐尤华 工程师 2015/09/25

    好文收藏!

  • wingc   2015/09/26

    翻译和校稿到底有没有读完原文,还是有意识的选择跳过不翻译:
    基本类型下分primitive和complex,讲object前是reference,为啥都不见了?原文有用let和const来取代遍地都是的var,译文为啥只有var?再细看各节都有略过不译的,如3.5 Use object method shorthand / 3.6 Use property value shorthand / … / 4.3 Use array spreads … to copy arrays.等等太多…

    这种态度治学要不得哦。

跳到底部
返回顶部