求求你们了,对自己代码质量有点要求!
Language
2022-03-15 09:56:08
views: null
开篇
- 最近在合并几个项目的代码,把功能拼一拼简称
项目拼多多
。
- 但是几个系统都没有
eslint
之类的东西,我也不知道怎么想的居然想给 拼多多 加上代码检查。
- 我还真的干了,于是就有了下面这些奇奇怪怪甚至有些可爱的代码。算是给大家做个反面教材。
一些示例
循环不要声明无用的变量
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b850037f12ad49578338a442ebd2b75b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
不要在 template
中写很长的判断、运算,因为有个东西叫做计算属性。
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6a4e8d5c25ea432aa6f5ac8ffb058987~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
使用 getCurrentInstance
获取 proxy
时候,请仔细想想你真的需要吗? 最重要的不要声明了但不使用它!
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/08ef9997b4124c0fba2770be308c16de~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
不要声明未使用变量函数!
- 当然可能有时候,业务变更忘记改了! 如果是这样,那应该安装
eslint
并增加代码提交检查!
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34ba3750437a48f49299c33d403e30f4~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
请在data 中声明所有已知变量及其子属性
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbeafb4dec914a7f8fbf2b9741635733~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
请不要太随意的对文件进行命名
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec9822fb734a49e1b2913ca35ce51f44~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
请不要写一些奇怪的逻辑,如果写了请写上注释,对于重复的东西,有必要进行提取,这会使代码更整洁。
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/877c797ddc3f4b64a3a646ea810246e9~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
如果你使用了 v-for
请记得加上 key
不然它就像没穿内裤一样会很难受!
![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6657412cc49e44fc8cd8b85d3f0a7d8f~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
一个组件是需要一个名字的,就像人一样!
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/04643fadf8c04a95ab2323cf305cdeef~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7e1cd635a669492e8686626046890df1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
不要混用 v-if、v-for
,更不要像下图这样写!
- 组件在使用
v-for
遍历时 需要使用 v-if
判断是否加载,可以使用计算属性先处理一遍再把数据用于v-for
遍历。
- 下边这种写法,我猜测可能是数据不存在则不展示,但是
v-for
没有数据本身就不会展示啊!
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ff2c339eb0f465abc29609ab289df8b~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
不要混合使用使用不同的操作符
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dd6b896dc5a5407baece2ed8f798b720~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
它是想做什么呢?
obj[next.id]
存在不做操作, 不存在赋值为 true
且执行 cur.push(next)
![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3f73103a3eb64d6886eb601fade03e44~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)
Origine juejin.im/post/7073049322656366622