前端代码规范-命名规范

命名规则

  • 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.mzph.cn/news/789610.shtml

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

相关文章

ORACLE监听启动异常提示TNS-12555 /TNS-12560/TNS-00525

西南某客户反馈启动数据库监听提示TNS-12555 /TNS-12560/TNS-00525错误&#xff0c;无法正常启动&#xff0c;数据库版本为11.2.0.4 ,虚拟机运行的关键应用&#xff0c;远程到客户服务器进行了检查和调整&#xff1a; 1、检查ORACLE所在目录权限以及listener权限&#xff0c;权…

CSS基础选择器 小案例复习(画三个小盒子)

&#xff08;大家好&#xff0c;前面我们学习了基础的选择器&#xff0c;俗话说&#xff1a;温故而知新。所以今天我们将通过小案例来复习前面学过的小知识点。另&#xff0c;十分感谢大家对我文章的支持❤️&#xff09; 通过这个案例复习两个地方&#xff1a; 类选择器的使用…

二叉树的高效非递归层次遍历:一种O(n)时间复杂度与固定空间复杂度的解决方案

TOC 在计算机科学中&#xff0c;二叉树是一种非常重要的数据结构&#xff0c;它在算法设计和问题解决中扮演着关键角色。本文将探讨如何使用非递归方法遍历一个给定的二叉树&#xff0c;并在不修改树结构的前提下&#xff0c;输出每个节点的关键字。这个过程将在O(n)的时间复杂…

Xmind安装在指定目录

场景&#xff1a; Xmind安装默认是安装C盘。 问题描述 一般用户都习惯将软件安装在其他盘&#xff0c;但是Xmind不支持安装的时候指定磁盘或目录。 解决方案&#xff1a; 1、在D盘创建一个文件夹&#xff0c;用于安装Xmind&#xff0c;比如创建一个D:\Program Files (x86)…

车载通信与DDS标准解读系列(4):DDSI-RTPS协议

▎什么是RTPS 在DDS协议中&#xff0c;主要描述了实现数据分发服务的DCPS模型和QoS策略&#xff0c;但是我们还不清楚数据怎样在网络中传输&#xff0c;想要了解这些内容&#xff0c;就需要请出咱们的数据搬运工——RTPS。 RTPS全称是Real-Time Publish-Subscribe Protocol&a…

JavaScript高级 —— 学习(一)

目录 一、作用域 &#xff08;一&#xff09;局部作用域 1.函数作用域 2.块作用域 &#xff08;二&#xff09;全局作用域 二、垃圾回收机制 GC &#xff08;一&#xff09;生命周期 1.内存分配 2.内存使用 3.内存回收 4.特殊情况——内存泄漏&#xff1a; 注意&…

了解与生成火焰图

目录 一、如何看懂火焰图 1、基本特征 2、基本分类 二、如何生成火焰图 1、捕获调用栈 2、折叠栈 3、转换为 svg 格式 4、展示 svg 一、如何看懂火焰图 1、基本特征 &#xff08;1&#xff09;纵轴&#xff1a;即每一列代表一个调用栈&#xff0c;每一个格子代表一个函…

【跨境商家福音】一款性价比高、好用的跨境选品工具

亚马逊、速卖通、Shopee 、Lazada、美客多、eBay、SHEIN、Temu、Tiktok、shopify等跨境电商平台&#xff0c;其用户消费喜好多样&#xff0c;涵盖服装、美妆、电子产品等多个品类。而店雷达作为一款基于大数据和人工智能技术的电商分析工具&#xff0c;为商家提供了强大的选品和…

2024年github之node排行榜top50

如果有帮助到您还请动动手帮忙点赞&#xff0c;关注&#xff0c;评论转发&#xff0c;感谢啦&#xff01;&#x1f495;&#x1f495;&#x1f495;&#x1f618;&#x1f618;&#x1f618; 本文由Butterfly一键发布工具发布 2024年github之node排行榜top50 语言star项目名称…

宁盾身份域管与Coremail邮件系统完成兼容互认证,持续深化信创布局

