javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > javascript命名约定

javascript命名约定(变量 函数 类 组件)

作者:小辞

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

以上就是javascript命名约定(变量 函数 类 组件)的详细内容,更多关于javascript命名约定的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文