1.通用约定
注释
原则
- As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性、可读性
- As long as necessary(如有必要,尽量详尽):合理的注释、空行排版等,可以让代码更易阅读、更具美感
单行注释
必须独占一行。//
后跟一个空格,缩进与下一行被注释说明的代码一致。
多行注释
避免使用 /* ... */
这样的多行注释。有多行注释内容时,使用多个单行注释。
函数/方法注释
- 函数/方法注释必须包含函数说明,有参数和返回值时必须使用注释标识;
- 参数和返回值注释必须包含类型信息和说明;
- 当函数是内部函数,外部不可访问时,可以使用 @inner 标识;
1 | /** |
文件注释
文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容,它的作者,依赖关系和兼容性信息。如下:
1 | /** |
命名
变量,使用 Camel 命名法。
1 | var loadingModules = {}; |
私有属性、变量和方法以下划线 _
开头。
1 | var _privateMethod = {}; |
常量,使用全部字母大写,单词间下划线分隔的命名方式。
1 | var HTML_ENTITY = {}; |
- 函数,使用 Camel 命名法。
- 函数的参数,使用 Camel 命名法。
1 | function stringFormat(source) {} |
- 类,使用 Pascal 命名法
- 类的 方法/属性,使用 Camel 命名法
1 | function TextNode(value, engine) { |
- 枚举变量 使用 Pascal 命名法
- 枚举的属性 使用全部字母大写,单词间下划线分隔的命名方式
1 | var TargetState = { |
由多个单词组成的 缩写词,在命名中,根据当前命名法和出现的位置,所以字母的大小写与首字母的大小写保持一致。
1 | function XMLParser() {} |
命名语法
类名,使用名词。
1 | function Engine(options) {} |
函数名,使用动宾短语。
1 | function getStyle(element) {} |
boolean类型的变量使用 is 或 has 开头。
1 | var isReady = false; |
Promise 对象用动宾短语的进行时表达
1 | var loadingData = ajax.get('url'); |
接口命名规范
- 可读性强,见名晓义;
- 尽量不与 jQuery 社区已有的习惯冲突;
- 尽量写全。不用缩写,除非是下面列表中约定的(变量以表达清除为目的);
常用词 | 说明 |
---|---|
options | 表示选项,不要使用 config、opts 等 |
active | 表示当前,不要用 current 等 |
index | 表示索引,不要用 idx 等 |
trigger | 触点元素 |
triggerType | 触发类型、方式 |
context | 表示传入的 this 对象 |
object | 推荐写全,不推荐简写为 o、obj 等 |
element | 推荐写全,不推荐简写为 el、elem 等 |
length | 不要写成 len、l |
prev | previous的缩写 |
next | next 下一个 |
contructor | 不能写成 ctor |
easing | 动画平滑函数 |
min | minimize 的缩写 |
max | maximize 的缩写 |
DOM | 不要写成 dom、Dom |
.hbs | 使用 hbs 后缀表示模板 |
btn | button 的缩写 |
link | 超链接 |
title | 主要文本 |
img | 图片路径(img标签src属性) |
dataset | html5 data-xxx 数据接口 |
theme | 主题 |
className | 类名 |
classNameSpace | class 命名空间 |
True 和 Flase 布尔表达式
类型检测优先使用 typeof。对象类型检测使用 instanceof。null 或 undefined 的检测使用 ==null。
下面的布尔表达都返回false:
- null
- undefined
- “” (空字符串)
- 0 (数字0)
但小心下面的,可能返回 true:
- “0” (字符串0)
- [] (空数组)
- {} (空对象)
不要在 Array 上使用 for-in 循环
for-in 循环只用于 object/map/hash
的遍历,对 Array
用 for-in 循环有时会出错。因为他并不是从 0 到 length - 1 进行遍历,而是所有出现在对象及其原型链的键值。
1 | // Not recommended |
二元和三元操作符
操作符始终写在前一行,以免分号的隐式插入产生预想不到的问题。
1 | var x = a ? b : c; |
.
操作符也是如此:
1 | var x = foo.bar(). |
条件(三元)操作符(? :)
三元操作符用于替代 if 条件判断语句。
1 | // Not recommended |
&& 和 ||
二元布尔操作符是可短路的,只有在必要时才会计算到最后一项。
1 | // Not recommended |
2.性能优化
避免不必要的 DOM 操作
浏览器遍历 DOM 元素的代价是昂贵的。最简单优化 DOM 树查询的方案是,当一个元素出现多次时,将它保存在一个变量中,就避免多次查询 DOM 树了。
1 | // Recommended |
缓存数组长度
循环无疑是和 JavaScript 性能非常相关的一部分。通过存储数组长度,可以有效避免每次循环重新计算。
虽然现代浏览器引擎会自动优化这个过程,但是不要忘记还有旧的浏览器
1 | var arr = new Array(1000), len, i; |
异步加载第三方内容
当无法保证嵌入第三方内容比如视频或者一个 like/tweet 按钮可以正常工作的时候,你需要考虑使用异步加载这些代码,避免阻塞整个页面加载。
1 | (function() { |