js前端编码规范

发布时间 2023-11-09 09:43:43作者: HandsomeGuy

1、编码风格

  1.1 强制两行缩紧

  1.2 强制统一以分号结束语句

  1.3 强制逗号分隔多行结构,始终加上最后一个逗号

  1.4 推荐使用大括号包裹代码块

  1.4.3 强制不适用空代码块

  1.5 强制空格风格

  1.6 推荐文件末保留一行空行;在块末和新语句间插入一行空行

  1.7 推荐单行最大字符数100(字符串、正则、模版字符串除外)

  另:参考文件最大行数:1000;函数最大行数:80

 

2、变量声明

  2.1 强制使用const和let声明变量

  2.1.3  一条声明语句声明一个变量(更易追加新的声明语句&进行单步调试)

  2.1.4  强制声明的变量必须被使用

  2.1.6  参考哪里使用,哪里声明

  2.1.9  强制禁止连续赋值

  2.2 原始类型

  2.2.1  强制不要使用new Number/Sting/Boolean,会导致变量变成object类型

  2.2.2  推荐类型转换 Number() 或parseInt()、Sting()、!!

  2.2.3  强制字符串优先使用单引号

  2.2.1  推荐模版字符串代替字符串拼接

  2.2.1  强制禁止不必要的转义字符

2.3 数组

  2.3.1  强制使用字面量创建数组:[]

  2.3.3  推荐使用扩展运算符…处理数组

  2.4  对象

  2.4.1  强制使用字面量创建对象

  2.4.2  强制使用对象属性和方法的简写语法

    eg: const atom = {

        value,

        addValue(value) {

          return value + ‘anything’;

        }

      }

  2.4.3  参考将对象的简写属性写在一起

  2.4.4  强制对象的属性名不要用引号包裹,除非包含特殊字符

    更加简洁,也有助于语法高亮和一些JS引擎的优化

  2.4.5  强制优先使用:访问对象的属性

    []仅应用在访问动态属性名或者包含特殊字符的的属性名时被使用

  2.4.6  推荐使用扩展运算符…处理对象 

  2.4.7  推荐使用对象解构获取对象属性

  2.4.9  强制不要直接在对象上调用Object.prototypes上的方法

  这些方法可能会被对象上的属性覆盖,导致错误

  建议直接使用Object.prototype.xxx, 而不是直接使用 对象.xxx

  2.5  函数

  2.5.1  强制不要用Function构造函数创建函数

    使用new Function创建函数会像eval()方法一样执行字符串,带来安全隐患

  2.5.2  强制不要在块中使用函数声明(function xxx),在非函数块中,不要使用函数声明

  2.5.3  参考使用函数表达式替代函数声明

    这样可以保证函数不能在定义前被调用

    函数声明会被提升到当前作用域的顶部,因此函数可以在声明语句前就被调用

    会影响代码的可读性与可维护性

  2.5.4  强制使用箭头函数代替匿名函数

  2.5.6  强制不要将函数参数命名为arguments

  2.5.7  强制不要使用arguments对象

  2.5.2  推荐使用默认参数语法(参数赋值默认值)

  2.5.9  推荐有默认值的函数需要放到参数列表的最后

    否则你将无法享受到默认参数的便利,只能通过传undefined触发参数使用默认值

  2.5.10  推荐不要修改函数参数

    不要修改引用类型的参数,这可能导致作为入参的原变量发生变化

    更不要给参数重新赋值,这可能导致意外的行为和内核优化的问题

  2.5.11  强制将立即执行的函数表达式用小括号包裹

  2.5.12 强制函数复杂度不应过高

    过高的复杂度意味着代码难以维护和测试,

    推荐:圈复杂度不超过10,认知复杂度不超过15

  2.5.13  参考函数的参数不应过多

    如果必须使用过多的参数,可以考虑用对象代替参数列表

  2.5.14  参考优先使用JS提供的高阶函数进行迭代运算

    减少直接使用for循环(for-in和foe-of)

    如使用map/some/every…来迭代数组;

    使用Object.keys()/Objet.values()/Object.entries()方法来迭代对象

  2.6  类

  2.6.1  推荐使用class语句声明类,而不是使用prototype

    class语句是ES6中引入的用于声明类的语法糖,更加简洁易维护

  2.6.2  推荐使用extends语句进行类的继承

    extends是用于原型继承的内建方法,不会破坏instanceof

  2.6.3  强制避免不必要的constructor

    ES6 class会提供一个默认的constructor

  2.6.4  强制正确地使用super方法

    子类的constructor中必须使用super(),且必须在this和super关键词前调用

    非子类的constructor中不能使用super()

  2.6.5  强制避免重复的类成员命名

    重复的类成员声明最终生效的将是最后一个

  2.7  模块

    2.7.1  推荐使用ES6 modules 而非其他标准的模块系统(import/export)

    2.7.2  强制不要用多个import引入同一模块

    2.7.3  强制import语句需要放到模块的最上方

    2.7.6  强制禁止引用自身/循环引用  

    2.7.8  推荐在模块导入之后保留一个空行

    2.7.9  参考import语句的排序

      import语句建议规则排序:

        先import第三方模块,再import自己工程里的模块

        先import绝对路径,再import相对路径

  2.8  操作符

  2.8.1  推荐使用严格相等运算符(=== / !==)

  2.8.4  强制避免嵌套的三元运算符

  2.8.5  强制避免不必要的三元表达式

  2.8.6  强制混合使用多种操作符时,用小括号包裹分组

  2.9  控制语句

  2.9.1  强制switch语句中的case需要以break结尾

  2.9.2  参考switch语句应包含至少3个条件分支

  2.9.4  参考控制语句的嵌套层级不要过深

  2.9.6  推荐for- in循环中需要对key进行验证

    使用for-in循环时,避免对象从原型链上继承类的属性也被遍历出来,

    因此保险的做法是对key是否是对象自身的属性进行验证

  2.9.7...

    待补充...