请先关注 [低调大师] 公众号 优秀的自媒体个人博客,低调大师,许军

低调大师

您现在的位置是:首页>文章详情

文章详情

javascript的一些命名约定

2019-10-15 38热度

这篇小文章主要是通过一些例子来介绍一些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/

收藏 (0)

相关文章

    文章评论

    共有0条评论来说两句吧...