大厂面试题分享 面试题库

前后端面试题库 （面试必备） 推荐：★★★★★

地址：前端面试题库  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: stringcreateTime: 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后端面试题库大全