位置: IT常识 - 正文

让我看看你们公司的代码规范都是啥样的？(让我看看他们)

编辑：rootadmin

让我看看你们公司的代码规范都是啥样的？大厂面试题分享面试题库前后端面试题库（面试必备）推荐：★★★★★

推荐整理分享让我看看你们公司的代码规范都是啥样的？(让我看看他们)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:让我看看你们在干什么表情包,让我看看你们的照片,让我看看你们的照片,让我们看看你的表情,让我看看你看,让我们看看你的表情,让我们看看你的表情,让我们看看你怎么说,内容如对您有帮助，希望把文章链接给更多的朋友！

地址：前端面试题库 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'复制代码

在页面中使用：

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

本文链接地址:https://www.jiuchutong.com/zhishi/297590.html 转载请保留说明！

上一篇：nvm安装与使用(nvm安装教程)

下一篇：学习使用vue实现一个简单的轮播图(vue使用教程)