【开发规范系列】(四)前端开发规范(四)

简介: 【开发规范系列】(四)前端开发规范(四)
2.1.2 模板中使用简单的表达式

组件模板应该只包含简单的表达式,复杂的表达式应重构为计算属性或方法。复杂表达式会使你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么,而不是如何计算那个值。而且计算属性和方法使得代码可以重用。

正例:

<template>
  <p>{{ normalizedFullName }}</p>
</template>
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例:

<template>
  <p>
    {{
      fullName.split(' ').map(function (word) {
        return word[0].toUpperCase() + word.slice(1)
      }).join(' ')
    }}
  </p>
</template>
2.1.3 指令都使用缩写形式

指令推荐使用缩写形式,用 : 表示 v-bind: ,用 @ 表示 v-on: ,用 # 表示 v-slot:

正例:

<input
  @input="onInput"
  @focus="onFocus"
>

反例:

<input
  v-on:input="onInput"
  @focus="onFocus"
>
2.1.4 标签顺序保持一致

单文件组件应该始终按照 <template><script><style> 的顺序排列。

正例:

<template>...</template>
<script>...</script>
<style>...</style>

反例:

<template>...</template>
<style>...</style>
<script>...</script>
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择

如果需要频繁切换元素的可见性,使用 v-show ;如果在运行时条件很少改变,使用 v-if。

2.1.7 script 标签内部结构顺序

components > props > data > computed > watch > filter > 钩子函数(按执行顺序排列) > methods

2.1.8 Vue Router 规范
1) 页面跳转数据传递使用路由参数

页面跳转,例如从 A 页面跳转到 B 页面,需要将 A 页面的数据传递到 B 页面,推荐使用路由参数进行传参,而不是将需要传递的数据保存在 vuex,然后在 B 页面取出 vuex 中的数据,因为如果在 B 页面刷新会导致 vuex 数据丢失,导致 B 页面无法正常显示数据。

正例:

let id = '123';
this.$router.push({ name: 'userCenter', query: { id: id } });
2) 使用路由懒加载(延迟加载)机制
{
  path: '/uploadAttachment',
  name: 'uploadAttachment',
  meta: {
    title: '上传附件'
  },
  component: () => import('@/view/components/uploadAttachment/index.vue')
}
3) router 中的命名规范

path、childrenPoints 命名规范采用kebab-case命名规范(尽量保持 vue 文件的目录结构一致,因为目录和文件名都是kebab-case,这样很方便找到对应的文件)

name 命名规范采用KebabCase命名规范且与 component 组件名保持一致!(要保持 keep-alive 特性,keep-alive 按照 component 的 name 进行缓存,所以两者必须高度保持一致)

export const reload = [
  {
    path: '/reload',
    name: 'reload',
    component: Main,
    meta: {
      title: '动态加载',
      icon: 'icon iconfont'
    },
    children: [
      {
        path: '/reload/smart-reload-list',
        name: 'SmartReloadList',
        meta: {
          title: 'SmartReload',
          childrenPoints: [
            {
              title: '查询',
              name: 'smart-reload-search'
            },
            {
              title: '执行reload',
              name: 'smart-reload-update'
            },
            {
              title: '查看执行结果',
              name: 'smart-reload-result'
            }
          ]
        },
        component: () =>
          import('@/views/reload/smart-reload/smart-reload-list.vue')
      }
    ]
  }
4) router 中的 path 命名规范

path 应采用kebab-case命名规范,并以 / 开头,即使是 children 中的 path 也要以 / 开头。例如:

  • 目的:经常需要找到某个 vue 文件时,可以立即找到它。如果 path 不以 / 开头,由 parent 和 children 组成,可能需要在 router 文件中多次搜索才能找到。而以 / 开头,可以立即搜索到对应的组件。
{
  path: '/file',
  name: 'File',
  component: Main,
  meta: {
    title: '文件服务',
    icon: 'ios-cloud-upload'
  },
  children: [
    {
      path: '/file/file-list',
      name: 'FileList',
      component: () => import('@/views/file/file-list.vue')
    },
    {
      path: '/file/file-add',
      name: 'FileAdd',
      component: () => import('@/views/file/file-add.vue')
    },
    {
      path: '/file/file-update',
      name: 'FileUpdate',
      component: () => import('@/views/file/file-update.vue')
    }
  ]
}

