代码规范细则

前端代码规范细则

本细则分为强制和非强制内容,欢迎提出 issue

强制

  • 强制使用eslint

  • 函数注释强制使用jsDoc注释,即 /** 开头的注释格式

  • 代码结尾一律不得加;,此项可以由prettier格式化工具自动实现

  • 字符串一律使用单引号'',多行字符串一律使用模板字符串

var a = `adf
dasd
888
`
  • 不得使用eval

  • 不得使用==,一律使用===!==

  • 对象(包含数组)格式,逗号,冒号后面需要留空格,运算符前后需要留空格。此项也可以由代码格式化工具实现,注意即可

例子如下

var a = [1, 2]
var b = { c: 7, d: 9 }
var f = 8 * 9
  • 不得使用delete关键字删除对象属性,如确需需要删除属性,使用Reflect.deleteProperty进行操作

  • 不得使用隐式转换进行代码运算操作,例如

var a = 100 + 'e' // '100e'
  • 函数命名务必简洁明了,力求能通过函数名得出函数作用,减少无关注释

  • 公共函数一律使用__开头命名,并且首字母大写,例如

/**
* 防抖函数
* @param {Function} method 事件触发的操作,fn
* @param {Number} [delay = 500] - delay 多少毫秒内连续触发事件,不会执行
* @returns {Function}
*/
export function __Debounce(method: Function, delay: number = 500): Function {
let timer: number | null = null
return function(this: any) {
let self = this
let args = arguments
timer && clearTimeout(timer)
timer = setTimeout(function() {
method.apply(self, args)
}, delay)
}
}
  • 拥有返回值的函数必须考虑边界情况,不得存在边界条件下没有返回值的情况

  • 使用import语法不得使用import * as结果语法,确需引用多个,请使用解构语法

  • DOM 对象不得使用数组储存,一律使用WeakMapWeakSet

  • 数组存储数据不得超出数组长度,js 数组最大长度为 0xFFFFFFFF = 4294967295

  • 错误处理

  • 不得轻易修改函数原型,确需修改,则不应向用户暴露接口

非强制

  • 推荐使用 Typescript

  • 解构语法、对象等首尾留空,例如

import { Component, Vue, Provide, Watch } from 'vue-property-decorator'
  • 对象键名不使用数字

  • 能使用箭头函数=>,就不用普通函数

  • 能使用es6新特性就用新特性

  • 递归尽量使用尾递归

  • 对象浅复制,对象合并尽量使用扩展运算符...

  • 取整少用parseInt

  • 少用try{}catch(e){}语法

文章作者: Jdeseva
文章链接: https://jdeseva.github.io/2019/10/10/代码规范细则/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 沧海鲸歌