Javascript規(guī)范
1 變量命名
1.1 [規(guī)范] 變量和函數(shù)名稱剿另，采用駝峰命名方式箫锤，即第一個單詞以小寫字母開始，從第二個單詞開始以后的每個單詞首字母采用大寫字母
// good
var dashboarPage = {};
var camelCase = ‘命名規(guī)則’;
// bad
var dashboardpage = {};
var DashboardPage = {};
var dashboard_page = {};
1.2 [規(guī)范] 變量或方法名稱雨女，禁止以下劃線結(jié)束
// good
var personName = ‘Jone’;
// bad
var personName_ = ‘Jone’;
1.3 [規(guī)范] 禁止使用拼音方式命名
// good
var warningContent = ‘用戶名不能為空谚攒！’;
// bad
var gaojingneirong = ‘用戶名不能為空！’;
1.4 [建議] 字符串使用單引號 '
// good
var name = 'peter';
// bad
var name = "peter";
2 代碼風(fēng)格
2.1 [規(guī)范] 使用4個空格作為一個縮進(jìn)層級氛堕；不允許使用2個空格或tab字符
// good
if (0 < num) {
return true;
}
// bad
if (0 < num) {
return true; // 縮進(jìn)2個空格
}
// bad
if (0 < num) {
return true; // 使用tab鍵盤縮進(jìn)
}
2.2 [規(guī)范] 二元運(yùn)算符兩側(cè)必須有一個空格
// good
var sum = 1 + 2;
if (personName === ‘Jone’) {
runA ();
}
// bad
var sum=1+2;
if (personName===’Jone’) {
runA ();
}
2.3 [規(guī)范] if / else / for / while / function / switch / do / try / catch / finally 關(guān)鍵字后馏臭，必須有一個空格。
// good
if (condition) {
}
while (condition) {
}
(function () {
})();
// bad
if(condition) {
}
while(condition) {
}
(function() {
})();
2.4 [規(guī)范] if讼稚，while等條件判斷語句中括儒，不能省略大括號
// goog
if (1 === a) {
return true;
}
// bad
If (1 === a) return true;
2.5 [規(guī)范] 用作代碼塊起始的左花括號 { 前必須有一個空格，右大括號 { 必須單獨一行
// good
if (condition) {
}
while (condition) {
}
(function () {
})();
// bad
if(condition) {
}
while(condition) {
}
(function() {
})();
2.6 [規(guī)范] 在對象創(chuàng)建時锐想，屬性中的 : 之后必須有空格帮寻，: 之前不允許有空格
// good
var obj = {
a: 1,
b: 2,
c: 3
};
// bad
var obj = {
a : 1,
b:2,
c :3
};
2.7 [規(guī)范] 函數(shù)聲明、具名函數(shù)表達(dá)式赠摇、函數(shù)調(diào)用中固逗，函數(shù)名和 ( 之間不允許有空格
// good
function funcName() {
}
var funcName = function funcName() {
};
funcName();
// bad
function funcName () {
}
var funcName = function funcName () {
};
funcName ();
2.8 [規(guī)范] 逗號“,”和分號“;”前不允許有空格
// good
callFunc(a, b);
// bad
callFunc(a , b) ;
2.9 [規(guī)范] 行尾不得有多余的空格
2.10 [規(guī)范] 每行不得超過120個字符；超長的不可分割的代碼允許例外藕帜，比如復(fù)雜的正則表達(dá)式烫罩，長字符串不在例外之列
2.11 [建議] 在語句的行長度超過 120 時，根據(jù)邏輯條件合理縮進(jìn)
// good
if (user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
var html = '' // 此處用一個空字符串耘戚，以便整個HTML片段都在新行嚴(yán)格對齊
+ '<article>'
+ '<h1>Title here</h1>'
+ '<p>This is a paragraph</p>'
+ '<footer>Complete</footer>'
+ '</article>';
var html = [
'<article>',
'<h1>Title here</h1>',
'<p>This is a paragraph</p>',
'<footer>Complete</footer>',
'</article>'
];
html = html.join('');
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
// 鏈?zhǔn)秸{(diào)用較長時采用縮進(jìn)進(jìn)行調(diào)整嗡髓。
$('#items')
.find('.selected')
.highlight()
.end();
3 語言特性
3.1 [規(guī)范] 每個 var 只能聲明一個變量
// good
var hangModules = [];
var missModules = [];
var visited = {};
// bad
var hangModules = [],
missModules = [],
visited = {};
3.2 [建議] 變量必須即用即聲明，不得在函數(shù)或其它形式的代碼塊起始位置統(tǒng)一聲明所有變量收津。
解釋：變量聲明與使用的距離越遠(yuǎn)，出現(xiàn)的跨度越大浊伙，代碼的閱讀與維護(hù)成本越高撞秋。雖然JavaScript的變量是函數(shù)作用域，還是應(yīng)該根據(jù)編程中的意圖嚣鄙，縮小變量出現(xiàn)的距離空間吻贿。
3.3 [規(guī)范] 比較相等時，用嚴(yán)格等號===替代==
// good
if (age === 30) {
// ......
}
// bad
if (age == 30) {
// ......
}
4 ES6規(guī)范
4.1 [規(guī)范] const定義的變量哑子，必須大寫舅列，用下劃線間隔開來
4.2 [建議] 使用拓展運(yùn)算符 ... 復(fù)制數(shù)組
4.3 [建議] 對數(shù)組使用解構(gòu)賦值肌割。
//good
const [first, second] = arr;
// bad
const first = arr[0];
const second = arr[1];
4.4 [建議] 使用模板字符串替代字符串連接
// good
function sayHi(name){
return `How are you ${name}?`
}
// bad
function sayHi(name){
return 'How are you, ' + name + '?';
}
5 注釋規(guī)范
5.1 [建議]文件注釋應(yīng)位于文件的最前面，包含概要說明帐要、版本把敞、版權(quán)聲明、修改時間榨惠；文件注釋必須全部以英文字符表示
/*!
* iODS v3 (http://www.hollysys.com/)
* Hollysys 2019-2020
* srx 2019.9.18
*/
5.2 [規(guī)范]單行注釋奋早，以//開始，后面留一個空格
// good
// this is a comment
5.3 [建議]多行注釋，從第二行起，每行以“空格+”開始械筛，使對齊
/*
* this is a commen
* @param {Array} nodeName 節(jié)點名稱
*/
5.4 [建議]不要將注釋內(nèi)容寫在注釋的開始符和結(jié)束符所在行
// bad
/* start
end */
5.5 [建議]用@method聲明函數(shù)或類方法拢切；函數(shù)有參數(shù)時，必須使用@param路鹰，當(dāng)函數(shù)有返回值時，必須使用@return
/*
* 返回當(dāng)前集合中指定位置的元素
* @method/@class
* @param {Number} [i=0] 位置下標(biāo)。如果為負(fù)數(shù)姓建，則從集合的最后一個元素開始倒數(shù)
* @return {Element} 指定元素
*/
5.6 [建議] 必須使用 @event 標(biāo)識事件，事件參數(shù)的標(biāo)識與方法描述的參數(shù)標(biāo)識相同
/**
* 值變更時觸發(fā)
*
* @event Select#change
* @param {Object} e e描述
* @param {string} e.before before描述
* @param {string} e.after after描述
*/
[if !supportLists]1 [endif]變量命名
[if !supportLists]1.1 [endif][規(guī)范] 變量和函數(shù)名稱枉侧，采用駝峰命名方式引瀑，即第一個單詞以小寫字母開始，從第二個單詞開始以后的每個單詞首字母采用大寫字母
// good
var dashboarPage= {};
var camelCase
= ‘命名規(guī)則’;
// bad
var dashboardpage= {};
var DashboardPage= {};
var dashboard_page= {};
1.2 [endif][規(guī)范] 變量或方法名稱榨馁，禁止以下劃線結(jié)束
// good
varpersonName = ‘Jone’;
// bad
varpersonName_ = ‘Jone’;
1.3 [endif][規(guī)范] 禁止使用拼音方式命名
// good
var
warningContent = ‘用戶名不能為空憨栽！’;
// bad
var
gaojingneirong = ‘用戶名不能為空！’;
1.4 [endif][建議] 字符串使用單引號'
// good
var name= 'peter';
// bad
var name= "peter";
2 代碼風(fēng)格
2.1 [規(guī)范] 使用4個空格作為一個縮進(jìn)層級翼虫；不允許使用2個空格或tab字符
// good
if (0< num) {
return true;
}
// bad
if (0< num) {
returntrue; //縮進(jìn)2個空格
}
// bad
if (0< num) {
return true; //使用tab鍵盤縮進(jìn)
}
2.2 [endif][規(guī)范] 二元運(yùn)算符兩側(cè)必須有一個空格
// good
var sum =1 + 2;
if (personName=== ‘Jone’) {
runA();
}
// bad
varsum=1+2;
if(personName===’Jone’) {
runA();
}
2.3 [規(guī)范] if / else/ for / while / function / switch / do / try / catch / finally 關(guān)鍵字后屑柔，必須有一個空格。
// good
if(condition) {
}
while(condition) {
}
(function() {
})();
// bad
if(condition){
}
while(condition){
}
(function(){
})();
2.4 [規(guī)范] if珍剑，while等條件判斷語句中掸宛，不能省略大括號
// goog
if (1 ===a) {
return true;
}
// bad
If (1 ===a) return true;
2.5 [endif][規(guī)范] 用作代碼塊起始的左花括號 { 前必須有一個空格，右大括號{ 必須單獨一行
// good
if(condition) {
}
while(condition) {
}
(function() {
})();
// bad
if(condition){
}
while(condition){
}
(function(){
})();
2.6 [endif][規(guī)范] 在對象創(chuàng)建時招拙，屬性中的 : 之后必須有空格唧瘾，: 之前不允許有空格
// good
var obj ={
a: 1,
b: 2,
c: 3
};
// bad
var obj ={
a : 1,
b:2,
c :3
};
2.7 [endif][規(guī)范] 函數(shù)聲明、具名函數(shù)表達(dá)式别凤、函數(shù)調(diào)用中饰序，函數(shù)名和 ( 之間不允許有空格
// good
functionfuncName() {
}
varfuncName = function funcName() {
};
funcName();
// bad
functionfuncName () {
}
varfuncName = function funcName () {
};
funcName();
2.8 [endif][規(guī)范] 逗號“,”和分號“;”前不允許有空格
// good
callFunc(a,b);
// bad
callFunc(a, b) ;
2.9 [endif][規(guī)范] 行尾不得有多余的空格
[if !supportLists]2.10 [endif][規(guī)范] 每行不得超過120個字符；超長的不可分割的代碼允許例外规哪，比如復(fù)雜的正則表達(dá)式求豫，長字符串不在例外之列
[if !supportLists]2.11 [endif][建議] 在語句的行長度超過 120 時，根據(jù)邏輯條件合理縮進(jìn)
// good
if(user.isAuthenticated()
&& user.isInRole('admin')
&& user.hasAuthority('add-admin')
|| user.hasAuthority('delete-admin')
) {
// Code
}
var html
= '' // 此處用一個空字符串，以便整個HTML片段都在新行嚴(yán)格對齊
+ ''
+ '
Title here
'
+ '
This is a paragraph
'
+ 'Complete'
+ '';
var html= [
'',
'
Title here
',
'
This is aparagraph
',
'Complete',
''
];
html =html.join('');
foo(
aVeryVeryLongArgument,
anotherVeryLongArgument,
callback
);
// 鏈?zhǔn)秸{(diào)用較長時采用縮進(jìn)進(jìn)行調(diào)整蝠嘉。
$('#items')
.find('.selected')
.highlight()
.end();
3 [endif]語言特性
3.1 [endif][規(guī)范] 每個 var 只能聲明一個變量
// good
varhangModules = [];
varmissModules = [];
varvisited = {};
// bad
varhangModules = [],
missModules = [],
visited ={};
3.2 [endif][建議] 變量必須即用即聲明最疆，不得在函數(shù)或其它形式的代碼塊起始位置統(tǒng)一聲明所有變量。
解釋：變量聲明與使用的距離越遠(yuǎn)蚤告，出現(xiàn)的跨度越大努酸，代碼的閱讀與維護(hù)成本越高。雖然JavaScript的變量是函數(shù)作用域罩缴，還是應(yīng)該根據(jù)編程中的意圖蚊逢，縮小變量出現(xiàn)的距離空間。
3.3 [endif][規(guī)范] 比較相等時箫章，用嚴(yán)格等號===替代==
// good
if (age=== 30) {
// ......
}
// bad
if (age== 30) {
// ......
}
4 [endif]ES6規(guī)范
4.1 [endif][規(guī)范] const定義的變量烙荷，必須大寫，用下劃線間隔開來
4.2 [endif][建議] 使用拓展運(yùn)算符 ... 復(fù)制數(shù)組
4.3 [endif][建議] 對數(shù)組使用解構(gòu)賦值檬寂。
//good
const[first, second] = arr;
// bad
constfirst = arr[0];
constsecond = arr[1];
4.4 [endif] [建議] 使用模板字符串替代字符串連接
// good
functionsayHi(name){
return `How are you ${name}?`
}
// bad
functionsayHi(name){
return 'How are you, ' + name + '?';
}
5 [endif]注釋規(guī)范
5.1 [endif][建議]文件注釋應(yīng)位于文件的最前面终抽，包含概要說明、版本桶至、版權(quán)聲明昼伴、修改時間；文件注釋必須全部以英文字符表示
/*!
* iODS v3 (http://www.hollysys.com/)
* Hollysys 2019-2020
* srx 2019.9.18
*/
5.2 [endif][規(guī)范]單行注釋镣屹，以//開始圃郊，后面留一個空格
// good
// thisis a comment
5.3 [endif][建議]多行注釋，從第二行起女蜈，每行以“空格+”開始持舆，使對齊
/*
* this is a commen
* @param {Array} nodeName節(jié)點名稱
*/
5.4 [endif][建議]不要將注釋內(nèi)容寫在注釋的開始符和結(jié)束符所在行
// bad
/* start
end */
5.5 [endif][建議]用@method聲明函數(shù)或類方法；函數(shù)有參數(shù)時伪窖，必須使用@param逸寓，當(dāng)函數(shù)有返回值時，必須使用@return
/*
*返回當(dāng)前集合中指定位置的元素
* @method/@class
* @param {Number} [i=0]位置下標(biāo)覆山。如果為負(fù)數(shù)竹伸，則從集合的最后一個元素開始倒數(shù)
* @return {Element}指定元素
*/
5.6 [endif] [建議] 必須使用 @event 標(biāo)識事件，事件參數(shù)的標(biāo)識與方法描述的參數(shù)標(biāo)識相同
/**
*值變更時觸發(fā)
*
* @event Select#change
* @param {Object} e e描述
* @param {string} e.before before描述
* @param {string} e.after after描述
*/
