黄页网站免费视频,免费片,精品视频免费观看

在開發(fā)過程中，遵循標準的命名約定可以提高代碼的可讀性。下面就來看看 JavaScript 中命名約定的最佳實踐。

1. 變量的命名約定

JavaScript 變量名稱是區(qū)分大小寫的，大寫和小寫字母是不同的。比如：

let DogName = 'Scooby-Doo'; let dogName = 'Droopy'; let DOGNAME = 'Odie'; console.log(DogName); // "Scooby-Doo" console.log(dogName); // "Droopy" console.log(DOGNAME); // "Odie"

但是，最推薦的聲明 JavaScript 變量的方法是使用駝峰式變量名。我們可以對JavaScript 所有類型的變量使用駝峰式命名約定，這樣就不會相同命名的變量。

// bad let dogname = 'Droopy'; // bad let dog_name = 'Droopy'; // bad let DOGNAME = 'Droopy'; // bad let DOG_NAME = 'Droopy'; // good let dogName = 'Droopy';

變量的名稱應該是不言自明的，并描述了儲存的值。例如，如果需要一個變量來儲存狗的名字，應該使用 dogName 而不是 Name，因為 dogNam 更有意義：

// bad let d = 'Droopy'; // bad let name = 'Droopy'; // good let dogName = 'Droopy';

2. 布爾值的命名約定

當定義布爾類型的變量時，應該使用is或者has作為變量的前綴。例如，如果需要一個變量來檢查狗是否有主人，應該使用 hasOwner 作為變量名：

// bad let bark = false; // good let isBark = false; // bad let ideal = true; // good let areIdeal = true; // bad let owner = true; // good let hasOwner = true;

3. 函數(shù)的命名約定

JavaScript 中函數(shù)的名稱也是區(qū)分大小寫的。因為在聲明函數(shù)時，推薦使用駝峰式方法來命名函數(shù)。

除此之外，推薦使用描述性名詞和動詞來作為前綴。例如，如果聲明一個函數(shù)來獲取名稱，則函數(shù)名字應該是 getName：

// bad function name(dogName, ownerName) { return '${dogName} ${ownerName}';
} // good function getName(dogName, ownerName) { return '${dogName} ${ownerName}';
}

4. 常量的命名約定

JavaScript 中的常量和變量是一樣的，都區(qū)分大小寫，在定義常量時，推薦使用大寫，因為它們是不變的變量。

const LEG = 4; const TAIL = 1; const MOVABLE = LEG + TAIL;

如果變量聲明名稱中包含多個單詞，就應該使用 UPPER_SNAKE_CASE。

const DAYS_UNTIL_TOMORROW = 1;

5. 類的命名約定

JavaScript 中類的命名約定規(guī)則與函數(shù)非常相似，推薦使用描述性的名稱來描述類的功能。

函數(shù)名和類名之間的主要區(qū)別在于類名要使用大寫開頭：

class DogCartoon { constructor(dogName, ownerName) { this.dogName = dogName; this.ownerName = ownerName; 
  }
} const cartoon = new DogCartoon('Scooby-Doo', 'Shaggy');

6. 組件的命名規(guī)則

JavaScript 組件廣泛應用于React、Vue等前端框架中。組件的命名建議與類保持一致，使用開頭大寫的駝峰式命名法：

// bad function dogCartoon(roles) { return ( <div> <span> Dog Name: { roles.dogName } span> <span> Owner Name: { roles.ownerName } span> div> );
} // good function DogCartoon(roles) { return ( <div> <span> Dog Name: { roles.dogName } span> <span> Owner Name: { roles.ownerName } span> div> );
}

由于組件的命名開頭字母是大寫，因此在使用時，就很容易和HTML、屬性值等區(qū)分開來：

<div> <DogCartoon roles={{ dogName: 'Scooby-Doo', ownerName: 'Shaggy' }} /> div>

7. 方法的命名約定

這里說的方法指的是類中方法，在 JavaScript 中，類的方法和函數(shù)的結(jié)構(gòu)是非常類似的，因此，命名約定規(guī)則也是一樣的。

推薦需要使用駝峰式方法來聲明 JavaScript 方法，并使用動詞作為前綴，使方法名稱更有意義：

class DogCartoon { constructor(dogName, ownerName) { this.dogName = dogName; this.ownerName = ownerName; 
  } getName() { return '${this.dogName} ${this.ownerName}'; 
  }
} const cartoon= new DogCartoon('Scooby-Doo', 'Shaggy'); console.log(cartoon.getName()); // "Scooby-Doo Shaggy"

8. 私有函數(shù)的命名約定

下劃線 (_) 在 MySQL 和 PHP 等語言中廣泛用于定義變量、函數(shù)和方法。但在 JavaScript 中，下劃線用于表示私有變量或函數(shù)。

例如，有一個私有函數(shù)名 toonName，則可以通過添加下劃線作為前綴 (_toonName) 來將其表示為私有函數(shù)。

class DogCartoon { constructor(dogName, ownerName) { this.dogName = dogName; this.ownerName = ownerName; this.name = _toonName(dogName, ownerName); 
  } _toonName(dogName, ownerName) { return `${dogName} ${ownerName}`; 
  } 
} const cartoon = new DodCartoon('Scooby-Doo', 'Shaggy'); // good const name = cartoon.name; console.log(name); // "Scooby-Doo Shaggy"  // bad name =cartoon._toonName(cartoon.dogName, cartoon.ownerName); console.log(name); // "Scooby-Doo Shaggy"