1 前言
HTML 作為描述網(wǎng)頁(yè)結(jié)構(gòu)的超文本標(biāo)記語(yǔ)言恭朗，一直有著廣泛的應(yīng)用才菠。本文檔的目標(biāo)是使 HTML 代碼風(fēng)格保持一致驹吮，容易被理解和被維護(hù)针史。
2 代碼風(fēng)格
2.1 縮進(jìn)與換行
[強(qiáng)制] 使用 4 個(gè)空格做為一個(gè)縮進(jìn)層級(jí)，不允許使用 2 個(gè)空格 或 tab 字符碟狞。
解釋：
對(duì)于非 HTML 標(biāo)簽之間的縮進(jìn)啄枕，比如 script 或 style 標(biāo)簽內(nèi)容縮進(jìn)，與 script 或 style 標(biāo)簽的縮進(jìn)同級(jí)族沃。
示例：
<style>
/* 樣式內(nèi)容的第一級(jí)縮進(jìn)與所屬的 style 標(biāo)簽對(duì)齊 */
ul {
padding: 0;
}
</style>
<ul>
<li>first</li>
<li>second</li>
</ul>
<script>
// 腳本代碼的第一級(jí)縮進(jìn)與所屬的 script 標(biāo)簽對(duì)齊
require(['app'], function (app) {
app.init();
});
</script>
[建議] 每行不得超過(guò) 120 個(gè)字符频祝。
2.2 命名
[強(qiáng)制] class 必須單詞全字母小寫，單詞間以 - 分隔脆淹。
[強(qiáng)制] class 必須代表相應(yīng)模塊或部件的內(nèi)容或功能智润，不得以樣式信息進(jìn)行命名。
示例：
<!-- good -->
<div class="sidebar"></div>
<!-- bad -->
<div class="left"></div>
[強(qiáng)制] 元素 id 必須保證頁(yè)面唯一未辆。
解釋：
同一個(gè)頁(yè)面中窟绷，不同的元素包含相同的 id，不符合 id 的屬性含義咐柜。并且使用 document.getElementById 時(shí)可能導(dǎo)致難以追查的問(wèn)題兼蜈。
[建議] id 建議單詞全字母小寫攘残，單詞間以 - 分隔。同項(xiàng)目必須保持風(fēng)格一致为狸。
[建議] id歼郭、class 命名，在避免沖突并描述清楚的前提下盡可能短辐棒。
示例：
<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>
<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>
<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>
[強(qiáng)制] 禁止為了 hook 腳本病曾，創(chuàng)建無(wú)樣式信息的 class。
解釋：
不允許 class 只用于讓 JavaScript 選擇某些元素漾根，class 應(yīng)該具有明確的語(yǔ)義和樣式泰涂。否則容易導(dǎo)致 CSS class 泛濫。
使用 id辐怕、屬性選擇作為 hook 是更好的方式逼蒙。
[強(qiáng)制] 同一頁(yè)面，應(yīng)避免使用相同的 name 與 id寄疏。
解釋：
IE 瀏覽器會(huì)混淆元素的 id 和 name 屬性是牢， document.getElementById 可能獲得不期望的元素。所以在對(duì)元素的 id 與 name 屬性的命名需要非常小心陕截。
2.3 標(biāo)簽
[強(qiáng)制] 標(biāo)簽名必須使用小寫字母驳棱。
[強(qiáng)制] 對(duì)于無(wú)需自閉合的標(biāo)簽，不允許自閉合农曲。
解釋：
常見無(wú)需自閉合標(biāo)簽有 input蹈胡、br、img朋蔫、hr 等。
[強(qiáng)制] 對(duì) HTML5 中規(guī)定允許省略的閉合標(biāo)簽却汉，不允許省略閉合標(biāo)簽驯妄。
[強(qiáng)制] 標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。
解釋：
比如 div 不得置于 p 中合砂，tbody 必須置于 table 中青扔。
[建議] HTML 標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語(yǔ)義。
解釋：
下面是常見標(biāo)簽語(yǔ)義
- p - 段落
- h1,h2,h3,h4,h5,h6 - 層級(jí)標(biāo)題
- strong,em - 強(qiáng)調(diào)
- ins - 插入
- del - 刪除
- abbr - 縮寫
- code - 代碼標(biāo)識(shí)
- cite - 引述來(lái)源作品的標(biāo)題
- q - 引用
- blockquote - 一段或長(zhǎng)篇引用
- ul - 無(wú)序列表
- ol - 有序列表
- dl,dt,dd - 定義列表
[建議] 在 CSS 可以實(shí)現(xiàn)相同需求的情況下不得使用表格進(jìn)行布局翩伪。
解釋：
在兼容性允許的情況下應(yīng)盡量保持語(yǔ)義正確性微猖。對(duì)網(wǎng)格對(duì)齊和拉伸性有嚴(yán)格要求的場(chǎng)景允許例外，如多列復(fù)雜表單缘屹。
[建議] 標(biāo)簽的使用應(yīng)盡量簡(jiǎn)潔凛剥，減少不必要的標(biāo)簽导帝。
2.4 屬性
[強(qiáng)制] 屬性名必須使用小寫字母客们。
[強(qiáng)制] 屬性值必須用雙引號(hào)包圍臭笆。
解釋：
不允許使用單引號(hào)丝蹭，不允許不使用引號(hào)。
[建議] 布爾類型的屬性犁享，建議不添加屬性值余素。
示例：
<input type="text" disabled>
<input type="checkbox" value="1" checked>
[建議] 自定義屬性建議以 xxx- 為前綴，推薦使用 data-炊昆。
解釋：使用前綴有助于區(qū)分自定義屬性和標(biāo)準(zhǔn)定義的屬性桨吊。
3 通用
3.1 DOCTYPE
[強(qiáng)制] 使用 HTML5 的 doctype 來(lái)啟用標(biāo)準(zhǔn)模式，建議使用大寫的 DOCTYPE凤巨。
[建議] 啟用 IE Edge 模式视乐。
示例：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
[建議] 在 html 標(biāo)簽上設(shè)置正確的 lang 屬性。
解釋：
有助于提高頁(yè)面的可訪問(wèn)性磅甩，如：讓語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音炊林，令翻譯工具確定其翻譯語(yǔ)言等。
示例：<html lang="zh-CN">
3.2 編碼
[強(qiáng)制] 頁(yè)面必須使用精簡(jiǎn)形式卷要，明確指定字符編碼渣聚。指定字符編碼的 meta 必須是 head 的第一個(gè)直接子元素。
解釋：見 HTML5 Charset能用嗎 一文僧叉。
示例：
<html>
<head>
<meta charset="UTF-8">
......
</head>
<body>
......
</body>
</html>
[建議] HTML 文件使用無(wú) BOM 的 UTF-8 編碼奕枝。
解釋：UTF-8編碼具有更廣泛的適應(yīng)性。BOM` 在使用程序或工具處理文件時(shí)可能造成不必要的干擾瓶堕。
3.3 CSS 和 JavaScript 引入
[強(qiáng)制] 引入 CSS 時(shí)必須指明 rel="stylesheet"隘道。
[建議] 引入 CSS 和 JavaScript 時(shí)無(wú)須指明 type 屬性。
解釋：text/css 和 text/javascript 是 type 的默認(rèn)值郎笆。
[建議] 展現(xiàn)定義放置于外部 CSS 中谭梗，行為定義放置于外部 JavaScript 中。
解釋：結(jié)構(gòu)-樣式-行為的代碼分離宛蚓，對(duì)于提高代碼的可閱讀性和維護(hù)性都有好處激捏。
[建議] 在 head 中引入頁(yè)面需要的所有 CSS 資源。
解釋：在頁(yè)面渲染的過(guò)程中凄吏，新的CSS可能導(dǎo)致元素的樣式重新計(jì)算和繪制远舅，頁(yè)面閃爍。
[建議] JavaScript 應(yīng)當(dāng)放在頁(yè)面末尾痕钢，或采用異步加載图柏。
解釋：將 script 放在頁(yè)面中間將阻斷頁(yè)面的渲染。
4 head
4.1 title
[強(qiáng)制] 頁(yè)面必須包含 title 標(biāo)簽聲明標(biāo)題任连。
[強(qiáng)制] title 必須作為 head 的直接子元素蚤吹，并緊隨 charset 聲明之后。
解釋：title 中如果包含 ASCII 之外的字符随抠，瀏覽器需要知道字符編碼類型才能進(jìn)行解碼距辆，否則可能導(dǎo)致亂碼余佃。
4.2 favicon
[強(qiáng)制] 保證 favicon 可訪問(wèn)。
解釋：在未指定 favicon 時(shí)跨算，大多數(shù)瀏覽器會(huì)請(qǐng)求 Web Server 根目錄下的 favicon.ico 爆土。為了保證 favicon 可訪問(wèn)，避免 404诸蚕，必須遵循以下兩種方法之一：
- 在 Web Server 根目錄放置
favicon.ico文件步势。 - 使用
link指定 favicon。
示例：
<link rel="shortcut icon" href="path/to/favicon.ico">
4.3 viewport
[建議] 若頁(yè)面欲對(duì)移動(dòng)設(shè)備友好背犯，需指定頁(yè)面的 viewport坏瘩。
解釋：viewport meta tag 可以設(shè)置可視區(qū)域的寬度和初始縮放大小，避免在移動(dòng)設(shè)備上出現(xiàn)頁(yè)面展示不正常漠魏。
比如倔矾，在頁(yè)面寬度小于 980px 時(shí)，若需 iOS 設(shè)備友好柱锹，應(yīng)當(dāng)設(shè)置 viewport 的 width 值來(lái)適應(yīng)你的頁(yè)面寬度哪自。同時(shí)因?yàn)椴煌苿?dòng)設(shè)備分辨率不同，在設(shè)置時(shí)禁熏，應(yīng)當(dāng)使用 device-width 和 device-height 變量壤巷。
另外，為了使 viewport 正常工作瞧毙，在頁(yè)面內(nèi)容樣式布局設(shè)計(jì)上也要做相應(yīng)調(diào)整胧华，如避免絕對(duì)定位等。
5 圖片
[強(qiáng)制] 禁止 img 的 src 取值為空宙彪。延遲加載的圖片也要增加默認(rèn)的 src矩动。
解釋：src 取值為空，會(huì)導(dǎo)致部分瀏覽器重新加載一次當(dāng)前頁(yè)面释漆，參考：https://developer.yahoo.com/performance/rules.html#emptysrc
[建議] 避免為 img 添加不必要的 title 屬性悲没。
解釋：多余的 title 影響看圖體驗(yàn)，并且增加了頁(yè)面尺寸灵汪。
[建議] 為重要圖片添加 alt 屬性。
解釋：可以提高圖片加載失敗時(shí)的用戶體驗(yàn)柑潦。
[建議] 添加 width 和 height 屬性享言，以避免頁(yè)面抖動(dòng)。
[建議] 有下載需求的圖片采用 img 標(biāo)簽實(shí)現(xiàn)渗鬼，無(wú)下載需求的圖片采用 CSS 背景圖實(shí)現(xiàn)览露。
解釋：
- 產(chǎn)品 logo、用戶頭像譬胎、用戶產(chǎn)生的圖片等有潛在下載需求的圖片差牛，以
img形式實(shí)現(xiàn)命锄，· - 無(wú)下載需求的圖片，比如：icon偏化、背景脐恩、代碼使用的圖片等，盡可能采用 CSS 背景圖實(shí)現(xiàn)侦讨。
6 表單
6.1 控件標(biāo)題
[強(qiáng)制] 有文本標(biāo)題的控件必須使用 label 標(biāo)簽將其與其標(biāo)題相關(guān)聯(lián)驶冒。
有兩種方式：
- 將控件置于
label內(nèi)。 -
label的for屬性指向控件的id韵卤。
推薦使用第一種骗污，減少不必要的 id。如果 DOM 結(jié)構(gòu)不允許直接嵌套沈条，則應(yīng)使用第二種需忿。
6.2 按鈕
[強(qiáng)制] 使用 button 元素時(shí)必須指明 type 屬性值。
解釋：button 元素的默認(rèn) type 為 submit蜡歹，如果被置于 form 元素中屋厘，點(diǎn)擊后將導(dǎo)致表單提交。為顯示區(qū)分其作用方便理解季稳，必須給出 type 屬性擅这。
[建議] 盡量不要使用按鈕類元素的 name 屬性。
解釋：由于瀏覽器兼容性問(wèn)題景鼠，使用按鈕的 name 屬性會(huì)帶來(lái)許多難以發(fā)現(xiàn)的問(wèn)題仲翎。具體情況可參考此文。
7 模板中的 HTML
[建議] 模板代碼的縮進(jìn)優(yōu)先保證 HTML 代碼的縮進(jìn)規(guī)則铛漓。
示例：
<!-- good -->
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}<li>
{/foreach}
</ul>
</div>
{/if}
<!-- bad -->
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}<li>
{/foreach}
</ul>
</div>
{/if}
[建議] 模板代碼應(yīng)以保證 HTML 單個(gè)標(biāo)簽語(yǔ)法的正確性為基本原則溯香。
示例：
<!-- good -->
<li class="{if $item.type_id == $current_type}focus{/if}">{ $item.type_name }</li>
<!-- bad -->
<li {if $item.type_id == $current_type} class="focus"{/if}>{ $item.type_name }</li>
[建議] 在循環(huán)處理模板數(shù)據(jù)構(gòu)造表格時(shí)，若要求每行輸出固定的個(gè)數(shù)浓恶，建議先將數(shù)據(jù)分組玫坛，之后再循環(huán)輸出。
示例：
<!-- good -->
<table>
{foreach $item_list as $item_group}
<tr>
{foreach $item_group as $item}
<td>{ $item.name }</td>
{/foreach}
<tr>
{/foreach}
</table>
<!-- bad -->
<table>
<tr>
{foreach $item_list as $item}
<td>{ $item.name }</td>
{if $item@iteration is div by 5}
</tr>
<tr>
{/if}
{/foreach}
</tr>
</table>
8 CSS命名及書寫規(guī)范
CSS書寫順序
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS縮寫屬性
去掉小數(shù)點(diǎn)前的“0”
16進(jìn)制顏色代碼縮寫
簡(jiǎn)寫類名包晰，但前提是要讓人看懂你的命名才能簡(jiǎn)寫
連字符CSS選擇器命名規(guī)范
1.長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名湿镀。
2.不建議使用“_”下劃線來(lái)命名CSS選擇器，為什么呢?
輸入的時(shí)候少按一個(gè)shift鍵;
瀏覽器兼容問(wèn)題 (比如使用_tips的選擇器命名伐憾，在IE6是無(wú)效的);
能良好區(qū)分JavaScript變量命名JS變量命名是用“_”
不要隨意使用Id
id在JS是唯一的勉痴，不能多次使用，而使用class類選擇器卻可以重復(fù)使用树肃，另外id的優(yōu)先級(jí)優(yōu)先與class蒸矛，所以id應(yīng)該按需使用
為選擇器添加狀態(tài)前綴
有時(shí)候可以給選擇器添加一個(gè)表示狀態(tài)的前綴，讓語(yǔ)義更明了，比如下圖是添加了“.is-”前綴
減少選擇器層級(jí)雏掠，選擇器的嵌套最好不要超過(guò)三層斩祭，合理使用命名空間，避免命名沖突
.header .logo .text{} 可以優(yōu)化成 .haeder .logo-text{}
盡量不使用 !important 聲明
當(dāng)需要強(qiáng)制指定樣式且不允許任何場(chǎng)景覆蓋時(shí)乡话，通過(guò)標(biāo)簽內(nèi)聯(lián)和 !important 定義樣式摧玫。
利用CSS繼承減少代碼量
常見的可以繼承的屬性比如： color，font-size蚊伞，font-family等等
不可繼承的比如： position席赂，display，float等
不濫用浮動(dòng)
雖然浮動(dòng)不可避免时迫，但不可否認(rèn)很多css bug是由于浮動(dòng)而引起颅停。CSS Lint一旦檢測(cè)出樣式文件中有超過(guò)10次的浮動(dòng)便會(huì)提示警告。
js前端編碼規(guī)范
這是一份旨在增強(qiáng)團(tuán)隊(duì)的開發(fā)協(xié)作掠拳，提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范癞揉，其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個(gè)部分。我們知道溺欧，當(dāng)一個(gè)團(tuán)隊(duì)開始指定并實(shí)行編碼規(guī)范的話喊熟，錯(cuò)誤就會(huì)變得更加顯而易見。如果一段特定的代碼不符合規(guī)范的話姐刁，它有可能只是代碼風(fēng)格錯(cuò)誤芥牌，而也有可能會(huì)是 bug。早期指定規(guī)范就使得代碼審核得以更好的開展聂使，并且可以更精確的地定位到錯(cuò)誤壁拉。只要開發(fā)者們能夠保證源代碼源文件都嚴(yán)格遵循規(guī)范，那接下去所使用的混淆柏靶、壓縮和編譯工具則可投其所好不盡相同弃理。
一、JavaScript 相關(guān)規(guī)范
命名
(1) 變量, 使用 Camel 命名法(駝峰命名法)屎蜓。
// 推薦的命名
var isHotel,
isHotelBeijing,
// 不推薦的命名
var is_Hotel,
ishotelbeijing,
(2) 私有屬性痘昌、變量和方法以下劃線 _ 開頭。
var privateProperty
(3) 常量, 使用全部字母大寫炬转，單詞間下劃線()分隔的命名方式,通常用于ajax請(qǐng)求url辆苔，和一些不會(huì)改變的數(shù)據(jù)
var PLACE_TYPE = 'hotel';
(4) 函數(shù)，使用 Camel 命名法, 函數(shù)的參數(shù), 使用 Camel 命名法扼劈。
(5) 類驻啤，使用 Pascal 命名法,即采用駱駝峰的命名且首字母大寫; 類的 方法 / 屬性, 使用 Camel 命名法
如：
function TextNode(value, engine) {
this.value = value;
this.engine = engine;
}
命名語(yǔ)法
(1) 類名，使用名詞测僵。
function Engine(options) {}
(2) 函數(shù)名街佑，使用動(dòng)賓短語(yǔ)。
function getStyle(element) {}
(3) boolean 類型的變量使用 is 或 has 開頭捍靠。
var isReady = false;
var hasMoreCommands = false;
(4) Promise 對(duì)象用動(dòng)賓短語(yǔ)的進(jìn)行時(shí)表達(dá)沐旨。
var loadingData = ajax.get('url');
loadingData.then(callback);
注釋
原則：
a) As short as possible（如無(wú)必要，勿增注釋）：盡量提高代碼本身的清晰性榨婆、可讀性磁携。
b) As long as necessary（如有必要，盡量詳盡）：合理的注釋良风、空行排版等谊迄，可以讓代碼更易閱讀、更具美感烟央。
(1) 單行注釋：必須獨(dú)占一行统诺。// 后跟一個(gè)空格，縮進(jìn)與下一行被注釋說(shuō)明的代碼一致疑俭。
(2) 多行注釋：避免使用 /.../ 這樣的多行注釋粮呢。有多行注釋內(nèi)容時(shí)，使用多個(gè)單行注釋钞艇。
(3) 函數(shù)/方法注釋
函數(shù)/方法注釋必須包含函數(shù)說(shuō)明啄寡，有參數(shù)和返回值時(shí)必須使用注釋標(biāo)識(shí)。哩照；
參數(shù)和返回值注釋必須包含類型信息和說(shuō)明挺物；
當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問(wèn)時(shí)飘弧，可以使用 @inner 標(biāo)識(shí)识藤；
1. /**
2. * 函數(shù)描述
3. *
4. * @param {string} p1 參數(shù)1的說(shuō)明
5. * @param {string} p2 參數(shù)2的說(shuō)明，比較長(zhǎng)
6. * 那就換行了.
7. * @param {number=} p3 參數(shù)3的說(shuō)明（可選）
8. * @return {Object} 返回值描述
9. */
10. function foo(p1, p2, p3) {
11. var p3 = p3 || 10;
12. return {
13. p1: p1,
14. p2: p2,
15. p3: p3
16. };
17. }
(4) 文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個(gè)文件中包含哪些東西眯牧。 應(yīng)該提供文件的大體內(nèi)容, 它的作者, 依賴關(guān)系和兼容性信息蹋岩。如下:
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author user@meizu.com (Firstname Lastname)
* Copyright 2009 Meizu Inc. All Rights Reserved.
*/
變量聲明：
總是使用 var（如果用ES6 則let ） 來(lái)聲明變量。如不指定 var学少，變量將被隱式地聲明為全局變量剪个，這將對(duì)變量難以控制
在同一個(gè)函數(shù)內(nèi)部，局部變量的聲明必須置于頂端版确。塊內(nèi)函數(shù)必須用局部變量聲明扣囊，切勿在循環(huán)中創(chuàng)建函數(shù)
// 錯(cuò)誤的寫法
var call = function(name) {
if (name == "hotel") {
function foo() {
console.log("hotel foo");
}
}
foo && foo();
}
// 推薦的寫法
var call = function(name) {
var foo;
if (name == "hotel") {
foo = function() {
console.log("hotel foo");
}
}
foo && foo();
}
建議與禁止
(1) 分號(hào)
總是使用分號(hào)，因?yàn)殡[式的代碼嵌套會(huì)引發(fā)難以察覺的問(wèn)題绒疗。當(dāng)然我們更要從根本上來(lái)杜絕這些問(wèn)題 侵歇，給自己的表達(dá)式加上分號(hào)吧
(2) （禁止）使用eval
eval() 不但混淆語(yǔ)境還很危險(xiǎn)，總會(huì)有比這更好吓蘑、更清晰惕虑、更安全的另一種方案來(lái)寫你的代碼坟冲，因此盡量不要使用 evil 函數(shù)；eg:采取$.parseJSON
(3) 除了三目運(yùn)算溃蔫，if,else等（禁止）簡(jiǎn)寫
(4) (推薦)使用局部變量緩存反復(fù)查找的對(duì)象(包括但不限于全局變量健提、dom查詢結(jié)果、作用域鏈較深的對(duì)象)
// 緩存對(duì)象
var getComment = function() {
var dom = $("#common-container"), // 緩存dom
appendTo = $.appendTo, // 緩存全局變量
data = this.json.data; // 緩存作用域鏈較深的對(duì)象
}
(5) 當(dāng)需要緩存this時(shí)必須推薦使用self變量進(jìn)行緩存
// 緩存this
function Row(name) {
var self = this;
self.name = name;
$(".row").click(function() {
self.getName();
});
}
self是一個(gè)保留字伟叛，不過(guò)用它也沒關(guān)系私痹。在這里，看個(gè)人愛好吧统刮，可以用_this, that, me等這些詞紊遵，都行，但是團(tuán)隊(duì)開發(fā)的時(shí)候統(tǒng)一下比較好,建議大家用self;
(6) （不推薦）超長(zhǎng)函數(shù), 當(dāng)函數(shù)超過(guò)100行侥蒙，就要想想是否能將函數(shù)拆為兩個(gè)或多個(gè)函數(shù)
(7) 不要在 Array 上使用 for-in 循環(huán)
for-in 循環(huán)只用于 object/map/hash 的遍歷, 對(duì) Array 用 for-in 循環(huán)有時(shí)會(huì)出錯(cuò). 因?yàn)樗⒉皇菑?0 到 length - 1 進(jìn)行遍歷, 而是所有出現(xiàn)在對(duì)象及其原型鏈的鍵值暗膜。
// Not recommended
function printArray(arr) {
for (var key in arr) {
print(arr[key]);
}
}
printArray([0,1,2,3]); // This works.
var a = new Array(10);
printArray(a); // This is wrong.
a = document.getElementsByTagName('*');
printArray(a); // This is wrong.
a = [0,1,2,3];
a.buhu = 'wine';
printArray(a); // This is wrong again.
a = new Array;
a[3] = 3;
printArray(a); // This is wrong again.
//推薦
function printArray(arr) {
var l = arr.length;
for (var i = 0; i < l; i++) {
print(arr[i]);
}
}
(8) 操作符始終寫在前一行, 以免分號(hào)的隱式插入產(chǎn)生預(yù)想不到的問(wèn)題。
var x = a ? b : c;
var y = a ?
longButSimpleOperandB : longButSimpleOperandC;
var z = a ?
moreComplicatedB :
moreComplicatedC;
. 操作符也是如此：
var x = foo.bar().
doSomething().
doSomethingElse();
(9) 條件(三元)操作符 (?:)
三元操作符用于替代 if 條件判斷語(yǔ)句鞭衩。
// Not recommended
if (val != 0) {
return foo();
} else {
return bar();
}
// Recommended
return val ? foo() : bar();
(10) && 和 ||
二元布爾操作符是可短路的, 只有在必要時(shí)才會(huì)計(jì)算到最后一項(xiàng)桦山。
// Not recommended
function foo(opt_win) {
var win;
if (opt_win) {
win = opt_win;
} else {
win = window;
}
// ...
}
if (node) {
if (node.kids) {
if (node.kids[index]) {
foo(node.kids[index]);
}
}
}
// Recommended
function foo(opt_win) {
var win = opt_win || window;
// ...
}
var kid = node && node.kids && node.kids[index];
if (kid) {
foo(kid);
}
(11) 修改內(nèi)建對(duì)象的原型鏈
修改內(nèi)建的諸如 Object.prototype 和 Array.prototype 是被嚴(yán)厲禁止的。修改其它的內(nèi)建對(duì)象比如 Function.prototype醋旦，雖危害沒那么大恒水，但始終還是會(huì)導(dǎo)致在開發(fā)過(guò)程中難以 debug 的問(wèn)題，應(yīng)當(dāng)也要避免饲齐。
(12) 圓括號(hào)
一般在語(yǔ)法和語(yǔ)義上真正需要時(shí)才謹(jǐn)慎地使用圓括號(hào)钉凌。不要用在一元操作符上，例如 delete, typeof 和 void捂人，或在關(guān)鍵字之后御雕，例如 return, throw, case, new 等。
(13) 字符串
統(tǒng)一使用單引號(hào)(‘)滥搭，不使用雙引號(hào)(“)酸纲。這在創(chuàng)建 HTML 字符串非常有好處：
var msg = 'This is some HTML <div class="makes-sense"></div>';
(14) 自定義 toString() 方法
你可以通過(guò)自定義 toString() 來(lái)控制對(duì)象字符串化。這很好瑟匆，但你必須保證你的方法總是成功并不會(huì)有其它副作用闽坡。如果你的方法達(dá)不到這樣的標(biāo)準(zhǔn)，那將會(huì)引發(fā)嚴(yán)重的問(wèn)題愁溜。如果 toString() 調(diào)用了一個(gè)方法疾嗅，這個(gè)方法做了一個(gè)斷言[3] ，當(dāng)斷言失敗冕象，它可能會(huì)輸出它所在對(duì)象的名稱代承，當(dāng)然對(duì)象也需要調(diào)用 toString()
(15) 異常
基本上你無(wú)法避免出現(xiàn)異常，特別是在做大型開發(fā)時(shí)（使用應(yīng)用開發(fā)框架等等）渐扮。在沒有自定義異常的情況下论悴，從有返回值的函數(shù)中返回錯(cuò)誤信息一定非常的棘手掖棉，更別提多不優(yōu)雅了。不好的解決方案包括了傳第一個(gè)引用類型來(lái)接納錯(cuò)誤信息膀估，或總是返回一個(gè)對(duì)象列表啊片，其中包含著可能的錯(cuò)誤對(duì)象。以上方式基本上是比較簡(jiǎn)陋的異常處理方式玖像。適時(shí)可做自定義異常處理。在復(fù)雜的環(huán)境中齐饮，你可以考慮拋出對(duì)象而不僅僅是字符串（默認(rèn)的拋出值）捐寥。
if(name === undefined) {
throw {
name: 'System Error',
message: 'A name should always be specified!'
}
}
