命名
- 原则——编码格式UTF-8,根据功能为变量与方法命名(尽量不缩写)
- 类——构造函数/类 使用大驼峰命名法
- 方法——动词、动宾结构,使用小驼峰命名法
ex:get + 非布尔属性名() is + 布尔属性名() set + 属性名() has + 名词/形容词() 动词() 动词 + 宾语() 建议——类中的私有属性和方法名,建议以下划线开头或结尾
实例:
class Foo() {
this._bar = computerBar(); // 私有属性
this.baz = computerBaz(); // 非私有属性,可通过实例访问
} - 变量——小驼峰风格、避免使用否定的布尔变量名、缩写词全大/小写、不要用保留字作键名或变量名、jQuery类变量以 $ 开头
- 常量——全大写单词,以下划线连接
- 注释——复杂的判定条件封装成名字清晰的方法,把判定结果作为返回值(好的注释描述代码为什么这么写,而不是描述代码功能)
单行:// 块: /* / 文档: /* */(包含用法,参数,返回值说明)
代码排版格式
- 缩进——只允许空格,使用Tab的话需要更改IDE配置自动将Tab转化为空格
- 换行——以操作符/运算符开头
- 方法的参数尽量在一行——长参数名单独一行
- 对象字面量属性最多4个同行——大于4个的话每个参数独占一行
- 链式调用方法时一行最多4次——否则需要换行,把点放在前面
- 每行声明一个变量,禁止连续赋值
- 使用基本类型的字面量而不是其封装类型
- 禁止变量声明覆盖外层作用域的变量
方法
- 方法设计原则——单一职责原则、单一抽象层次
- 参数<=5个——参数过多可抽象为对象、不要把方法入参当作工作变量/临时变量、默认参数放最后、实现对外API时应对外部传入参数的合法性进行判断
- 声明与实现——使用声明的方式定义方法而不是表达式、用到匿名函数时尽量使用箭头函数
function Foo(){}即为声明式,有函数提升效果 var Foo = function (){}即为表达式,必须先定义后使用
字符串
- 使用单引号(创建一个包含HTML代码的字符串就会知道原因:标签属性需要用双引号括起来,会跟字符串的双引号产生配对错乱问题)
- 使用模板字符串实现字符串拼接(``)
数组
- 将数组当成包装数据结构使用,使用栈方法和队列方法(push、pop、shift、unshift等)
- 不要在数组上定义或使用非数字属性(length除外)
arr['str'] = 'string',数组尽量以索引为键
- 遍历时优先使用Arrary方法,如 forEach、map、filter、every...
- 不要在forEach里进行元素的remove/add操作,会导致遍历紊乱
- 使用扩展运算符 ... 赋值数组,避免浅拷贝问题
对象
- 对象字面量名称使用标识符
var object = { id:1, name:'name1' } 不要使用下面这种字符串做键 var obj =
- 尽量在一个地方定义对象的所有属性,即初始化定义对象时就把所有键都初始化,尽量不要后续添加属性
- 对象字面量中使用方法简写、属性简写
- 使用点来访问对象属性,只有属性是 动态的时候使用[ ],例如使用for-in遍历对象时通过key访问value
- getter和setter应该成对出现在对象中
- 禁止对象实例上直接使用Object.prototype的内置属性
- 需要约束for-in
- 不要修改内置对象的原型或向原型添加方法
- 使用扩展运算符 ... 进行对象赋值,防止浅拷贝问题
运算与表达式
- if判定条件中,变量在先,字面量在后
- 使用 === 和 !===
- 使用简写的条件表达式,例如:当isValid时bool型时,写if(isValid) 而不是 if(isValid===true)
- 不要在复杂条件表达式前加否定符
- 不要使用否定表达式
- 禁止使用嵌套的三元表达式
- 在混合使用不同的操作符时采用括号明确运算的优先级
- 数值有溢出风险时使用位运算替代四则运算
控制语句
- 每个switch语句都包含一个default语句,即使它不包含任何代码
- 每个有内容的case中都放置一条break语句,有return的除外
- 对于if-else if类型的条件判断最后必须包括一个else分支
- 不要用逻辑运算符代替控制语句
正则表达式
- 禁止正则表达式字面量中出现多个空格
- 建议正则表达式中使用命名捕获组
其他特性
- 注意this的不同分支
- this的使用场合
- 函数是构造函数
- 函数是一个方法
- 允许在以下函数中调用中出现this关键字
- 调用了该函数的call/apply/bind方法
- 如果给出thisArg,该函数是数组方法的一个回调
- 函数在JSDoc注释标记中有@this标签
- 不要在顶级作用域下使用变量和函数声明
- 为window上的属性/方法加上命名空间
模块
- 代码中总使用ES6标准的模块(import/export)方式,而不是使用非标准的模块模块化加载器(Node.js代码除外)
- 不要import通配符 *
- 不要多次import同一模块
- import的顺序依次为内置模块,外部模块,内部模块
- import不要包括Javascript文件拓展名
- import不使用绝对路径
- import的三方件需加入到package.json
- 当模块只有一个export时,最好使用默认导出,而不是命名导出
- 如果文件只export一个函数,那么文件名、类名、以及默认导出的名称应一致
- 不要从import中直接export
- 需要导出的变量必须是const类型或不可变的类型
数值与计算
- 禁止省略小数点前后的0
- 要求调用isNaN()检查NaN
异常的使用
- 抛出的异常应该是Error错误或Error的子类,永远不要抛出字符串或其他对象
- 要求使用Error对象作为Promise拒绝的原因
- 禁止在finally语句中出现控制流语句
异步
禁用不必要的return await
避免
- 禁止使用eval()
- 禁止使用隐式的eval()
- 禁止使用with(){}
- 禁止使用较短的符号实现类型转换(即通过运算进行强制类型转换)
- 禁止多余的return语句
- 不要在HTML中写过多的JS和CSS代码
- 不要使用非标准的功能
性能编程规范
- 缓存jQuery查询结果
- 避免所有元素选择器
- 有限使用ID选择器,尽量给选择器指定上下文context
- 循环中减少DOM操作
- 利用事件代理机制(冒泡)
其他
- 尽量不使用同步请求
- 减少界面DOM的更新(静态内容尽量不要重排重绘)
- 减少HML标签数
内存编程规范
- DOM
- 在满足业务特性需求的情况下,减少DOM对象的动态创建和删除
- 禁止在循环/事件回调中使用文本+变量的方式使用jQuery创建DOM
- 尽量不适用iframe
- 事件监听
- 正确使用DOM Event level 2/3标准进行时间的绑定和注销
- 页面卸载,动态删除的DOM对象时要先注销绑定的事件监听
- 不要在HTML标签上嵌入JS事件回调代码,优先使用jQuery
- 销毁不再使用的定时器和延时器