2019-10-17 前端Vue开发规范总结整理

作者: 追寻1989 | 来源:发表于2019-10-17 16:51 被阅读0次

由于所在公司前端代码较不规范，近期应公司领导要求，整理出了一份公司内部的前端开发规范标准。这里参考了一些文章，并对自己实际开发经验中遇到的一些不规范的代码纠正进行总结归纳。分享出来，如有不足欢迎留言补充~
目的是为了：统一编码风格，命名规范，注释要求，在团队协作中输出可读性强，易维护，风格一致的代码。

1.命名编码规范：

（1）变量名、方法名、组件名、文件名、文件夹名遵循下命名规则：

驼峰式：如：studentInfo、userInfo、productInfo 多单词首字母小写命名

语义化：如：studentAge、userName、getUserName 能直观明白意图命名

类型化：如：studentObj、userInfoArray、productString 能直观明白类型命名

（2）变量声明 var、let、const

当你的变量能保证不会被修改，则用const，如一些常量等

如果是会一直修改，则使用let

尽量不要使用var，会造成全局或者局部污染（可自行百度let var 区别）

（3）常量命名

命名方式：全部大写
命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

2. 注释规范：

（1）每个方法的功能用途必须写注释，方法内关键步骤和节点要写注释，尤其是不易被人理解的地方。

（2）传参和返回结果，必须标注数据类型和参数说明。

（3）方法采用多行注释，单行代码或if、swicth、for等js语句采用单行注释。

（4）被注释并保留下来的代码，需标注说明保留原因。

代码注释范例

3. vue组件模板代码规范：

（1）标签排列顺序

模板标签按照如下顺序规范排列

<template>
 <div>
 </div>
</template>
<script>
 export default {
   name: 'Error404',
   components: {
   },
   data () {
     return {
     }
   },
    methods: {
      goHome () {
        this.$router.push({
            name: 'home_index'
        });
      }
    }
 }
</script>
<style scope>
</style>

（2）data变量注释

data里每个变量用途都需要注释，无用变量及时删除，并且做好关联变量分类

（如下show和btnName有关联关系，我们就可以在modleInfo中写，避免变量杂乱无章可读性差）

（3）变量初始值规范

建议：所有变量都要在data中进行初始化，不初始化Vue有时候会监听不到数据变化导致DOM视图层不更新或某些UI组件绑定后各种奇怪的报错，尤其是表单填写提交和数据回填可能会导致某些表单组件报数据类型的错误从而导致表单自动化校验失败。

对于初始值是字符串类型的字段：
userName:''
对于初始值是 数组类型 的字段：
userList:[]
对于初始值是 对象类型 的字段：
userInfo:{} 或时间对象：nowTime:new Date()
对于初始值是 布尔类型 的字段：
isUserEdit:false 或 isUserEdit:true
对于初始值是 数字类型 的字段：
userNum:0 或没有初始值的时候 userNum:NaN
对于初始值 不确定类型 的字段：
userPage:null

（4）数据模板

对于一些较多字段的应用交互场景：比如，需要很多字段的表单填写，在data写初始化会使代码可读性非常差，也不美观。我们可以将这部分写在JS或JSON文件做为数据模板抽离出去然后暴露出来给组件调用。这样做的好处是数据模板可以复用，在其他地方如果有用到就无需再次进行初始化，只需要在组件初始化定义一个变量名，然后引入。