<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          JavaScript 命名約定最佳實(shí)踐

          共 3676字,需瀏覽 8分鐘

           ·

          2022-02-24 01:31


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

          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 變量的方法是使用駝峰式變量名。我們可以對(duì)JavaScript 所有類型的變量使用駝峰式命名約定,這樣就不會(huì)相同命名的變量。

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

          變量的名稱應(yīng)該是不言自明的,并描述了儲(chǔ)存的值。例如,如果需要一個(gè)變量來儲(chǔ)存狗的名字,應(yīng)該使用 dogName 而不是 Name,因?yàn)?dogNam 更有意義:

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

          2. 布爾值的命名約定

          當(dāng)定義布爾類型的變量時(shí),應(yīng)該使用is或者h(yuǎn)as作為變量的前綴。例如,如果需要一個(gè)變量來檢查狗是否有主人,應(yīng)該使用 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ū)分大小寫的。因?yàn)樵诼暶骱瘮?shù)時(shí),推薦使用駝峰式方法來命名函數(shù)。

          除此之外,推薦使用描述性名詞和動(dòng)詞來作為前綴。例如,如果聲明一個(gè)函數(shù)來獲取名稱,則函數(shù)名字應(yīng)該是 getName:

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

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

          4. 常量的命名約定

          JavaScript 中的常量和變量是一樣的,都區(qū)分大小寫,在定義常量時(shí),推薦使用大寫,因?yàn)樗鼈兪遣蛔兊淖兞俊?/p>

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

          如果變量聲明名稱中包含多個(gè)單詞,就應(yīng)該使用 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 組件廣泛應(yīng)用于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>?
          ??);
          }

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

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

          </div>

          7. 方法的命名約定

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

          推薦需要使用駝峰式方法來聲明 JavaScript 方法,并使用動(dòng)詞作為前綴,使方法名稱更有意義:

          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ù)。

          例如,有一個(gè)私有函數(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"

          9. 全局變量的命名約定

          對(duì)于 JavaScript 全局變量,沒有特定的命名標(biāo)準(zhǔn)。建議對(duì)可變?nèi)肿兞渴褂民劮迨酱笮懙姆绞?,?duì)不可變?nèi)謱?duì)象使用大寫

          10. 文件名的命名約定

          大多數(shù) Web 服務(wù)器(Apache、Unix)在處理文件時(shí)都區(qū)分大小寫。例如,flower.jpg 和 Flower.jpg 是不一樣的。

          但是,如果從不區(qū)分大小寫的服務(wù)器切換到區(qū)分大小寫的服務(wù)器,即使是一個(gè)小錯(cuò)誤也可能導(dǎo)致網(wǎng)站崩潰。

          因此,盡管它們是支持區(qū)分大小寫的,建議在所有服務(wù)器中還是使用小寫來命名文件。


          推薦閱讀:

          27 個(gè)前端動(dòng)畫庫讓你的交互更加炫酷

          2022-02-17

          JavaScript 不再像以前那樣

          2022-02-17

          有趣且實(shí)用的 CSS 小技巧

          2022-02-16

          前端周刊 | 時(shí)隔8年,Chrome 發(fā)布全新 Logo; Vue 3 正式成為默認(rèn)版本; Vite 2.8 發(fā)布

          2022-02-14

          在 CSS 中隱藏元素的 10 種方法

          2022-02-11


          分享

          收藏

          點(diǎn)贊

          在看

          結(jié)語

          「關(guān)注公眾號(hào)IQ前端,一個(gè)專注于CSS/JS開發(fā)技巧的前端公眾號(hào),更多前端小干貨等著你喔」



          瀏覽 47
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  人妻操操 | www.av动漫 | 青春草视频在线免费观看 | 做爱片毛片 | 性,国产三级在线 |