前端代码规范-命名规范

news/2024/6/23 20:16:07/文章来源:https://blog.csdn.net/liu62615/article/details/137236306

命名规则

  • 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.业务组件

业务组件:它不像基础组件只包含某个功能,而是在业务中被多个页面复用的(具有可复用性),它与基础组件的区别是,业务组件只在当前项目中会用到,不具有通用性,而且会包含一些业务,比如数据请求;而基础组件不含业务,在任何项目中都可以使用,功能单一,比如一个具有数据校验功能的输入框。
掺杂了复杂业务的组件(拥有自身 dataprop 的相关处理)即业务组件应该以 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
  • 命名规范:统一使用动词或者动词 + 名词形式

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

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

相关文章

nvme协议学习总结

一、nvme命令 1 nvme在pcie基础上的协议&#xff0c;与PCIE配合&#xff0c;实现高效传输。 2 nvme命令主要分IO命令和admin命令。 3 一个NVME CMD执行流程&#xff1a; step1&#xff1a;host把cmd写入SQ queue中&#xff1b; step2&#xff1a;host远端更新Device&#x…

【微服务】OpenFeign+Sentinel集中处理远程调用异常

文章目录 1.微服务基本环境调整1.对10004模块的application.yml调整2.启动nacos以及一个消费者两个提供者3.测试1.输入http://localhost:8848/nacos/index.html 来查看注册情况2.浏览器访问 http://localhost:81/member/nacos/consumer/get/13.结果 2.使用OpenFeign实现微服务模…

什么是nginx正向代理和反向代理?

什么是代理&#xff1f; 代理(Proxy), 简单理解就是自己做不了的事情或实现不了的功能&#xff0c;委托别人去做。 什么是正向代理&#xff1f; 在nginx中&#xff0c;正向代理指委托者是客户端&#xff0c;即被代理的对象是客户端 在这幅图中&#xff0c;由于左边内网中…

6.Python容器类型的数据

若我们想将多个数据打包并且统一管理&#xff0c;应该怎么办&#xff1f; Python内置的数据类型如序列&#xff08;列表、元组等&#xff09;、集合和字典等可 以容纳多项数据&#xff0c;我们称它们为容器类型的数据 1 序列 序列&#xff08;sequence&#xff09;是一种可迭…

MYSQL-6.日志

日志 undo-log回滚日志&#xff1a; 存储&#xff1a;InnoDB默认将undo-log日志存储在xx.ibdata共享表数据文件中&#xff08;Mysql5.5版本后支持单独存放&#xff09;&#xff0c;采用段形式存储&#xff1b;在xx.ibdata共享表数据文件中&#xff0c;有一块名为Rollback segm…

hcip综合实验2

目录 实验拓扑&#xff1a; 实验要求&#xff1a; 实验思路&#xff1a; 实验步骤&#xff1a; 1.配置设备接口IP 2.通过配置缺省路由让公网互通 3.配置ppp 1.R1和R5间的ppp的PAP认证&#xff1b; 2.R2与R5之间的ppp的CHAP认证; 3. R3与R5之间的HDLC封装; 4.构建R1、…

设计模式——结构型——外观模式Facade