(二) Vue 项目目录规范

2.2.1 基础
  • Vue 项目中的所有命名必须与后端命名保持一致。
  • 比如权限:后端 privilege,前端无论是 router、store、api 等都必须使用 privilege 单词!
2.2.2 使用 Vue CLI 脚手架
  • 使用 Vue CLI 3 来初始化项目,项目名按照上述命名规范命名。
2.2.3 目录说明
  • 目录名按照上述命名规范,其中 components 组件使用大写驼峰命名,其余目录(除 components 组件目录外)使用 kebab-case 命名。
src                               源码目录
|-- api                              所有 API 接口
|-- assets                           静态资源,包括 images、icons、styles 等
|-- components                       公共组件
|-- config                           配置信息
|-- constants                        常量信息,项目中的所有枚举、全局常量等
|-- directives                       自定义指令
|-- filters                          过滤器,全局工具
|-- datas                            模拟数据,临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口,临时存放
|-- plugins                          插件,全局使用
|-- router                           路由,统一管理
|-- store                            Vuex,统一管理
|-- themes                           自定义样式主题
|-- views                            视图目录
|   |-- role                             role 模块
|   |-- |-- role-list.vue                    role 列表页面
|   |-- |-- role-add.vue                     role 新建页面
|   |-- |-- role-update.vue                  role 更新页面
|   |-- |-- index.less                      role 模块样式
|   |-- |-- components                      role 模块通用组件文件夹
|   |-- employee                         employee 模块
1) api 目录
  • 文件和变量命名要与后端保持一致。
  • 此目录对应后端的 API 接口,按照每个 controller 一个 API JS 文件的方式组织。如果项目较大,可以根据业务进行子目录划分,但与后端保持一致。
  • API 文件中的方法名应与后端 API URL 尽量保持语义一致。
  • 每个 API 方法都应添加注释,注释与后端的 Swagger 文档保持一致。

正例:

后端 URL:EmployeeController.java

/employee/add
/employee/delete/{id}
/employee/update

前端:employee.js

addEmployee: (data) => {
  return postAxios('/employee/add', data)
},
updateEmployee: (data) => {
  return postAxios('/employee/update', data)
},
deleteEmployee: (employeeId) => {
  return postAxios('/employee/delete/' + employeeId)
},
2) assets 目录
  • assets 目录存放静态资源,包括 images、styles、icons 等静态资源,静态资源命名格式为 kebab-case。
|assets
|-- icons
|-- images
|   |-- background-color.png
|   |-- upload-header.png
|-- styles
3) components 目录
  • 此目录按组件进行目录划分,目录命名为 KebabCase,组件命名规则也为 KebabCase。
|components
|-- error-log
|   |-- index.vue
|   |-- index.less
|-- markdown-editor
|   |-- index.vue
|   |-- index.js
|-- kebab-case
4) constants 目录

目录结构:

|constants
|-- index.js
|-- role.js
|-- employee.js
• 1

示例:employee.js

export const EMPLOYEE_STATUS = {
  NORMAL: {
    value: 1,
    desc: '正常'
  },
  DISABLED: {
    value: 1,
    desc: '禁用'
  },
  DELETED: {
    value: 2,
    desc: '已删除'
  }
};
export const EMPLOYEE_ACCOUNT_TYPE = {
  QQ: {
    value: 1,
    desc: 'QQ登录'
  },
  WECHAT: {
    value: 2,
    desc: '微信登录'
  },
  DINGDING: {
    value: 3,
    desc: '钉钉登录'
  },
  USERNAME: {
    value: 4,
    desc: '用户名密码登录'
  }
};
export default {
  EMPLOYEE_STATUS,
  EMPLOYEE_ACCOUNT_TYPE
};
5) router 与 store 目录
  • 这两个目录必须根据业务进行拆分,不能放在一个 JS 文件中。
  • router 应与 views 目录的结构保持一致。
  • store 按业务进行拆分为不同的 JS 文件。
