前端代碼規範-Javascript

1. 命名規範
   ECMAScript 規範中標識符采用駝峯大小寫格式，駝峯命名法由小(大)寫字母開始，後續每一個單詞首字母都大寫。根據首字母是否大寫，分爲兩種方式：
   Pascal Case 大駝峯式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo
   Camel Case 小駝峯式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo
   標識符，則包括變量、函數名、類名、屬性名和函數或類的參數，每一個命名方法又略有不一樣，下面詳細解釋一下：
   1.1 變量
   命名方法：小駝峯式命名法。
   命名規範：前綴應當是名詞。(函數的名字前綴爲動詞，以此區分變量和函數)
   命名建議：儘可能在變量名字中體現所屬類型，如:length、count等表示數字類型；而包含name、title表示爲字符串類型。
   eg:
   // 好的命名方式
   let maxCount = 10;
   let tableTitle = 'LoginTable';
   // 很差的命名方式
   let setCount = 10;
   let getTitle = 'LoginTable';
   1.2 常量
   命名方法：名稱所有大寫。
   命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。
   eg:
   const MAX_COUNT = 10;
   const URL = 'http://www.foreverz.com';
   1.3 函數
   命名方法：小駝峯式命名法。
   命名規範：前綴應當爲動詞。
   命名建議：可以使用常見動詞約定
   動詞 名詞 返回值
   can 判斷是否可執行某個動做(權限) 函數返回一個布爾值。true：可執行；false：不可執行
   has 判斷是否含有某個值 函數返回一個布爾值。true：含有此值；false：不含有此值
   is 判斷是否爲某個值 函數返回一個布爾值。true：爲某個值；false：不爲某個值
   get 獲取某個值 函數返回一個非布爾值
   set 設置某個值 無返回值、返回是否設置成功或者返回鏈式對象
   load 加載某些數據 無返回值或者返回是否加載完成的結果
   eg:
   // 是否可閱讀
   function canRead(): boolean {
   return true;
   }
   // 獲取名稱
   function getName(): string {
   return this.name;
   }
   1.4 類 & 構造函數
   命名方法：大駝峯式命名法，首字母大寫。
   命名規範：前綴爲名稱。
   eg:
   class Person {
   public name: string;
   constructor(name) {
   this.name = name;
   }
   }
   const person = new Person('mevyn');

1.5 類的成員
類的成員包含：
公共屬性和方法：跟變量和函數的命名同樣。
私有屬性和方法：前綴爲_(下劃線)，後面跟公共屬性和方法同樣的命名方式。
eg:
class Person {
private _name: string;
constructor() { }
// 公共方法
getName() {
return this._name;
}
// 公共方法
setName(name) {
this._name = name;
}
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn

1. 註釋規範
   js 支持三種不一樣類型的註釋：行內註釋、單行註釋和多行註釋：
   2.1 行內註釋
   說明：行內註釋以兩個斜線開始，以行尾結束。
   語法：code // 這是行內註釋
   使用方式：//(雙斜線)與代碼之間保留一個空格，而且//(雙斜線)與註釋文字之間保留一個空格。

命名建議：
// 用來顯示一個解釋的評論
// -> 用來顯示錶達式的結果，
// >用來顯示 console 的輸出結果，

eg:
function test() { // 測試函數
console.log('Hello World!'); // >Hello World!
return 3 + 2; // ->5
}
2.2 單行註釋
說明：單行註釋以兩個斜線開始，以行尾結束。
語法：// 這是單行註釋
使用方式：單獨一行：//(雙斜線)與註釋文字之間保留一個空格。
eg：
// 調用了一個函數；1)單獨在一行
setTitle();
2.3 多行註釋
說明：以 /* 開頭， / 結尾
語法：/ 註釋說明 /
使用方法：若開始/和結束/都在一行，推薦採用單行註釋。若至少三行註釋時，第一行爲/，最後行爲/，其餘行以開始，而且註釋文字與保留一個空格。
eg:
/

• 代碼執行到這裏後會調用setTitle()函數
• setTitle()：設置title的值
  */
  setTitle();
  2.4 函數(方法)註釋
  說明：函數(方法)註釋也是多行註釋的一種，可是包含了特殊的註釋要求，參照JSDoc
  語法：
  /**
• 函數說明
• @關鍵字
  */
  經常使用註釋關鍵字：(只列出一部分，並非所有)

註釋名
語法
含義
示例
@param @param 參數名 {參數類型} 描述信息 描述參數的信息 @param name {String} 傳入名稱
@return @return {返回類型} 描述信息 描述返回值的信息 @return {Boolean} true:可執行;false:不可執行
@author @author 做者信息 [附屬信息：如郵箱、日期] 描述此函數做者的信息 @author 張三 2015/07/21
@version @version XX.XX.XX 描述此函數的版本號 @version 1.0.3
@example @example 示例代碼 演示函數的使用 @example setTitle(‘測試’)
/**

• 合併Grid的行
• @param grid {Ext.Grid.Panel} 須要合併的Grid
• @param cols {Array} 須要合併列的Index(序號)數組；從0開始計數，序號也包含。
• @param isAllSome {Boolean} ：是否2個tr的cols必須完成同樣才能進行合併。true：完成同樣；false(默認)：不徹底同樣
• @return void
• @author polk6 2015/07/21
• @example

• ---

• | 年齡 | 姓名 | | 年齡 | 姓名 |
• ----------------- mergeCells(grid,[0]) -----------------
• | 18 | 張三 | => | | 張三 |
• ----------------- - 18 ---------
• | 18 | 王五 | | | 王五 |
• */ function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) { // Do Something }