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#
-
網頁製作員工作(共3篇)
時間一晃而過,轉眼間試用期已接近尾聲。在這段試用期中可以說是有喜也有憂。喜的是和同事們工作相處中,自己慢慢轉變爲一個社會人,自身實踐經驗和工作能力得到提高。憂的是自己還有許多方面有待於提高。記得初到公司時,我對公司的瞭解僅僅侷限於公司網站的簡單介紹...
-
網頁製作合同三篇
隨着法治精神地不斷髮揚,人們愈發重視合同,合同的法律效力與日俱增,簽訂合同能平衡雙方當事人的平等地位。你知道合同的主要內容是什麼嗎?以下是小編爲大家整理的網頁製作合同3篇,歡迎大家借鑑與參考,希望對大家有所幫助。網頁製作合同篇1合同編號:_________甲方(託付...
-
網頁製作實習日記範文
網頁製作實習日記範文1今天師傅給我分配了一個任務,讓我試着對網站進行更新進入公司網站的後臺數據庫錄入新的數據,對網站進行實時的更新,雖然簡單,但是由於數量多,用了一個下午。我還從網絡上面查找了相關的行業新聞,也更新到了公司的網站,師傅誇我說,做得很好,網站一...
-
網頁製作合同通用7篇
在當今不斷髮展的世界,合同的法律效力與日俱增,正常情況下,簽訂合同必須經過規定的方式。知道嗎,寫合同可是有方法的哦,下面是小編精心整理的網頁製作合同,歡迎大家借鑑與參考,希望對大家有所幫助。網頁製作合同1甲方:_________地址:_________電話:_________傳真:________...
相關文章
- i recall with embarrassing clarity the flavor of those particular ashes ?
- 一套完整的javascript面試題
- 北京的javascript實習生工資是多少?
- 評課稿:skim and match the pictures with each paragraph
- 葡萄牙語的歷史:Revolucionários apossam-se de Porto Alegre
- 輕鬆學javascript學習教程(二)
- ADMINISTRATIVE ASSISTANT(Personnel)電子簡歷模板
- 輕鬆學javascript學習教程(三)
- 人人網javascript面試題
- 幾種實用的JavaScript鼠標特效