一、代码格式
工程化流程化处理
- 借助工具vscode代码格式化
- 标准eslint规则校验+husky(本地pre-commit校验)
- 远端ci流水线校验
二、代码错误
风险代码
- 判空值、类型判断
- 内存泄露
如v-if销毁组件时，暴露- 闭包内部变量
- 计时器清理
- 事件解绑
- 第三方库销毁函数
三、代码习惯
抽象内聚
- Don't Repeat Yourself
- 函数超过80行
- 减少硬编码
便于理解
- if-else、回调嵌套过多
- 必要注释，尽量代码逻辑明了，而不用注释
- 说明文档、统一命名
- 对外暴露的接口和组件，常用的规整为模块，复杂部分最好有输入输出样例
四、代码优化
js减少内存使用
-
delete 操作符并不会释放内存，而且会使得附加到对象上的hidden class失效，让对象变成slow object。 （hidden class是V8为了优化属性访问时间而创建的隐藏类） 链接参考 juejin.cn/post/684490…
-
无限瀑布流事件绑定采用事件代理，减少内存占用
打包层面
- 是否引入不必要的npm包
- 使用cdn地址减少包体积
dom渲染层面
-
避免直接操作dom
-
频繁事件的防抖节流
-
动画减少回流重绘
使用transform代替left,top等值的改变 根据浏览器的渲染流程，如果引起元素位置大小的改变，需要重新进行布局计算，然后重新生成位图，交给GPU渲染展示 而transform的改变不会对元素的位置大小产生改变，而是使用已经生成的位图，对它进行旋转，缩放，移动。
