想成為一名優(yōu)秀的前端開發(fā)工程師，代碼的可讀性與復(fù)用性是必不可少的始藕。本文從命名的角度來談?wù)勥@個話題。

1、JS命名規(guī)范

1.1 變量

命名方法：小駝峰式命名法伍派。

命名規(guī)范：前綴應(yīng)當是名詞。(函數(shù)的名字前綴為動詞，以此區(qū)分變量和函數(shù))

命名建議：盡量在變量名字中體現(xiàn)所屬類型舌稀，如:length、count等表示數(shù)字類型；而包含name、title表示為字符串類型月洛。

// 好的命名方式
let maxCount =10;
let tableTitle ='LoginTable';

// 不好的命名方式
let setCount =10嚼黔；
let getTitle ='LoginTable'唬涧；

1.2 常量

命名方法：名稱全部大寫。
命名規(guī)范：使用大寫字母和下劃線來組合命名狮荔，下劃線用以分割單詞殖氏。

const MAX_COUNT =10;
const URL ='http://www.foreverz.com';

1.3 函數(shù)

命名方法：小駝峰式命名法。
命名規(guī)范：前綴應(yīng)當為動詞总滩。
命名建議：可使用常見動詞約定

// 是否可閱讀
function canRead():boolean
 {
return true;
}

// 獲取名稱
function getName():string
 {
return this.name;
}

1.4 類 & 構(gòu)造函數(shù)

命名方法：大駝峰式命名法肪虎，首字母大寫刑枝。
命名規(guī)范：前綴為名稱。

 class Person {
       public name:string;
       constructor(name) {
           this.name = name;
        }
    }

const  person =new Person('mevyn');

1.5 類的成員

類的成員包含：

1. 公共屬性和方法：跟變量和函數(shù)的命名一樣。
2. 私有屬性和方法：前綴為_(下劃線)蚂夕，后面跟公共屬性和方法一樣的命名方式婿牍。

class  Person {
private _name:string;
constructor() { }
// 公共方法
getName() {
   return  this._name;
}

// 公共方法
setName(name) {
    this._name = name;
}
}

const person =newPerson();
person.setName('mervyn');
person.getName();// ->mervyn

2撑蚌、CSS命名規(guī)范

CSS的命名跟可重用性關(guān)系很大，可重用性與語義化是一對矛盾體第煮。于是需要一個折中方案害晦。這里參考了網(wǎng)易NEC做法壹瘟。

2.1 約定

2.2 擴展

• 相同語義的不同類命名
  方法：直接加數(shù)字或字母區(qū)分即可（如：.m-list、.m-list2滋早、.m-list3等榄审，都是列表模塊，但是是完全不一樣的模塊）杆麸。
  其他舉例：.f-fw0搁进、.f-fw1、.s-fc0昔头、.s-fc1饼问、.m-logo2、.m-logo3揭斧、u-btn莱革、u-btn2等等。
• 模塊和單元的擴展類的命名方法
  當A讹开、B盅视、C、...它們類型相同且外形相似區(qū)別不大旦万，那么就以它們中出現(xiàn)率最高的做成基類左冬，其他做成基類的擴展。

方法：+“-”+數(shù)字或字母（如：.m-list的擴展類為.m-list-1纸型、.m-list-2等）拇砰。

補充：基類自身可以獨立使用（如：class="m-list"即可）梅忌，擴展類必須基于基類使用（如：class="m-list m-list-2"）。

如果你的擴展類是表示不同狀態(tài)除破，標識狀態(tài)的方法采取獨立狀態(tài)分類（.s-）方法：.u-btn.s-dis牧氮，.m-box.s-sel，然后像這樣使用：class="u-btn s-dis"瑰枫。

• 模塊和元件的后代選擇器的擴展類
  有時候模塊內(nèi)會有些類似的東西踱葛，如果你沒有把它們做成元件和擴展，那么也可以使用后代選擇器和擴展光坝。
  后代選擇器：.m-login .btn{}尸诽。
  后代選擇器擴展：.m-login .btn-1{}，.m-login .btn-dis{}盯另。
  同樣也可以采取獨立狀態(tài)分類（.s-）方法：.m-login .btn.s-dis{}性含，然后像這樣使用：class="btn z-dis"。
  注：此方法用于類選擇器鸳惯，直接使用標簽做為選擇器的則不需要使用此命名方法商蕴。
  注：為防止后代選擇器的擴展類和大類命名規(guī)范沖突，后代選擇器不允許使用單個字母芝发。
  比如：.m-list .a{}是不允許的绪商，因為當這個.a需要擴展的時候就會變成.a-bb，這樣就和大類的命名規(guī)范沖突辅鲸。

2.3 樣式文件組織

// 重置類樣式+非業(yè)務(wù)公共類
<link href="assets/css/base.css" rel="stylesheet" />
// 業(yè)務(wù)公用復(fù)用類樣式
<link href="assets/css/common.css" rel="stylesheet" />
// 特定業(yè)務(wù)類樣式
<link href="assets/css/index.css" rel="stylesheet" />

重置類樣式不做要求格郁，但對于復(fù)用類和業(yè)務(wù)類樣式需要遵守2.1 & 2.2 約束

3、參考

• 1独悴、JS 命名與注釋規(guī)范詳解
• 2理张、http://nec.netease.com/standard/css-sort.html