处理器类 public class Cpu {public void start() {System.out.println("处理器启动了...");} } 内存类 public class Memory {public void start() {System.out.println("内存启动了...");} } 硬盘类 public class Disk {public void start() {Syste…

Linux部分命令

目录 1.文件介绍 2.ls命令 3.目录命令 4.相对路径以及绝对路径 5.命令创建目录&#xff08;文件夹&#xff09; 6.which命令 7.find命令 8.grep命令 9.wc命令 10.echo、tail、重定向符 1.文件介绍 和window不同&#xff0c;Linux没有盘路径&#xff0c;所有的文件都存…

《吴恩达:AI 智能体工作流引领人工智能新趋势》

近期值得看的 AI 视频之一&#xff1a;《吴恩达&#xff1a;AI 智能体工作流引领人工智能新趋势》这是吴恩达老师分享的他在 AI 智能体方面的发现。如果说智人区分于其他物种的能力是我们善用工具&#xff0c;那么对于 AI 来说&#xff0c;智能体就是它的工具。根据吴老师分享的…

全面的Docker快速入门教程(详细)

前言&#xff1a; 都2024年了&#xff0c;你还在为了安装一个开发或者部署环境、软件而花费半天的时间吗&#xff1f;你还在解决开发环境能够正常访问&#xff0c;而发布测试环境无法正常访问的问题吗&#xff1f;你还在为持续集成和持续交付&#xff08;CI / CD&#xff09;工…

uniapp中安装vant2

1.uniapp项目搭建 因为是安装vant2所以项目选择vue2&#xff0c;如果vue3项目的话安装vant3&#xff0c;vue3可能不适合这样安装方式 2.安装vant npm i vantlatest-v2 3.在main.js文件引入挂载vant 说明&#xff1a;// #ifndef VUE3这里是vue2模板用来挂载注册组件的地方&a…

pmp如何更好运用在实际工作中?

无论是刚步入职场的新人&#xff0c;还是具有多年工作经验的老手&#xff0c;都会有一种感慨&#xff1a;我曾认真学习了PMBOK项目管理知识&#xff0c;也取得了PMP证书&#xff0c;但如何将PMP中的科学项目管理理论和方法灵活运用到自己的工作中呢&#xff1f; 接下来&#x…

「51媒体网」邀请媒体采访报道对企业宣传有何意义?

传媒如春雨&#xff0c;润物细无声的&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 邀请媒体采访报道对企业宣传具有多重意义&#xff1a; 提升品牌知名度和曝光度&#xff1a;媒体是信息传播的重要渠道&#xff0c;通过媒体的报道&#xff0c;企业及其活动、产品能够迅…

Xcode删除原本的Git,再添加新的git

本文参考&#xff1a;Xcode怎么删除原本git,在重新设置新的git地址_ios xcode 删除原本git-CSDN博客 开发中会有一个问题。Xcode项目A 提交到Git服务器server1&#xff0c;此时项目A内部已经存在一个Git文件&#xff0c;与server1相关联。 此时你想将项目A提交到 另一个Git…

说说你对数据结构-树的理解

对树 - 二叉搜索树的理解 二叉搜索树是一种常见的二叉树结构&#xff0c;它具有以下特点&#xff1a; 每个节点最多只有两个子节点&#xff0c;分别称为左子节点和右子节点&#xff1b;对于任意节点&#xff0c;其左子树中的所有节点均小于该节点&#xff0c;其右子树中的所有…

BFS专题

1、BFS解决FloodFill算法 1、1图像渲染 733. 图像渲染 - 力扣(LeetCode) class Solution {typedef pair<int,int> PII;int dx[4] = {0,0,1,-1};int dy[4] = {1,-1,0,0}; public:vector<vector<int>> floodFill(vector<vector<int>>& i…

适用于智能断路器、新能源汽车充电枪锁、电动玩具、电磁门锁等的直流电机驱动芯片D6289ADA介绍

应用领域 适用于智能断路器&#xff08;家用或工业智能空开&#xff09;、新能源汽车充电枪锁、电动玩具、电磁门锁、自动阀门等的直流电机驱动。 功能介绍 D6289ADA是一款直流马达驱动芯片&#xff0c;它有两个逻辑输入端子用来控制电机前进、后退及制动。该电路具有良好的抗干…

C++项目——集群聊天服务器项目(十)点对点聊天业务

本节来实现C集群聊天服务器项目中的点对点聊天业务&#xff0c;一起来试试吧 一、点对点聊天业务 聊天服务器中一个重要的功能就是实现点对点聊天&#xff0c;客户端发送的信息包含聊天业务msgid、自身 的id和姓名、聊天对象的id号以及聊天信息&#xff0c;例如&#xff1a; …

Springboot自动获取接口实现

ServiceLoader加载接口实现步骤 1.编写接口 public interface CommunicationAdapterFactory {void setKernel(LocalKernel kernel);boolean providesAdapterFor(Vehicle vehicle);BasicCommunicationAdapter getAdapterFor(Vehicle vehicle); }2.编写实现 // 实现类 1 publi…

Flutter应用发布流程详解:从开发到上架一站式指南

引言 Flutter是一款由Google推出的跨平台移动应用开发框架&#xff0c;其强大的性能和流畅的用户体验使其备受开发者青睐。然而&#xff0c;开发一款应用只是第一步&#xff0c;将其成功上架到苹果商店才是实现商业目标的关键一步。本文将详细介绍如何使用Flutter将应用程序上…