规范:项目、目录、文件、样式、事件、变量、方法、url参数、注释、git提交 命名规范及考证

一、规范命名的重要性

易懂、通用、规范、标准、专业性、是经验积累的体现

1.1、常见命名方法

序号命名方法解释
1全小写
2全大写
3驼峰:小驼峰命名法
4驼峰:大驼峰命名法
5烤串命名法 / 脊柱命名法
6下划线分隔法

二、项目名

采用小写字母和中划线(-)连接的方式命名,如my-project

序号规则举例
1采用小写字母和中划线(-)连接的方式命名my-project

三、目录 / 文件夹

重要:目录架构既要符合前端行业通用规则,又要满足项目的业务架构。层次分明,分工明确,从目录架构反过来能理解整个项目的业务架构。

3.1、整体原则

序号原则解释
1简洁明了命名应简洁明了,能够清晰地表达文件夹/目录的用途或内容。
2一致性在整个项目中保持命名规则的一致性,以便其他开发者能够快速理解和使用。
3小写字母为了避免大小写敏感问题,建议使用小写字母进行命名。
4使用连字符如果文件名包含多个单词,建议使用连字符(-)或下划线(_)进行分隔,但通常连字符在前端项目中更为常见。

3.2、具体规则

序号规则举例
1

采用小驼峰(camelCase)命名法

即第一个单词首字母小写,后续单词首字母大写。

如有复数结构时(此文件夹包含多个子文件夹或文件),可以采用复数命名法,如components、assets

camelCase
2也可以考虑使用小写字母和中划线(-)连接的方式,但这种方式在前端项目中较少见,更多用于文件名或类、ID的命名my-task

3.3、通用命名

序号名称解释
1src包含源代码的文件夹
2components包含Vue组件的文件夹(复数命名)
3assets包含静态资源的文件夹(复数命名)
4utils包含工具函数的文件夹(复数命名)
5views包含路由页面的文件夹(复数命名)

3.4、注意事项

序号事项解释
1避免使用保留字避免使用操作系统或编程语言中的保留字作为文件夹/目录名,以免引起冲突或误解。
2避免使用空格和特殊字符空格和特殊字符可能会在某些环境下导致问题,因此建议使用下划线(_)或中划线(-)作为单词之间的分隔符。
3考虑国际化如果项目需要支持多种语言,命名时应考虑国际化因素,避免使用具有特定文化含义的词汇。

3.5、gitee / github 实例

序号来源 / 项目截图目录分析
1gitee / vue1、小写命名
2、中划线 / '-' 命名
vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
 2gitee / RuoYi1、小写命名
2、中划线 / '-' 命名
RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本
3gitee / element

1、小写命名
2、中划线 / '-' 命名

3、底划线 / '_' 命名

https://gitee.com/ElemeFE/element/tree/dev

四、文件名

4.1、整体规则

同 3.1 整体原则

4.2、具体命名规则

序号规则详细
1组件文件名1、对于Vue、React等框架的组件文件,通常使用小驼峰(camelCase)命名法,但文件名本身(不包括扩展名)往往使用小写字母和连字符(-)连接的方式,以匹配HTML中的class命名习惯。例如,MyComponent.vue在HTML中可能作为<my-component>使用,因此文件名可以命名为my-component.vue。
2、另一个常见的做法是,即使内部组件类名使用小驼峰,文件名也保持小写字母和连字符的形式,如UserProfile.vue的文件名可以命名为user-profile.vue。
2样式文件名样式文件(如CSS、SCSS、LESS等)通常使用小写字母和连字符(-)连接的方式命名,以匹配CSS类名的命名习惯。例如,styles.css、main-layout.scss。
3脚本文件名JavaScript、TypeScript等脚本文件可以使用小写字母和连字符(-)或点(.)连接的方式命名,但点通常用于表示文件类型或模块结构(如utils.js、app.module.ts)。然而,在前端项目中,更常见的做法是使用小驼峰命名法(不包括扩展名),如main.js、app.ts,或者简单的文件名加上扩展名,如index.js。
4图片和媒体文件名1、图片和媒体文件(如PNG、JPG、GIF、SVG等)通常使用小写字母、数字和连字符(-)命名,以描述文件的内容或用途。例如,logo.png、background-image.jpg。
2、对于需要描述多个属性的图片,可以使用连字符分隔属性,如user-profile-avatar.png。
5测试文件名测试文件(如单元测试、集成测试等)通常使用与被测试文件相同的命名规则,但会在文件名后添加.test、.spec或.spec.js等后缀以标识其为测试文件。例如,user-profile.spec.js

4.3、注意事项

序号事项详细
1避免使用保留字避免使用操作系统或编程语言中的保留字作为文件名,以免引起冲突或误解
2避免使用空格空格可能会导致在某些环境下出现问题,因此建议使用连字符(-)或下划线(_)作为单词之间的分隔符
3考虑文件类型文件名应包含文件类型扩展名,以便快速识别文件的类型和内容

4.4、实例

序号来源 / 项目截图目录分析
1gitee / vue

1、小写

2、烤串

