JavaScript 開發規範

時間 2019-12-05

標籤 javascript 開發規範欄目 JavaScript 简体版

原文原文鏈接

本文轉載於：http://www.javashuo.com/article/p-zhgafefs-db.htmljavascript

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

1. 命名規範

駝峯式命名法介紹：

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

按照第一個字母是否大寫，分爲：函數

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

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

1.1 變量

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

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

命名建議：儘可能在變量名字中體現所屬類型，如: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  
         this 
         .name; 
        
         }

1.3 常量

命名方法：名稱所有大寫。

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

命名建議：無。

示例：

 
         var  
         MAX_COUNT = 10; 
        
         var  
         URL =  
         'http://www.baidu.com' 
         ;

1.4 構造函數

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

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

命名規範：前綴爲名稱。

命名建議：無。

示例：

 
         function  
         Student(name) { 
        
         this 
         .name = name; 
        
         } 
        
         var  
         st =  
         new  
         Student( 
         'tom' 
         );

1.5 類的成員

類的成員包含：

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

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

示例：

 
         function  
         Student(name) { 
        
         var  
         _name = name;  
         // 私有成員 
        
         // 公共方法 
        
         this 
         .getName =  
         function  
         () { 
        
         return  
         _name; 
        
         } 
        
         // 公共方式 
        
         this 
         .setName =  
         function  
         (value) { 
        
         _name = value; 
        
         } 
        
         } 
        
         var  
         st =  
         new  
         Student( 
         'tom' 
         ); 
        
         st.setName( 
         'jerry' 
         ); 
        
         console.log(st.getName());  
         // => jerry：輸出_name私有變量的值

2. 註釋規範

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

2.1 單行註釋

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

語法：// 這是單行註釋

使用方式：

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

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

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

示例：

 
         // 調用了一個函數；1)單獨在一行 
        
         setTitle(); 
        
         var  
         maxCount = 10;  
         // 設置最大量；2)在代碼後面註釋 
        
         // setName(); // 3)註釋代碼

2.2 多行註釋

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

語法：/* 註釋說明 */

使用方法：

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

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

示例：

 
         /* 
        
         * 代碼執行到這裏後會調用setTitle()函數 
        
         * setTitle()：設置title的值 
        
         */ 
        
         setTitle();

2.3 函數(方法)註釋

說明：函數(方法)註釋也是多行註釋的一種，可是包含了特殊的註釋要求。

語法：

/**
* 函數說明
* @關鍵字
*/

經常使用註釋關鍵字：(只列出一部分，並非所有)

註釋名	語法	含義	示例
@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} grid 須要合併的Grid 
        
         * @param {Array} cols 須要合併列的Index(序號)數組；從0開始計數，序號也包含。 
        
         * @param {Boolean} isAllSome 是否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 
        
         }