文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript命名如何约定

2023-06-29 13:26

关注

本篇内容介绍了“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 (     <div>       <span> Dog Name: { roles.dogName } </span>       <span> Owner Name: { roles.ownerName } </span>     </div>   );} // goodfunction DogCartoon(roles) {   return (     <div>       <span> Dog Name: { roles.dogName } </span>       <span> Owner Name: { roles.ownerName } </span>     </div>   );}

由于组件的命名开头字母是大写,因此在使用时,就很容易和HTML、属性值等区分开来:

<div>   <DogCartoon     roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }}   /></div>

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命名如何约定”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