JavaScript命名约定的最佳实践指南

目录
  • 前言
  • 1. 变量的命名约定
  • 2. 布尔值的命名约定
  • 3. 函数的命名约定
  • 4. 常量的命名约定
  • 5. 类的命名约定
  • 6. 组件的命名规则
  • 7. 方法的命名约定
  • 8. 私有函数的命名约定
  • 9. 全局变量的命名约定
  • 10. 文件名的命名约定
  • 附:正确案例
  • 总结

前言

在开发过程中,遵循标准的命名约定可以提高代码的可读性并且代码更容易理解。下面就来看看 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 所有类型的变量使用驼峰式命名约定,这样就不会相同命名的变量。

// bad
let dogname = 'Droopy';
// bad
let dog_name = 'Droopy';
// bad
let DOGNAME = 'Droopy';
// bad
let DOG_NAME = 'Droopy';
// good
let dogName = 'Droopy';

变量的名称应该是不言自明的,并描述了储存的值。例如,如果需要一个变量来储存狗的名字,应该使用 dogName 而不是 Name,因为 dogNam 更有意义:

// bad
let d = 'Droopy';
// bad
let name = 'Droopy';
// good
let dogName = 'Droopy';

2. 布尔值的命名约定

当定义布尔类型的变量时,应该使用is或者has作为变量的前缀。例如,如果需要一个变量来检查狗是否有主任,应该使用 hasOwner 来最为变量名:

// bad
let bark = false;
// good
let isBark = false;

// bad
let ideal = true;
// good
let areIdeal = true;

// bad
let owner = true;
// good
let hasOwner = true;

3. 函数的命名约定

JavaScript 中函数的名称也是区分大小写的。因为在声明函数时,推荐使用驼峰式方法来命名函数。 ​

除此之外,推荐使用描述性名词和动词来作为前缀。例如,如果声明一个函数来获取名称,则函数名字应该是 getName:

// bad
function name(dogName, ownerName) {
  return '${dogName} ${ownerName}';
}

// good
function 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等前端框架中。组件的命名建议与类保持一致,使用开头大写的驼峰式命名法:

// bad
function dogCartoon(roles) {
  return (
    <div>
      <span> Dog Name: { roles.dogName } </span>
      <span> Owner Name: { roles.ownerName } </span>
    </div>
  );
} 

// good
function 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'); 

// good
const name = cartoon.name;
console.log(name);   // "Scooby-Doo Shaggy" 

