Web前端開發(fā)規(guī)范

代碼規(guī)范

DOCTYPE 聲明(視具體情況而定喂饥，一般采用HTML5的聲明)

HTML文件必須加上 DOCTYPE 聲明妄讯，并統(tǒng)一使用 HTML5 的文檔聲明：
<!DOCTYPE html>

頁面語言LANG

推薦使用屬性值 cmn-Hans-CN（簡體, 中國大陸），但是考慮瀏覽器和操作系統(tǒng)的兼容性鸟顺，目前仍然使用 zh-CN 屬性值
<html lang="zh-CN">
其他地區(qū)語言參考：

zh-SG 中文 (簡體, 新加坡)   對應 cmn-Hans-SG 普通話 (簡體, 新加坡)
zh-HK 中文 (繁體, 香港)     對應 cmn-Hant-HK 普通話 (繁體, 香港)
zh-MO 中文 (繁體, 澳門)     對應 cmn-Hant-MO 普通話 (繁體, 澳門)
zh-TW 中文 (繁體, 臺灣)     對應 cmn-Hant-TW 普通話 (繁體, 臺灣)

CHARSET

一般情況下統(tǒng)一使用 “UTF-8” 編碼
<meta charset="UTF-8">
由于歷史原因惦蚊，有些業(yè)務可能會使用 “GBK” 編碼
<meta charset="GBK">

元素及標簽閉合

HTML元素共有以下5種：

空元素：area、base讯嫂、br养筒、col、command端姚、embed晕粪、hr、img渐裸、input巫湘、keygen装悲、link、meta尚氛、param诀诊、source、track阅嘶、wbr
原始文本元素：script属瓣、style
RCDATA元素：textarea、title
外來元素：來自MathML命名空間和SVG命名空間的元素讯柔。
常規(guī)元素：其他HTML允許的元素都稱為常規(guī)元素抡蛙。

原始文本元素、RCDATA元素以及常規(guī)元素都有一個開始標簽來表示開始魂迄，一個結(jié)束標簽來表示結(jié)束粗截。
某些元素的開始和結(jié)束標簽是可以省略的，如果規(guī)定標簽不能被省略捣炬，那么就絕對不能省略它熊昌。
空元素只有一個開始標簽，且不能為空元素設置結(jié)束標簽湿酸。
外來元素可以有一個開始標簽和配對的結(jié)束標簽婿屹，或者只有一個自閉合的開始標簽，且后者情況下該元素不能有結(jié)束標簽推溃。
推薦：

<div>
    <h1>我是h1標題</h1>
    <p>我是一段文字选泻，我有始有終，瀏覽器能正確解析</p>
</div>
<br>

不推薦：

<div>
    <h1>我是h1標題</h1>
    <p>我是一段文字美莫，我有始無終，瀏覽器亦能正確解析
</div>
<br/>

書寫風格

HTML標簽名梯捕、類名厢呵、標簽屬性和大部分屬性值統(tǒng)一用小寫
推薦：

<div class="demo"></div>

不推薦：

<div class="DEMO"></div>
<DIV CLASS="DEMO"></DIV>

HTML文本、CDATA傀顾、JavaScript襟铭、meta標簽某些屬性等內(nèi)容可大小寫混合

<!-- 優(yōu)先使用 IE 最新版本和 Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- HTML文本內(nèi)容 -->
<h1>I AM WHAT I AM </h1>
<!-- JavaScript 內(nèi)容 -->
<script type="text/javascript">
    var demoName = 'demoName';
    ...
</script>   
<!-- CDATA 內(nèi)容 -->
<script type="text/javascript"><![CDATA[
...
]]></script>

類型屬性

不需要為 CSS、JS 指定類型屬性短曾，HTML5 中默認已包含
推薦：

<link rel="stylesheet" href="" >
<script src=""></script>

不推薦：

<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>

元素屬性

元素屬性值使用雙引號語法
元素屬性值可以寫上的都寫上
推薦：

<input type="text">
<input type="radio" name="name" checked="checked" >

不推薦：

<input type=text>   
<input type='text'>
<input type="radio" name="name" checked >

特殊字符的應用

