前端代码规范-命名规范
命名规则
camelCase(小驼峰式命名法 —— 首字母小写)PascalCase(大驼峰式命名法 —— 首字母大写)kebab-case(短横线连接式)Snake(下划线连接式)
项目名称
项目名 全部采用小写方式, 以短横线分隔。 例:my-project-name。
图像名 全部采用小写方式, 优先选择单个单词命名,多个单词命名以下划线分隔
banner_sina.gif
menu_aboutus.gif
menutitle_news.gif
logo_police.gif
logo_national.gif
pic_people.jpg
pic_TV.jpg
HTML 全部采用小写方式, 优先选择单个单词命名,多个单词命名以下划线分隔。
css 全部采用小写方式, 优先选择单个单词命名,多个单词命名以短横线分隔。
JS 全部采用小写方式, 优先选择单个单词命名,多个单词命名以短横线分隔。
上述规则可以快速记忆为“静态文件下划线,编译文件短横线”。
Vue组件命名
1.单文件组件名
文件扩展名为 .vue 的 single-file components (单文件组件)。单文件组件名应该始终是单词大写开头 (PascalCase)。
MyComponent.vue
2.单例组件名
只拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。
这不意味着组件只可用于一个单页面,而是每个页面只使用一次。这些组件永远不接受任何 prop,因为它们是为你的应用定制的。如果你发现有必要添加 prop,那就表明这实际上是一个可复用的组件,只是目前在每个页面里只使用一次。
比如,头部和侧边栏组件几乎在每个页面都会使用,不接受 prop,该组件是专门为该应用所定制的。
components
├─ TheHeading.vue
├─ TheSidebar.vue
3.基础组件名
基础组件:不包含业务,独立、具体功能的基础组件,比如日期选择器、模态框等。这类组件作为项目的基础控件,会被大量使用,因此组件的 API 进行过高强度的抽象,可以通过不同配置实现不同的功能。
应用特定样式和约定的基础组件(也就是展示类的、无逻辑的或无状态、不掺杂业务逻辑的组件) 应该全部以一个特定的前缀开头 —— Base。 基础组件在一个页面内可使用多次,在不同页面内也可复用,是高可复用组件。
components
├─ BaseButton.vue
├─ BaseTable.vue
├─ BaseIcon.vue
4.业务组件
业务组件:它不像基础组件只包含某个功能,而是在业务中被多个页面复用的(具有可复用性),它与基础组件的区别是,业务组件只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请求;而基础组件不含业务,在任何项目中都可以使用,功能单一,比如一个具有数据校验功能的输入框。
掺杂了复杂业务的组件(拥有自身 data、prop 的相关处理)即业务组件应该以 Custom 前缀命名。业务组件在一个页面内比如:某个页面内有一个卡片列表,而样式和逻辑跟业务紧密相关的卡片就是业务组件。
components
├─ CustomCard.vue
5.紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。 因为编辑器通常会按字母顺序组织文件,所以这样做可以把相关联的文件排在一起。
├─ TodoList.vue
├─ TodoListItem.vue
├─ TodoListItemButton.vue
6.组件名中单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。 因为编辑器通常会按字母顺序组织文件,所以现在组件之间的重要关系一目了然。如下组件主要是用于搜索和设置功能。
代码参数命名
name
组件名应该始终是多个单词,应该始终是 PascalCase 的。 根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。
prop
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。 我们单纯的遵循每个语言的约定,在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
router
Vue Router Path 命名采用 kebab-case 格式。 用 Snake(如:/user_info)或 camelCase(如:/userI
模板中组件
对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的,但是在 DOM 模板中总是 kebab-case 的
自闭合组件
在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
变量
- 命名方法:camelCase
- 命名规范:类型 + 对象描述或属性的方式
常量
- 命名方法:全部大写下划线分割
- 命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词
方法
- 命名方法:camelCase
- 命名规范:统一使用动词或者动词 + 名词形式
相关文章:
前端代码规范-命名规范
命名规则 camelCase(小驼峰式命名法 —— 首字母小写)PascalCase(大驼峰式命名法 —— 首字母大写)kebab-case(短横线连接式)Snake(下划线连接式) 项目名称 项目名 全部采用小写方…...
移动端APP测试常见面试题精析
现在面试测试职位,要求非常全面,那么APP测试一般需要哪些技术呢?下面总结了APP测试常见面试题: 1.Android四大组件? Activity:描述UI,并且处理用户与机器屏幕的交互。应用程序中,一个Activity就相当于手…...
报错[Vue warn]: $listeners is readonly. $attrs is readonly.怎么解决?
代码也没有逻辑错误,但是报错 [Vue warn]: $listeners is readonly. $attrs is readonly. 情况1:多处声明了new Vue,解决方案:删除一个,用全局变量引用同一个Vue 情况2:import Vue from Vue;第二个Vue首字…...
android 14 apexd分析(1)apexd bootstrap
Apex的由来,我们都知道普通的apk我们可以通过应用商店playstore等进行更新,apex的引入是google希望也能通过playstore更新bin文件.so etc配置文件等类型文件. 这些文件的安装实际通过apexd来进行,现在我们来解析一下apexd, apexd的启动分为两个阶段,bootstrap和普通apexd启…...
C++ 中的 vector 的模拟实现【代码纯享】
文章目录 C 中的 vector 模拟实现1. vector 的基本概念2. vector 的基本操作3. vector 的模拟实现4.代码纯享5. 总结 C 中的 vector 模拟实现 在 C 中,vector 是一个非常重要的容器,它提供了动态数组的功能。在本篇博客中,我们将尝试模拟实现…...
UE4 方块排序动画
【动画效果】 入动画: 出动画: 【分析】 入动画:方块动画排序方式为Z字形,堆砌方向为X和Y轴向 出动画:方块动画排序方式为随机 【关键蓝图】 1.构建方块砌体 2.入/出动画...
网络与并发编程(一)
并发编程介绍_串行_并行_并发的区别 串行、并行与并发的区别 串行(serial):一个CPU上,按顺序完成多个任务并行(parallelism):指的是任务数小于等于cpu核数,即任务真的是一起执行的并发(concurrency):一个CPU采用时间…...
超详细工具Navicat安装教程
Navicat是一款功能强大的数据库管理工具,可用于管理多种类型的数据库,包括MySQL、MariaDB、SQL Server、SQLite、Oracle和PostgreSQL等。以下是Navicat工具的一些主要特点和功能: 一.功能介绍 跨平台支持 多种数据库支持 直观的用户界面 数据…...
RN在android/ios手机剪切图片的操作
之前写过一个React Native调用摄像头画面及拍照和保存图片到相册全流程但是这个仅限于调用摄像头拍照并保存图片,今天再写一个版本的操作,这个博客目前实现的有三点操作: 调用摄像头拍照对照片进行剪切从相册选取图片 功能上面来说有两点: 点击按钮可以对摄像头进行拍照,拍完照…...
C语言 | Leetcode C语言题解之第6题Z字形变换
题目: 题解: char * convert(char * s, int numRows){int n strlen(s), r numRows;if (r 1 || r > n) {return s;}int t r * 2 - 2;char * ans (char *)malloc(sizeof(char) * (n 1));int pos 0;for (int i 0; i < r; i) { // 枚举矩阵的…...
C 回调函数的两种使用方法
对回调(callback)函数的一点粗陋理解,在我小时候,隔壁村有家月饼小作坊(只在中秋那段时间手工制作一些月饼出售,后来好像不做了),做出的月饼是那种很传统很经典的款式,里…...
医院云HIS系统源码,二级医院、专科医院his系统源码,经扩展后能够应用于医联体/医共体
基于云计算技术的B/S架构的HIS系统,为医疗机构提供标准化的、信息化的、可共享的医疗信息管理系统,实现医患事务管理和临床诊疗管理等标准医疗管理信息系统的功能。 系统利用云计算平台的技术优势,建立统一的云HIS、云病历、云LIS࿰…...
NineData云原生智能数据管理平台新功能发布|2024年3月版
数据库 DevOps - 大功能升级 SQL 开发早期主要提供 SQL 窗口(IDE)功能,在产品经过将近两年时间的打磨,新增了大量的企业级功能,已经服务了上万开发者,覆盖了数据库设计、开发、测试、变更等生命周期的功能…...
java Web 疫苗预约管理系统用eclipse定制开发mysql数据库BS模式java编程jdbc
一、源码特点 JSP 疫苗预约管理系统是一套完善的web设计系统,对理解JSP java 编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为TOMCAT7.0,eclipse开发,数据库为Mysql5.0,使…...
Qt5.14.2 揭秘Qt日志神器高效诊断程序潜在隐疾
对程序员而言,代码中的bug往往如同无影无踪的隐疾,影响着程序的健康运行。而及时有效的诊断手段则是治疗这些隐疾的良药。今天,我们将一窥Qt日志框架QLoggingCategory的神奇功效,探究它如何为你的Qt应用程序构筑坚实的诊断防火墙。…...
Mac上设置环境变量PATH
一、配置文件有哪些 在Mac系统中,环境变量的配置文件主要包括以下几个: 文件名称描述/etc/paths系统级别的配置文件,系统启动时会加载它。/etc/profile系统级别的配置文件,所有用户登录时都会读取该文件。~/.bash_profile用户级别…...
Redis 全景图(1)--- 关于 Redis 的6大模块
这是我第一次尝试以长文的形式写一篇 Redis 的总结文章。这篇文章我想写很久了,只是一直碍于我对 Redis 的掌握没有那么的好,因此迟迟未动笔。这几天,我一直在看各种不同类型的 Redis 文章,通过阅读这些文章,引发了我对…...
Lambda表达式,Stream流
文章目录 Lambda表达式作用前提函数式接口特点 语法省略模式和匿名对象类的区别 Stream流思想作用三类方法获取方法单列集合(Collection[List,Set双列集合Map(不能直接获取)数组同一类型元素(Stream中的静态方法) 常见的中间方法终结方法收集方法 Optional类 Lambda表达式 作用…...
Apache Hive的基本使用语法(一)
一、数据库操作 创建数据库 create database if not exists myhive;查看数据库 use myhive; desc database myhive;创建数据库并指定hdfs存储 create database myhive2 location /myhive2;删除空数据库(如果有表会报错) drop database myhive;…...
Python爬虫详解:原理、常用库与实战案例
前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家:https://www.captainbed.cn/z ChatGPT体验地址 文章目录 前言引言:一、爬虫原理1. HTTP请求与响应过程2. 常用爬虫技术 二、P…...
Android音频输出流实战:从AudioFlinger到HAL层的完整调用链解析
Android音频输出流深度解析:从框架设计到硬件交互 1. Android音频系统架构概览 Android音频子系统采用分层设计,每一层都有明确的职责划分。理解这个架构是分析音频输出流的基础。 核心层级结构: 应用层:通过AudioTrack、MediaPla…...
基于Coqui TTS的高质量语音合成实战:从模型部署到生产环境优化
最近在做一个需要语音播报功能的小项目,之前用的一些在线TTS服务,要么费用不低,要么音质和速度达不到要求。于是把目光投向了开源方案,一番折腾后,发现 Coqui TTS 真是个宝藏。它不仅音质好,支持的语言和声…...
5步打造企业级数字人创作平台:从本地化部署到场景落地全指南
5步打造企业级数字人创作平台:从本地化部署到场景落地全指南 【免费下载链接】Duix-Avatar 项目地址: https://gitcode.com/GitHub_Trending/he/Duix-Avatar 一、价值定位:数字人技术的企业级应用价值 核心价值:Duix.Avatar通过全本…...
毕业生就业新趋势:央国企成首选“避风港”
据教育部数据显示,2024届全国普通高校毕业生规模预计达到1179万人,创历史新高。在宏观经济环境面临挑战、部分行业竞争加剧的背景下,庞大的毕业生群体面临着前所未有的就业压力。与此同时,一个显著的趋势正在显现:中央…...
为什么你的BUCK电路动态响应慢?从Fm增益公式反推电感选型技巧
为什么你的BUCK电路动态响应慢?从Fm增益公式反推电感选型技巧 在电源设计领域,BUCK电路的动态响应速度常常成为工程师调试的痛点。当负载突变时输出电压的恢复时间过长,或者环路补偿怎么调都不理想,问题很可能出在最基础的电感参…...
isac毕设选题效率提升实战:从任务调度到自动化部署的全流程优化
最近在忙 ISAC 相关的毕业设计选题,和不少同学交流后发现,大家的时间很大一部分都耗在了“重复劳动”上:环境配半天跑不起来,代码改一点就要手动重启服务测试,版本一多自己都忘了哪个是能用的。这哪是做毕设࿰…...
档案宝 档案管理系统怎么样?为什么企业选择他?
在当今信息化高速发展的时代,企业档案管理已经从传统的纸质化时代迈向了数字化、智能化的新阶段。随着企业规模的不断扩大和业务类型的日益复杂,档案管理面临着前所未有的挑战:档案数量激增、查找困难、存储空间紧张、安全隐患突出等问题严重…...
用U8g2库玩转OLED:Arduino显示动态变量+自定义图标的5个实用技巧
用U8g2库玩转OLED:Arduino显示动态变量自定义图标的5个实用技巧 在嵌入式开发中,OLED显示屏因其高对比度、低功耗和紧凑尺寸成为物联网设备和交互式项目的首选。U8g2库作为Arduino平台上最强大的显示驱动库之一,其灵活性和功能丰富性远超基础…...
研华工控串口(RS232 RS485 RS422)针脚定义及接线示意图
一. 研华工控串口DB9针脚定义:二. 三种方式接线示意图:1.RS-232 模式(默认模式)点对点通讯,全双工,最长15米机器内DB9 外部RS-23…...
YOLOv11涨点改进| TPAMI 2026 |全网创新首发、注意力改进篇|引入ASSA自适应稀疏自注意力,顶刊万能涨点模块,含5种超强创新,适合目标检测,图像分割,图像分类,图像超分等任务高效涨点
一、本文介绍 🔥本文给大家介绍利用将 ASSA自适应稀疏自注意力模块改进 YOLOv11网络模型,可以显著提升模型的特征建模能力和复杂场景下的检测性能。ASSA通过自注意力机制在全局范围内建立不同空间位置之间的依赖关系,使网络能够充分利用全局上下文信息,从而增强特征表达能…...