vue: 🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - Gitee.com

2gitee / RuoYi

1、小写

2、驼峰

3、底划线

RuoYi-Vue: 🎉 基于SpringBoot,Spring Security,JWT,Vue & Element 的前后端分离权限管理系统,同时提供了 Vue3 的版本 - Gitee.com

3gitee / element

1、小写

2、烤串

element: Element 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。 - Gitee.com

五、CSS 样式

class / id

驼峰、烤串命名、蛇形命名

CSS 命名规范,将省下你大把调试时间 - 知乎

常用CSS的命名规范:_Aiden_xiaoGuo的博客-CSDN博客_css命名规范

六、事件

6.1、handle + 行为描述

考证element-ui

6.2、动词+内容

js事件名称集_aら 淼的博客-CSDN博客_事件名称

https://wenku.baidu.com/view/8fcc71a96b0203d8ce2f0066f5335a8102d2661d.html

更多内容待补充 

七、变量

js命名规范 - 腾讯云开发者社区-腾讯云

https://www.csdn.net/tags/MtjaQg1sMDgwMjMtYmxvZwO0O0OO0O0O.html

JavaScript:变量命名的规范_Argonaut_的博客-CSDN博客_js变量命名规范

js变量命名规范 - 百度文库

八、方法

如 vue method 的方法

JavaScript命名规范_菜鸟_小卡酷谋的博客-CSDN博客_js命名规范

九、url 及 参数

1、URL越短越好

2、避免太多参数

3、目录层级较少

4、具有描述性

5、包含关键词

6、字母全部小写

7、使用连词符

网站URL规范化设计的8个命名规则_目录_文件_字母

URL规范有哪些-SEO-PHP中文网

URL命名规范_风的着点的博客-CSDN博客_url命名规范

url 命名规范_whatday的博客-CSDN博客_url命名规范

URL命名规则 - 百度文库

十、注释

前端:HTML、CSS、JavaScript 代码注释 / 注释与代码规范_html注释-CSDN博客

十一、git 提交

vue3-ts:Commitlint / 规范化Git提交消息格式_commitlint 规范-CSDN博客

十二、欢迎交流指正

遵循命名规则,可以创建一个结构清晰、易于维护的前端项目

十三、参考链接

规范:接口返回的字段命名规范考证_php接口返回驼峰还是下划线-CSDN博客

规范:前端代码开发规范_前端开发规范-CSDN博客

前端代码规范-命名规范-阿里云开发者社区

前端代码命名规范_Tl丶落樱无痕的博客-CSDN博客_前端代码命名规范

Aotu.io - 前端代码规范

概述 | Aotu.io - 前端代码规范

微社区技术规范站

TGideas文档库

GitHub - ecomfe/spec: This repository contains the specifications.

GitHub - standard/standard: 🌟 JavaScript Style Guide, with linter & automatic code fixer

ES6 入门教程

ESLint - 插件化的 JavaScript 代码检测工具 - ESLint中文文档

代码规范 - Apache ECharts

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/464074.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NumPy Ndarray学习

1.NumPy Ndarray 对象简介 NumPy 最重要的特点是其 N 维数组对象 ndarray&#xff0c;它是一系列同类型数据的集合&#xff0c;以 0 下标为开始进行集合中元素的索引。ndarray 对象是用于存放同类型元素的多维数组。ndarray 中的每个元素在内存中都有相同存储大小的区域。 2.N…

二:MySQL基础---查询专项练习

目录 表结构 1. 数据月表&#xff08;zbr_data_monthly_data_YYYYMM&#xff09; 2. 分类表&#xff08;zbr_category&#xff09; 3. 用户表&#xff08;zbr_user&#xff09; 4. 交易表&#xff08;zbr_transaction&#xff09; 查询知识点 1. 基本查询 2. 连接查询 …

C++线程异步

本文内容来自&#xff1a; 智谱清言 《深入应用C11 代码优化与工程级应用》 std::future std::future作为异步结果的传输通道&#xff0c;可以很方便地获取线程函数的返回值。 std::future_status Ready (std::future_status::ready): 当与 std::future 对象关联的异步操作…

Python小游戏19——滑雪小游戏

运行效果 python代码 import pygame import random # 初始化Pygame pygame.init() # 设置屏幕尺寸 screen_width 800 screen_height 600 screen pygame.display.set_mode((screen_width, screen_height)) pygame.display.set_caption("滑雪小游戏") # 定义颜色 WH…

批量删除redis数据【亲测可用】

文章目录 引言I redis客户端基础操作key的命名规则批量查询keyII 批量删除key使用连接工具进行分组shell脚本示例其他方法III 知识扩展:控制短信验证码获取频率引言 批量删除redis数据的应用: 例如缓存数据使用了新的key存储,需要删除废弃的key。RedisTemplate的key序列化采…

04字符串算法/代码随想录

四、字符串 反转字符串 力扣344 遇到数组双指针真是太好用了&#xff0c;左右指针不断逼近即可&#xff0c;代码也很简单 class Solution {public void reverseString(char[] s) {int fast s.length - 1;int slow 0;while (slow < fast) {char temp s[fast];s[fast] s[…

