Jast命名约定的实践指南_数据库
js命名应遵循简洁、语义化的原则,下面这篇文章主要给大家介绍了关于javaScript命名约定的最佳实践指南,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
前言
在开发过程中,遵循标准命名约定可以提高代码的可读性,使其更容易理解。让我们看看JavaScript中命名约定的最佳实践。
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变量的方式是使用hump变量名。我们可以对所有类型的JavaScript变量使用hump命名约定,这样就不会有同名的变量。
// badlet dogname = 'Droopy'; // badlet dog_name = 'Droopy'; // badlet DOGNAME = 'Droopy'; // badlet DOG_NAME = 'Droopy'; // goodlet dogName = 'Droopy';
的变量名应该是不言自明的,并描述存储的值。例如,如果你需要一个变量来存储狗的名字,你应该使用dogName而不是Name,因为dogNam更有意义:
// badlet d = 'Droopy';// badlet name = 'Droopy';// goodlet dogName = 'Droopy';
2. 布尔值的命名约定
定义布尔类型的变量时,应该使用is或has作为变量的前缀。例如,如果您需要一个变量来检查狗是否有导演,您应该使用hasOwner作为最可变的名称:
// badlet bark = false;// goodlet isBark = false;// badlet ideal = true;// goodlet areIdeal = true;// badlet owner = true;// goodlet hasOwner = true;
3. 函数的命名约定
JavaScript中的函数名也是区分大小写的。因为在声明函数时,推荐使用驼峰法命名函数。
此外,建议使用描述性名词和动词作为前缀。例如,如果您声明一个函数来获取名称,那么函数名称应该是getName:
// badfunction name(dogName, ownerName) { return '${dogName} ${ownerName}';}// goodfunction 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等前端框架中。组件的命名建议与类一致,使用以大写开头的驼峰命名法:
// badfunction dogCartoon(roles) { return ( lt;divgt; lt;spangt; Dog Name: { roles.dogName } lt;/spangt; lt;spangt; Owner Name: { roles.ownerName } lt;/spangt; lt;/divgt; );} // goodfunction DogCartoon(roles) { return ( lt;divgt; lt;spangt; Dog Name: { roles.dogName } lt;/spangt; lt;spangt; Owner Name: { roles.ownerName } lt;/spangt; lt;/divgt; );}
由于组件名的首字母是大写的,所以很容易与HTML、属性值等区分开来。使用时:
lt;divgt; lt;DogCartoon roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} /gt;lt;/divgt;
7. 方法的命名约定
这里的方法指的是类中的方法。在JavaScript中,类的方法和函数的结构非常相似,因此命名约定规则是相同的。
建议使用hump方法声明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'); // goodconst name = cartoon.name;console.log(name); // "Scooby-Doo Shaggy" // badname =cartoon._toonName(cartoon.dogName, cartoon.ownerName);console.log(name); // "Scooby-Doo Shaggy"
9. 全局变量的命名约定
JavaScript全局变量没有特定的命名标准。建议对可变全局变量使用驼峰式大写,对不可变全局对象使用大写。
10. 文件名的命名约定
大多数Web服务器(Apache、Unix)在处理文件时是区分大小写的。例如,flower.jpg和Flower.jpg是不同的。
但是,如果从不区分大小写的服务器切换到区分大小写的服务器,即使是很小的错误也可能导致网站崩溃。
因此,尽管它们区分大小写,但建议在所有服务器中使用小写来命名文件。
附:正确案例
同时应用所有规则,我们得到以下函数:
function getAccountsTotalBalance(accounts) { let totalBalance = 0; for (let accountIndex = 0; accountIndex lt; accounts.length; accountIndex++) { totalBalance += accounts[accountIndex].balance; } return totalBalance;}
虽然accountIndex和我之间可能会有争议,但函数的其余部分应该更清楚。GetAccountsTotalBalance完全传达了函数的意图,前缀get表示不会引起任何变异。为了读者的利益,代码编写人员投入更多的精力是值得的。6个月后,当他们维护代码时,你未来的自己会感激他们所做的额外工作。
如果你担心行的长度,你可以考虑使用像Prettier这样的工具来自动格式化代码。
总结
这就是这篇关于JavaScript命名约定的文章。关于更多相关的JavaScript命名约定
相关文章
- Anaconda对英特尔发起版权诉讼,指控其未经许可使用AI工具! 近期,软件开发商Anaconda向科技巨头英特尔发起了一场版权风波。Anaconda指控英特尔在许可证到期后,仍继续使用其软件来开
- 网约车佣金高达50%?司机收入缩水,乘客钱去哪儿了
- 深圳旅游大变革!133家景区及文化场馆全面取消预约制!
- 厦门滴滴出行科技有限公司因违规经营网约车,被处以五千元的罚款。
- iQOO磁吸散热背夹终于开售了,冰晶白配色,简约又时尚!
- Win10系统怎么批量重命名文件?Win10系统批量重命名文件的方法
- PPT模板高级感极简约商务高端工作汇报毕业答辩教学课件演讲大气
- 《无畏契约》怎么发血量 《无畏契约》发血量方法
- 修改dedecms添加栏目时“文章命名规则”默认路径
- 《无畏契约》通行证第二幕值得买吗 通行证第二幕性价比分析