JavaScript代码风格参考指南

格式规范

  • 命名规则:规范
    • 避免单字母命名。命名应具备描述性
    • 使用驼峰式命名对象、函数和实例(首字母小写)
    • 使用帕斯卡式命名构造函数或类(首字母大写)
    • 使用下划线 _ 开头命名私有属性
    • 别保存 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 事件还是私有事件),传入一个哈希而不是原始值。这样可以让后面的贡献者增加更多数据到事件数据而无需找出并更新事件的每一个处理器
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,142评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,298评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,068评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,081评论 1 291
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,099评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,071评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,990评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,832评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,274评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,488评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,649评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,378评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,979评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,625评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,643评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,545评论 2 352

推荐阅读更多精彩内容