运维开发网

Jast命名约定的实践指南

运维开发网 https://www.qedev.com 2022-06-12 23:03 出处:网络
js命名应遵循简洁、语义化的原则,下面这篇文章主要给大家介绍了关于JavaScript命名约定的最佳实践指南,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

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命名约定

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号