// bad
name =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命名约定的文章就介绍到这了,更多相关JavaScript命名约定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JS 学习笔记 防止发生命名冲突

    为了防止发生命名冲突,可以建立自己的代码库. 就想 Js代码 复制代码 代码如下: ziggy_js=function(){} ziggy_js.ui=function(){} ziggy_js.ui.alerts=function(){} ziggy_js.ui.alerts.showErrorAlert=function(){ alert("An error occurred"); } ziggy_js.ui.alerts.showErrorAlert(); //以在其中定义类 z

  • JavaScript 命名空间 使用介绍

    使用过Java.C#的同学对命名空间非常的熟悉,在复杂的系统中会有N多的函数.对象,语言提供的.架构预定义的,这么多的函数和对象,由于编程规范要求起有实际意义的名字,难免会重名发生错误调用,而有了命名空间烦恼就没有了,不但可以分类组织函数与对象,还可以形成隔离,解决重名问题. 使用JavaScript就没有这么舒服了,Javascript只有函数作用域,什么块儿啊.神马文件啊统统都认为是一个命名空间的,有时候因为一些重名问题导致的错误让人莫名其妙,难以调试解决. 一个简单的例子 复制代码 代码如

  • js命名空间写法示例

    本文实例分析了js命名空间写法.分享给大家供大家参考,具体如下: 很早知道这种写法,由于基础面向对象不够扎实一直在回避,但是面对整站这种方法还是有必要会 html部分: <div id="div1">111</div> <div id="div2">现实</div> <div id="div3">层</div> <div class="tab">

  • JS模块与命名空间的介绍

    起因将代码组织到类中的一个重要原因是让代码更加"模块化",可以在很多不同的场景中实现代码的重用.但类不是唯一的模块化代码的方式. 一般来讲,模块是一个独立的JS文件.模块文件可以包含一个类定义.一组相关类.一个实用函数库或者一些待执行的代码. 模块化的目标是支持大规模的程序开发,处理分散源中代码的组装,并且能让代码正确运行,哪怕包含了不需要的模块代码,也可以正确执行代码. 理想状态下,所有模块都不应当定义超过一个全局标识. 模块函数通过把模块定义在某个函数的内部来实现,定义的变量和函数

  • javascript 命名规则 变量命名规则

    JavaScript变量匈牙利命名法 匈牙利命名法语法: 变量名=类型+对象描述 类型指变量的类型 对象描述指对象名字全称或名字的一部分,要求有明确含义,命名要容易记忆容易理解. 提示: 虽然JavaScript变量表面上没有类型,但是JavaScript内部还是会为变量赋予相应的类型. 提示: 匈牙利命名法是一位微软程序员发明的,多数的C,C++程序都使用此命名法. JavaScript变量匈牙利命名类型 JavaScript变量起名类型 变量命名前缀 Array 数组 a Float 浮点

  • 超全面的javascript中变量命名规则

    前言 变量的命名相对而言没有太多的技术含量,今天整理有关于变量命名相关的规则,主要是想告诉大家,虽然命名没有技术含量,但对于个人编码,或者说一个团队的再次开发及阅读是相当有用的.良好的书写规范可以让你的JavaScript代码更上一个台阶,也更有利于团队的再次开发和阅读代码. 全名原则 变量名区分大小写,允许包含字母.数字.美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号 变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型 尽量避免使用没有意义的命

  • JavaScript 变量命名规则

    JScript 是一种区分大小写的语言. 第一个字符必须是一个 ASCII 字母(大小写均可),或一个下划线(_).注意第一个字符不能是数字. 后续的字符必须是字母.数字或下划线. 变量名称一定不能是 保留字. 下面给出合法变量名称的一些示例: _pagecount Part9 Number_Items 下面给出无效变量名称的一些示例: 99Balloons // 不能以数字开头.Smith&Wesson // "与"符号(&)字符用于变量名称是无效的.

  • JavaScript命名约定的最佳实践指南

    目录 前言 1. 变量的命名约定 2. 布尔值的命名约定 3. 函数的命名约定 4. 常量的命名约定 5. 类的命名约定 6. 组件的命名规则 7. 方法的命名约定 8. 私有函数的命名约定 9. 全局变量的命名约定 10. 文件名的命名约定 附:正确案例 总结 前言 在开发过程中,遵循标准的命名约定可以提高代码的可读性并且代码更容易理解.下面就来看看 JavaScript 中命名约定的最佳实践. 1. 变量的命名约定 JavaScript 变量名称是区分大小写的,大写和小写字母是不同的.比如:

  • MySQL分区表的最佳实践指南

    前言: 分区是一种表的设计模式,通俗地讲表分区是将一大表,根据条件分割成若干个小表.但是对于应用程序来讲,分区的表和没有分区的表是一样的.换句话来讲,分区对于应用是透明的,只是数据库对于数据的重新整理.本篇文章给大家带来的内容是关于MySQL中分区表的介绍及使用场景,有需要的朋友可以参考一下,希望对你有所帮助. 1.分区的目的及分区类型 MySQL在创建表的时候可以通过使用PARTITION BY子句定义每个分区存放的数据.在执行查询的时候,优化器根据分区定义过滤那些没有我们需要的数据的分区,这

  • 了不起的11个JavaScript代码重构最佳实践小结

    模式和重构之间有着一种与生俱来的关系.从某种角度来看,设计模式的目的就是为许多重构行为提供目标. 1.提炼函数 在JavaScript开发中,我们大部分时间都在与函数打交道,所以我们希望这些函数有着良好的命名,函数体内包含的逻辑清晰明了.如果一个函数过长,不得不加上若干注释才能让这个函数显得易读一些,那这些函数就很有必要进行重构. 如果在函数中有一段代码可以被独立出来,那我们最好把这些代码放进另外一个独立的函数中.这是一种很常见的优化工作,这样做的好处主要有以下几点. 避免出现超大函数. 独立出

  • 微信小程序用户授权最佳实践指南

    前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息.你要做人脸识别,就要获取相机权限.你要做位置地图功能.就要获取用户的位置权限,你要将图片保存在用户的相册,需要获取相册权限等等 微信的 scope 流程: 大多数功能都是没有授权不可用的,一般我会检测是否开启权限,然后如果开启了就继续使用,没开启就给出提示继续请求授权..如果还是拒绝 就给出提示 然后让用户手动去设置页打开... #正常逻辑 但是这一套写下来可能就是这样的: wx.getSetting({

  • MySQL中存储时间的最佳实践指南

    目录 前言 不要使用字符串存储时间类型 MySQL 中的日期类型 DATETIME TIMESTAMEP TIMESTAMP 的性能问题 数值型时间戳(INT) DATETIME vs TIMESTAMP vs INT,怎么选? 总结 前言 平时开发中经常需要记录时间,比如用于记录某条记录的创建时间以及修改时间.在数据库中存储时间的方式有很多种,比如 MySQL 本身就提供了日期类型,比如 DATETIME,TIMESTAMEP 等,我们也可以直接存储时间戳为 INT 类型,也有人直接将时间存储

  • Spring Boot项目传参校验的最佳实践指南

    目录 场景还原 神注解加持 数据异常统一拦截 总结 场景还原 简单业务场景模拟: 假如你现在在做一个成绩录入系统,你愉快地用Spring Boot框架写了一个后台接口,用于接收前台浏览器传过来的 Student对象,并插入后台数据库. 我们将传入的 Student对象定义为: public class Student { private String name; // 姓名 private Integer score; // 考试分数(满分100分) private String mobile;

  • JavaScript 最佳实践:帮你提升代码质量

    每天学一些新东西可以让一个理性之人走上不凡之路.而作为开发人员,不断的学习新东西则是我们工作的一部分, 不论这些新东西是不是来源于积极的学习经验. 在本篇教程中,我将指出一些重要的 JavaScript 最佳实践,让你不必去用另外一种艰难的方式来了解它们.准备好去升级你的代码吧! 1. 避免对全局作用域的污染 声明变量是一件很有趣的事情.有时候即使你不想这样做,但也有可能会定义出全局变量.在如今的浏览器中,全局变量都被存储在 window 对象中.而因为有许多的东西都在那个里面,所以你有可能把一

  • JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)

    1.防止滥用JavaScript"不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行.首先要确认:为这个网页增加这种额外的行为是否确有必要?" 个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无法浏览和使用网站. 2.平稳退化平稳退化是指当用户禁用浏览器JavaScript或浏览器不支持Java

  • Javascript模块化编程(一)模块的写法最佳实践

    随着网站逐渐变成"互联网应用程序",嵌入网页的Javascript代码越来越庞大,越来越复杂.  网页越来越像桌面程序,需要一个团队分工协作.进度管理.单元测试等等......开发者不得不使用软件工程的方法,管理网页的业务逻辑. Javascript模块化编程,已经成为一个迫切的需求.理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块. 但是,Javascript不是一种模块化编程语言,它不支持"类"(class),更遑论"模块&

随机推荐