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變量名是應(yīng)該能描述出他這個變量所代表的含義，因此，一般情況下，如果變量名足夠清晰的話，給其增加一個注釋可能沒太多必要。

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

大部分情況，你會發(fā)現(xiàn)javascript是會以駝峰的形式命名，并且其首字母是小寫的

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

不過javascript的常量，私有變量，類或者是組件的命名規(guī)則與其略有不同，我們會在下面分別介紹他們。

然而，在通常情況下，javascript的變量，不管是字符串，布爾類型，還是數(shù)字類型，對象，數(shù)組，函數(shù)，他們都是遵循駝峰的命名方式的。

現(xiàn)在簡要描述一下常見的幾種大小寫命名的不同

camelCase （駝峰命名法，單詞相連，第一個單詞首字母小寫，其他單詞首字母大寫） 被用在js中

PascalCase（帕斯卡命名法，單詞相連，單詞首字母大寫） 被用于js中

snake_case（蛇形命名法，單詞間以下劃線分隔）

kebab-case（烤串命名法，單詞間以中橫線分隔）

Javascript命名約定：布爾值

布爾值的變量通常來說，一般以is，are，has等表示判斷意義的單詞作為其前綴，以便讓開發(fā)者更好的和其他類型的變量區(qū)分開來，來看例子：

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

當(dāng)然啦，這種命名方式也算是一種軟規(guī)則，并不是強(qiáng)制要求的。

javascript命名約定：函數(shù)

函數(shù)一般也是以駝峰的方式來命名，不過，最好是在函數(shù)前面加一些特定的動詞前綴，來明確的告訴開發(fā)者此函數(shù)的作用。

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

當(dāng)然啦，函數(shù)名前面的動詞前綴一般來說是沒什么限制的（比如get，post，fetch，push，complete，calculate，compute等這些都可以）。這其實也是javascript變量的另一個軟規(guī)則，主要就是用來讓其名稱變得更加的具有描述性，更容易理解。

javascript命名約定：類

與其它的數(shù)據(jù)結(jié)構(gòu)相比，在javascript中的類一般是通過帕斯卡命名法（PascalCase）來定義的

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

由于在類定義的時候就使用了帕斯卡命名法，因此每次通過構(gòu)造器來創(chuàng)建一個類的新的實例的時候，其構(gòu)建所用到的那個類的名稱都是符合帕斯卡命名。

javascript命名約定：組件

組件并不是特別的常見，但是他一般情況下經(jīng)常會用在一些像react這樣的前端框架中，由于組件是可以實例化的，并且一般都是出現(xiàn)在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>
    );
}

當(dāng)組件被使用的時候，為了和普通的html元素做區(qū)分，所以一般來說其使用的時候也需要首字母大寫。

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

javascript命名約定：方法

和javascript的函數(shù)相同，類中的方法的命名也是駝峰式的。

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"

類中方法的命名規(guī)則和函數(shù)的一樣，也是以動詞作為前綴，使其具有更好的描述性。

javascript命名約定：私有變量/私有函數(shù)/私有方法

一般情況下，你在函數(shù)，變量或者是方法定義中，很少能看到以下劃線作為前綴（_）開頭的命名方式，如果有的話，一般來說他們都是私有的。雖然他不是javascript的一個強(qiáng)制的規(guī)則，但是一般來說，這么做具有更好的可讀性，一看到它大概就能明白它的使用方式。

比如說，類的私有方法一般情況下只能在其類的內(nèi)部使用，通過這樣的命名方式讓人很容易的就避免了在實例中使用這個方法。

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');

私有方法/函數(shù)/變量也可以出現(xiàn)在javascript文件中，如果這么做，那這意味著該變量不應(yīng)該在文件的外部使用，而僅僅應(yīng)該在這個文件內(nèi)處理一些相關(guān)的邏輯。

javascript命名約定：常量

javascript常量非常重要的一點是，其變量的值是不可變的，因此，為了和其他變量做區(qū)分，其變量名是要全大寫的形式去書寫

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

如果常量中的單詞多于一個的話，那么單詞間要用下劃線分隔開。

var DAYS_UNTIL_TOMORROW = 1;

javascript命名約定：全局變量

如果所有的上下文環(huán)境中，都能訪問到這個變量，那么此變量一般就是全局定義的。通常情況下全局變量都定義在javascript文件中，但是如是是比較小的項目的話，此文件可能就是他的整個的項目。一般來說，全局變量的定義沒有什么特殊的規(guī)定：

javascript的全局變量一般都定義在項目/文件的最頂部

如果其全局變量是可變的，則采用駝峰的形式書寫。

如果其全局變量是不可變的，則采用大寫的形式。

javascript命名約定：下劃線

那么JavaScript變量命名中的下劃線和破折號呢？由于在JS中主要考慮駝峰和帕斯卡命名法（PascalCase），因此，下劃線僅很少使用，一般僅用于私有變量或常量。偶爾你也會看到下劃線在其從第三方（例如數(shù)據(jù)庫或API）獲取信息的時候，有時會出現(xiàn)下劃線。另一種可能會出現(xiàn)下劃線的情況是其函數(shù)入?yún)⒉⑽幢皇褂玫降那闆r，如果您尚未看到這些參數(shù)，就不用擔(dān)心這些，忽略掉就好。

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命名約定(變量 函數(shù) 類 組件)的詳細(xì)內(nèi)容，更多關(guān)于javascript命名約定的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論