JS代碼自動排版工具是一個幫助程序源來規(guī)范代碼的實用工具,這樣子寫出的程序源代碼更加美觀,也方便之后查看。
我們都知道javascript使用function來管理自己的作用域,一個定義在函數(shù)內(nèi)的變量對外是不可見的,這有點類似于其它語言里的私有變量。對于javascript的執(zhí)行環(huán)境來說一般都有一個全局變量,在所有的函數(shù)外可以用this來指引,例如在瀏覽器端是window。但是當過多的在全局執(zhí)行環(huán)境下定義變量會造成各種苦逼的事情,比方說你定義的變量被其他人定義的同名變量覆蓋掉,或者你未來定義的變量把你過去定義的同名變量也覆蓋掉,而且過多的全局變量放在執(zhí)行對戰(zhàn)里還會造成內(nèi)存的浪費等等不優(yōu)化的情況發(fā)生。
js代碼編寫規(guī)范
1.嵌入規(guī)則
Javascript程序應該盡量放在.js的文件中,需要調(diào)用的時候在頁面中以<script src="filename.js">的形式包含進來。Javascript代碼若不是該頁面專用的,則應盡量避免在頁面中直接編寫Javascript代碼。
2.對齊縮進與換行
a) 縮進
在同一系統(tǒng)中應采用同一種縮進標準,本文提倡縮進大小為4個空格。各編譯器對Tab鍵所代替的空白大小定義不同。建議在設置開發(fā)環(huán)境時,將編輯器里的Tab快捷鍵重新設置成4個空格。多數(shù)編譯器提供了此功能。否則建議按4次空格來進行縮進。
b) 換行
在以下位置必須換行:
每個獨立語句結(jié)束后;
if、else、catch、finally、while等關鍵字前;
運算符處換行時,運算符必須在新行的行首。
對于因為單行長度超過限制時產(chǎn)生的換行,參考行長度中的策略進行分隔。
1).字符串過長截斷
每行代碼應小于80個字符。若代碼較長應盡量換行,換行應選擇在操作符和標點符號之后,最好是在分號“;”或逗號“,”之后。下一行代碼相對上一行縮進4個空格。這樣可以有效防止復制粘貼引起的代碼缺失等錯誤并增強可讀性。
按一定長度截斷字符串,并使用+運算符進行連接。分隔字符串盡量按語義進行,如不要在一個完整的名詞中間斷開。特別的,對于HTML片段的拼接,通過縮進,保持和HTML相同的結(jié)構(gòu):
也可使用數(shù)組來進行拼接,相對+運算更容易調(diào)整縮進:
2).三元運算符過長
三元運算符由3部分組成,因此其換行應當根據(jù)每個部分的長度不同,形成3種不同的情況:
不得出現(xiàn)以下情況:
3).過長的邏輯條件組合
當因為較復雜的邏輯條件組合導致80個字符無法滿足需求時,應當將每個條件獨立一行,邏輯運算符放置在行首進行分隔,或?qū)⒉糠诌壿嫲催壿嫿M合進行分隔。最終將右括號)與左大括號{放在獨立一行,保證與if內(nèi)語句塊能容易視覺辨識。如:
4).過長的JSON和數(shù)組
如果對象屬性較多導致每個屬性一行占用空間過大,可以按語義或邏輯進行分組的組織,如:
通過5個一組的分組,將每一行控制在合理的范圍內(nèi),并且按邏輯進行了切分。 對于項目較多的數(shù)組,也可以采用相同的方法,如:
- PC官方版
- 安卓官方手機版
- IOS官方手機版