文本可以和字符引用混合出現(xiàn)寒砖。這種方法可以用來轉(zhuǎn)義在文本中不能合法出現(xiàn)的字符。
推薦：

<a href="#">more&gt;&gt;</a>

不推薦：

<a href="#">more>></a>

更多關(guān)于符號引用：#Character references

代碼縮進

統(tǒng)一使用四個空格進行代碼縮進嫉拐，使得各編輯器表現(xiàn)一致（各編輯器有相關(guān)配置）

<div class="jdc">
    <a href="#"></a>
</div>

純數(shù)字輸入

使用 type="tel" 而不是 type="number"

<input type="tel">

代碼嵌套

元素嵌套規(guī)范哩都，每個塊狀元素獨立一行，內(nèi)聯(lián)元素可選
推薦：

<div>
    <h1></h1>
    <p></p>
</div>  
<p><span></span><span></span></p>

不推薦：

<div>
    <h1></h1><p></p>
</div>  
<p> 
    <span></span>
    <span></span>
</p>

段落元素與標題元素只能嵌套內(nèi)聯(lián)元素
推薦：

<h1><span></span></h1>
<p><span></span><span></span></p>

不推薦：

<h1><div></div></h1>
<p><div></div><div></div></p>

注釋規(guī)范

標準寫法：

<!--Comment Text-->

單行注釋：一般用于簡單的描述婉徘，如某些狀態(tài)描述漠嵌、屬性描述等（注釋內(nèi)容前后各一個空格字符咐汞，注釋位于要注釋代碼的上面，單獨占一行）
推薦：

<!-- Comment Text -->
<div>...</div>

不推薦：

<div>...</div><!-- Comment Text -->     
<div><!-- Comment Text -->
    ...
</div>

模塊注釋：一般用于描述模塊的名稱以及模塊開始與結(jié)束的位置（注釋內(nèi)容前后各一個空格字符儒鹿，表示模塊開始化撕，表示模塊結(jié)束，模塊與模塊之間相隔一行）
推薦：

<!-- S Comment Text A -->   
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
    
<!-- S Comment Text B -->   
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

不推薦：

<!-- S Comment Text A -->
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->   
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

文件模板

HTML模版指的是團隊使用的初始化HTML文件约炎，里面會根據(jù)不同平臺而采用不一樣的設置植阴，一般主要不同的設置就是 mata 標簽的設置，以下是 PC 和移動端的 HTML 模版圾浅。

HTML5標準模版
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HTML5標準模版</title>
</head>
<body>
    
</body>
</html>

移動端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" >
<meta name="format-detection" content="telephone=no" >
<title>移動端HTML模版</title>
    
<!-- S DNS預解析 -->
<link rel="dns-prefetch" href="">
<!-- E DNS預解析 --> 

<!-- S 線上樣式頁面片掠手，開發(fā)請直接取消注釋引用 -->
<!-- #include virtual="" -->
<!-- E 線上樣式頁面片 -->

<!-- S 本地調(diào)試，根據(jù)開發(fā)模式選擇調(diào)試方式贱傀，請開發(fā)刪除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地調(diào)試方式 -->

<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /開發(fā)機調(diào)試方式 -->
<!-- E 本地調(diào)試 -->

</head>
<body>

</body>
</html>

PC端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta name="robots" content="index,follow">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="renderer" content="ie-stand">
<title>PC端HTML模版</title>

<!-- S DNS預解析 --> 
<link rel="dns-prefetch" href="">
<!-- E DNS預解析 --> 

<!-- S 線上樣式頁面片惨撇，開發(fā)請直接取消注釋引用 -->
<!-- #include virtual="" -->
<!-- E 線上樣式頁面片 -->

<!-- S 本地調(diào)試，根據(jù)開發(fā)模式選擇調(diào)試方式府寒，請開發(fā)刪除 --> 
<link rel="stylesheet" href="css/index.css" >
<!-- /本地調(diào)試方式 -->

<link rel="stylesheet" href="http://srcPath/index.css" >
<!-- /開發(fā)機調(diào)試方式 -->
<!-- E 本地調(diào)試 -->

</head>
<body>

</body>
</html>