在信创国产化改造的背景下&#xff0c;企业邮箱的替换是许多党政、央国企、金融、制造企业面临的重要任务。为了满足企业对国产邮箱、OA等其他应用、终端实现统一身份认证&#xff0c;宁盾国产化身份域管与 Coremail XT 安全增强电子邮件系统 V5.0、V6.0 完成了产品兼容互认证&…

破解密码:掌握2024年的营销归因

Cracking the Code: Mastering Marketing Attribution in 2024 营销归因是识别哪些营销渠道和触及点有助于销售或转化的过程。随着消费者继续通过多个渠道与品牌互动&#xff0c;掌握营销归因对企业来说变得越来越重要。在这篇文章中&#xff0c;我们将探讨破解代码和有效衡量…

【MySQL】数据类型2

一、字符类型 char 和 varchar char&#xff08;N&#xff09;&#xff0c;N&#xff1a;容量多大&#xff0c;相当于C语言中char [N]的数组开多大。 varchar&#xff08;N&#xff09;&#xff0c;N:最大限制&#xff0c;相当于C的string一样&#xff0c;它会根据我们的字符多…

游戏运营分析:如何在新游戏上线初期实现精细化运营?

一、背景介绍 在当今的手游市场中&#xff0c;每一款新游戏的发布都如同踏上一段充满未知与挑战的探险之旅。游戏刚上线时&#xff0c;运营情况往往如同飘摇的小船&#xff0c;随时可能受到风浪的侵袭。此时&#xff0c;如何准确地找到问题所在&#xff0c;为游戏的健康运营和持…

【Python项目】AI动物识别工具

目录 背景 技术简介 系统简介 界面预览 背景 成像技术在全球科技发展中扮演了关键角色。在科学研究领域&#xff0c;拍摄所得的图像成为了一种不可或缺的研究工具。特别是在生态学与动物学研究中&#xff0c;鉴于地球的广阔地域和多样的气候条件&#xff0c;利用图像技术捕…

【Qt 学习笔记】输入框实现helloworld | QLineEdit的使用

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 输入框实现helloworld | QLineEdit的使用 文章编号&#xff1a;Qt 学习…

pytest接口自动化框架实际应用

一、自动化实现的目标 1、测试用例数据驱动。 2、测试数据和用例分离。 3、每个测试用例拥有专属的测试数据有明确的测试初始状 4、测试用例的执行不依赖其他测试用例执行所产生的数据 5、建立体系化测试数据&#xff0c;进行数据依赖管理&#xff0c;覆盖全部测试分层策略要求…

PCB的电气/物理特性检查项目需思考的问题

在PCB设计、制造和装配过程中&#xff0c;为确保产品性能和质量&#xff0c;电子工程师必须进行电气特性和物理特性检查&#xff0c;然而对很多新人来说如何高效进行检查是个难题&#xff0c;所以下面将分别探讨这些检查时需要考虑的问题。 1、PCB电气特性检查项目①导线参数分…

CLIP 图文检索,相似度计算

CLIP 是OpenAI提出的神经网络&#xff0c;它可以从自然语言监督中有效地学习视觉概念。 CLIP 可以应用于任何视觉分类基准&#xff0c;只需提供要识别的视觉类别的名称&#xff0c;类似于 GPT-2 和 GPT-3 的“零样本”功能。 相关paper 用法可以参考github 这里举几个使用CLI…

CTK插件框架学习-信号槽(05)

CTK插件框架学习-事件监听(04)https://mp.csdn.net/mp_blog/creation/editor/137171155 一、主要流程 信号发送者告诉服务要发送的信号信号发送者发送信号信号接收者告诉服务当触发某个订阅的主题时通知槽函数信号接收者处理槽函数信号槽参数类型必须为&#xff08;const ctk…

如何使用Kimi API开发应用

如何使用Kimi API开发应用 使用Kimi时&#xff0c;需要安装一个OpenAI的客户端&#xff0c;注意不是langchain-openai&#xff0c;是openai。需要申请一个Kimi的A PI-KEY。 示例代码如下&#xff1a; from openai import OpenAIclient OpenAI(api_key"my-api-key&quo…