命名约定~

1.变量的命名约定

JavaScript 变量名称是区分大小写的,大写和小写字母是不同的。比如:

let DogName = 'Scooby-Doo';
let dogName = 'Droopy';
let DOGNAME = 'Odie';
console.log(DogName);   // "Scooby-Doo"
console.log(dogName);   // "Droopy"
console.log(DOGNAME);   // "Odie"

但是,最推荐的声明 JavaScript 变量的方法是使用驼峰式变量名。我们可以对JavaScript 所有类型的变量使用驼峰式命名约定,这样就不会相同命名的变量。

// bad
let dogname = 'Droopy'; 
// bad
let dog_name = 'Droopy'; 
// bad
let DOGNAME = 'Droopy'; 
// bad
let DOG_NAME = 'Droopy'; 
// good
let dogName = 'Droopy';

变量的名称应该是不言自明的,并描述了储存的值。例如,如果需要一个变量来储存狗的名字,应该使用 dogName 而不是 Name,因为 dogNam 更有意义:

// bad
let d = 'Droopy';
// bad
let name = 'Droopy';
// good
let dogName = 'Droopy';

2.布尔值的命名约定

当定义布尔类型的变量时,应该使用is或者has作为变量的前缀。例如,如果需要一个变量来检查狗是否有主人,应该使用 hasOwner 作为变量名:

// bad
let bark = false;
// good
let isBark = false;// bad
let ideal = true;
// good
let areIdeal = true;// bad
let owner = true;
// good
let hasOwner = true;

3. 函数的命名约定

JavaScript 中函数的名称也是区分大小写的。因为在声明函数时,推荐使用驼峰式方法来命名函数。

除此之外,推荐使用描述性名词和动词来作为前缀。例如,如果声明一个函数来获取名称,则函数名字应该是 getName:

// bad
function name(dogName, ownerName) { return '${dogName} ${ownerName}';
}// good
function getName(dogName, ownerName) { return '${dogName} ${ownerName}';
}

4. 常量的命名约定

JavaScript 中的常量和变量是一样的,都区分大小写,在定义常量时,推荐使用大写,因为它们是不变的变量。

const LEG = 4;
const TAIL = 1;
const MOVABLE = LEG + TAIL;

如果变量声明名称中包含多个单词,就应该使用 UPPER_SNAKE_CASE。

const DAYS_UNTIL_TOMORROW = 1;

5. 类的命名约定

JavaScript 中类的命名约定规则与函数非常相似,推荐使用描述性的名称来描述类的功能。

函数名和类名之间的主要区别在于类名要使用大写开头

class DogCartoon { constructor(dogName, ownerName) { this.dogName = dogName; this.ownerName = ownerName; }
}const cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

6. 组件的命名规则

JavaScript 组件广泛应用于React、Vue等前端框架中。组件的命名建议与类保持一致,使用开头大写的驼峰式命名法:

// bad
function dogCartoon(roles) { return ( <div> <span> Dog Name: { roles.dogName } </span> <span> Owner Name: { roles.ownerName } </span> </div> );
} // good
function DogCartoon(roles) { return ( <div> <span> Dog Name: { roles.dogName } </span> <span> Owner Name: { roles.ownerName } </span> </div> );
}

由于组件的命名开头字母是大写,因此在使用时,就很容易和HTML、属性值等区分开来:

<div> <DogCartoon roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} />
</div>

7. 方法的命名约定

这里说的方法指的是类中方法,在 JavaScript 中,类的方法和函数的结构是非常类似的,因此,命名约定规则也是一样的。

推荐需要使用驼峰式方法来声明 JavaScript 方法,并使用动词作为前缀,使方法名称更有意义:

class DogCartoon {constructor(dogName, ownerName) { this.dogName = dogName; this.ownerName = ownerName; }getName() { return '${this.dogName} ${this.ownerName}'; }
}const cartoon= new DogCartoon('Scooby-Doo', 'Shaggy');console.log(cartoon.getName());   // "Scooby-Doo Shaggy"

8. 私有函数的命名约定

下划线 (_) 在 MySQL 和 PHP 等语言中广泛用于定义变量、函数和方法。但在 JavaScript 中,下划线用于表示私有变量或函数。

例如,有一个私有函数名 toonName,则可以通过添加下划线作为前缀 (_toonName) 来将其表示为私有函数。

