Javascript 编码风格指南

Javascript 作为一个非常灵活的脚本语言,光是比较流行的编码风格指南就有好几种。有 Google, NPM, Node.js, jQuery, Airbnb 等等。本文以 Airbnb 风格为基础来介绍 js 的编码风格,对原文的逻辑进行了梳理。


更新历史

  • 2016.11.14: 初稿完成

格式规范

  • 命名规则:规范
    • 避免单字母命名。命名应具备描述性
    • 使用驼峰式命名对象、函数和实例(首字母小写)
    • 使用帕斯卡式命名构造函数或类(首字母大写)
    • 使用下划线 _ 开头命名私有属性
    • 别保存 this 的引用。使用箭头函数或 Function#bind
    • 如果你的文件只输出一个类,那你的文件名必须和类名完全保持一致
    • 当你导出默认的函数时使用驼峰式命名。你的文件名必须和函数名完全保持一致
    • 当你导出单例、函数库、空对象时使用帕斯卡式命名
  • 代码块:规范
    • 使用大括号包裹所有的多行代码块
    • 如果通过 ifelse 使用多行代码块,把 else 放在 if 代码块关闭括号的同一行
  • 注释:规范
    • 使用 /** ... */ 作为多行注释。包含描述、指定所有参数和返回值的类型和值
    • 使用 // 作为单行注释。在评论对象上面另起一行使用单行注释。在注释前插入空行
    • 给注释增加 FIXMETODO 的前缀可以帮助其他开发者快速了解这是一个需要复查的问题,或是给需要实现的功能提供一个解决方式。这将有别于常见的注释,因为它们是可操作的。使用 FIXME -- need to figure this out 或者 TODO -- need to implement
  • 空白:这个部分见仁见智保持一致即可
    • 使用 2 个空格作为缩进
    • 在花括号前放一个空格
    • 在控制语句(ifwhile)等的小括号前放一个空格。在函数调用及声明中,不在函数的参数列表前加空格
    • 使用空格把运算符隔开
    • 在文件末尾插入一个空行
    • 在使用长方法链时进行缩进。使用前面的点 . 强调这是方法调用而不是新语句
    • 在块末和新语句前插入空行
  • 逗号:规范
    • 行首逗号:不需要
    • 增加结尾的逗号: 需要。因为这会让 git diffs 更干净
  • 分号:规范
    • 使用分号,防止在极端情况下被合并

基本操作

  • 类型:核心思想是避免复杂类型的深浅复制
    • 直接存取基本类型:字符串、数值、布尔类型、nullundefined
    • 通过引用的方式存取复杂类型:对象、数组、函数
  • 引用:核心思想是最小化引用的影响范围,不要轻易变化
    • 对所有的引用使用 const,不要使用 var。这能确保无法对引用重新赋值,避免出现 bug,减少理解成本
    • 如果一定需要可变动的引用,使用 let 而不是 var。因为 let 是块级作用域,而 var 是函数作用域
    • letconst 都是块级作用域
  • 变量:
    • 一直使用 const 来声明变量,如果不这样做就会产生全局变量。我们需要避免全局命名空间的污染
    • 将所有的 constlet 分组,当你需要把已赋值变量赋值给未赋值变量时非常有用
    • 在你需要的地方给变量赋值,但请把它们放在一个合理的位置。因为 letconst 是块级作用域而不是函数作用域
  • 字符串:增加可读性
    • 字符串使用单引号 ''
    • 字符串超过 80 个字节应该使用字符串连接号换行
    • 过度使用字串连接符号可能会对性能造成影响
    • 程序化生成字符串时,使用模板字符串代替字符串连接。因为模板字符串更为简洁,更具可读性
  • 比较运算符 & 等号:规范与代码可读性
    • 优先使用 ===!== 而不是 ==!=
    • 条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则
      • 对象 被计算为 true
      • Undefined 被计算为 false
      • Null 被计算为 false
      • 布尔值 被计算为 布尔的值
      • 数字 如果是 +0-0、或 NaN 被计算为 false, 否则为 true
      • 字符串 如果是空字符串 '' 被计算为 false,否则为 true
    • 使用简写
  • 类型转换:
    • 在语句开始时执行类型转换
    • 字符串不要用 this.score + '',而是 String(this.score)
    • 对数字使用 parseInt 转换,并带上类型转换的基数
    • 如果因为某些原因 parseInt 成为你所做的事的瓶颈而需要使用位操作解决性能问题时,留个注释说清楚原因和你的目的
    • 小心使用位操作运算符。数字会被当成 64 位值,但是位操作运算符总是返回 32 位的整数(参考)。位操作处理大于 32 位的整数值时还会导致意料之外的行为。关于这个问题的讨论。最大的 32 位整数是 2,147,483,647
    • 使用 Boolean()!! 来进行布尔值的转换
  • 存取器:一致性与规范
    • 属性的存取函数不是必须的
    • 如果你需要存取函数时使用 getVal()setVal('hello')
    • 如果属性是布尔值,使用 isVal()hasVal()
    • 创建 get()set() 函数是可以的,但要保持一致
  • jQuery:明确指出使用 jQuery 的代码,优化性能
    • 使用 $ 作为存储 jQuery 对象的变量名前缀
    • 缓存 jQuery 查询
    • 对 DOM 查询使用层叠 $('.sidebar ul') 或 父元素 > 子元素 $('.sidebar > ul')
    • 对有作用域的 jQuery 对象查询使用 find

