JavaScript命名如何约定
JavaScript命名如何约定
本篇内容介绍了“JavaScript命名如何约定”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
1. 变量的命名约定
JavaScript 变量名称是区分大小写的,大写和小写字母是不同的。比如:
letDogName='Scooby-Doo';letdogName='Droopy';letDOGNAME='Odie';console.log(DogName);//"Scooby-Doo"console.log(dogName);//"Droopy"console.log(DOGNAME);//"Odie"
但是,最推荐的声明 JavaScript 变量的方法是使用驼峰式变量名。我们可以对JavaScript 所有类型的变量使用驼峰式命名约定,这样就不会相同命名的变量。
//badletdogname='Droopy';//badletdog_name='Droopy';//badletDOGNAME='Droopy';//badletDOG_NAME='Droopy';//goodletdogName='Droopy';
变量的名称应该是不言自明的,并描述了储存的值。例如,如果需要一个变量来储存狗的名字,应该使用 dogName 而不是 Name,因为 dogNam 更有意义:
//badletd='Droopy';//badletname='Droopy';//goodletdogName='Droopy';
2. 布尔值的命名约定
当定义布尔类型的变量时,应该使用is或者has作为变量的前缀。例如,如果需要一个变量来检查狗是否有主任,应该使用 hasOwner 来最为变量名:
//badletbark=false;//goodletisBark=false;//badletideal=true;//goodletareIdeal=true;//badletowner=true;//goodlethasOwner=true;
3. 函数的命名约定
JavaScript 中函数的名称也是区分大小写的。因为在声明函数时,推荐使用驼峰式方法来命名函数。
除此之外,推荐使用描述性名词和动词来作为前缀。例如,如果声明一个函数来获取名称,则函数名字应该是 getName:
//badfunctionname(dogName,ownerName){return'${dogName}${ownerName}';}//goodfunctiongetName(dogName,ownerName){return'${dogName}${ownerName}';}
4. 常量的命名约定
JavaScript 中的常量和变量是一样的,都区分大小写,在定义常量时,推荐使用大写,因为它们是不变的变量。
constLEG=4;constTAIL=1;constMOVABLE=LEG+TAIL;
如果变量声明名称中包含多个单词,就应该使用 UPPER_SNAKE_CASE。
constDAYS_UNTIL_TOMORROW=1;
5. 类的命名约定
JavaScript 中类的命名约定规则与函数非常相似,推荐使用描述性的名称来描述类的功能。
函数名和类名之间的主要区别在于类名要使用大写开头:
classDogCartoon{constructor(dogName,ownerName){this.dogName=dogName;this.ownerName=ownerName;}}constcartoon=newDogCartoon('Scooby-Doo','Shaggy');
6. 组件的命名规则
JavaScript 组件广泛应用于React、Vue等前端框架中。组件的命名建议与类保持一致,使用开头大写的驼峰式命名法:
//badfunctiondogCartoon(roles){return(<div><span>DogName:{roles.dogName}</span><span>OwnerName:{roles.ownerName}</span></div>);}//goodfunctionDogCartoon(roles){return(<div><span>DogName:{roles.dogName}</span><span>OwnerName:{roles.ownerName}</span></div>);}
由于组件的命名开头字母是大写,因此在使用时,就很容易和HTML、属性值等区分开来:
<div><DogCartoonroles={{dogName:'Scooby-Doo',ownerName:'Shaggy'}}/></div>
7. 方法的命名约定
这里说的方法指的是类中方法,在 JavaScript 中,类的方法和函数的结构是非常类似的,因此,命名约定规则也是一样的。
推荐需要使用驼峰式方法来声明 JavaScript 方法,并使用动词作为前缀,使方法名称更有意义:
classDogCartoon{constructor(dogName,ownerName){this.dogName=dogName;this.ownerName=ownerName;}getName(){return'${this.dogName}${this.ownerName}';}}constcartoon=newDogCartoon('Scooby-Doo','Shaggy');console.log(cartoon.getName());//"Scooby-DooShaggy"
8. 私有函数的命名约定
下划线 (_) 在 MySQL 和 PHP 等语言中广泛用于定义变量、函数和方法。但在 JavaScript 中,下划线用于表示私有变量或函数。
例如,有一个私有函数名 toonName,则可以通过添加下划线作为前缀 (_toonName) 来将其表示为私有函数。
classDogCartoon{constructor(dogName,ownerName){this.dogName=dogName;this.ownerName=ownerName;this.name=_toonName(dogName,ownerName);}_toonName(dogName,ownerName){return`${dogName}${ownerName}`;}}constcartoon=newDodCartoon('Scooby-Doo','Shaggy');//goodconstname=cartoon.name;console.log(name);//"Scooby-DooShaggy"//badname=cartoon._toonName(cartoon.dogName,cartoon.ownerName);console.log(name);//"Scooby-DooShaggy"
9. 全局变量的命名约定
对于 JavaScript 全局变量,没有特定的命名标准。建议对可变全局变量使用驼峰式大小写的方式,对不可变全局对象使用大写。
10. 文件名的命名约定
大多数 Web 服务器(Apache、Unix)在处理文件时都区分大小写。例如,flower.jpg 和 Flower.jpg 是不一样的。
但是,如果从不区分大小写的服务器切换到区分大小写的服务器,即使是一个小错误也可能导致网站崩溃。
因此,尽管它们是支持区分大小写的,建议在所有服务器中还是使用小写来命名文件。
附:正确案例
同时应用所有规则,我们得到如下函数:
functiongetAccountsTotalBalance(accounts){lettotalBalance=0;for(letaccountIndex=0;accountIndex<accounts.length;accountIndex++){totalBalance+=accounts[accountIndex].balance;}returntotalBalance;}
虽然accountIndex与i可能存在争议,但函数的其余部分应该更清楚。getAccountsTotalBalance完全传达了函数的意图,前缀get表示它不会导致任何突变。为了读者的利益,代码作者投入更多的精力是值得的。6个月后,当他们维护代码时,你未来的自己会感激他们所做的额外工作。
如果担心行长度,可以考虑使用Prettier之类的工具来自动格式化代码。
“JavaScript命名如何约定”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注恰卡编程网网站,小编将为大家输出更多高质量的实用文章!
推荐阅读
-
JavaScript闭包用多会造成内存泄露吗
-
javascript中文乱码如何解决
-
PHP学习第十五天——JavaScript入门DOM对象:二
-
Node.js基本内容和知识点
简单的说node.js就是运行在服务端的JavaScript,起初段定位是后端开发语言,由于技术的不够成熟,一般小型项目...
-
PHP与Node.js:一个史诗般开发者的分享
-
JavaScript 中 find() 和 filter() 方法的区别
JavaScript在ES6上有很多数组方法,每种方法都有独特的用途和好处。在开发应用程序时,大多使用数组方法来获...
-
js怎么跟php结合使用
-
简单说说Node.js和JavaScript
Node.js是一个开源和跨平台的JavaScript运行时环境,在浏览器之外运行V8JavaScript引擎(...
-
前端开发工程师专业技能简历范文
-
JavaScript怎么实现淘宝网图片的局部放大功能