javascript的一些命名约定

2021-07-23 00:27:28

这篇小文章主要是通过一些例子来介绍一些Javascript中一些关于命名变量，函数，类或者是组件的通用约定。虽然这些规则并不是强制性的，但是呢，他们却被一些JS社区所广泛采用，所以，了解他们还是很有必要的。

Javascript命名约定：变量

由于Javascript是大小写敏感的，因此，如果有几个变量，其仅仅是大小写不一样，这些变量在Javascript中会被理解为是不同的变量，如下所示：

var name = 'Robin Wieruch';
var Name = 'Dennis Wieruch';
var NAME = 'Thomas Wieruch';
console.log(name);
// "Robin Wieruch"
console.log(Name);
// "Dennis Wieruch"
console.log(NAME);
// "Thomas Wieruch"

一个好的javascript变量名是应该能描述出他这个变量所代表的含义，因此，一般情况下，如果变量名足够清晰的话，给其增加一个注释可能没太多必要。

// bad
var value = 'Robin';
// bad
var val = 'Robin';
// good
var firstName = 'Robin';

大部分情况，你会发现javascript是会以驼峰的形式命名，并且其首字母是小写的

// bad
var firstname = 'Robin';
// bad
var first_name = 'Robin';
// bad
var FIRSTNAME = 'Robin';
// bad
var FIRST_NAME = 'Robin';
// good
var firstName = 'Robin';

不过javascript的常量，私有变量，类或者是组件的命名规则与其略有不同，我们会在下面分别介绍他们。

然而，在通常情况下，javascript的变量，不管是字符串，布尔类型，还是数字类型，对象，数组，函数，他们都是遵循驼峰的命名方式的。

现在简要描述一下常见的几种大小写命名的不同

camelCase （驼峰命名法，单词相连，第一个单词首字母小写，其他单词首字母大写）被用在js中

PascalCase（帕斯卡命名法，单词相连，单词首字母大写）被用于js中

snake_case（蛇形命名法，单词间以下划线分隔）

kebab-case（烤串命名法，单词间以中横线分隔）

Javascript命名约定：布尔值

布尔值的变量通常来说，一般以is，are，has等表示判断意义的单词作为其前缀，以便让开发者更好的和其他类型的变量区分开来，来看例子：

// bad
var visible = true;
// good
var isVisible = true;
// bad
var equal = false;
// good
var areEqual = false;
// bad
var encryption = true;
// good
var hasEncryption = true;

当然啦，这种命名方式也算是一种软规则，并不是强制要求的。

javascript命名约定：函数

函数一般也是以驼峰的方式来命名，不过，最好是在函数前面加一些特定的动词前缀，来明确的告诉开发者此函数的作用。

// bad
function name(firstName, lastName) {
    return `${firstName} ${lastName}`;
}
// good
function getName(firstName, lastName) {
    return `${firstName} ${lastName}`;
}

当然啦，函数名前面的动词前缀一般来说是没什么限制的（比如get，post，fetch，push，complete，calculate，compute等这些都可以）。这其实也是javascript变量的另一个软规则，主要就是用来让其名称变得更加的具有描述性，更容易理解。

javascript命名约定：类

与其它的数据结构相比，在javascript中的类一般是通过帕斯卡命名法（PascalCase）来定义的