圖片格式

常見的圖片格式有 GIF魁衙、PNG8、PNG24株搔、JPEG剖淀、WEBP，根據(jù)圖片格式的特性和場景需要選取適合的圖片格式纤房。
GIF(一般用作動圖纵隔，不適合圖片)

優(yōu)秀的壓縮算法使其在一定程度上保證圖像質(zhì)量的同時將體積變得很小。
可插入多幀炮姨，從而實現(xiàn)動畫效果捌刮。
可設置透明色以產(chǎn)生對象浮現(xiàn)于背景之上的效果。
由于采用了8位壓縮舒岸，最多只能處理256種顏色绅作，故不宜應用于真彩色圖片。

PNG

支持256色調(diào)色板技術(shù)蛾派，文件體積小俄认。
無損壓縮
最高支持48位真彩色圖像以及16位灰度圖像。
支持Alpha通道的透明/半透明特性洪乍。
支持圖像亮度的Gamma校準信息眯杏。
支持存儲附加文本信息，以保留圖像名稱壳澳、作者岂贩、版權(quán)、創(chuàng)作時間巷波、注釋等信息河闰。
漸近顯示和流式讀寫科平，適合在網(wǎng)絡傳輸中快速顯示預覽效果后再展示全貌。
使用CRC防止文件出錯姜性。
最新的PNG標準允許在一個文件內(nèi)存儲多幅圖像瞪慧。

JPEG

適用于儲存24位元全采影像
采取的壓縮方式通常為有損壓縮
不支持透明或動畫
壓縮比越高影像耗損越大，失真越嚴重
壓縮比在10左右肉眼無法分辨出壓縮圖與原圖的差別

WEBP

   同時提供有損壓縮和無損壓縮兩種圖片文件格式
   文件體積小部念，無損壓縮后弃酌，比 PNG 文件少了 45％ 的文件大小儡炼；有損壓縮后妓湘，比 JPEG 文件少了 25% - 34% 文件大小
  瀏覽器兼容差，目前只支持客戶端 Chrome 和 Opera 瀏覽器以及安卓原生瀏覽器(Andriod 4.0+)

如何采用：
內(nèi)容圖：
優(yōu)先考慮 JPEG 格式,條件允許的話優(yōu)先考慮 WebP 格式
背景圖：
PNG 與 GIF 格式乌询，優(yōu)先考慮使用 PNG 格式,PNG格式允許更多的顏色并提供更好的壓縮率

圖片引入

HTML 中圖片引入不需添加 width榜贴、height 屬性，alt 屬性應該寫上
推薦:

<img src="" alt="" >

不推薦:

<img src="" width="" height="" >

CSS 中圖片引入不需要引號

z.jdc {
    background-image: url(icon.png);
}

CSS規(guī)范

代碼格式化（建議采用展開型妹田，建議統(tǒng)一采用小寫方式,每個屬性聲明末尾必須加分號 ; ）

緊湊型：
.jdc{ display: block;width: 50px;}

展開型：
.jdc{
    display: block;
    width: 50px;
}

選擇器

盡量少用通用選擇器
不使用 ID 選擇器
不使用無具體語義定義的標簽選擇器

/* 推薦 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推薦 */
*{}
#jdc {}
.jdc div{}

屬性書寫方式

布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

瀏覽器私有前置寫法

CSS3 瀏覽器私有前綴在前唬党，標準前綴在后
.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

命名規(guī)范

目錄命名

項目文件夾：projectname
樣式文件夾：css
腳本文件夾：js
樣式類圖片文件夾：img

圖片命名(圖片業(yè)務（可選） +（mod_）圖片功能類別（必選）+ 圖片模塊名稱（可選） + 圖片精度（可選))

圖片業(yè)務：
pp_：拍拍
wx_：微信
sq_：手Q
jd_：京東商城
…
圖片功能類別：

mod_：是否公共，可選
icon：模塊類固化的圖標
logo：LOGO類
spr：單頁面各種元素合并集合
btn：按鈕
bg：可平鋪或者大背景
…
圖片模塊名稱：

goodslist：商品列表
goodsinfo：商品信息
userava tar：用戶頭像
…
圖片精度：

