前端编码规范

前端编码规范

一、命名

文件夹

文件夹名称小写，多个词之间用-连接；名称应清晰展示该文件功能，若长度过长，可简写。

组件

组件名称大写开头，驼峰格式，例如BasePageLayout；
运用组件用小写命名，多个词用-连接，例如；
特殊组件用特定功能名称结尾，例如布局用layout结尾，弹框用modal结尾，例如TaskDiagramModal。

api

js文件名小写，多个词之间用.连接，例如：file.action.api.js;
js文件简称用小写开头，驼峰格式，例如：

import fileActionApi from './modules/file.action.api'
import {xmsbApi} from '@/api'
1
2

router

js文件名小写，多个词用-连接，例如：info-confirm.js
js文件简称用小写开头，驼峰格式,例如：

info-confirm
1

import infoConfirm from './modules/info-confirm'
1

class

class按功能命名，统一小写，多个词用-连接，例如：.page-view-container

变量名

统一以小写开头，驼峰格式，例如：selectedKeys

方法名

统一以小写开头，驼峰格式，名称需展示清楚具体功能，例如：updateMenu()

图片资源

图片名称小写，多个词用-连接，例如：form-item-title.png

二、注释

变量注释

//选中行
selectedRowKeys: [],
//选中行数据
selectDataList: [],
1
2
3
4

代码单行注释

//首次申报
if (!this.id) {
	values.sbxlx = this.$route.query.type
	//流程租户id
	values.tenantId = config.appCode.xmbj
	//流程定义key
	values.processDefinitionKey = config.process.xmsb
}
1
2
3
4
5
6
7
8

方法注释

/**
 * 提交确认弹框
 */
onCommitConfirm () {
	if (this.data) {
		this.$refs.checkProjectModal.open(this.data)
	}
},
1
2
3
4
5
6
7
8

删除多余注释

三、其他重要规范

引用

引用公共目录用相对路径，模块内部用绝对路径

换行

代码块之间可换一行，删除不必要的换行

空格、缩进

=、、=

控制台报错

代码中警告

debugger

测试时可用debugger，上传代码必须去掉

四、日志

1.处理异常时必须打印日志，并在必要时（例如获取或提交数据时）弹框提示用户。

requestApi.then(result => {
        this.$success({
          title: '提交确认成功'
        })
        this.$emit('ok', result)
        this.confirmLoading = false
        this.visible = false
      }).catch(({message}) => {
        console.log(message)
        this.confirmLoading = false
        this.$error({
          title: '出错了',
          content: message
        })
      })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

五、全局组件

全局组件不用单独引入，直接在页面中用即可。

字典表TlwDictionary

<tlw-dictionary name="projectTypeList" v-model="projectTypeList"></tlw-dictionary>
1

单文件上传TlwUpload

<tlw-upload v-decorator="['blankDocUrl']" accept="image/*,.pdf,.doc,.docx"/>

<tlw-upload style="height: 100%" v-model="item.imgUri">
            图标
            <a-icon type="plus"></a-icon>
          </tlw-upload>
1
2
3
4
5
6

多文件上传TlwUploads

<tlw-uploads
v-model="record.files"
:listType="listType"
:ref="'tlwUploads'+record.id"
:limit="record.uploadMax"
:isPersonal="false"
:params="{documentId : ''}"
@change="uploadNotify(record)"/>
1
2
3
4
5
6
7
8

其他非全局组件需单独引入并注册，

import {TlwMap} from '@/tlw-components/tlw_modules/TlwMap'
1

其他组件如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JRXdSeCL-1685925255999)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\1620294636005.png)]

六、通用工具类

通用的功能建议封装成统一的工具类，如下图所示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6jrmGafu-1685925256001)(C:\Users\dell\AppData\Roaming\Typora\typora-user-images\1620295050855.png)]

list/children转换工具

import {listToChildren, childrenToList} from '@/utils/util'

let datalist = listToChildren(list)
1
2
3

过滤器fileUri

<a-avatar icon="user" shape="square" :src="avatar | fileUri" class="logo" :size="80"/>
1

验证verify

import {verify} from '@/utils/verify'

mixins: [verify],

<a-input :disabled="true" v-decorator="['zycyRy.lxdh',{ rules: [{ required: true, message: '联系电话是必填项项!' },
            { pattern: verifyMobilePhone, message: '请填写正确格式电话号码!' }]}]"></a-input>
			
1
2
3
4
5
6
7