class SoftwareDeveloper {
    constructor(firstName, lastName) {
    this.firstName = firstName;
        this.lastName = lastName;
    }
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');

由于在类定义的时候就使用了帕斯卡命名法，因此每次通过构造器来创建一个类的新的实例的时候，其构建所用到的那个类的名称都是符合帕斯卡命名。

javascript命名约定：组件

组件并不是特别的常见，但是他一般情况下经常会用在一些像react这样的前端框架中，由于组件是可以实例化的，并且一般都是出现在DOM中，跟类有一点像。因此其也是采用帕斯卡命名法（PascalCase）的方式。

// bad
function userProfile(user) {
    return (
        <div>
            <span>First Name: {user.firstName}</span>
            <span>Last Name: {user.lastName}</span>
        </div>
    );
}
// good
function UserProfile(user) {
    return (
        <div>
            <span>First Name: {user.firstName}</span>
            <span>Last Name: {user.lastName}</span>
        </div>
    );
}

当组件被使用的时候，为了和普通的html元素做区分，所以一般来说其使用的时候也需要首字母大写。

<div>
    <UserProfile
        user={{ firstName: 'Robin', lastName: 'Wieruch' }}
    />
</div>

javascript命名约定：方法

和javascript的函数相同，类中的方法的命名也是驼峰式的。

class SoftwareDeveloper {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }
    getName() {
        return `${this.firstName} ${this.lastName}`;
    }
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');
console.log(me.getName());
// "Robin Wieruch"

类中方法的命名规则和函数的一样，也是以动词作为前缀，使其具有更好的描述性。

javascript命名约定：私有变量/私有函数/私有方法

一般情况下，你在函数，变量或者是方法定义中，很少能看到以下划线作为前缀（_）开头的命名方式，如果有的话，一般来说他们都是私有的。虽然他不是javascript的一个强制的规则，但是一般来说，这么做具有更好的可读性，一看到它大概就能明白它的使用方式。

比如说，类的私有方法一般情况下只能在其类的内部使用，通过这样的命名方式让人很容易的就避免了在实例中使用这个方法。

class SoftwareDeveloper {
    constructor(firstName, lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.name = _getName(firstName, lastName);
    }
    _getName(firstName, lastName) {
        return `${firstName} ${lastName}`;
    }
}
var me = new SoftwareDeveloper('Robin', 'Wieruch');

私有方法/函数/变量也可以出现在javascript文件中，如果这么做，那这意味着该变量不应该在文件的外部使用，而仅仅应该在这个文件内处理一些相关的逻辑。

javascript命名约定：常量

javascript常量非常重要的一点是，其变量的值是不可变的，因此，为了和其他变量做区分，其变量名是要全大写的形式去书写

var SECONDS = 60;
var MINUTES = 60;
var HOURS = 24;
var DAY = SECONDS * MINUTES * HOURS;

如果常量中的单词多于一个的话，那么单词间要用下划线分隔开。

var DAYS_UNTIL_TOMORROW = 1;

javascript命名约定：全局变量

如果所有的上下文环境中，都能访问到这个变量，那么此变量一般就是全局定义的。通常情况下全局变量都定义在javascript文件中，但是如是是比较小的项目的话，此文件可能就是他的整个的项目。一般来说，全局变量的定义没有什么特殊的规定：

javascript的全局变量一般都定义在项目/文件的最顶部

如果其全局变量是可变的，则采用驼峰的形式书写。

如果其全局变量是不可变的，则采用大写的形式。

javascript命名约定：下划线

那么JavaScript变量命名中的下划线和破折号呢？由于在JS中主要考虑驼峰和帕斯卡命名法（PascalCase），因此，下划线仅很少使用，一般仅用于私有变量或常量。偶尔你也会看到下划线在其从第三方（例如数据库或API）获取信息的时候，有时会出现下划线。另一种可能会出现下划线的情况是其函数入参并未被使用到的情况，如果您尚未看到这些参数，就不用担心这些，忽略掉就好。

javascript命名约定：破折号

JavaScript变量中的破折号也不是特别好，这么做只会使一些事情处理起来变得更加困难。比如说在对象中使用它们一样：

// bad
var person = {
    'first-name': 'Robin',
    'last-name': 'Wieruch',
};
var firstName = person['first-name'];
// good
var person = {
    firstName: 'Robin',
    lastName: 'Wieruch',
};
var firstName = person.firstName;

甚至不可能直接对变量声明使用破折号

因此最好不要使用破折号。

翻译自：https://www.robinwieruch.de/javascript-naming-conventions

转载自：http://www.lht.ren/article/24/

码农公寓