class DogCartoon { constructor(dogName, ownerName) { this.dogName = dogName; this.ownerName = ownerName; this.name = _toonName(dogName, ownerName); } _toonName(dogName, ownerName) { return `${dogName} ${ownerName}`; } 
}const cartoon = new DodCartoon('Scooby-Doo', 'Shaggy'); // good
const name = cartoon.name;
console.log(name);   // "Scooby-Doo Shaggy" // bad
name =cartoon._toonName(cartoon.dogName, cartoon.ownerName);
console.log(name);   // "Scooby-Doo Shaggy"

9. 全局变量的命名约定

对于 JavaScript 全局变量,没有特定的命名标准。建议对可变全局变量使用驼峰式大小写的方式,对不可变全局对象使用大写。

10. 文件名的命名约定

大多数 Web 服务器(Apache、Unix)在处理文件时都区分大小写。例如,flower.jpg 和 Flower.jpg 是不一样的。

但是,如果从不区分大小写的服务器切换到区分大小写的服务器,即使是一个小错误也可能导致网站崩溃。

因此,尽管它们是支持区分大小写的,建议在所有服务器中还是使用小写来命名文件。

本文介绍了 10 种 JavaScript 命名约定,遵循这些最佳实践,可以提高代码的可读性并且代码更容易理解。如果觉得有用,就点个赞和在看吧!

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

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

相关文章

Hadoop教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下&#xff0c;开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop实现了一个分布式文件系统&#xff08; Distributed File System&#xff09;&#xff0…

训练营day6-7:数组篇

目录 1、LeetCode &#xff1a;242.有效的字母异位词 2、349. 两个数组的交集 3、202. 快乐数 4、1. 两数之和 5、454. 四数相加 II 6、383. 赎金信 7、15. 三数之和 8、18. 四数之和 1、LeetCode &#xff1a;242.有效的字母异位词 还是比较简单的&#xff0c;直接统计…

SystemVerilog 第2章:数据类型

在 Verilog中,初学者经常分不清reg和wire两者的区别。应该使用它们中哪一个来驱动端口?连接不同模块时又该如何做? Systemverilog对经典的reg数据类型进行了改进,使得它除了作为一个变量以外,还可以被连续赋值、门单元和模块所驱动。为了与寄存器类型相区别,这种改进的数据类…

Python封装:提升代码质量的秘诀

在面向对象编程&#xff08;OOP&#xff09;中&#xff0c;封装是一种将数据和操作数据的方法绑定在一起的机制&#xff0c;以隐藏内部实现的细节&#xff0c;使代码更简洁、更安全。在Python中&#xff0c;我们通过定义类来实现封装。在本文中&#xff0c;我们将介绍Python封装…

常微分方程建模R包ecode(一)——构建常微分方程系统

常微分方程在诸多研究领域中有着广泛应用&#xff0c;本文希望向大家介绍笔者于近期开发的R包ecode&#xff0c;该包采用简洁易懂的语法帮助大家在R环境中构建常微分方程&#xff0c;并便利地调用R图形接口&#xff0c;研究常微分方程系统的相速矢量场、平衡点、稳定点等解析性…

AI面试官:LINQ和Lambda表达式(三)

AI面试官&#xff1a;LINQ和Lambda表达式&#xff08;三&#xff09; 当面试官面对C#中关于LINQ和Lambda表达式的面试题时&#xff0c;通常会涉及这两个主题的基本概念、用法、实际应用以及与其他相关技术的对比等。以下是一些可能的面试题目&#xff0c;附带简要解答和相关案…

视频内存过大如何压缩变小?这个压缩方法了解一下

在日常生活中&#xff0c;不管是日常随手拍的视频还是在工作中遇到的视频文件&#xff0c;在编辑处理的时候&#xff0c;如果视频的内存过大&#xff0c;不仅会占用很大的内存&#xff0c;在传送的时候也会花费很长时间&#xff0c;这时候将视频给压缩一下就可以很好的解决这一…

Feign远程调用如何携带form url

这是一个需要携带参数在form url上的请求&#xff0c;正常调用方式是这样的 响应&#xff1a; 在Feign中&#xff0c;应该怎么调用呢?? 定义OpenFeignClient接口 FeignClient(value "client-service", url "http://127.0.0.1/api") public interface…

