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