Menu Close

JavaScript 函数、变量、和常量的命名规范

1. 命名规范

ECMAScript 规范中标识符采用驼峰大小写格式,驼峰命名法由小(大)写字母开始,后续每个单词首字母都大写。根据首字母是否大写,分为两种方式:

  1. Pascal Case 大驼峰式命名法:首字母大写。eg:StudentInfo、UserInfo、ProductInfo
  2. Camel Case 小驼峰式命名法:首字母小写。eg:studentInfo、userInfo、productInfo

标识符,则包括变量、函数名、类名、属性名和函数或类的参数,每个命名方法又略有不同,下面详细解释一下:

2. 函数的命名

函数是执行某些操作的行为。因此,它们的名称通常是动词。名称应简洁、尽可能准确,并描述函数的作用,以便阅读代码的人能大致了解该函数的功能。

一个广泛采用的做法是用动词前缀来命名函数,这些前缀模糊地描述了动作。团队内部应就这些前缀的含义达成一致。

命名方法:小驼峰式命名法。

命名规范:前缀应当为动词。

命名建议:可使用常见动词约定

动词 含义 返回值
can 判断是否可执行某个动作(权限) 函数返回一个布尔值。true:可执行;false:不可执行
has 判断是否含有某个值 函数返回一个布尔值。true:含有此值;false:不含有此值
is 判断是否为某个值 函数返回一个布尔值。true:为某个值;false:不为某个值
get 获取某个值 函数返回一个非布尔值
set 设置某个值 无返回值、返回是否设置成功或者返回链式对象
load 加载某些数据 无返回值或者返回是否加载完成的结果

以下是一些常见前缀及其含义:

  • “get…” – 返回一个值,

  • “calc…” – 计算某些内容,

  • “create…” – 创建某些内容,

  • “check…” – 检查某些内容并返回布尔值,等等。

这类名称的示例:

showMessage(..)     // shows a message
getAge(..)          // returns the age (gets it somehow)
calcSum(..)         // calculates a sum and returns the result
createForm(..)      // creates a form (and usually returns it)
checkPermission(..) // checks a permission, returns true/false

有了这些前缀,一眼就能从函数名中了解它的作用以及返回值的类型。

函数命名注意事项

一个函数 —— 一个动作

一个函数应当只做其名称所暗示的事情,不多也不少。

两个独立的动作通常应该写成两个函数,即使它们经常一起被调用(这种情况下我们可以写一个第三个函数来调用这两个)。

以下是一些违反该原则的例子:

  • getAge —— 如果它弹出一个显示年龄的警告框,那就不合适(它应该只是获取年龄)。

  • createForm —— 如果它修改了文档并将表单添加到其中,那就不妥(它应该只是创建并返回表单)。

  • checkPermission —— 如果它显示了“允许访问/拒绝访问”的消息,那就不好(它应该只执行检查并返回结果)。

这些例子基于前缀的一般含义。你和你的团队可以就其他含义达成一致,但通常不会有太大差别。无论如何,你应当清楚了解每个前缀的意义,知道带有该前缀的函数应该做什么、不能做什么。所有使用相同前缀的函数都应遵循同一规则,并在团队中达成共识。

超短的函数名称

那些非常常用的函数有时会使用超短的名称。

例如,jQuery 框架定义了一个函数,名称是 $。Lodash 库的核心函数名为 _。

这些是例外。通常情况下,函数名称应简洁且具有描述性。

函数 == 注释

函数应该简短并且只做一件事。如果这件事很大,也许值得将函数拆分成几个更小的函数。有时候遵循这个规则可能并不容易,但它绝对是有益的。

一个单独的函数不仅更容易测试和调试——它的存在本身就是一个很好的注释!

例如,比较下面的两个 showPrimes(n) 函数。每个函数都会输出小于等于 n 的质数

下面第一段CODE使用了标签:

function showPrimes(n) {
  nextPrime: for (let i = 2; i < n; i++) {

    for (let j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

    alert( i ); // a prime
  }
}

第二段COD使用了一个额外的函数 isPrime(n) 来测试是否为质数

function showPrimes(n) {

  for (let i = 2; i < n; i++) {
    if (!isPrime(i)) continue;

    alert(i);  // a prime
  }
}

function isPrime(n) {
  for (let i = 2; i < n; i++) {
    if ( n % i == 0) return false;
  }
  return true;
}

第二段code更容易理解,不是吗?我们看到的是一个动作的名称(isPrime),而不是一段代码。有时人们将这样的代码称为自描述(self-describing)代码。

因此,即使我们不打算重复使用它们,函数仍然可以被创建。它们帮助结构化代码并提高可读性。

3. 变量的命名

命名方法:小驼峰式命名法。

命名规范:前缀应当是名词。(函数的名字前缀为动词,以此区分变量和函数)

命名建议:尽量在变量名字中体现所属类型,如:length、count等表示数字类型;而包含name、title表示为字符串类型。

// 好的命名方式
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不好的命名方式
let setCount = 10;
let getTitle = 'LoginTable';

4. 常量

命名方法:名称全部大写。

命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词。

const MAX_COUNT = 10;
const URL = 'https://2743.com';

 

除教程外,本网站大部分文章来自互联网,如果有内容冒犯到你,请联系我们删除!
Posted in JavaScript 基础

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Leave the field below empty!