普清：@1x
Retina：@2x | @3x
…

HTML/CSS命名

確保文件命名總是以字母開頭而不是數(shù)字鬼佣，且字母一律小寫驶拱，以下劃線連接且不帶其他標點符號，如：

<!-- HTML -->
jdc.html
jdc_list.html
jdc_detail.html

<!-- SASS -->
jdc.scss
jdc_list.scss
jdc_detail.scss

ClassName命名

ClassName的命名應該盡量精短晶衷、明確蓝纲，必須以字母開頭命名，且全部字母為小寫晌纫，單詞之間統(tǒng)一使用下劃線 “_” 連接

基于姓氏命名法（繼承 + 外來)
<div class="modulename">
    <div class="modulename_info">
        <div class="modulename_son"></div>
        <div class="modulename_son"></div>
        ...
    </div>
</div>
    
<!-- 這個是全站公用模塊税迷，祖先模塊允許直接出現(xiàn)下劃線 -->
<div class="mod_info">
    <div class="mod_info_son"></div>
    <div class="mod_info_son"></div>
    ...     
</div>

不推薦：
<div class="modulename_info">
    <div class="modulename_info_son"></div>
    <div class="modulename_info_son"></div>
    ...     
</div>

在子孫模塊數(shù)量可預測的情況下，嚴格繼承祖先模塊的命名前綴
<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info"></div>
</div>

當子孫模塊超過4級或以上的時候锹漱，可以考慮在祖先模塊內(nèi)具有識辨性的獨立縮寫作為新的子孫模塊

推薦：
<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="">
                <!-- 這個時候 miui 為 modulename_info_user_img 首字母縮寫-->
                <div class="miui_tit"></div>
                <div class="miui_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

不推薦：
<div class="modulename">
    <div class="modulename_cover"></div>
    <div class="modulename_info">
        <div class="modulename_info_user">
            <div class="modulename_info_user_img">
                <img src="" alt="">
                <div class="modulename_info_user_img_tit"></div>
                <div class="modulename_info_user_img_txt"></div>
                ...
            </div>
        </div>
        <div class="modulename_info_list"></div>
    </div>
</div>

模塊命名

全站公共模塊：以 mod_ 開頭
<div class="mod_yours"></div>
業(yè)務公共模塊：以業(yè)務名mod 開頭
<div class="paipai_mod_yours"></div>

常用命名推薦

注意：ad箭养、banner、gg凌蔬、guanggao 等有機會和廣告掛勾的字眠不建議直接用來做ClassName，因為有些瀏覽器插件（Chrome的廣告攔截插件等）會直接過濾這些類名

ClassName   含義
about   關(guān)于
account 賬戶
arrow   箭頭圖標
article 文章
aside   邊欄
audio   音頻
avatar  頭像
bg,background   背景
bar 欄（工具類）
branding    品牌化
crumb,breadcrumbs   面包屑
btn,button  按鈕
caption 標題闯冷，說明
category    分類
chart   圖表
clearfix    清除浮動
close   關(guān)閉
col,column  列
comment 評論
community   社區(qū)
container   容器
content 內(nèi)容
copyright   版權(quán)
current 當前態(tài)砂心，選中態(tài)
default 默認
description 描述
details 細節(jié)
disabled    不可用
entry   文章，博文
error   錯誤
even    偶數(shù)蛇耀，常用于多行列表或表格中
fail    失敱绲（提示）
feature 專題
fewer   收起
field   用于表單的輸入?yún)^(qū)域
figure  圖
filter  篩選
first   第一個，常用于列表中
footer  頁腳
forum   論壇
gallery 畫廊
group   模塊纺涤，清除浮動
header  頁頭
help    幫助
hide    隱藏
hightlight  高亮
home    主頁
icon    圖標
info,information    信息
last    最后一個译暂，常用于列表中
links   鏈接
login   登錄
logout  退出
logo    標志
main    主體
menu    菜單
meta    作者抠忘、更新時間等信息欄，一般位于標題之下
module  模塊
more    更多（展開）
msg,message 消息
nav,navigation  導航
next    下一頁
nub 小塊
odd 奇數(shù)外永，常用于多行列表或表格中
off 鼠標離開
on  鼠標移過
output  輸出
pagination  分頁
pop,popup   彈窗
preview 預覽
previous    上一頁
primary 主要
progress    進度條
promotion   促銷
rcommd,recommendations  推薦
reg,register    注冊
save    保存
search  搜索
secondary   次要
section 區(qū)塊
selected    已選
share   分享
show    顯示
sidebar 邊欄崎脉，側(cè)欄
slide   幻燈片，圖片切換
sort    排序
sub 次級的伯顶，子級的
submit  提交
subscribe   訂閱
subtitle    副標題
success 成功（提示）
summary 摘要
tab 標簽頁
table   表格
txt,text    文本
thumbnail   縮略圖
time    時間
tips    提示
title   標題
video   視頻
wrap    容器囚灼，包，一般用于最外層
wrapper 容器祭衩，包灶体，一般用于最外層