代理模式来啦

一、代理模式 代理模式是我们工作中比较常用的设计模式之一了&#xff0c;主要用于隐藏具体实现类的实现细节或者对实现类的行为进行增强&#xff0c;即对具体实现的前后做些特殊逻辑。 既然说是代理&#xff0c;那就要对客户端隐藏真实实现&#xff0c;由代理来负责客户端的所…

Unity游戏源码分享-3d机器人推箱子游戏

Unity游戏源码分享-3d机器人推箱子游戏 一个非常意思的3D游戏 工程地址&#xff1a;https://download.csdn.net/download/Highning0007/88098014

STM32CUBEMX配置 定时器中断 和 上升沿中断(实现检测1s以内的脉冲个数)

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子&#xff0c;使用STM32CUBEMX做了很多驱动&#x…

Redis简介、常用命令

目录 一、​​关系数据库​​与非关系型数据库概述 1.1 关系型数据库 1.2 非关系型数据库 二、关系数据库与非关系型数据库区别 2.1 数据存储方式不同 2.2 扩展方式不同 2.3 对事务性的支持不同 三、非关系型数据库产生背景 四、Redis简介 4.1 Redis的单线程模式 4.…

评论管理功能

后端 bp.get("/comment/list") def comment_list():comments CommentModel.query.order_by(CommentModel.create_time.desc()).all()comment_list []for comment in comments:comment_dict comment.to_dict()comment_list.append(comment_dict)return restful.ok…

网络超时导致namenode被kill的定位

交换机升级导致部分网络通信超时, 集群的namenode主从切换后,主namenode进程被杀死。 网络问题导致namenode与zk间的连接超时触发了hadoop集群的防脑裂机制而主动kill掉了超时的namenode进程。 日志分析发现zk和namenode之间的网络连接超时: 超时触发了namenode切换,并将超时…

linux 无桌面运行 GUI 程序(electron、arm)

操作 开发板事先连接好屏幕&#xff0c;并用串口连接开发板 apt install xorg dpkg-reconfigure x11-common # 允许任何用户连接到X11服务器 startx # 会在屏幕启动一个命令行终端将键盘连接到开发板&#xff0c;并在开发板上执行命令运行 GUI 应用即可 ./your_program如果是…

ES6基础知识七:你是怎么理解ES6中 Generator的?使用场景?

一、介绍 Generator 函数是 ES6 提供的一种异步编程解决方案&#xff0c;语法行为与传统函数完全不同 回顾下上文提到的解决异步的手段&#xff1a; 回调函数promise 那么&#xff0c;上文我们提到promsie已经是一种比较流行的解决异步方案&#xff0c;那么为什么还出现Gen…

Flutter中如何取消任务

前言 在开发过程中&#xff0c;取消需求是很常见的&#xff0c;但很容易被忽略。然而&#xff0c;取消需求的好处也很大。例如&#xff0c;在页面中会发送很多请求。如果页面被切走并处于不可见状态&#xff0c;就需要取消未完成的请求任务。如果未及时取消&#xff0c;则可能…

linux系统more基本命令python源码分享

此贴python源码是linux系统more基本命令的实现。 实现linux中more的基本功能&#xff0c;当more后加一个文件名参数时候&#xff0c;分屏显示按空格换页&#xff0c;按回车换行,在左下角显示百分比&#xff1b; 以处理管道参数的输入&#xff0c;处理选项num:从指定行开始显示&…

crawlab爬虫python篇(保姆级图文教程)

文章目录 前言一、创建项目二、创建爬虫1.新建项目2.新建爬虫3. 上传文件总结资料解决方案记录前言 一个python刚到门槛水平的程序员是如何使用crawlab爬取网站,在这里做个图文教程记录下。 提示:这里做一个简单的网站爬取完整示例图文教程 一、创建项目 首先,我们将创建一…

Android平台GB28181设备接入模块之按需编码和双码流编码

技术背景 我们在做执法记录仪或指挥系统的时候&#xff0c;会遇到这样的情况&#xff0c;大多场景下&#xff0c;我们是不需要把设备端的数据&#xff0c;实时传给国标平台端的&#xff0c;默认只需要本地录像留底&#xff0c;如果指挥中心需要查看前端设备实时数据的时候&…