这篇小文章主要是通过一些例子来介绍一些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;
甚至不可能直接对变量声明使用破折号
因此最好不要使用破折号。