JS規(guī)范

語言規(guī)范
基本類型

字符串
數(shù)值
布爾類型
null
undefined

const foo = 1
let bar = foo
bar = 9
console.log(foo, bar) // 1, 9

復雜數(shù)據(jù)類型

object
array
function

const foo = [1, 2, 3]
const bar = foo
bar[0] = 9
console.log(foo[0], bar[0]) // 9, 9

引用(const聲明常量，let聲明變量)
const 和 let 都是塊級作用域掐暮，var 是函數(shù)級作用域

對所有引用都使用 const蝎抽，不要使用 var
// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

如果引用是可變動的，則使用 let
// bad
var count = 1
if (count < 10) {
  count += 1
}

// good
let count = 1
if (count < 10) {
  count += 1
}

對象

請使用字面量值創(chuàng)建對象
// bad
const a = new Object{}

// good
const a = {}

別使用保留字作為對象的鍵值路克，這樣在 IE8 下不會運行
// bad
const a = {
  default: {},  // default 是保留字
  common: {}
}

// good
const a = {
  defaults: {},
  common: {}
}

請使用對象方法的簡寫方式
// bad
const item = {
  value: 1,
  addValue: function (val) {
    return item.value + val
  }
}

// good
const item = {
  value: 1,
  addValue(val) {
    return item.value + val
  }
}

請使用對象屬性值的簡寫方式
const job = 'FrontEnd'
// bad
const item = {
  job: job
}

// good
const item = {
  job
}

對象屬性值的簡寫方式要和聲明式的方式分組
const job = 'FrontEnd'
const department = 'JDC'

// bad
const item = {
  sex: 'male',
  job,
  age: 25,
  department
}

// good
const item = {
  job,
  department,
  sex: 'male',
  age: 25
}

數(shù)組

請使用字面量值創(chuàng)建數(shù)組
// bad
const items = new Array()

// good
const items = []

向數(shù)組中添加元素時樟结，請使用 push 方法
const items = []
// bad
items[items.length] = 'test'

// good
items.push('test')

使用拓展運算符 ... 復制數(shù)組
// bad
const items = []
const itemsCopy = []
const len = items.length
let i

// bad
for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i]
}

// good
itemsCopy = [...items]

解構(gòu)賦值

當需要使用對象的多個屬性時，請使用解構(gòu)賦值
// bad
function getFullName (user) {
  const firstName = user.firstName
  const lastName = user.lastName
  return `${firstName} ${lastName}`
}

// good
function getFullName (user) {
  const { firstName, lastName } = user
  return `${firstName} ${lastName}`
}

// better
function getFullName ({ firstName, lastName }) {
  return `${firstName} ${lastName}`
}

當需要使用數(shù)組的多個值時衷戈，請同樣使用解構(gòu)賦值
const arr = [1, 2, 3, 4]

// bad
const first = arr[0]
const second = arr[1]

// good
const [first, second] = arr

函數(shù)需要回傳多個值時狭吼，請使用對象的解構(gòu)，而不是數(shù)組的解構(gòu)
// bad
function doSomething () {
  return [top, right, bottom, left]
}

// 如果是數(shù)組解構(gòu)殖妇，那么在調(diào)用時就需要考慮數(shù)據(jù)的順序
const [top, xx, xxx, left] = doSomething()

