让我看看你们公司的代码规范都是啥样的?

简介: 让我看看你们公司的代码规范都是啥样的?

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

我这里提供一份我自己在使用的项目代码规范,当然我这里比较简陋,有补充的可以打在评论区,我丰富到文章里去。

1.组件命名规范

components下的组件命名规范遵循大驼峰命名规范。

示例:conpnents/AlbumItemCard/AlbumItemCard.vue

小驼峰式命名法(lower camel case): 第一个单词以小写字母开始;第二个单词的首字母大写,例如:myName

大驼峰式命名法(upper camel case): 每一个单字的首字母都采用大写字母,例如:MyName

2.目录命名规范

pages下的文件命名规范:遵循小驼峰命名规范。

示例:pages/createAlbum/createAlbum.vue

3.CSS命名规范

class命名规范为中划线。

示例:

<template>
  <view class="gui-padding">
    ...
  </view>
</template>
<style lang="scss" scoped>
.gui-padding {
 ...
}
</style>
复制代码

css使用scss进行书写。

4.代码注释规范

行内注释://

函数注释:

/**
 * @description: 加深颜色值
 * @param {string} color 颜色值字符串
 * @returns {*} 返回处理后的颜色值 
 */
export function getDarkColor(color: string, level: number) {
  const reg = /^#?[0-9A-Fa-f]{6}$/
  if (!reg.test(color)) return ElMessage.warning('输入错误的hex颜色值')
  const rgb = hexToRgb(color)
  for (let i = 0; i < 3; i++)
    rgb[i] = Math.round(20.5 * level + rgb[i] * (1 - level))
  return rgbToHex(rgb[0], rgb[1], rgb[2])
}
复制代码

接口注释:

/**
 * @description 获取后台用户分页列表(带搜索)
 * @param page
 * @param limit
 * @param username
 * @returns {<PageRes<AclUser.ResAclUserList>>}
 * @docs https://xxxx
 */
export function getAclUserList(params: AclUser.ReqAclUserListParams) {
  return http.get<PageRes<AclUser.ResAclUserList>>(
    `/admin/acl/user/${params.pageNum}/${params.pageSize}`,
    { username: params.username },
  )
}
复制代码

5.接口书写规范

4.1 接口定义规范:

接口全部写在api目录下面,按照功能划分,分为不同的目录。

比如搜索接口,定义在api/search/index.ts下面。

4..2 接口书写规范:

统一使用类方法,内部方法定义每个接口,最后统一export,接口使用到的类型全部定义在同级目录的interfaces.ts文件中。比如搜索相关的接口:

import Service from '../../utils/request'
import { SearchItemInterface, SearchPageResponseInterface, SearchParamsInterface } from "./interfaces"
class CateGory extends Service {
  /**
   * @description 搜索功能
   * @param  {SearchParamsInterface} params 二级分类Id
   */
  // 搜索
  getSearchAlbumInfo(params: SearchParamsInterface) {
    return this.post<SearchPageResponseInterface<SearchItemInterface[]>>({
      url: '/api/search/albumInfo',
      data: params
    })
  }
  /**
   * @description: 获取搜索建议
   * @param {string} keyword 搜索关键字
   * @return {*}
   */
  getSearchSuggestions(keyword: string) {
    return this.get<string[]>({
      url: `/api/search/albumInfo/completeSuggest/${keyword}`,
      loading:false
    })
  }
}
export const search = new CateGory()
复制代码

4.3 接口类型定义:

// 搜索参数
export interface SearchParamsInterface {
  keyword: string;
  category1Id?: number | null;
  category2Id?: number | null;
  category3Id?: number | null;
  attributeList?: string[] | null;
  order?: string | null;
  pageNo?: number;
  pageSize?: number;
}
// 搜索结果item向接口
export interface SearchItemInterface {
  id: number;
  albumTitle: string;
  albumIntro: string;
  announcerName: string;
  coverUrl: string;
  includeTrackCount: number;
  isFinished: string;
  payType: string
  createTime: string;
  playStatNum: number;
  collectStatNum: number;
  buyStatNum: number;
  albumCommentStatNum: number;
}
复制代码

