前端必须搜藏Vue版的团队代码规范

Posted 2023-04-28

参考技术A

Nordon 规范与每个团队和个人都是息息相关的，因为其影响的不只是只是代码的维护和理解成本，严重的时候是会影响成员开发的心情 一个团队的编码规范、git规范等，并没有绝对的最优解，心里要清楚明白 没有银弹 ，规范是为了让团队统一，提高代码阅读性、降低代码维护成本等，本文是记录一些在项目 code review 中常见的规范，仅供参考

vue 中 data 的数据默认便会进行双向数据绑定，若是将大量的和渲染无关的数据直接放置在 data 中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合 Object.freeze 进行处理 table 中 columns 数据可以单独提取一个外部 js 文件作为配置文件，也可以在当前 .vue 文件中定义一个常量定义 columns 数据，因为无论如何都是固定且不会修改的数据，应该使用 Object.freeze 进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此操作

一个页面中通常会存在很多个不同功能的弹框，若是每一个弹框都设置一个对应的变量来控制其显示，则会导致变量数量比较冗余和命名困难，可以使用一个变量来控制同一页面中的所有 Modal 弹框的展示 比如某个页面中存在三个 Modal 弹框

例如远程搜索时需要通过接口动态地获取数据，若是每次用户输入接口请求，是浪费带宽和性能的 当一个按钮多次点击时会导致多次触发事件，可以结合场景是否立即执行 immediate

功能的开发过程中，图片的处理往往是比较容易被忽略的环节，也会在一定程度上影响开发的效率和页面的性能

使用 props 将组件和路由解耦： 取代与 $route 的耦合

通过 props 解耦 这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

参考：路由组件传参

在父子组件中，掌握父子组件对应的生命周期钩子加载顺序可以让开发者在更合适的时候做适合的事情 父组件

子组件

加载时父子组件的加载顺序

销毁时父子组件的销毁顺序

实际开发过程中会遇到当子组件某个生命周期完成之后通知父组件，然后在父组件做对应的处理 emit up

hook 通过 @hook 监听子组件的生命周期

下拉框遍历时，需要注意 options 标签保持同一行，若是存在换行，会导致选中时的值存在多余的空白

需要将 Options 和下拉框的值保持在同一行

data 数据具有数据层级结构，切勿过度扁平化或者嵌套层级过深，若是过度扁平化会导致数据命名空间冲突，参数传递和处理，若是层级嵌套过深也会导致 vue 数据劫持的时候递归层级过深，若是嵌套层级丧心病狂那种的，小心递归爆栈的问题。而且层级过深会导致数据操作和处理不便，获取数据做容错处理也比较繁琐。一般层级保持2-3层最好。 若是只有一层数据，过于扁平

导致处理不方便

适当的层级结构不仅可以增加代码的维护和阅读性，还可以增加操作和处理的便捷性

可以针对 person 进行操作

策略模式的使用，避免过多的 if else 判断，也可以替代简单逻辑的 switch

解构赋值以及默认值，当解构的数量小于多少时适合直接解构并赋值默认值，数据是否进行相关的聚合处理

任何时候尽量是的一个函数就做一件事情，而不是将各种逻辑全部耦合在一起，提高单个函数的复用性和可读性 每个页面都会在加载完成时进行数据的请求并展示到页面

编写 template 模板时，属性过多时，是否换行

html 中展示一些如 < ， > , & 等字符时，使用字符实体代替

在开发中修改第三方组件样式是很常见的，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。

适当的空格可以提升代码的阅读体验，显得更为优雅和美观 选择器后、属性值

和 html 类型，当某行的属性很多，适当的换行可以提高阅读和美观

浏览器在解析 css 时，是按照从右到左递归匹配的，过深的层级嵌套不仅影响性能，而且还会导致样式阅读性和代码维护性降低，一般层架控制在 5 层之内

属性选择器中的值必须用双引号包围，不允许使用单引号，也不允许不使用引号， html 的属性值也是推荐使用双引号， js 中使用单引号

同一 规则下的属性在书写时，应按功能进行分组。并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。 解释 ：

另外，为增加可读性，如果包含 content 属性，应放在属性的最前面。

团队开发前端VUE项目代码规范

团队开发前端VUE项目代码规范

2018年09月22日 20:18:11 我的小英短 阅读数 1658

 

一、规范目的：

 

统一编码风格，命名规范，注释要求，在团队协作中输出可读性强，易维护，风格一致的代码

 

二、开发SRC目录：

 

1.Vuex目录 （状态树配置）

2.Router目录（路由配置）

3.Pages目录 （放置主路由组件 注意命名规范）

4.Common目录 （放置静态文件）

5.Config目录 （全局配置项，路由拦截，报错信息，等枚举信息）

6.Api目录 （ 相关全局请求调用配置、axios、jsonp ）

7.Base目录 （可复用功能性组件）

8.Basic目录 （可复用样式展示组件）

9.Components目录（基础组件：样式组件等 注意组件分类规范）

10.核心：在每个目录下面留一份TEXT或MARKDOWN文档，annotation.txt/annotation.md，用中文批注好每个组件文件夹的功能及使用，每次在当前目录下新建或更新当前目录时，需要做好批注 （必须）

 

 

 

三、组件文件夹分类：

 

