20條學(xué)習(xí)javascript的編程規(guī)范的建議
1、使用js文件管理代碼
所有代碼盡量放在js文件中,然后再html文件中使用script引入,引入時(shí)注意放在body標(biāo)簽后面,并且不使用type或者language。
2、書寫縮進(jìn)
使用4個(gè)空白格縮進(jìn),注意不要使用tab鍵進(jìn)行縮進(jìn)。
3、斷句
注意行長(zhǎng),每行不超過80個(gè)字符,超過時(shí)要進(jìn)行適當(dāng)斷句,斷句應(yīng)該再操作符后面進(jìn)行,最理想的是在逗號(hào)(,)后面進(jìn)行斷句,斷句后下一行使用8格縮進(jìn)。
4、注解
一般使用單行注釋,塊注釋一般用于文檔。
5、變量聲明
所有變量使用之前先聲明,未聲明的變量會(huì)自動(dòng)作為全局變量。全文應(yīng)少使用全局變量。
最好把所有變量聲明用一個(gè)var實(shí)現(xiàn),并且每個(gè)聲明單獨(dú)放一行,并添加注釋說明,如果可以所有聲明變量按照字符順序列出,如下:
var currentEntry, //當(dāng)前選擇表項(xiàng)目
level; //縮進(jìn)級(jí)別
在函數(shù)體內(nèi)頂部定義所有變量,則var出現(xiàn)在函數(shù)體首行。
6、函數(shù)聲明
所有函數(shù)使用前應(yīng)該先聲明,并且在變量之后進(jìn)行-------有助于查看作用域。
函數(shù)名和括號(hào)直接不應(yīng)該有空格;右括號(hào)(和函數(shù)參數(shù)之間不應(yīng)該有空格;左括號(hào))和函數(shù)體括號(hào){之間有一個(gè)空格;函數(shù)體縮進(jìn)4個(gè)空格;函數(shù)體結(jié)束括號(hào)}和函數(shù)聲明關(guān)鍵字function首字符對(duì)齊。如下代碼:
function outer(c,d) {
var e = c * d;
function inner(a,b) {
return (e * a ) + b;
}
return inner(0,1);
}
函數(shù)和對(duì)象可以被放在任何允許放表達(dá)式的地方。
匿名函數(shù)關(guān)鍵字function和左括號(hào)(之間有一個(gè)空格。
盡量少使用全局函數(shù)。
對(duì)于立即執(zhí)行函數(shù),整個(gè)調(diào)用表達(dá)式應(yīng)放在一對(duì)個(gè)括號(hào)()里面,以明確變量的值是函數(shù)執(zhí)行結(jié)果而不是函數(shù)本身。如下代碼:
var result = (function () {
var key = "";
return {
get: function () {
return key;
},
set: function (key) {
key = key;
}
};
}());
7、命名
以字母、數(shù)字、下劃線命名,避免使用國(guó)際字符、美元符號(hào)$、反斜杠\。
不要使用下劃線作為名稱的首位字符。
大多數(shù)變量和函數(shù)使用小寫字母開頭命名。
構(gòu)造函數(shù)必須使用大寫字母開頭,在js中省略new不會(huì)報(bào)錯(cuò)(編譯或者運(yùn)行錯(cuò)誤),但最好不要省略。
全局變量應(yīng)用全部大寫命名(js中沒有宏和常量的概念)。
8、語(yǔ)句
簡(jiǎn)單語(yǔ)句
每行最多一條語(yǔ)句,并且使用分號(hào);結(jié)尾,注意以函數(shù)字面量和對(duì)象字面量賦值的語(yǔ)句也要使用分號(hào);。
js允許任何一個(gè)變量作為一條語(yǔ)句,但是在插入分號(hào)的時(shí)候可能會(huì)引起某些錯(cuò)誤,因此一般使用表達(dá)式的語(yǔ)句是賦值或者函數(shù)調(diào)用語(yǔ)句(這句英文原文我大概理解了,但是不知道怎么翻譯出來(lái)比較好)
復(fù)合語(yǔ)句(包含在一對(duì){}之間的語(yǔ)句)
內(nèi)部語(yǔ)句縮進(jìn)4個(gè)空格。
左括號(hào){應(yīng)該在開始語(yǔ)句行的末尾。
右括號(hào)應(yīng)該在最后單獨(dú)一行,并且與左括號(hào)所在行的首字符對(duì)齊。
當(dāng)語(yǔ)句在控制語(yǔ)句(例如for、if等)中時(shí),應(yīng)該使用花括號(hào){}將語(yǔ)句包圍起來(lái),即使只有一條語(yǔ)句,這樣可以保證在添加語(yǔ)句時(shí)不產(chǎn)生bug。
9、標(biāo)簽(這一部分的理解感覺不是很對(duì))
要使用label的語(yǔ)句是有選擇性的,只有下面幾種:while、for、do、switch。
10、返回語(yǔ)句
返回的值應(yīng)該用圓括號(hào)括起來(lái),且返回表達(dá)式應(yīng)該和return關(guān)鍵字在同一行(避免換行插入分號(hào))。
11、if語(yǔ)句
遵循如下格式:
if (condition) {
statements
}
if (condition) {
statements
} else {
statements
}
if (condition) {
statements
} else if (condition) {
statements
} else {
statements
}
12、for語(yǔ)句
遵循如下格式:
for (initiliazation; condition; update) {
statements
}
for (variable in object) {
if (filter) {
statements
}
}
第一種循環(huán)格式用于數(shù)組和可以判斷迭代次數(shù)的變量。
第二中用于對(duì)象遍歷
注:此處提到了在對(duì)象原型中添加的屬性是可以枚舉的,因此要使用hasOwnProperty方法進(jìn)行篩選,但是我用for in代碼測(cè)試的時(shí)候,沒有顯示,這里不知道問題出在了哪里。
13、while語(yǔ)句
遵循如下格式:
while (condition) {
statements
}
14、do-while語(yǔ)句
遵循如下格式:
do {
statements
} while (condition);
語(yǔ)句結(jié)尾要添加分號(hào)。
15、switch語(yǔ)句
遵循如下格式:
switch (expression) {
case expression:
statements
default:
statements
}
每一個(gè)case都要和switch對(duì)齊,避免過分縮進(jìn),只有case標(biāo)簽不是語(yǔ)句,應(yīng)該不應(yīng)該縮進(jìn)。
每個(gè)case語(yǔ)句(除了default)必須要以break或return或throw結(jié)尾。
16、try語(yǔ)句
遵循如下格式:
try {
statements
} catch (variable) {
statements
}
try {
statements
} catch (variable) {
statements
} finally {
statements
}
17、continue語(yǔ)句
避免使用continue語(yǔ)句。
18、with語(yǔ)句
不應(yīng)該使用with語(yǔ)句。
19、空格使用
通過設(shè)置空行來(lái)分割邏輯相關(guān)的代碼段,以增強(qiáng)代碼可讀性。
在以下情況下設(shè)置空格:
關(guān)鍵字之后跟隨左括號(hào)(要使用空格,例如:
while (true) {
不能在函數(shù)參數(shù)和左括號(hào)(之間使用空格。
除了點(diǎn)號(hào)(.)、左圓括號(hào)(()、方括號(hào)([)以外的二元運(yùn)算符都要使用一個(gè)空格來(lái)和操作數(shù)分割開。
除了typeof以外的一元操作符和他的操作數(shù)之間不應(yīng)有空格。
for語(yǔ)句控制塊()中每個(gè)分號(hào);之后有一個(gè)空格。
每個(gè)逗號(hào)后面要有一個(gè)空格。
20、額外建議
[]和{}
當(dāng)成員名稱是連續(xù)整數(shù)時(shí)使用數(shù)組,當(dāng)成員名稱是任意字符串和名稱時(shí)使用對(duì)象。
使用{}代替new object(),使用[]代替new Array()。
逗號(hào),操作符
避免使用逗號(hào),操作符(這一規(guī)定不適用于對(duì)象字面量、數(shù)組字面量定義和var聲明語(yǔ)句以及參數(shù)列表)
塊級(jí)作用域
除了符合語(yǔ)句不使用語(yǔ)句塊,js沒有塊級(jí)作用域,只有函數(shù)作用域。
賦值表達(dá)式
while和if語(yǔ)句中條件判斷部分避免使用賦值語(yǔ)句。
===和!==
判定相等使用全等符號(hào)(===和!==),避免使用強(qiáng)制類型相等轉(zhuǎn)換符號(hào)(==和!=)。
若一個(gè)數(shù)字加(或者-)一個(gè)帶有符號(hào)(+或者-)的數(shù)字,或者帶有(++或--)的數(shù)字,則需要將帶有符號(hào)或者(++或--)的數(shù)字括起來(lái)。
eval是惡魔(eval的濫用l)
eval有相同情況,不應(yīng)使用Function構(gòu)造函數(shù),不向setTimeout或setInterval函數(shù)傳遞字符串。
以上20條建議都是本人在項(xiàng)目中總結(jié)出來(lái)的,對(duì)于新手學(xué)習(xí)javascript應(yīng)該是小有幫助的,都是個(gè)人經(jīng)驗(yàn),難免有不全面的地方,如果發(fā)現(xiàn)了,還請(qǐng)告之,這里拋磚引玉,大家共同進(jìn)步。
相關(guān)文章
一個(gè)簡(jiǎn)單的JavaScript Map實(shí)例(分享)
下面小編就為大家?guī)?lái)一篇一個(gè)簡(jiǎn)單的JavaScript Map實(shí)例(分享)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-08-08JS實(shí)現(xiàn)CheckBox復(fù)選框全選、不選或全不選功能
CheckBox控件就是我們一般所說的復(fù)選框,通常用于某選項(xiàng)的打開或關(guān)閉,如一次性處理多個(gè)產(chǎn)品,或?qū)ξ恼碌膭h除、產(chǎn)品的下架等處理,一條一條的點(diǎn)顯然有一些麻煩,如果能每一行放一個(gè)checkbox,然后統(tǒng)一處理就好辦的多了,需要的朋友可以參考下2016-02-02js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例
下面小編就為大家分享一篇js 兩數(shù)組去除重復(fù)數(shù)值的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2017-12-12JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作實(shí)例分析【策略模式】
這篇文章主要介紹了JS表單驗(yàn)證插件之?dāng)?shù)據(jù)與邏輯分離操作,結(jié)合實(shí)例形式分析了JavaScript基于策略模式實(shí)現(xiàn)數(shù)據(jù)與邏輯分離的表單驗(yàn)證插件相關(guān)原理、操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-05-05js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能示例
這篇文章主要介紹了js簡(jiǎn)單實(shí)現(xiàn)自動(dòng)生成表格功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)數(shù)組元素遍歷與頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2020-06-06JavaScript實(shí)現(xiàn)控制打開文件另存為對(duì)話框的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)控制打開文件另存為對(duì)話框的方法,實(shí)例分析了javascript實(shí)現(xiàn)文件另存為的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04如何制作浮動(dòng)廣告 JavaScript制作浮動(dòng)廣告代碼
如果有一定的JavaScript基礎(chǔ),制作浮動(dòng)廣告還是比較容易的,利用閑暇時(shí)間簡(jiǎn)單制作了一個(gè),感興趣的朋友可以參考下哦2012-12-12