javascript的基本規範

對於很多剛到公司做前端的人來説，很多基本的規範可能都不知道。在項目開發維護等工作中，我們不只要做得自己看得懂，還要別人也看得懂。而在js裏也是如此。下面就由小編給大家分享下，js的一些基本規範吧。

本篇主要介紹JS的命名規範、註釋規範以及框架開發的一些問題。

目錄

1. 命名規範：介紹變量、函數、常量、構造函數、類的成員等等的命名規範

2. 註釋規範：介紹單行註釋、多行註釋以及函數註釋

3. 框架開發：介紹全局變量衝突、單全局變量以及命名空間

1. 命名規範

駝峯式命名法介紹：

駝峯式命名法由小(大)寫字母開始，後續每個單詞首字母都大寫。

按照第一個字母是否大寫，分為：

① Pascal Case 大駝峯式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo

② Camel Case 小駝峯式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo

1.1 變量

命名方法：小駝峯式命名法。

命名規範：前綴應當是名詞。(函數的名字前綴為動詞，以此區分變量和函數)

命名建議：儘量在變量名字中體現所屬類型，如:length、count等表示數字類型;而包含name、title表示為字符串類型。

示例：

// 好的命名方式

var maxCount = 10;

var tableTitle = 'LoginTable';

// 不好的命名方式

var setCount = 10;

var getTitle = 'LoginTable';

1.2 函數

命名方法：小駝峯式命名法。

命名規範：前綴應當為動詞。

命名建議：可使用常見動詞約定

動詞　　 含義 返回值

can 判斷是否可執行某個動作(權限) 函數返回一個布爾值。true：可執行;false：不可執行

has 判斷是否含有某個值 函數返回一個布爾值。true：含有此值;false：不含有此值

is 判斷是否為某個值 函數返回一個布爾值。true：為某個值;false：不為某個值

get 獲取某個值 函數返回一個非布爾值

set 設置某個值 無返回值、返回是否設置成功或者返回鏈式對象

load 加載某些數據 無返回值或者返回是否加載完成的結果

示例：

// 是否可閲讀

function canRead() {

return true;

}

// 獲取名稱

function getName() {

return ;

}

1.3 常量

命名方法：名稱全部大寫。

命名規範：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。

命名建議：無。

示例：

var MAX_COUNT = 10;

var URL = '';

1.4 構造函數

介紹：在JS中，構造函數也屬於函數的一種，只不過採用new 運算符創建對象。

命名方法：大駝峯式命名法，首字母大寫。

命名規範：前綴為名稱。

命名建議：無。

示例：

function Student(name) {

= name;

}

var st = new Student('tom');

1.5 類的成員

類的成員包含：

① 公共屬性和方法：跟變量和函數的命名一樣。

② 私有屬性和方法：前綴為_(下劃線)，後面跟公共屬性和方法一樣的命名方式。

示例：

function Student(name) {

var _name = name; // 私有成員

// 公共方法

ame = function () {

return _name;

}

// 公共方式

ame = function (value) {

_name = value;

}

}

var st = new Student('tom');

ame('jerry');

(ame()); // => jerry：輸出_name私有變量的值

2. 註釋規範

JS支持兩種不同類型的註釋：單行註釋和多行註釋。

2.1 單行註釋

説明：單行註釋以兩個斜線開始，以行尾結束。

語法：// 這是單行註釋

使用方式：

① 單獨一行：//(雙斜線)與註釋文字之間保留一個空格。

② 在代碼後面添加註釋：//(雙斜線)與代碼之間保留一個空格，並且//(雙斜線)與註釋文字之間保留一個空格。

③ 註釋代碼：//(雙斜線)與代碼之間保留一個空格。

示例：

// 調用了一個函數;1)單獨在一行

setTitle();

var maxCount = 10; // 設置最大量;2)在代碼後面註釋

// setName(); // 3)註釋代碼

2.2 多行註釋

説明：以/*開頭，*/結尾

語法：/* 註釋説明 */

使用方法：

① 若開始(/*)和結束(*/)都在一行，推薦採用單行註釋。

② 若至少三行註釋時，第一行為/*，最後行為*/，其他行以*開始，並且註釋文字與*保留一個空格。

示例：

/*

* 代碼執行到這裏後會調用setTitle()函數

* setTitle()：設置title的值

*/

setTitle();

2.3 函數(方法)註釋

説明：函數(方法)註釋也是多行註釋的一種，但是包含了特殊的註釋要求，參照 javadoc(百度百科)。

語法：

/**

* 函數説明

* @關鍵字

*/

常用註釋關鍵字：(只列出一部分，並不是全部)

註釋名 語法 含義 示例

@param @param 參數名 {參數類型} 描述信息 描述參數的信息 @param name {String} 傳入名稱

@return @return {返回類型} 描述信息 描述返回值的信息 @return {Boolean} true:可執行;false:不可執行

@author @author 作者信息 [附屬信息：如郵箱、日期] 描述此函數作者的信息 @author 張三 2015/07/21

@version @version 描述此函數的版本號 @version 1.0.3

@example @example 示例代碼 演示函數的使用 @example setTitle('測試')

示例：

/**

* 合併Grid的行

* @param grid {l} 需要合併的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, cols, isAllSome) {

// Do Something

}

3. 框架開發

3.1 全局變量衝突

在團隊開發或者引入第三方JS文件時，有時會造成全局對象的名稱衝突，比如有個全局函數sendMsg()，也又有個全局函數sendMsg()，引入和文件時，會造成sendMsg()函數衝突。

示例：

#FormatImgID_0#

3.2 單全局變量

所創建的全局對象名稱是獨一無二的，並將所有的功能代碼添加到這個全局對象上。調用自己所寫的代碼時，以這個全局對象為入口點。

如：

* JQuery的全局對象：$和JQuery

* ExtJS的全局對象： Ext

示例：

#FormatImgID_1#

3.3 命名空間

在項目規模日益壯大時，可採用命名空間方式對JS代碼進行規範：即將代碼按照功能進行分組，以組的形式附加到單全局對象上。

以Ext的chart模塊為例：

#FormatImgID_2#