前言
前天看了一下公司小伙伴写的代码，感觉不是很清爽，这里给大家一些idea 希望对屏幕前的你有些帮助
CodeStyle
JS
- undefined => void 0
if (a === undefined)
if (a === void 0)
你可能会问这样写有啥好处？ 这样写实际上就是字符减少了看起来B格高了一丢丢
其实在es5之前undefined是可以被改写的
- Number(xxx) => +xxx
Number(abc)
+abc
利用+运算符进行隐式转换
- 0 => false / 1 => true
使用运算符
!连续2 !!个就可以转化
!!0 // false
!!1 // true 这里 2，3...
那么反向呢
使用运算符 + 进行隐式转换
+true // 1
+false // 0
- if的省略写法
if (a) {
return xxxx
}
// 简写
if (a) return xxx
- if else => switch
if (a === 1){
// 要执行的代码
} esle if (a === 2)....
// 一个switch语句看起来更清爽
switch (a) {
case 1:
// 要执行的代码
break；
case 2:
// 要执行的代码
break；
default:
// 要执行的代码
}
-
单文件多处引用某一固定值时，不适用写死数据(hardcoded)，使用常量(const)
-
添加必要注释。必要注释说明代码功能和原因
-
引入组件或插件时，尽量按需引入
-
使用ES6+
-
使用箭头函数。避免let that|self = this。
-
使用默认值。
-
使用拓展运算符...
-
使用 const let。
-
使用import export。
-
使用``字符串模板。
-
使用arrays | objects 解构赋值。
-
使用Promise | Asyns/Await。
-
使用可选链 a?.nam
Third-Party Libraries
- 使用lodash等functions，而不是自我实现。（大佬可以自己实现一套哈哈哈）
- 尽量使用项目已引用UI库，而不是重新写组件。
- 选择star较多的库 近期有人维护的库
eslint & log
- 无任何lint警告和错误。
- 无 console.log()。特殊场景特殊对待非绝对
- 无 debugger
CSS | CSS in JS
- 命名规范。符合团队命名规则。
- 是否使用了JS中的CSS库?
- 除非使用rgba()，否则使用十六进制颜色代码#000。
- 使用flexbox。
- 避免在公共样式中使用!important
- 避免给 width, height, top, left等添加animate，使用transform。原因可以参考大漠的
- 项目统一使用相同单位。/px/rem
- 避免使用内联样式。将内容与设计分开，维护更加简单
代码模块化
- 复杂模块业务进行抽离不要出现几千行的文件
- 复用度就较高的函数进行剥离成纯函数 减少副作用
- 谨慎使用mixin
- 对开源ui组件入例如 element ui 根据公司UED标准进行二次封装
-
v-for减少代码量
-
slot 插槽增加组件拓展性
-
渲染数据都写成配置 增加可维护性
结语
这是我在掘金写的第一篇文章哦，日常工作中的开发经验积累分享给大家 适合初中级的同学看看，最后祝大家周末愉快😄！
