备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

【开发规范系列】（四）前端开发规范（四）

2023-09-24 189
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【开发规范系列】（四）前端开发规范（四）
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 多平台发布



文章标签：
JavaScript
API
前端开发
开发工具
缓存
关键词：
前端规范
开发规范前端规范
程序员朱永胜
目录
相关文章
小周sir
|
26天前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
小周sir
43 4
小周sir
|
15天前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作，包括缩进（用2空格）、命名（变量 camelCase，常量 MY_CONSTANT，类 PascalCase）、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性，但需按项目需求调整。不断学习新规范以适应前端技术发展。
小周sir
16 1
掘金防诈骗集团CEO
|
2月前
|
前端开发
前端模块化开发规范
前端模块化开发规范
掘金防诈骗集团CEO
58 0
楠竹11
|
4月前
|
人工智能 自然语言处理 前端开发
前端训练不规范导致AIGC模型“上梁不正”
【1月更文挑战第23天】前端训练不规范导致AIGC模型“上梁不正”
楠竹11
40 1
前端训练不规范导致AIGC模型“上梁不正”
参谋总长萨博
|
5月前
|
前端开发 JavaScript 持续交付
前端代码审查规范
前端代码审查规范
参谋总长萨博
115 0
讓丄帝愛伱
|
6月前
|
前端开发 JavaScript 编译器
前端开发规范：命名规范、html规范、css规范、js规范（四）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
148 0
讓丄帝愛伱
|
6月前
|
前端开发 JavaScript
前端开发规范：命名规范、html规范、css规范、js规范（三）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
81 0
讓丄帝愛伱
|
6月前
|
数据采集 前端开发 JavaScript
前端开发规范：命名规范、html规范、css规范、js规范（二）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
62 0
讓丄帝愛伱
|
6月前
|
移动开发 前端开发 JavaScript
前端开发规范：命名规范、html规范、css规范、js规范（一）
前端开发规范：命名规范、html规范、css规范、js规范
讓丄帝愛伱
192 0
秋叶原的琴音
|
6月前
|
前端开发 JavaScript IDE
上市公司前端开发规范参考
上市公司前端开发规范参考
秋叶原的琴音
268 0

热门文章

最新文章

  • 1
    构建高效响应式Web界面：现代前端框架的比较
  • 2
    Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
  • 3
    前端最常见的JS面试题大全
  • 4
    layui：从崛起到蜕变，前端框架的华丽篇章
  • 5
    使用机器学习优化前端用户体验
  • 6
    前端代码整洁与规范之CSS篇
  • 7
    探索前端开发中的新趋势：WebAssembly 技术应用与展望
  • 8
    如何使用浏览器调试前端代码？
  • 9
    常见的前端加密方式有哪些？运用场景有哪些？
  • 10
    uniapp上传图片 前端以及java后端代码实现
  • 1
    借助chat-web前端开源项目搭建属于自己的ChatGPT镜像站
    131
  • 2
    构建高性能Web应用：前端性能优化的关键策略与实践
    57
  • 3
    构建响应式Web界面：现代前端开发的最佳实践
    43
  • 4
    前端开发中的响应式设计与移动优先原则
    28
  • 5
    探索现代Web应用中的微前端架构
    30
  • 6
    前端性能优化实践：从理论到实际操作
    32
  • 7
    构建高效前端项目：模块化与组件化策略
    32
  • 8
    前端发展趋势：WebAssembly、PWA 和响应式设计
    28
  • 9
    前端开发新趋势：Web3、区块链和虚拟现实
    39
  • 10
    架构的未来：微前端与微服务的融合
    63

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考