## 編風(fēng)格程
作為前端開發(fā)人員,我相信每一個(gè)人都或多或少的用到原生的JavaScript,也正是因?yàn)橛玫娜硕?,?dǎo)致編碼風(fēng)格也是多種多樣的,而不規(guī)范的編碼風(fēng)格,不僅會(huì)導(dǎo)致一些奇怪的問題出現(xiàn),而且不利于后期維護(hù)和提高執(zhí)行效率。
基于本人也在開發(fā)中因?yàn)橐?guī)范而出現(xiàn)各種問題,我特意的整理了一下JavaScript編碼規(guī)范(并不強(qiáng)制,只是推薦)。
**1、變量**
聲明變量必須加上`var`關(guān)鍵字,而且每個(gè)`var`只聲明一個(gè)變量,增加可讀寫。
推薦:
```
var name = 'TG';
var sex = 'man';
```
不推薦:
```
var name = 'TG', sex = 'man';
```
**2、常量**
常量的命名方式:用大寫字符,并用下劃線分隔。盡量不要使用const關(guān)鍵詞。
```
var MY_NAME = 'TG';
```
原因:IE并不支持const
**3、行尾分號(hào)**
總是使用分號(hào),對(duì)于可用可不用的行尾分號(hào),使用分號(hào)。
**4、嵌套函數(shù)**
可以使用,可以減少重復(fù)代碼,隱藏幫助函數(shù)等好處
**5、塊內(nèi)函數(shù)聲明**
不要在塊內(nèi)聲明一個(gè)函數(shù)
不推薦:
```
if(a){
function foo(){}
}
```
推薦:
```
if(a){
var foo = function(){}
}
```
**6、異常處理**
可以使用
```
try{}catch(e){}
throw exception
```
**7、eval()**
```
只用于解析序列化串
```
原因:eval()會(huì)讓程序執(zhí)行的比較混亂。
**8、with(){}**
盡量少用。
**9、縮進(jìn)**
用4個(gè)空格作為一縮進(jìn),而不是使用tab
原因:因?yàn)樵诓煌瑸g覽器上,tab的長度不一。
**10、字符串過長截取**
每行代碼不超過80個(gè)字符。如代碼過長,可使用+運(yùn)算符拼接。
原因:過長會(huì)導(dǎo)致需要拖動(dòng)橫向滾動(dòng)條才看得到后面的代碼,降低開發(fā)效率,而且在復(fù)制黏貼時(shí)有可能錯(cuò)漏。
**11、大括號(hào)**
區(qū)塊起首的大括號(hào),不要另起一行
推薦:
```
if (true) {
}
```
不推薦:
```
if (true)
{
}
```
**12、構(gòu)造函數(shù)**
對(duì)于構(gòu)造函數(shù),命名采用首字母大寫,其他函數(shù)一律小寫。
原因:可讀性,區(qū)分構(gòu)造函數(shù)和普通函數(shù)
**13、注釋**
合理的加上注釋,有利于后期維護(hù),提高可讀性。
**14、{}和[]**
使用{}代替new Object(),使用[]代替new Array()
**15、單引號(hào)(')**
盡量使用單引號(hào)('),只在JSON文件中使用雙引號(hào)。
**16、變量和函數(shù)聲明**
變量名和函數(shù)名在JavaScript機(jī)制下會(huì)發(fā)生聲明提升(也就是會(huì)提前到頂部聲明),所以建議變量和函數(shù)應(yīng)該在使用前聲明。
**17、使用===和!==代替==和!=**
在JavaScript中,比較運(yùn)算符進(jìn)行計(jì)算時(shí)會(huì)進(jìn)行強(qiáng)制轉(zhuǎn)換,==和!=會(huì)產(chǎn)生一些意想不到的結(jié)果,所以應(yīng)該用“嚴(yán)格相等”===。
**18、換行**
在語句塊和下一個(gè)語句之間留一個(gè)空行,提高可讀性。
**19、命名**
構(gòu)造函數(shù)或類名使用駝峰式命名
**20、嵌入規(guī)則**
JavaScript程序應(yīng)該盡量放在.js的文件中。
**21、命名規(guī)則**
JavaScript 中的標(biāo)識(shí)符的命名規(guī)則:
以字母、下劃線'_'或美元符號(hào)'$'開頭
允許名稱中包含字母,數(shù)字,下劃線'_'和美元符號(hào)'$'
區(qū)分大小寫
變量、屬性和函數(shù)名應(yīng)該用駝峰式:
```
var isLogin = false;
```
私有函數(shù)用下劃線開頭:
```
function getFirstName(){
function _getName(){}
}
```
構(gòu)造函數(shù)和類名應(yīng)該首字母大寫。
對(duì)象中私有變量和函數(shù)以下劃線開頭。
**22、語句**
對(duì)于復(fù)合語句,if, for, while, do, switch, try … catch 等代碼體,函數(shù)定義的函數(shù)體,對(duì)象的定義等都需要放在花括號(hào)'{}'里面。
'{' 應(yīng)在行末,標(biāo)志代碼塊的開始。
'}' 應(yīng)在一行開頭,標(biāo)志代碼塊的結(jié)束,同時(shí)需要和'{'所在行的開始對(duì)齊,以表明一個(gè)完整的復(fù)合語句段。這樣可以極大地提高代碼的可閱讀性,控制邏輯能清晰地表現(xiàn)出來。
被包含的代碼段應(yīng)該再縮進(jìn) 4 個(gè)空格。
即使被包含的代碼段只有一句,也應(yīng)該用花括號(hào)'{}'包含。盡管不用花括號(hào)代碼也不會(huì)錯(cuò),但如若需要增加語句的話,則較容易因花括號(hào)遺漏而引起的編譯錯(cuò)誤或邏輯錯(cuò)誤。
return語句在使用時(shí)也需注意,如果用表達(dá)式的執(zhí)行作為返回值,應(yīng)該把表達(dá)式和 return 放在同一行中,以免換行符被誤解析為語句的結(jié)束而引起返回錯(cuò)誤。return 關(guān)鍵字后若沒有返回表達(dá)式,則返回 undefined。構(gòu)造器的默認(rèn)返回值為 this。
return a + b;
**23、方法鏈(調(diào)用鏈)**
如果使用方法鏈,應(yīng)該每行只調(diào)用一個(gè)方法:
Animal
.getName()
.getFirstName()
**24、使用三元運(yùn)算符**
三元運(yùn)算符不應(yīng)該用在一行,應(yīng)該分割成多行替代。
推薦:
```
var foo = (a === b)
? 1
: 2;
```
不推薦:
```
var foo = (a === b) ?1 : 2;
```
**25、逗號(hào)**
對(duì)于數(shù)組和對(duì)象不要使用多余的“,”
不推薦:
```
var arr = [1,2,]
var person = {
name: 'TG'
};
```
原因:IE不兼容
**26、for-in**
對(duì)于數(shù)組,盡量避免使用for-in
- 前言
- JavaScript簡(jiǎn)介
- 基本概念
- 語法
- 數(shù)據(jù)類型
- 運(yùn)算符
- 表達(dá)式
- 語句
- 對(duì)象
- 數(shù)組
- 函數(shù)
- 引用類型(對(duì)象)
- Object對(duì)象
- Array對(duì)象
- Date對(duì)象
- RegExp對(duì)象
- 基本包裝類型(Boolean、Number、String)
- 單體內(nèi)置對(duì)象(Global、Math)
- console對(duì)象
- DOM
- DOM-屬性和CSS
- BOM
- Event 事件
- 正則表達(dá)式
- JSON
- AJAX
- 表單和富文本編輯器
- 表單
- 富文本編輯器
- canvas
- 離線應(yīng)用
- 客戶端存儲(chǔ)(Cookie、Storage、IndexedDB)
- HTML5 API
- Video/Audio
- Geolocation API
- requestAnimationFrame
- File API
- FullScreen API
- IndexedDB
- 檢測(cè)設(shè)備方向
- Blob
- vibrate
- Luminosity API
- WebRTC
- Page Visibility API
- Performance API
- Web Speech
- Notification
- 面向?qū)ο蟮某绦蛟O(shè)計(jì)
- 概述
- this關(guān)鍵字
- 原型鏈
- 作用域
- 常用API合集
- SVG
- 錯(cuò)誤處理機(jī)制
- JavaScript開發(fā)技巧合集
- 編程風(fēng)格
- 垃圾回收機(jī)制