6) views 目录
  • 命名要与后端、router、api 等保持一致。
  • components 中的组件应使用 PascalCase 规则。
|-- views                            视图目录
|   |-- role                             role 模块
|   |   |-- role-list.vue                    role 列表页面
|   |   |-- role-add.vue                     role 新建页面
|   |   |-- role-update.vue                  role 更新页面
|   |   |-- index.less                      role 模块样式
|   |   |-- components                      role 模块通用组件文件夹
|   |   |   |-- role-header.vue                        role 头部组件
|   |   |   |-- role-modal.vue                         role 弹出框组件
|   |-- employee                         employee 模块
|   |-- behavior-log                      行为日志 log 模块
|   |-- code-generator                    代码生成器模块
2.2.4 注释说明
  • 需要添加注释的地方包括:
  • 公共组件的使用说明
  • api 目录中的接口 JS 文件必须添加注释
  • store 中的 state、mutation、action 等必须添加注释
  • Vue 文件中的 template 必须添加注释,如果文件较大,可以添加 start 和 end 注释
  • Vue 文件的 methods,每个 method 必须添加注释
  • Vue 文件的 data,非常见单词必须添加注释
2.2.5 其他
1) 尽量避免手动操作 DOM

由于使用了 Vue 框架,所以在项目开发中尽量使用 Vue 的数据驱动更新 DOM,避免(除非万不得已)手动操作 DOM,包括增删改 DOM 元素、更改样式、添加事件等。

2) 删除无用代码

由于使用了 Git/SVN 等版本控制工具,必须及时删除无用代码,例如调试时的 console 语句、废弃的功能代码等。

规范的目的是为了编写高质量的代码,让团队成员每天都有愉悦的心情,让大家在一起感到快乐。

!! 参考:https://xie.infoq.cn/article/2048f2116f8df30115fca44c1

参考资料

[1]

首发博客地址: https://blog.zysicyj.top/

[2]

系列文章地址: https://blog.zysicyj.top/categories/技术文章/后端技术/系列文章/开发规范/

[3]

https://cn.vuejs.org/v2/style-guide/): https://xie.infoq.cn/link?target=https%3A%2F%2Fcn.vuejs.org%2Fv2%2Fstyle-guide%2F%25EF%25BC%2589

[4]

https://www.npmjs.com/package/vue-enum:https://xie.infoq.cn/link?target=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fvue-enum

本文由 mdnice 多平台发布



相关文章
|
22天前
|
人工智能 自然语言处理 前端开发
前端训练不规范导致AIGC模型“上梁不正”
【1月更文挑战第23天】前端训练不规范导致AIGC模型“上梁不正”
21 1
前端训练不规范导致AIGC模型“上梁不正”
|
2月前
|
前端开发 JavaScript 持续交付
前端代码审查规范
前端代码审查规范
|
3月前
|
前端开发 JavaScript 编译器
前端开发规范:命名规范、html规范、css规范、js规范(四)
前端开发规范:命名规范、html规范、css规范、js规范
101 0
|
3月前
|
前端开发 JavaScript
前端开发规范:命名规范、html规范、css规范、js规范(三)
前端开发规范:命名规范、html规范、css规范、js规范
|
3月前
|
数据采集 前端开发 JavaScript
前端开发规范:命名规范、html规范、css规范、js规范(二)
前端开发规范:命名规范、html规范、css规范、js规范
|
3月前
|
移动开发 前端开发 JavaScript
前端开发规范:命名规范、html规范、css规范、js规范(一)
前端开发规范:命名规范、html规范、css规范、js规范
139 0
|
3月前
|
前端开发 JavaScript IDE
上市公司前端开发规范参考
上市公司前端开发规范参考
|
5月前
|
前端开发 JavaScript
【开发规范系列】(四)前端开发规范(三)
【开发规范系列】(四)前端开发规范(三)
|
5月前
|
前端开发 JavaScript Go
【开发规范系列】(四)前端开发规范(二)
【开发规范系列】(四)前端开发规范(二)
|
6月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
81 0

相关产品

  • 云迁移中心