In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-06 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
本篇内容介绍了"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 变量的方法是使用驼峰式变量名。我们可以对JavaScript 所有类型的变量使用驼峰式命名约定,这样就不会相同命名的变量。
// 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 ( Dog Name: { roles.dogName } Owner Name: { roles.ownerName } );} // goodfunction DogCartoon(roles) { return ( Dog Name: { roles.dogName } Owner Name: { roles.ownerName } );}
由于组件的命名开头字母是大写,因此在使用时,就很容易和HTML、属性值等区分开来:
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'); // 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 < accounts.length; accountIndex++) { totalBalance += accounts[accountIndex].balance; } return totalBalance;}
虽然accountIndex与i可能存在争议,但函数的其余部分应该更清楚。getAccountsTotalBalance完全传达了函数的意图,前缀get表示它不会导致任何突变。为了读者的利益,代码作者投入更多的精力是值得的。6个月后,当他们维护代码时,你未来的自己会感激他们所做的额外工作。
如果担心行长度,可以考虑使用Prettier之类的工具来自动格式化代码。
"JavaScript命名如何约定"的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站,小编将为大家输出更多高质量的实用文章!
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.