conda找不到对应版本的pytorch,就会自动下载cpu版本的

踩坑一&#xff1a; conda install pytorch2.0.1 torchvision0.15.2 torchaudio2.0.2 pytorch-cuda11.7 -c pytorch -c nvidia (本人的服务器支持的 且python3.8.20) 先nvidia-smi查看自己cuda支持的最高版本&#xff0c;然后去pytorch官网寻找对应的torch、torchaudio、to…

信息学科平台设计与实现:Spring Boot技术详解

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

二、应用层,《计算机网络(自顶向下方法 第7版,James F.Kurose,Keith W.Ross)》

文章目录 零、前言一、应用层协议原理1.1 网络应用的体系结构1.1.1 客户-服务器(C/S)体系结构1.1.2 对等体&#xff08;P2P&#xff09;体系结构1.1.3 C/S 和 P2P体系结构的混合体 1.2 进程通信1.2.1 问题1&#xff1a;对进程进行编址&#xff08;addressing&#xff09;&#…

Java面向对象 C语言字符串常量

1. &#xff08;1&#xff09;. package liujiawei;public class Phone {String brand;double price;public void call(){System.out.println("手机打电话");}public void play(){System.out.println("手机打游戏");} } public class phonetest {public…

【逆向基础】十八、PE文件格式(三)

一、简介 文本章主要讲结构体IMAGE_DATA_DIRECTORY数组。它制定了各种数据目录的地址与大&#xff1b;PE装载器可以通过这些信息准确加载PE文件所需的函数&#xff0c;资源等&#xff1b;此外&#xff0c;数据目录表也是设置钩子&#xff0c;注入等逆向的理论基础。所以学习这…

Session条件竞争--理论

条件竞争 多个线程同时访问一个共享变量或文件时&#xff0c;由于线程的执行顺序不符合预期而导致最后的执行结果不符合开发者的预期。 session session,被称为“会话控制”。Session对象存储特定用户会话所需的属性及配置信息。这样&#xff0c;当用户在应用程序的Web页之间…

Centos8安装软件失败更换镜像源

问题 在Centos 8上安装git&#xff0c;报错如下&#xff1a; sudo dnf install git -y Repository extras is listed more than once in the configuration CentOS Linux 8 - AppStream 0.0 B/s …

如何让网页中的图片不可下载,让文字不可选中/复制

使用css中的伪属性来完成这个操作. 效果展示 文字不可复制: 图中这几个中文字符无法被选中,双击前面这几个字也只能选中后面的英文内容,无法选中也就无法复制. 既然常规方式无法选中,那打开浏览器开发者工具总能复制吧! 我经常这样干, 但是很遗憾,页面检查中根本就没那些内容…

Linux 之 信号概念、进程、进程间通信、线程、线程同步

学习任务&#xff1a; 1、 信号&#xff1a;信号的分类、进程对信号的处理、向进程发送信号、信号掩码 2、 进程&#xff1a;进程与程序的概念、进程的内存布局、进程的虚拟地址空间、fork创建子进程、wait监视子进程 3、 学习进程间通信&#xff08;管道和FIFO、信号、消息队列…

Jmeter——结合Allure展示测试报告

在平时用jmeter做测试时&#xff0c;生成报告的模板&#xff0c;不是特别好。大家应该也知道allure报告&#xff0c;页面美观。 先来看效果图&#xff0c;报告首页&#xff0c;如下所示&#xff1a; 报告详情信息&#xff0c;如下所示&#xff1a; 运行run.py文件&#xff0c;…

ElasticSearch - Bucket Script 使用指南

文章目录 官方文档Bucket Script 官文1. 什么是 ElasticSearch 中的 Bucket Script&#xff1f;2. 适用场景3. Bucket Script 的基本结构4. 关键参数详解5. 示例官方示例&#xff1a;计算每月 T 恤销售额占总销售额的比率百分比示例计算&#xff1a;点击率 (CTR) 6. 注意事项与…

java、excel表格合并、指定单元格查找、合并文件夹

#创作灵感# 公司需求 记录工作内容 后端&#xff1a;JAVA、Solon、easyExcel、FastJson2 前端&#xff1a;vue2.js、js、HTML 模式1&#xff1a;合并文件夹 * 现有很多文件夹 想合并全部全部的文件夹的文件到一个文件夹内 * 每个部门发布的表格 合并全部的表格为方便操作 模…

【初阶数据结构篇】链式结构二叉树(二叉链)的实现(感受递归暴力美学)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…

aws(学习笔记第十课) 对AWS的EBS如何备份(snapshot)以及使用snapshot恢复数据,AWS实例存储

aws(学习笔记第十课) 对AWS的EBS如何备份&#xff08;snapshot&#xff09;以及使用snapshot&#xff0c;AWS实例存储 学习内容&#xff1a; 对AWS的EBS如何备份AWS实例存储EBS和实例存储的不足 1. 对AWS的EBS如何备份&#xff08;snapshot&#xff09;以及使用snapshot恢复数…