复杂结构

  • 对象:考虑兼容性与可读性
    • 使用字面值创造对象,如 const item = {}; 而非 const item = new Object();
    • 浏览器环境中执行的代码不要使用 保留字 作为键值(比如 private 这类就不要用),可以使用同义词替换所需要使用的保留字,比如说把 class 换成 type
    • 创建有动态属性名的对象时,使用可被计算的属性名称,这样就可以在一个地方定义所有的对象属性
    • 使用对象方法和对象属性值的简写
    • 在对象属性声明前把简写的属性分组,这样能清楚地看出哪些属性使用了简写
  • 数组:可读性与操作简化
    • 使用字面值创建数组,如 const items = []; 而非 const items = new Array();
    • 向数组添加元素时使用 Arrary#push 替代直接赋值
    • 使用拓展运算符 ... 复制数组,如 const itemsCopy = [...items]
    • 使用 Array#from 把一个类数组对象转换成数组
  • 解构:减少操作开销
    • 使用解构存取和使用多属性对象,这样能减少临时引用属性
    • 对数组使用解构赋值
    • 需要回传多个值时,使用对象解构,而不是数组解构。因为增加属性或者改变排序不会改变调用时的位置
  • 函数:性能与可读性
    • 使用函数声明代替函数表达式,如 function foo() {}
    • 永远不要在一个非函数代码块(if、while 等)中声明一个函数,把那个函数赋给一个变量。浏览器允许你这么做,但它们的解析表现不一致
    • ECMA-262 把 block 定义为一组语句。函数声明不是语句
    • 永远不要把参数命名为 arguments。这将取代原来函数作用域内的 arguments 对象
    • 不要使用 arguments。可以选择 rest 语法 ... 替代。因为使用 ... 能明确你要传入的参数。另外 rest 参数是一个真正的数组,而 arguments 是一个类数组
    • 直接给函数的参数指定默认值,不要使用一个变化的函数参数
    • 直接给函数参数赋值时需要避免副作用
  • 箭头函数:简化代码,加强可读性
    • 当你必须使用函数表达式(或传递一个匿名函数)时,使用箭头函数符号
    • 如果一个函数适合用一行写出并且只有一个参数,那就把花括号、圆括号和 return 都省略掉。如果不是,那就不要省略。如 [1, 2, 3].map(x => x * x)
  • 构造器:维持一致性,链式调用
    • 总是使用 class,避免直接操作 prototype。因为 class 语法更有可读性
    • 使用 extends 继承,因为 extends 是一个内建的原型继承方法并且不会破坏 instanceof
    • 方法可以返回 this 来帮助链式调用
    • 可以写一个自定义的 toString() 方法,但要确保它能正常运行并且不会引起副作用
  • 模块:确保模块化,符合规范
    • 总是使用模组(import/export)而不是其他非标准模块系统。你可以编译为你喜欢的模块系统
    • 不要使用通配符 import,这样能确保你只有一个默认 export
    • 不要从 import 中直接 export。虽然一行代码简洁明了,但让 import 和 export 各司其职让事情能保持一致
  • 迭代器:往函数式编程上靠,减少副作用
    • 不要使用 iterators。使用高阶函数例如 map()reduce() 替代 for-of。因为处理纯函数的回调值更易读,这比它带来的副作用更重要
  • 属性:区分是否通过变量来访问
    • 使用 . 来访问对象的属性
    • 当通过变量访问属性时使用中括号 []
  • 事件:灵活性,降低判断成本
    • 当给事件附加数据时(无论是 DOM 事件还是私有事件),传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器

参考链接

捧个钱场?