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

前端Q

共 1047字,需浏览 3分钟

 ·

2022-04-14 16:20

点击上方 前端Q,关注公众号

回复加群,加入前端Q技术交流群

开篇

  • 最近在合并几个项目的代码,把功能拼一拼简称项目拼多多
  • 但是几个系统都没有 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
  • 异步异步在在异步,我的滑板鞋
image.png


关于本文

作者:唐诗

https://juejin.cn/post/7073049322656366622



往期推荐


秒啊!答好这5个问题,就入门Docker了
(字节/华为/美团)前端面经记录冷冷清清的金三银四
深入讲解VsCode各场景高级调试与使用技巧

最后


  • 欢迎加我微信,拉你进技术群,长期交流学习...

  • 欢迎关注「前端Q」,认真学前端,做个专业的技术人...

点个在看支持我吧
浏览 32
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报