琐事屋
每一步都是更接近目标的一步

命名

  1. 原则——编码格式UTF-8,根据功能为变量与方法命名(尽量不缩写)
  2. 类——构造函数/类 使用大驼峰命名法
  3. 方法——动词、动宾结构,使用小驼峰命名法

    ex:get + 非布尔属性名() is + 布尔属性名() set + 属性名() has + 名词/形容词() 动词() 动词 + 宾语() 建议——类中的私有属性和方法名,建议以下划线开头或结尾
    实例
    class Foo() {
      this._bar = computerBar(); // 私有属性
      this.baz = computerBaz(); // 非私有属性,可通过实例访问
    }

  4. 变量——小驼峰风格、避免使用否定的布尔变量名、缩写词全大/小写、不要用保留字作键名或变量名、jQuery类变量以 $ 开头
  5. 常量——全大写单词,以下划线连接
  6. 注释——复杂的判定条件封装成名字清晰的方法,把判定结果作为返回值(好的注释描述代码为什么这么写,而不是描述代码功能

    单行://     块: /* /     文档: /* */(包含用法,参数,返回值说明)

代码排版格式

  1. 缩进——只允许空格,使用Tab的话需要更改IDE配置自动将Tab转化为空格
  2. 换行——以操作符/运算符开头
  3. 方法的参数尽量在一行——长参数名单独一行
  4. 对象字面量属性最多4个同行——大于4个的话每个参数独占一行
  5. 链式调用方法时一行最多4次——否则需要换行,把点放在前面
  6. 每行声明一个变量,禁止连续赋值
  7. 使用基本类型的字面量而不是其封装类型
  8. 禁止变量声明覆盖外层作用域的变量

方法

  1. 方法设计原则——单一职责原则、单一抽象层次
  2. 参数<=5个——参数过多可抽象为对象、不要把方法入参当作工作变量/临时变量、默认参数放最后、实现对外API时应对外部传入参数的合法性进行判断
  3. 声明与实现——使用声明的方式定义方法而不是表达式、用到匿名函数时尽量使用箭头函数

    function Foo(){}即为声明式,有函数提升效果 var Foo = function (){}即为表达式,必须先定义后使用

字符串

  1. 使用单引号(创建一个包含HTML代码的字符串就会知道原因:标签属性需要用双引号括起来,会跟字符串的双引号产生配对错乱问题)
  2. 使用模板字符串实现字符串拼接(``)

数组

  1. 将数组当成包装数据结构使用,使用栈方法和队列方法(push、pop、shift、unshift等)
  2. 不要在数组上定义或使用非数字属性(length除外)

    arr['str'] = 'string',数组尽量以索引为键

  3. 遍历时优先使用Arrary方法,如 forEach、map、filter、every...
  4. 不要在forEach里进行元素的remove/add操作,会导致遍历紊乱
  5. 使用扩展运算符 ... 赋值数组,避免浅拷贝问题

对象

  1. 对象字面量名称使用标识符

    var object = { id:1, name:'name1' } 不要使用下面这种字符串做键 var obj =

  2. 尽量在一个地方定义对象的所有属性,即初始化定义对象时就把所有键都初始化,尽量不要后续添加属性
  3. 对象字面量中使用方法简写、属性简写
  4. 使用点来访问对象属性,只有属性是 动态的时候使用[ ],例如使用for-in遍历对象时通过key访问value
  5. getter和setter应该成对出现在对象中
  6. 禁止对象实例上直接使用Object.prototype的内置属性
  7. 需要约束for-in
  8. 不要修改内置对象的原型或向原型添加方法
  9. 使用扩展运算符 ... 进行对象赋值,防止浅拷贝问题

运算与表达式

  1. if判定条件中,变量在先,字面量在后
  2. 使用 === 和 !===
  3. 使用简写的条件表达式,例如:当isValid时bool型时,写if(isValid) 而不是 if(isValid===true)
  4. 不要在复杂条件表达式前加否定符
  5. 不要使用否定表达式
  6. 禁止使用嵌套的三元表达式
  7. 在混合使用不同的操作符时采用括号明确运算的优先级
  8. 数值有溢出风险时使用位运算替代四则运算

控制语句

  1. 每个switch语句都包含一个default语句,即使它不包含任何代码
  2. 每个有内容的case中都放置一条break语句,有return的除外
  3. 对于if-else if类型的条件判断最后必须包括一个else分支
  4. 不要用逻辑运算符代替控制语句

正则表达式

  1. 禁止正则表达式字面量中出现多个空格
  2. 建议正则表达式中使用命名捕获组

其他特性

  1. 注意this的不同分支
  2. this的使用场合
    1. 函数是构造函数
    2. 函数是一个方法
    3. 允许在以下函数中调用中出现this关键字
      1. 调用了该函数的call/apply/bind方法
      2. 如果给出thisArg,该函数是数组方法的一个回调
      3. 函数在JSDoc注释标记中有@this标签
  3. 不要在顶级作用域下使用变量和函数声明
  4. 为window上的属性/方法加上命名空间

模块

  1. 代码中总使用ES6标准的模块(import/export)方式,而不是使用非标准的模块模块化加载器(Node.js代码除外)
  2. 不要import通配符 *
  3. 不要多次import同一模块
  4. import的顺序依次为内置模块,外部模块,内部模块
  5. import不要包括Javascript文件拓展名
  6. import不使用绝对路径
  7. import的三方件需加入到package.json
  8. 当模块只有一个export时,最好使用默认导出,而不是命名导出
  9. 如果文件只export一个函数,那么文件名、类名、以及默认导出的名称应一致
  10. 不要从import中直接export
  11. 需要导出的变量必须是const类型或不可变的类型

数值与计算

  1. 禁止省略小数点前后的0
  2. 要求调用isNaN()检查NaN

异常的使用

  1. 抛出的异常应该是Error错误或Error的子类,永远不要抛出字符串或其他对象
  2. 要求使用Error对象作为Promise拒绝的原因
  3. 禁止在finally语句中出现控制流语句

异步

禁用不必要的return await

避免

  1. 禁止使用eval()
  2. 禁止使用隐式的eval()
  3. 禁止使用with(){}
  4. 禁止使用较短的符号实现类型转换(即通过运算进行强制类型转换)
  5. 禁止多余的return语句
  6. 不要在HTML中写过多的JS和CSS代码
  7. 不要使用非标准的功能

性能编程规范

  1. 缓存jQuery查询结果
  2. 避免所有元素选择器
  3. 有限使用ID选择器,尽量给选择器指定上下文context
  4. 循环中减少DOM操作
  5. 利用事件代理机制(冒泡)

其他

  1. 尽量不使用同步请求
  2. 减少界面DOM的更新(静态内容尽量不要重排重绘)
  3. 减少HML标签数

内存编程规范

  1. DOM
    1. 在满足业务特性需求的情况下,减少DOM对象的动态创建和删除
    2. 禁止在循环/事件回调中使用文本+变量的方式使用jQuery创建DOM
    3. 尽量不适用iframe
  2. 事件监听
    1. 正确使用DOM Event level 2/3标准进行时间的绑定和注销
    2. 页面卸载,动态删除的DOM对象时要先注销绑定的事件监听
    3. 不要在HTML标签上嵌入JS事件回调代码,优先使用jQuery
    4. 销毁不再使用的定时器和延时器
posted on 2020-07-06 22:26  六耳石猴  阅读(1685)  评论(0编辑  收藏  举报