求求你们了,对自己代码质量有点要求!

开篇

  • 最近在合并几个项目的代码,把功能拼一拼简称项目拼多多
  • 但是几个系统都没有 eslint 之类的东西,我也不知道怎么想的居然想给 拼多多 加上代码检查。
  • 我还真的干了,于是就有了下面这些奇奇怪怪甚至有些可爱的代码。算是给大家做个反面教材。

一些示例

  • ps 示例代码来源于网络社区。

循环不要声明无用的变量

image.png

不要在 template中写很长的判断、运算,因为有个东西叫做计算属性。

image.png

使用 getCurrentInstance 获取 proxy 时候,请仔细想想你真的需要吗? 最重要的不要声明了但不使用它!

image.png

不要声明未使用变量函数!

  • 当然可能有时候,业务变更忘记改了! 如果是这样,那应该安装 eslint 并增加代码提交检查!

image.png

请在data 中声明所有已知变量及其子属性

image.png

请不要太随意的对文件进行命名

  • 如果有疑问可以查看vue风格指南那里会有答案!

image.png

请不要写一些奇怪的逻辑,如果写了请写上注释,对于重复的东西,有必要进行提取,这会使代码更整洁。

image.png

如果你使用了 v-for 请记得加上 key 不然它就像没穿内裤一样会很难受!

image.png

一个组件是需要一个名字的,就像人一样!

image.png

image.png

不要混用 v-if、v-for,更不要像下图这样写!

  • 组件在使用 v-for 遍历时 需要使用 v-if 判断是否加载,可以使用计算属性先处理一遍再把数据用于v-for遍历。
  • 下边这种写法,我猜测可能是数据不存在则不展示,但是 v-for 没有数据本身就不会展示啊!

image.png

不要混合使用使用不同的操作符

image.png

它是想做什么呢?

  • obj[next.id] 存在不做操作, 不存在赋值为 true 且执行 cur.push(next)

image.png

写vue的强烈建议查看官网的风格指南 猛击查看

Guess you like

Origin juejin.im/post/7073049322656366622