超全面的JavaScript開(kāi)發(fā)規(guī)范（推薦）

這篇文章主要介紹的是關(guān)于JS的命名規(guī)范、注釋規(guī)范以及框架開(kāi)發(fā)的一些問(wèn)題，首先來(lái)看看目錄。

目錄

1. 命名規(guī)范：介紹變量、函數(shù)、常量、構(gòu)造函數(shù)、類(lèi)的成員等等的命名規(guī)范

2. 注釋規(guī)范：介紹單行注釋、多行注釋以及函數(shù)注釋

3. 框架開(kāi)發(fā)：介紹全局變量沖突、單全局變量以及命名空間

一、命名規(guī)范

駝峰式命名法介紹：

駝峰式命名法由小(大)寫(xiě)字母開(kāi)始，后續(xù)每個(gè)單詞首字母都大寫(xiě)。

按照第一個(gè)字母是否大寫(xiě)，分為：

     ① Pascal Case 大駝峰式命名法：首字母大寫(xiě)。eg：StudentInfo、UserInfo、ProductInfo

     ② Camel Case 小駝峰式命名法：首字母小寫(xiě)。eg：studentInfo、userInfo、productInfo

1.1 變量

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

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

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

示例：

// 好的命名方式
var maxCount = 10;
var tableTitle = 'LoginTable';
 
// 不好的命名方式
var setCount = 10;
var getTitle = 'LoginTable';

1.2 函數(shù)

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

命名規(guī)范：前綴應(yīng)當(dāng)為動(dòng)詞。

命名建議：可使用常見(jiàn)動(dòng)詞約定

示例：

// 是否可閱讀
function canRead() {
 return true;
}
 
// 獲取名稱
function getName() {
 return this.name;
}

1.3 常量

命名方法：名稱全部大寫(xiě)。

命名規(guī)范：使用大寫(xiě)字母和下劃線來(lái)組合命名，下劃線用以分割單詞。

命名建議：無(wú)。

示例：

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

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

介紹：在JS中，構(gòu)造函數(shù)也屬于函數(shù)的一種，只不過(guò)采用new 運(yùn)算符創(chuàng)建對(duì)象。

命名方法：大駝峰式命名法，首字母大寫(xiě)。

命名規(guī)范：前綴為名稱。

命名建議：無(wú)。

示例：

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

1.5 類(lèi)的成員

類(lèi)的成員包含：

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

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

示例：

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私有變量的值

二、 注釋規(guī)范

JS支持兩種不同類(lèi)型的注釋?zhuān)簡(jiǎn)涡凶⑨尯投嘈凶⑨尅?/p>

2.1 單行注釋

說(shuō)明：?jiǎn)涡凶⑨屢詢蓚€(gè)斜線開(kāi)始，以行尾結(jié)束。

語(yǔ)法：// 這是單行注釋

使用方式：

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

      ② 在代碼后面添加注釋?zhuān)?/(雙斜線)與代碼之間保留一個(gè)空格，并且//(雙斜線)與注釋文字之間保留一個(gè)空格。

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

示例：

// 調(diào)用了一個(gè)函數(shù)；1)單獨(dú)在一行
setTitle();
 
var maxCount = 10; // 設(shè)置最大量；2)在代碼后面注釋
 
// setName(); // 3)注釋代碼

2.2 多行注釋

說(shuō)明：以/*開(kāi)頭，*/結(jié)尾

語(yǔ)法：/* 注釋說(shuō)明 */

使用方法：

      ① 若開(kāi)始(/*)和結(jié)束(*/)都在一行，推薦采用單行注釋。

      ② 若至少三行注釋時(shí)，第一行為/*，最后行為*/，其他行以*開(kāi)始，并且注釋文字與*保留一個(gè)空格。

示例：

/*
* 代碼執(zhí)行到這里后會(huì)調(diào)用setTitle()函數(shù)
* setTitle()：設(shè)置title的值
*/
setTitle();

2.3 函數(shù)(方法)注釋

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

語(yǔ)法：

/** 
* 函數(shù)說(shuō)明 
* @關(guān)鍵字 
*/

常用注釋關(guān)鍵字：(只列出一部分，并不是全部)

示例：

/**
* 合并Grid的行
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param cols {Array} 需要合并列的Index(序號(hào))數(shù)組；從0開(kāi)始計(jì)數(shù)，序號(hào)也包含。
* @param isAllSome {Boolean} ：是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true：完成一樣；false(默認(rèn))：不完全一樣
* @return void
* @author polk6 2015/07/21 
* @example
* _________________ _________________
* | 年齡 | 姓名 | | 年齡 | 姓名 |
* ----------------- mergeCells(grid,[0]) -----------------
* | 18 | 張三 | => | | 張三 |
* ----------------- - 18 ---------
* | 18 | 王五 | | | 王五 |
* ----------------- -----------------
*/
function mergeCells(grid, cols, isAllSome) {
 // Do Something
}

三、框架開(kāi)發(fā)

3.1 全局變量沖突

在團(tuán)隊(duì)開(kāi)發(fā)或者引入第三方JS文件時(shí)，有時(shí)會(huì)造成全局對(duì)象的名稱沖突，比如a.js有個(gè)全局函數(shù)sendMsg() ，b.js也又有個(gè)全局函數(shù)sendMsg() ，引入a.js和b.js文件時(shí)，會(huì)造成sendMsg()函數(shù)沖突。

示例：

3.2 單全局變量

所創(chuàng)建的全局對(duì)象名稱是獨(dú)一無(wú)二的，并將所有的功能代碼添加到這個(gè)全局對(duì)象上。調(diào)用自己所寫(xiě)的代碼時(shí)，以這個(gè)全局對(duì)象為入口點(diǎn)。

如：

* JQuery的全局對(duì)象：$和JQuery

* ExtJS的全局對(duì)象： Ext

示例：

3.3 命名空間

在項(xiàng)目規(guī)模日益壯大時(shí)，可采用命名空間方式對(duì)JS代碼進(jìn)行規(guī)范：即將代碼按照功能進(jìn)行分組，以組的形式附加到單全局對(duì)象上。

以Ext的chart模塊為例：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫(huà)特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流。