4.4 接口引用

所有export的类接口方法都在api/index.ts中统一引入:

export { courseService } from './category/category'
export { albumsService } from './albums/albums'
export { search } from './search/search'
复制代码

在页面中使用:

<script>
  import { courseService } from "../../api"
  /**
   * @description: 获取所有分类
   * @returns {*}
   */
  const getCategoryList = async () => {
    try {
      const res = await courseService.findAllCategory()
    } catch (error) {
      console.log(error)
    }
  }
</script>
复制代码

6.分支命名规范

分支管理 命名规范 解释
master 主分支 master 稳定版本分支,上线完成回归后后,由项目技术负责人从 release 分支合并进来,并打 tag
test 测试分支 test/版本号示例:test/1.0.0 测试人员使用分支,测试时从 feature 分支合并进来,支持多人合并
feature 功能开发分支 feature/功能名称示例:feature/blog 新功能开发使用分支,基于master建立
bugfix修复分支 bugfix/功能名称示例:fix/blog 紧急线上bug修复使用分支,基于master建立
release 上线分支 release/版本号示例:release/0.1.0 用于上线的分支,基于 master 建立,必须对要并入的 分支代码进行 Code review 后,才可并入上线

7.代码提交规范

前缀 解释 示例
feat 新功能 feat: 添加新功能
fix 修复 fix: 修改bug
docs 文档变更 docs: 更新文档
style 代码样式变更 style: 修改样式
refactor 重构 refactor: 重构代码
perf 性能优化 perf: 优化了性能
test 增加测试 test: 单元测试
revert 回退 revert: 回退代码
build 打包 build: 打包代码
chore 构建过程或辅助工具的变动 chore: 修改构建

 

大厂面试题分享 面试题库

前后端面试题库 (面试必备) 推荐:★★★★★

地址:前端面试题库  web前端面试题库 VS java后端面试题库大全

相关文章
|
移动开发 缓存 JavaScript
2021最新阿里代码规范(前端篇)
2021最新阿里代码规范(前端篇)
49428 11
2021最新阿里代码规范(前端篇)
|
3月前
|
项目管理
「软件项目管理」一文了解软件项目团队计划
该文章全面介绍了软件项目团队计划的制定,涵盖人力资源规划、项目组织结构设计、责任分配矩阵(RAM)的应用、干系人管理策略及项目沟通计划的编制等多个方面,帮助项目经理有效地组织和管理项目团队。
|
开发工具 git 开发者
使用commitizen实现按团队规范提交代码
使用commitizen实现按团队规范提交代码
使用commitizen实现按团队规范提交代码
|
XML SQL 存储
【软件开发规范四】《应用系统安全编码规范》
为落实《信息安全策略》的要求,有效加强应用系统安全管理,提升应用系统安全编码能力,指导开发团队有效进行应用系统安全编码,特制定本规范。
2902 3
|
移动开发 前端开发 JavaScript
|
前端开发 JavaScript IDE
让团队代码像一个人写的
前端代码规范流程实践思路 1. 本地开发过程,提示、校验、更改 2. Git 提交过程,代码校验是否允许提交 3. 服务端校验,代码校验是否合并和发布
160 0
让团队代码像一个人写的
|
架构师 程序员 测试技术
程序员加入新团队,必须知道的 20 道问题!
不同的软件开发团队做事的风格也完全不同。即使在同一家公司内,许多可变因素也会导致团队之间出现分歧。作为一名软件工程师,每当与新同事合作或开发新软件时,通常都会觉得非常兴奋。但在加入新的开发团队时,我们需要思考一系列的问题。
|
Java 测试技术
代码质量与规范,那些年你欠下的技术债
提到“质量”二字时,我们的第一反应往往是“有多少BUG?”“性能好不好?“这样的问题。我们对软件产品或服务的质量定义看其能不能满足用户的需求,包括功能、性能和体验等维度的指标,我们可以通过各种类型的检测手段来给出其质量高低的度量。
1610 0

热门文章

最新文章

相关实验场景

更多