// good
function doSomething () {
  return { top, right, bottom, left }
}

// 此時不需要考慮數(shù)據(jù)的順序
const { top, left } = doSomething()

字符串

字符串統(tǒng)一使用單引號的形式 ''
// bad
const department = "JDC"

// good
const department = 'JDC'

字符串太長的時候刁笙，請不要使用字符串連接符換行 \，而是使用 +
const str = '凹凸實驗室 凹凸實驗室 凹凸實驗室' +
  '凹凸實驗室 凹凸實驗室 凹凸實驗室' +
  '凹凸實驗室 凹凸實驗室'

程序化生成字符串時谦趣，請使用模板字符串
const test = 'test'

// bad
const str = ['a', 'b', test].join()

// bad
const str = 'a' + 'b' + test

// good
const str = `ab${test}`

函數(shù)

請使用函數(shù)聲明疲吸，而不是函數(shù)表達式
// bad
const foo = function () {
  // do something
}

// good
function foo () {
  // do something
}

不要在非函數(shù)代碼塊中聲明函數(shù)
// bad
if (isUse) {
  function test () {
    // do something
  }
}

// good
let test
if (isUse) {
  test = () => {
    // do something
  }
}

不要使用 arguments，可以選擇使用 ...
arguments 只是一個類數(shù)組前鹅，而 ... 是一個真正的數(shù)組
// bad
function test () {
  const args = Array.prototype.slice.call(arguments)
  return args.join('')
}

// good
function test (...args) {
  return args.join('')
}

不要更改函數(shù)參數(shù)的值
// bad
function test (opts) {
  opts = opts || {}
}

// good
function test (opts = {}) {
  // ...
}

模塊

使用標準的 ES6 模塊語法 import 和 export
// bad
const util = require('./util')
module.exports = util

// good
import Util from './util'
export default Util

// better
import { Util } from './util'
export default Util

不要使用 import 的通配符 *摘悴，這樣可以確保你只有一個默認的 export
// bad
import * as Util from './util'

// good
import Util from './util'

對象屬性

使用 . 來訪問對象屬性
const joke = {
  name: 'haha',
  age: 28
}

// bad
const name = joke['name']

// good
const name = joke.name

代碼規(guī)范

單行代碼塊（在單行代碼塊中使用空格）

不推薦
function foo () {return true}
if (foo) {bar = 0}
推薦
function foo () { return true }
if (foo) { bar = 0 }

大括號風格（建議使用第一種）

One True Brace Style

if (foo) {
  bar()
} else {
  baz()
}

Stroustrup

if (foo) {
  bar()
}
else {
  baz()
}

Allman

if (foo)
{
  bar()
}
else
{
  baz()
}

變量命名（建議使用駝峰式）
當命名變量時，主流分為駝峰式命名（variableName）和下劃線命名（variable_name）兩大陣營舰绘。
拖尾逗號(建議最后一個字面量可以不加拖尾逗號)

在 ECMAScript5 里面蹂喻，對象字面量中的拖尾逗號是合法的，但在 IE8（非 IE8 文檔模式）下捂寿，當出現(xiàn)拖尾逗號口四，則會拋出錯誤。
var foo = {
  name: 'foo',
  age: '22',
}

逗號空格
逗號前后的空格可以提高代碼的可讀性

不推薦
var foo = 1,bar = 2
var foo = 1 , bar = 2
var foo = 1 ,bar = 2

推薦
var foo = 1, bar = 2

逗號風格
標準風格秦陋，逗號放置在當前行的末尾
逗號前置風格蔓彩，逗號放置在下一行的開始位置

不推薦
var foo = 1
,
bar = 2
var foo = 1
, bar = 2
var foo = ['name'
          , 'age']

推薦
var foo = 1,
    bar = 2
var foo = ['name',
            'age']

計算屬性空格

不推薦
obj['foo' ]
obj[ 'foo']
obj[ 'foo' ]

推薦
obj['foo']

構(gòu)造函數(shù)首字母大寫

不推薦
var fooItem = new foo()

推薦
var fooItem = new Foo()