2023年javascript的基本規(guī)范

慎而思之，勤而行之。斯是陋室，惟吾德馨。第第2頁/共2頁精品文檔推薦2023年javascript的基本規(guī)范收拾javascript的基本規(guī)范

對于許多剛到公司做前端的人來說，許多基本的規(guī)范可能都不知道。在項目開辟維護等工作中，我們不只要做得自己看得懂，還要別人也看得懂。而在js里也是如此。下面就由我給大家分享下，js的一些基本規(guī)范吧。

本篇主要推薦JS的命名規(guī)范、解釋規(guī)范以及框架開辟的一些問題。

目錄

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

2.解釋規(guī)范：推薦單行解釋、多行解釋以及函數(shù)解釋

3.框架開辟：推薦全局變量矛盾、單全局變量以及命名空間

1.命名規(guī)范

駝峰式命名法推薦：

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

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

①PascalCase大駝峰式命名法：首字母大寫。eg：StudentInfo、UserInfo、ProductInfo

②CamelCase小駝峰式命名法：首字母小寫。eg：studentInfo、userInfo、productInfo

1.1變量

命名主意：小駝峰式命名法。

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

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

示例：

//好的命名方式

varmaxCount=10;

vartableTitle=LoginTable;

//不好的命名方式

varsetCount=10;

vargetTitle=LoginTable;

1.2函數(shù)

命名主意：小駝峰式命名法。

命名規(guī)范：前綴應(yīng)該為動詞。

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

動詞含義返回值

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

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

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

get獲取某個值函數(shù)返回一個非布爾值

set設(shè)置某個值無返回值、返回是否設(shè)置勝利或者返回鏈式對象

load加載某些數(shù)據(jù)無返回值或者返回是否加載完成的結(jié)果

示例：

//是否可閱讀

functioncanRead(){

returntrue;

}

//獲取名稱

functiongetName(){

return;

}

1.3常量

命名主意：名稱所有大寫。

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

命名建議：無。

示例：

varMAX_COUNT=10;

varURL=http://.baidu;

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

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

命名主意：大駝峰式命名法，首字母大寫。

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

命名建議：無。

示例：

functionStudent(name){

=name;

}

varst=newStudent(tom);

1.5類的成員

類的成員包含：

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

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

示例：

functionStudent(name){

var_name=name;//私有成員

//公共主意

this.getName=function(){

return_name;

}

//公共方式

this.setName=function(value){

_name=value;

}

}

varst=newStudent(tom);

st.setName(jerry);

console.log(st.getName());//=jerry：輸出_name私有變量的值

2.解釋規(guī)范

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

2.1單行解釋

說明：單行解釋以兩個斜線開始，以行尾結(jié)束。

語法：//這是單行解釋

使用方式：

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

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

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

示例：

//調(diào)用了一個函數(shù);1)單獨在一行

setTitle();

varmaxCount=10;//設(shè)置最大量;2)在代碼后面解釋

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

2.2多行解釋

說明：以/*開始，*/結(jié)尾

語法：/*解釋說明*/

使用主意：

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

②若至少三行解釋時，第一行為/*，總算行為*/，其他行以*開始，并且解釋文字與*保留一個空格。

示例：

/*

*代碼執(zhí)行到這里后會調(diào)用setTitle()函數(shù)

*setTitle()：設(shè)置title的值

*/

setTitle();

2.3函數(shù)(主意)解釋

說明：函數(shù)(主意)解釋也是多行解釋的一種，但是包含了異常的解釋要求，參照javadoc(百度百科)。

語法：

/**

*函數(shù)說明

*@關(guān)鍵字

*/

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

解釋名語法含義示例

@param@param參數(shù)名{參數(shù)類型}描述信息描述參數(shù)的信息@paramname{String}傳入名稱

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

@author@author信息[附屬信息：如郵箱、日期]描述此函數(shù)的信息@author張三2023/07/21

@version@versionXX.XX.XX描述此函數(shù)的版本號@version1.0.3

@example@example示例代碼演示函數(shù)的使用@examplesetTitle(測試)

示例：

/**

*合并Grid的行

*@paramgrid{Ext.Grid.Panel}需要合并的Grid

*@paramcols{Array}需要合并列的Index(序號)數(shù)組;從0開始計數(shù)，序號也包含。

*@paramisAllSome{Boolean}：是否2個tr的cols必須完成一樣才干舉行合并。true：完成一樣;false(默認)：不徹低一樣

*@returnvoid

*@authorpolk62023/07/21

*@example

*__________________________________

*|年齡|姓名||年齡|姓名|

*mergeCells(grid,[0])

*|18|張三|=||張三|

*-18

*|18|王五|||王五|

*

*/

functionmergeCells(grid,cols,isAllSome){

//DoSomething

}

3.框架開辟

3.1全局變量矛盾

在團隊開辟或者引入第三方JS文件時，偶爾會造成全局對象的'名稱矛盾，比如a.js有個全局函數(shù)sendMsg()，b.js也又有個全局函數(shù)sendMsg()，引入a.js和b.js文件時，會造成sendMsg()函數(shù)矛盾。

示例：

#FormatImgID_0#

3.2單全局變量

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

如：

*JQuery的全局對象：$和