聊一下自己 VueJS 项目的编码习惯和风格

横幅

最近在考虑把遍码习惯整理一下,一个良好的遍码习惯可以有效减少一个项目的维护成本,
因为不可能在整个项目的生命周期中,均由最初的开发人员来维护,或者所有的代码都是由你一个人写出来的,
改善代码的可读性,可以让开发人员尽快理解历史的业务代码。

之前也有研究过 ESlint的格式化风格 选择一款适合自己的来规范自己,但是了解的越多,越觉得还是需要团队互相讨论来找一个大家能都接受的妥协结果,所以最后还是选择了 Prettier ,因为我觉得其它两种风格相对来说太严苛了,很多项目都是自己开发并没有多人合作开发的情况出现,所以使用 Prettier 相对来说所自由一些…


先来讲代码的格式与注释

代码的格式和注释虽起不到逻辑作用,但是可以是团队合作效率更高,代码更易于维护。特别是在其他人接手自己项目的时候,能让他很快了解自己的想法。

我这边一直在使用的类似 AirBnb 的 Lint 风格,但只是其中的一些命名、缩进和换行的风格,我并没有严格按照他们的风格来,例如:

用命名函数表达式而不是函数声明 func-style

  • 函数表达式: const func = function () {}
  • 函数声明: function func() {}

虽然有他们的道理,但是我并不是很喜欢,当然会根据不同团队做出改变。所以保持业务代码的可读性就好,
我没有按部就班的使用,项目也只是启用了 Prettier 的默认设置。

概念隔离:不同的的概念/逻辑代码使用空行隔离

代码注释

代码注释我这边还没有很明确到很精细的规范,很自由。
只是要求了在 文件头函数声明时 以及 函数内一些关键的部分 进行补充说明,因为有时候只是代码的语义化并不能很好的说明情况。
虽然自己也经常会忘记在一些复杂场景下补充注释,但是事后记得补全就好。

哦,对了,记得增加提示信息,防止出现踩坑事件,例如使用 TODO 等标记未来得及完成的部分,并且安装 TODO Tree 插件确保自己不会遗忘填坑。


冗余代码

尽量避免重复代码,我对于冗余代码的意见是很大的,需要代码简洁明了清晰易读,特别是明显可以抽离出来复用的业务逻辑。如果重复出现多次的话,我一定会分离出去,特别是一些复杂场景下的大段代码中,尽量 保持一个函数职责单一

对于代码的提炼

在考虑到项目的后续发展和可能会出现的扩展之后,在一定版本迭代中不会出现功能拓展的业务代码进行提炼和优化,这就需要你对于项目整体要有一定程度的了解。

对可能在可遇见的时间范围内会出现变动的的业务代码精心适量的优化,并且保持扩展的便利性,确保不会出现死结。

同时保持代码短小精炼并且易维护、易拓展是很困难的,优先保证易维护和易拓展

效率

有时候为了实现尽快实现功能,会出现急功近利的情况,牺牲代码的可读性以及结构。
如果很赶时间,尽量在Coding之前,整理好需求,在设计完代码流程和结构之后把注释写在功能头部。
方便结束之后整理优化,就算自己忘记整理了,也不至于接手的下一任直接重写,记得代码面向读代码的人来写。


最后是 Vue 官方的风格规范:

Vue 有一套官方的风格指南,里边有一些指导和参考,总共分为四类:

  • 优先级 A:必要的
  • 优先级 B:强烈推荐
  • 优先级 C:推荐
  • 优先级 D:谨慎使用

优先级 A 的就不需要说了吧,必要的这块内容,应该在学习 Vue 的时候就已经从官方给出的 Demo 感受到了,比如 组件名为多个单词,以及 组件的 data 必须是一个函数。虽然有一些规范在 Vue3 中已经被修改了,但是在 Vue2 中还是适用的。

优先级 B 这一类的内容是为了增加代码可读性的,所以尽最大可能的保证使用以及一贯性,基本都是一些命名和书写规范,刻意保持一段时间就习惯了。

优先级 C 这块内容是比较自由的,官方也设定为推荐级别,其中提到的 组件/实例的选项的顺序,我觉得重要性还是很高的,在Cooding时保持和官方文档一样的排列顺序。

最近我就出现了同事把 created 代码放到组件最后,我在增加功能的时候在头部也增加了 created ,发现自己的 created 钩子没有执行。当然这个锅其实有一部分是编辑器的,我这边没有对重复声明的对象属性进行错误高亮。

优先级 D 中的内容是警告内容,这块内容在良好的编码习惯下一般是不会出现的。


当然如果你觉得官方的Lint的风格很好,那么你可以使用他们提供的 eslint-plugin-vue 这个依赖项,来规范和格式化代码。

最后的最后我对之前 Vue 官方指导没有提到的一些地方进行补充:

  1. 每一个组件都要有 name 属性。
    2.你需要了解 mixinsextends
  2. 使用 computed 来计算一些属性,比如路由信息 $route中的一些传递参数,或者在代码中出现频率很高的深层属性。
  3. 在生命周期钩子中,保证不出现业务代码,如果一块内容超过6行那就单独拿出来写成函数放到 methods 中,尽量减少生命周期钩子中的代码量。
  4. 业务代码都在 methods 中,或者取成 功能名称.js文件。
  5. 在路由中使用 params 来传递参数,记得在路由配置中绑定动态路径参数,不然会丢失
  6. 保持Lint开启。
  7. 使用环境变量。

风格指南 — Vue.js
vue/order-in-components | eslint-plugin-vue

Introduction | eslint-plugin-vue