样式组件分类（模态框，面板框）

可复用功能组建分类（表格组件，表单组件）

组件内部文件夹

（1）样式文件stylus 

（2）子组件或者tab组件文件夹childs

（3）静态资源文件夹 resources

（4）组件下目录预览：

 

      |— self-component

         |— resources

         |— childs

         |— stylus

         |— self-component.vue

 

四、静态资源：

 

1.静态高质量图片资源

2.ICON等单个或少个复用性较高的图片

3.复用性较高的JSON本地文件

4.媒体文件

5.分类

6.命名规则

 

五、组件开发：

 

1.可复用组件开发规范

2.样式定义组件开发

3.单文件组件开发规范

4.扩充组件功能注意事项

 

六、路由定义：

 

1.全局路由钩子拦截

2.懒加载中AMD规范require和ES6中的import的选择

3.拦截条件语句筛选

4.路由名称的可读性以及注释

 

七、接口联调：

 

1.统一采用axios方式

2.登陆拦截方式

3.参数传递：配合query string 实现对象到uri的格式化

4.GET请求规范

5.POST请求规范

6.其他类型请求规范

7.避免拼接uri字符串参数情况的产生

8.联调失败，快速定位错误的方法

 

八、VUE模板语句使用规范：

 

1.条件 （v-if , v-else, v-if-else, v-show）合理使用 v-if 及 v-show

2.循环 （v-for、 :key）

3.样式 （:style、:class）

4.事件绑定 （v-on、@）

5.props传递 （加类型判断，不能直接数组接收）

6.其他优化细节（v-text、v-html、v-once）

 

九、VUEX使用规范：

 

 1.单/多状态树目录结构

 2.语法糖和原生this.$store的选择和使用注意

 3.多模块VUEX状态树配置和使用（目前几个项目暂时都只涉及到单状态树）

 4.state、mutations、actions、getters使用规范 (https://wusihe.com/2018/07/17/vuex/)

 5.axios请求和state混用问题解决

 

 

十、组件开发规范：

 

1.组件模板开发

 

（1）尽可能语义化标签，使结构更加信息，如不熟悉H5新标签请查看下面文档

A. http://www.w3school.com.cn/html/html5_new_elements.asp

（2）大段功能模块都需要明确中文注释（要求简短明确）

（3）在代码结构很长的情况下，需要分割线注释批注

（4）模板语法中的逻辑尽可能在filters、computed、methods中处理

（5）Tab缩进，四个空格，层次要求分明

 

2.组件样式开发

 

（1）基本上处于scoped 私有域开发

（2）CSS预处理器选择stylus 

A.原因：强大、方便、流行、混合书写、变量、语言函数等

（3）样式编写方式

A.函数式编写样式 ，在common目录下封装好对应常用的方法，直接传参

（4）风格：横向编写，分号分隔，禁止大括号，背景图片统一相对路径调用

（5）如果不熟悉其函数式编程风格的使用，请阅读下面文档

A.https://stylus.bootcss.com

B.https://www.zhangxinxu.com/jq/stylus

（6）基本调用结构预览：

@import ‘./stylus/self-component.stylus‘

（6）如有其他想法可以更换成Sass或Less预处理器也可以

 

 

3.组件脚本开发

 

（1）scoped私有域下开发

（2）和模板结构处于同一文件开发

（3）生命周期及其默认结构编写顺序和规则

    A.data  ->  props  -> 生命周期函数 ->  computeds  ->  watch -> methods  -> …

    B.props 统一使用对象模式，且设置好props属性默认值和类型  

 

 

十一、注释规范：

 

1.TEMPLATE结构内容注释

（1）大区块之间需要回车换行，且有有单独的中文注释

2.STYLUS注释

（1）每个大区块的样式的需要有单独的中文注释

（2）每个大区块样式之间需要回车换行

（3）在STYLUS自定义函数库文件类似于mixin.styl，则需要对每个语言函数进行单独的批注，或者一些功能类似的语言函数可以根据功能分类注释

3.SCRIPT注释

（1）尽可能多用单行注释，注释需要与被注释的地方对齐

（2）生命周期created()、mounted()下的所有方法调用需要单独注释，methods里面涉及接口调用的方法一定要注释，filters里面的过滤器需要注释说明功能

命名规范：

 

1.组件文件夹命名：

（1）按照功能英文命名，过长则用 ” - ” 连接

（2）其内部的组件名称和样式名称与文件夹同名

（3）其风格与微信小程序组件文件夹命名保持一致

2.静态资源文件夹static命名：

（1）英文命名，过长则用 ” - ” 连接

（2）其主目录需要创建一个解释文件（annotation.txt/annotation.md），在这个解释文件中使用中文批注好每个目录的内容，以及每个目录正在被哪些组件调用

3.图片文件命名：

（1）如果是精灵图，则需按功能命名

（2）如果是列表渲染图片，则需要按照1-100编号命名

（3）如果是ICON图片，则需要添加 ”icon-”前缀

 

 

十二、解释文件：

 

1.定义：一个对当前目录下所有的文件夹的一个解释性文档，中文批注每个文件夹下的组件功能或者资源类型，如果是资源类型文件夹，则还需批注调用该文件夹的组件名称和路径

2.名称：统一命名annotation.txt/annotation.md