多開發人員認為擅長設計是一種天生的能力，而創造力是與生俱來的。但是設計是一項可以像其他任何東西一樣學習的技能。你不必天生就可以創建一個漂亮的網站的藝術家，這需要實踐。在身邊的小伙伴的博客，自己的網站來看，很多人都是用了開源后臺的網站模板，熟不知局限太大，自己想要的內容板式也要跟著模板走，越往后看著自己的站點越不順眼，沒有一點成就感。

本文將介紹如何通過從頭開始設計個人網站并將其轉換為代碼的過程來實踐設計。

為什么要自己設計？

當您可以使用Bootstrap之類的UI庫或預制模板時，為什么要自己設計？以下是設計網站的一些好處。

●①在人群中脫穎而出。許多開發人員博客都使用類似的模板，很容易看出它不是自己設計的。如果個人網站的目的是展示你的能力，那么使用模板可能會降低別人對你的肯定，自己設計的獨特風格，讓你站點在眾多的站點中脫穎而出。

●②練習技巧。設計它會幫助你練習設計原則，工具，HTML和CSS。你將更容易開發用戶界面并將其引入網絡。設計出獨特且符合現代潮流的個人站點。

以前接私活的時候，不會設計頁面，搬運其它站點頁面，導致自己修改圖片和部分頁面的時候，不會使用工具，設計出來的頁面死板不靈活，客戶不滿意，自己看了也覺得很普通，沒有給你心意的感覺。

●③更好的應用程序性能。你的網站將是輕量級的，并且使用自定義CSS會具有更好的性能。如果要包括UI庫或模板，則它可能包含大量代碼，以涵蓋您未使用的各種可能的自定義。如果未使用的代碼發送給用戶，則會對你網站的性能產生負面影響。加載慢，打開網頁慢，被很多人不接受。

●④發展職業技能。在Web開發角色中，你可能不必從頭開始實現完整的網站設計，但是你應該能夠制作與現代設計一致的外觀精美的界面。成為“全棧開發人員”通常意味著精通后端語言或前端JavaScript框架，同時能夠熟悉設計，產品方面的知識。全棧開發人員應具有一些基本的設計知識，并能夠為用戶提供一致的體驗。當然從中學習到很多的技能知識，這是毋庸置疑的。

●⑤可能會很有趣。創造出令自己感到驕傲的東西是一種有趣的經歷。如果您花一些時間練習它，琢磨它，打造出屬于自己的頁面，豈不是更好，生活中發現美是一件很美好的事，但我覺得創造美更讓人覺得驕傲。

開始設計你的網站，不要直接寫頁面，從代碼里設計頁面。很難從代碼編輯器中可視化設計，我建議先使用可視化設計工具，然后將結果轉換為代碼。現在有一些快速的代碼生成模板，我覺得小項目可以用一下，就比如說我們的個人站點，大型項目追求性能，就不合適了。

▲制作界面原型的軟件，我最喜歡的是 Balsamiq Mockups，一個手繪風格的、輕量級的小軟件。我喜歡它的理由是：

• 快——它能讓我以最快的速度把界面原型畫出來。
• 手繪風格——用它畫出來的界面是不折不扣手繪風格，很酷。
• 都是現成的——它已經內置了常用的控件和圖標，基本夠用了。

開始你的表演

●①創建線框

第一步是創建站點的低保真線框。創建線框有助于在添加視覺設計和內容之前建立頁面的結構。線框不必很漂亮，它應該專注于內容的布局。您可以手工繪制它，也可以使用設計工具的基本功能。

為了創建線框，我喜歡將設計視為一系列矩形。網頁上的元素是從上到下流動的矩形塊。從矩形開始不需要任何藝術才能。

●②網站結構

放置在線框中的元素由您決定。您可以考慮添加導航欄，頁眉，博客文章和頁腳。您可能不需要所有的這些內容，可以將其保留為基本內容，以后再添加。確定要包括的內容并將這些部分合并到線框中。如果你在布局這塊遇到問題，可以查看一個類似的網站，模仿網站內容的結構，然后對其進行修改以適合你的需求。

線框不一定是完美的。在擁有合適位置的網站結構之后，就可以轉向視覺設計。

●③應用視覺設計

要將低保真線框轉換為設計，可以使用免費的設計工具，例如 Figma（下一代的設計神器）。如果你從未使用過設計程序，你也可以用ps來實現，不過會有點慢，但在國內我還沒有找到類似 Figma 這么好用的工具。

●④實施布局

首先，創建一個空白畫布以代表空白瀏覽器頁面。通過為內容創建容器，在設計工具中實現線框。我建議先從黑白開始，以便你可以專注于布局。

優化您的布局，以使元素大小適當，對齊并在它們之間留出空間。

●⑤添加部分和占位符內容

在看起來像一個網站之后，使其看起來更漂亮。通過弄清楚是什么使布局看起來有吸引力，可以模仿其他網站的逼格樣式來添加到自己的網站。

在此階段，請考慮形狀，大小，邊界和陰影。用你喜歡的樣式逐漸升級基本矩形。

●⑥更新版式

字體和間距的設計對美觀大有幫助。如果排版得當，即使是簡單的設計也可以是高質量的。同樣，你可以模仿另一個網站或搜索字體和字體資源，以將其納入你的設計中。但是一定要注意版權。

記得有家企業，不管字體版權問題，在自家網站使用方正字體，被告侵權，這是需要賠償的。

●⑦給它上色

接下來，為站點添加顏色。通過建立品牌來賦予網站特色。考慮一下你希望網站如何吸引讀者。如果你希望它看起來干凈且極少，請選擇不太亮的顏色，漸變保持微妙，并選擇易于閱讀的字體。如果你希望它看起來有趣，請選擇明亮的顏色，使用鮮艷的漸變，應用背景紋理，使用圓形元素，然后選擇醒目的字體。

添加顏色似乎令人生畏，但你無需了解顏色原理即可。如果您的設計是從黑白開始的，則可以選擇一種單色來強調元素，以賦予設計生命。如果你想超越此范圍，建議您選擇一種或兩種您喜歡的顏色，然后使用該顏色的不同亮度變化。這有助于創建一個具有凝聚力的主題，而不必成為色彩專家。選擇背景色和前景色時，請通過檢查顏色對比來牢記可讀性。

例如，將深藍色設置為背景，然后將較淺的藍色設置為文本。對于白色背景色，可以將藍色的中等亮度用作標題。

將顏色合并到設計中后，請繼續檢查總體設計感并進行調整。

●⑧注意細節

在設計時，你應該退后一步來查看整個設計并進行完善。通過用簡單的語言描述您所看到的內容來批判你的設計，然后將該陳述轉換為需要解決的技術問題。

1. 看起來緊湊嗎？增加填充和邊距。
2. 文字難讀？選擇更清晰的字體或增加字體大小。增加背景和前景之間的顏色對比度。
3. 內容難識別？添加具有較高字體粗細的標題。在標題和段落之間添加更多間距。
4. 看起來草率或不一致？在水平和垂直的直線上對齊元素。在設計程序中設置指南可以幫助確保元素正確對齊。調整填充和邊距，以保持垂直方向上一致的間距。通過建立標題和段落的字體和大小來使文本一致。避免文本變化太多。確保所有顏色都符合你的調色板。

完成設計后，就可以開始將其轉換為代碼

●①創建HTML結構

Github上有個項目是 pix2code ，它可以直接將頁面生成HTML結構并附加CSS代碼，已經開源了，感興趣的可以去看看，確實很吊。

國內暫時還沒有這樣的項目，想搞拖拽開發的老板真是不少，但沒見過誰家真正做出來了，做不出來肯定不是技術不能實現，拖拽的本質是在組件庫基礎上加了一層交互界面，所以組件化是拖拽開發的第一步，剩下的其實就是"layoutit"了，但要真正落地，就有很多限制。

可拖拽的組件應該是封裝了控制層和視圖層的，原則上耦合越低越好，內聚越高越好，自己渾然一體最好，只對外暴露配置項，也就是說將一個組件拖拽到界面上之后，得有一個動態生成配置面板的機制，"layoutit"也有一個簡單的配置機制，但遠遠不是生產級別的，這里可以統一約定一個規則，讓組件的配置項可以被讀取，也可以按組件枚舉，硬做到界面上，都可以，都有優缺點；

互相依賴的組件之間的數據交互會有問題，因為各組件的輸入輸出不可能完全一致，也就做不到依賴組件之間無縫接入，常規開發中開發者會手動做一些"適配"工作，比如將A組件的輸出剪裁或修飾一下傳給B組件，但現在是搞拖拽，這個數據修飾沒法做了，可以修改組件做到可以互相適配，或者一步到位在拖拽系統上做一套數據修飾的中間功能，讓操作者自己適配，都可以，都有很大的缺點。

所以在這里我們也只好一步步的自己切頁面了，盡可能是響應式的，同時按設計稿填充的內容在HTML結構填充元素。

●②小技巧

將布局變成完整的設計時，我喜歡考慮將設計從上到下劃分為多個部分的水平線。頂部的導航欄可能是第一個切片。中間的可能是一個切片，底部的是一個切片，我會將他們用明顯的線條區分開來，使用不用的顏色，美觀而又清晰。

一般在企業的工作的時候，都是設計師給設計稿，叮囑效果，我們按照設計師的稿子從頭到下附帶交互效果直接切頁面，

●③后續步驟

頁面設計完成并用代碼制作了個人網站，接下來配置后臺和網站在服務器的部署了，這里我們使用SiteServer CMS 內容管理系統來作為我們網站的后臺。如何使用，點擊閱讀更多，既然是自己設計網站，我們就不理會它里面的免費模板了。

至于后期的網站速度優化，代碼優化之前我也提過了，寫過文章詳細說明過，大家也可以看一下。

你不知道的「前端性能優化」知識，我都給你總結好了

網站打開速度慢，這些是關鍵，不要以為不重要

總結

通過自己設計和代碼編寫，以及后期的上線，你將會學到這些。

• 自己設計網站將幫助你練習設計技巧，并讓你的網站脫穎而出
• 創建線框以構造內容和功能
• 使用設計工具將線框變成視覺設計。從您喜歡的設計中獲取靈感
• 對頁面的HTML結構進行編碼，以幫助了解需要使用哪些CSS來轉換這些元素
• 使用CSS設置頁面樣式以完善匹配你的設計
• 通過部署，將其用作實踐項目或繼續改進設計，將其提升到一個新的水平

有沒有正在自己設計搭建站點的小伙伴??？或者感覺自己公司的設計師無非就是模仿還是模仿，不管設計啥都千篇一律的？一起交流下。

TML配置

• 文件應以“”首行頂格開始，推薦使用“”。
• 必須申明文檔的編碼charset，并且使用UTF-8編碼。
• 移動端必須使用 viewport 適配
• 頁面title是極為重要的不可缺少的一項。

以下是一個標準的html結構

html復制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- 頁面標題不能為空 -->
    <title>京東商城:商家后臺</title>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
     
    <!-- 樣式文件 以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
  </head>
  <body>
    <!-- 頁面主體 -->
    <div class="warp">
      <header>頂部內容區域，比如：菜單頭</header>
      <div class="content">主內容區域</div>
      <footer>頂部頁尾區域，比如：備案號</footer>
    </div>
     
    <!-- js文件 在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

主框架(jQuery,vue,react,angular等) 避免混合使用

避免多個框架混合使用，在同一個工程里面要保持主框架的一致性，多框架同時使用會造成代碼混亂，后期會變得越來越難維護。

Css開發規范

1、全局樣式禁止使用!important

2、避免使用導入式引入css樣式文件；

css復制代碼<style type="text/css">
  @import url(./demo.css);
</style>

未使用的js/css禁止引用

歷史頁面會有一些功能下線，在去除頁面初始化的js語句的同時，也要將依賴的js文件刪除，避免資源加載浪費

文件必須使用gzip壓縮

開啟Gzip壓縮功能， 可以使網站的css、js 、xml、html 文件在傳輸時進行壓縮，提高訪問速度

api接口中，無用字段占傳輸比例30%以上時，刪除無用字段

在開發過程中，發現無用字段占傳輸比例30%以上時，請進行返回數據的刪減，加快數據請求速度

關于圖片壓縮

上傳圖片之前一定要做圖片的無損壓縮，節省網絡流量,推薦網站tinypng

HTML的標準結構

html復制代碼<!DOCTYPE html>
<html>
  <head>
    <!-- 必須聲明 utf-8 編碼格式 -->
    <meta charset="utf-8">
    <!-- keywords 關鍵詞 和 Description 頁面描述 便于搜索引擎檢索，不強制使用 -->
    <meta name="Keywords" Content=”關鍵詞1,關鍵詞2,關鍵詞3,關鍵詞4″>
    <meta name="Description" Content=”頁面描述″>
    <!-- 移動端必須使用 viewport 適配需要, PC 看場景需要使用 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <!-- 推薦手動引入指定路徑 favicon  -->
    <link rel="shortcut icon" href="path/to/favicon.ico">
    <!-- 樣式文件必須以外鏈形式在此處引入 -->
    <link href="//static.360buyimg.com/bus/test/shop1_3/UI2.0update.css" rel="stylesheet">
    <!-- 內聯樣式 -->
    <style type="text/css">
      .warp {
        margin: 0;
        padding: 0;
      }
    </style> -->
    <!-- 頁面標題不能為空 -->
    <title>頁面標題</title>
  </head>
  <body>
  <!-- 頁面主體 -->
    <div class="warp">
    <header>頂部內容區域，比如：菜單頭</header>
    <div class="content">主內容區域</div>
    <footer>頂部頁尾區域，比如：備案號</footer>
    </div>
 
    <!-- JavaScript 文件在此處引入 -->
    <script type="text/javascript" src="//wl.jd.com/joya.js"></script>
  </body>
</html>

• 不同模塊區域可使用簡要備注標識模塊內容
• HTML 標簽語義化使結構清晰，比如：
• CSS 外鏈引入必須放在 中
• JS 外鏈引入必須放在中
• 省略圖像、媒體文件、樣式表和腳本等嵌入式資源 URL 協議頭部聲明 ( http:// , https:// )，用//代替。
• favicon 在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免404，必須遵循以下兩種方法之一：1。在 Web Server 根目錄放置 favicon.ico 文件，2。使用 link 指定 favicon

HTML標簽使用守則

標簽小寫

原生 HTML 標簽元素小寫使用，自定義組件使用小駝峰命名（自定義標簽避免和原生標簽同名）

html復制代碼<!-- 錯誤 ? -->
<DIV></DIV>
<SPAN></SPAN>  
 
<!-- 正確 ? -->
<div></div>  
<p></p> 
 
<!-- 自定義組件 -->
<shareDialog><shareDialog/>

套用規則

禁止在行內元素中嵌套塊級元素??

html復制代碼<!-- 錯誤的嵌套 ? -->
<span><div></div></span>  
<i><p></p></i>     
 
<!-- 正確的嵌套 ? -->
<div><span></span></div>  
<p><i></i></p>   

更多標簽使用規則介紹請查看尾部附錄

屬性定義

定義屬性賦值時，使用雙引號，禁止單雙引號混用

html復制代碼<!-- 錯誤的定義 ? -->
<input id="formTitle" type='text' placeholder="請輸入標題">   
 
<!-- 正確的定義 ? -->
<input id="formTitle" type="text" placeholder="請輸入標題" data="formTitle">   

正確閉合

除自閉合標簽外，所有標簽都需正確的編寫閉合標簽

常用自閉合標簽： <br />、<col />、<img />、<input />、<link />、<meta />、<keygen />

ID、Class 命名使用規范

ID 和 Class 取通用且有意義的名字；

使用連字符 - 作為 ID、Class 名稱界定符 ，不要駝峰命名法和下劃線；

避免選擇器嵌套層級過多，盡量少于 3 級；

使用命名空間防止命名沖突，利于維護；

css復制代碼/* 不推薦: 無意義 不易理解 */
#yee-1901 {}
#meunBtn {}
.login_input {}
 
/* 推薦: 明確詳細 */
#gallery {}
#login {}
.login-input {}
.meun-btn {}

• 避免選擇器和 Class、ID 疊加使用
• 聲明順序，相關屬性應為一組，建議遵循： 定位布局屬性 -> 盒模型屬性 -> 文本屬性 -> 視覺屬性 -> 其他屬性
• 對于 JS 操作相關選擇器 前面需加上 特殊應用標識前綴

css復制代碼/* 標準的聲明順序 */
.declaration-order {
  /* 布局屬性 */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
 
  /* 盒模型屬性 */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;
 
  /* 文本屬性 */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  text-align: center;
 
  /* 視覺屬性 */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;
 
  /* 其他屬性 */
  cursor: pointer;
}

圖片相關使用規范

<img/>標簽守則

• src 屬性不能為空，需添加默認值（托底圖片路徑）
• 為重要圖片添加 alt 屬性，當無法顯示圖像時，瀏覽器將顯示替代文本，便于 SEO 及用戶閱讀
• 為圖片標簽 增加 width 和 height 屬性，避免圖片加載從無到有，導致頁面抖動
• 大量圖片流資源，使用懶加載技術按需加載

html復制代碼<!-- 禁止 src 取值為空 -->
<img src="" />
 
<!-- 推薦 -->
<img src="xxxx" alt="xxx" style="width:100px;height:100px;" />

圖片資源守則

大小

尺寸 小于 50 ×?50 的請使用 字體圖標（iconfont）或者 將多個圖標合成一張大圖使用（雪碧圖） 尺寸大于 50 ×?50 的圖片，引入前先使用 在線壓縮 對其進行壓縮 ，圖片大小盡量控制在 300kb 以內

倍率

PC端、移動端 推薦使用 2倍圖 (@2x），避免設備分辨率過高，圖片顯示失真模糊 如有兼容 iPad 場景等特殊場景，可使用 3倍圖（@3x）

html復制代碼<img src="//logo@200x200.jpg" alt="xx" style="width:100px;height:100px;"/>

2倍圖： 圖片展示區域大小 : 圖片實際尺寸 = 1 ：2

無論使用幾倍圖，圖片大小都需遵守上條限制

如遇圖片倍圖問題，可咨詢 @UI童鞋

性能守則

• 避免不必要的 DOM 操作瀏覽器遍歷 DOM 元素的代價是昂貴的。最簡單優化 DOM 樹查詢的方案是，當一個元素出現多次時，將它保存在一個變量中，來避免多次查詢 DOM 樹。

js復制代碼/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = document.getElementsByTagName('ul')[0].getElementsByTagName('p')
   
/* 推薦用變量保存頻繁使用的 DOM 元素*/
var ul = document.getElementsByTagName('ul')[0],
  lis = ul.getElementsByTagName('li')

• 異步加載第三方內容 當你無法保證嵌入第三方內容 比如 埋點、調研等資源正常工作的時候，你需要考慮用異步加載這些代碼，避免阻塞整個頁面加載。
• 減少標簽的數量 編寫 HTML 代碼時，盡量避免多余的標簽嵌套，避免 DOM樹的冗余
• 控制靜態資源數量

1個頁面中建議CSS文件不要超過3個（1個組件庫樣式文件、1個項目公共樣式、1個頁面樣式）； JS文件不要超過5個（1個框架文件、1個組件庫文件、1個項目公共庫文件、1個頁面腳本文件、1個埋點文件）。

編碼建議

縮進使用 2個空格 樣式建議引入 CSS reset 重置各瀏覽器自帶樣式差異 github.com/necolas/nor… JS 中字符串定義 使用 '' 單引號

其他建議

保持一定的代碼潔癖，尤其在大型項目中

• 代碼邏輯應當直截了當，清晰易讀，保持與業務邏輯與代碼一一對應關系，減少邏輯錯誤的可能性，降低二次開發成本；
• 刪除過期無用代碼，減少代碼過大，造成不必要的維護成本
• 代碼盡量復用，擁有組件化思想
• 代碼命名合理化，即使不寫注釋情況下，也可以讓其他開發人員一眼明白意思
• 性能調至最優，降低耦合度，避免別人做不合理的優化時而造成的混亂
• 整潔的模塊邊界，明確的劃分模塊之間的邏輯邊界，盡量保證職責單一，避免功能交叉混雜
• 讓代碼沒有改進的余地，在開發時把各種情況都想到了，如果有人企圖改進它，總是會回到原點

性能檢測工具 - Lighthouse簡介 Lighthouse是一個Google開源的自動化工具，主要用于改進網絡應用的質量。Lighthouse會對各個測試項的結果打分，并給出優化建議，這些打分標準和優化建議可以視為Google的網頁最佳實踐。

Chrome拓展程序 谷歌商店安裝lighthouse后，在右上角或者菜單里點擊圖中圖標，Options可以配置測試項目，點擊Generate report即可測試。

命令行

js復制代碼<!-- 安裝 lighthouse 組件（Node.js V5.0 或以上版本） -->
npm install -g lighthouse
<!-- 啟動測試 （測試過程中會自動打開 Chrome 完成后會在當前目錄生成一個靜態HTML文件） -->
lighthouse https://www.baidu.com/ --view
<!-- 幫助-->
lighthouse --help

檢測結果

【附錄】常用的標簽規范

點贊收藏支持、手留余香、與有榮焉，動動你發財的小手喲，感謝各位大佬能留下您的足跡。

作者：StriveToY
鏈接：https://juejin.cn/post/7262378982255394873

進

使用soft tab（4個空格）。

var x = 1,
    y = 1;

if (x < y) {
    x += 10;
} else {
    x += 1;
}

單行長度

不要超過80，但如果編輯器開啟word wrap可以不考慮單行長度。

分號

以下幾種情況后需加分號：

• 變量聲明
• 表達式
• return
• throw
• break
• continue
• do-while

/* var declaration */
var x = 1;

/* expression statement */
x++;

/* do-while */
do {
    x++;
} while (x < 10);

空格

以下幾種情況不需要空格：

• 對象的屬性名后
• 前綴一元運算符后
• 后綴一元運算符前
• 函數調用括號前
• 無論是函數聲明還是函數表達式，’(‘前不要空格
• 數組的’[‘后和’]’前
• 對象的’{‘后和’}’前
• 運算符’(‘后和’)’前以下幾種情況需要空格：
• 二元運算符前后
• 三元運算符’?:’前后
• 代碼塊’{‘前
• 下列關鍵字前：else, while, catch, finally
• 下列關鍵字后：if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof
• 單行注釋’//‘后（若單行注釋和代碼同行，則’//‘前也需要），多行注釋’*’后
• 對象的屬性值前
• for循環，分號后留有一個空格，前置條件如果有多個，逗號后留一個空格
• 無論是函數聲明還是函數表達式，’{‘前一定要有空格
• 函數的參數之間

// not good
var a = {
    b :1
};

// good
var a = {
    b: 1
};

// not good
++ x;
y ++;
z = x?1:2;

// good
++x;
y++;
z = x ? 1 : 2;

// not good
var a = [ 1, 2 ];

// good
var a = [1, 2];

// not good
var a = ( 1+2 )*3;

// good
var a = (1 + 2) * 3;

// no space before '(', one space before '{', one space between function parameters
var doSomething = function(a, b, c) {
    // do something
};

// no space before '('
doSomething(item);

// not good
for(i=0;i<6;i++){
    x++;
}

// good
for (i = 0; i < 6; i++) {
    x++;
}

空行

以下幾種情況需要空行：

• 變量聲明后（當變量聲明在代碼塊的最后一行時，則無需空行）
• 注釋前（當注釋在代碼塊的第一行時，則無需空行）
• 代碼塊后（在函數調用、數組、對象中則無需空行）
• 文件最后保留一個空行

// need blank line after variable declaration
var x = 1;

// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
    var y = x + 1;
}

var a = 2;

// need blank line before line comment
a++;

function b() {
    // not need blank line when comment is first line of block
    return a;
}

// need blank line after blocks
for (var i = 0; i < 2; i++) {
    if (true) {
        return false;
    }

    continue;
}

var obj = {
    foo: function() {
        return 1;
    },

    bar: function() {
        return 2;
    }
};

// not need blank line when in argument list, array, object
func(
    2,
    function() {
        a++;
    },
    3
);

var foo = [
    2,
    function() {
        a++;
    },
    3
];


var foo = {
    a: 2,
    b: function() {
        a++;
    },
    c: 3
};

換行

換行的地方，行末必須有’,’或者運算符；

以下幾種情況不需要換行：

• 下列關鍵字后：else, catch, finally
• 代碼塊’{‘前

以下幾種情況需要換行：

• 代碼塊’{‘后和’}’前
• 變量賦值后

// not good
var a = {
    b: 1
    , c: 2
};

x = y
    ? 1 : 2;

// good
var a = {
    b: 1,
    c: 2
};

x = y ? 1 : 2;
x = y ?
    1 : 2;

// no need line break with 'else', 'catch', 'finally'
if (condition) {
    ...
} else {
    ...
}

try {
    ...
} catch (e) {
    ...
} finally {
    ...
}

// not good
function test()
{
    ...
}

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

// not good
var a, foo = 7, b,
    c, bar = 8;

// good
var a,
    foo = 7,
    b, c, bar = 8;

單行注釋

雙斜線后，必須跟一個空格；
縮進與下一行代碼保持一致；
可位于一個代碼行的末尾，與代碼間隔一個空格。

if (condition) {
    // if you made it here, then all security checks passed
    allowed();
}

var zhangsan = 'zhangsan'; // one space after code

多行注釋

最少三行, ‘*’后跟一個空格，具體參照右邊的寫法；

建議在以下情況下使用：

• 難于理解的代碼段
• 可能存在錯誤的代碼段
• 瀏覽器特殊的HACK代碼
• 業務邏輯強相關的代碼

/*
 * one space after '*'
 */
var x = 1;

文檔注釋

各類標簽@param, @method等請參考usejsdoc和JSDoc Guide；

建議在以下情況下使用：

• 所有常量
• 所有函數
• 所有類

/**
 * @func
 * @desc 一個帶參數的函數
 * @param {string} a - 參數a
 * @param {number} b=1 - 參數b默認值為1
 * @param {string} c=1 - 參數c有兩種支持的取值</br>1—表示x</br>2—表示xx
 * @param {object} d - 參數d為一個對象
 * @param {string} d.e - 參數d的e屬性
 * @param {string} d.f - 參數d的f屬性
 * @param {object[]} g - 參數g為一個對象數組
 * @param {string} g.h - 參數g數組中一項的h屬性
 * @param {string} g.i - 參數g數組中一項的i屬性
 * @param {string} [j] - 參數j是一個可選參數
 */
function foo(a, b, c, d, g, j) {
    ...
}

引號

最外層統一使用單引號。

// not good
var x = "test";

// good
var y = 'foo',
    z = '<div id="test"></div>';

變量命名

• 標準變量采用駝峰式命名（除了對象的屬性外，主要是考慮到cgi返回的數據）
• ‘ID’在變量名中全大寫
• ‘URL’在變量名中全大寫
• ‘Android’在變量名中大寫第一個字母
• ‘iOS’在變量名中小寫第一個，大寫后兩個字母
• 常量全大寫，用下劃線連接
• 構造函數，大寫第一個字母
• jquery對象必須以’$’開頭命名

var thisIsMyName;

var goodID;

var reportURL;

var AndroidVersion;

var iOSVersion;

var MAX_COUNT = 10;

function Person(name) {
    this.name = name;
}

// not good
var body = $('body');

// good
var $body = $('body');

變量聲明

一個函數作用域中所有的變量聲明盡量提到函數首部，用一個var聲明，不允許出現兩個連續的var聲明。

function doSomethingWithItems(items) {
    // use one var
    var value = 10,
        result = value + 10,
        i,
        len;

    for (i = 0, len = items.length; i < len; i++) {
        result += 10;
    }
}

函數

無論是函數聲明還是函數表達式，’(‘前不要空格，但’{‘前一定要有空格；
函數調用括號前不需要空格；
立即執行函數外必須包一層括號；
不要給inline function命名；
參數之間用’, ‘分隔，注意逗號后有一個空格。

// no space before '(', but one space before'{'
var doSomething = function(item) {
    // do something
};

function doSomething(item) {
    // do something
}

// not good
doSomething (item);

// good
doSomething(item);

// requires parentheses around immediately invoked function expressions
(function() {
    return 1;
})();

// not good
[1, 2].forEach(function x() {
    ...
});

// good
[1, 2].forEach(function() {
    ...
});

// not good
var a = [1, 2, function a() {
    ...
}];

// good
var a = [1, 2, function() {
    ...
}];

// use ', ' between function parameters
var doSomething = function(a, b, c) {
    // do something
};

數組、對象

對象屬性名不需要加引號；
對象以縮進的形式書寫，不要寫在一行；
數組、對象最后不要有逗號。

// not good
var a = {
    'b': 1
};

var a = {b: 1};

var a = {
    b: 1,
    c: 2,
};

// good
var a = {
    b: 1,
    c: 2
};

括號

下列關鍵字后必須有大括號（即使代碼塊的內容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// not good
if (condition)
    doSomething();

// good
if (condition) {
    doSomething();
}

null

適用場景：

• 初始化一個將來可能被賦值為對象的變量
• 與已經初始化的變量做比較
• 作為一個參數為對象的函數的調用傳參
• 作為一個返回對象的函數的返回值

不適用場景：

• 不要用null來判斷函數調用時有無傳參
• 不要與未初始化的變量做比較

// not good
function test(a, b) {
    if (b === null) {
        // not mean b is not supply
        ...
    }
}

var a;

if (a === null) {
    ...
}

// good
var a = null;

if (a === null) {
    ...
}

undefined

永遠不要直接使用undefined進行變量判斷；
使用typeof和字符串’undefined’對變量進行判斷。

// not good
if (person === undefined) {
    ...
}

// good
if (typeof person === 'undefined') {
    ...
}

jshint

用’===’, ‘!==’代替’==’, ‘!=’；
for-in里一定要有hasOwnProperty的判斷；
不要在內置對象的原型上添加方法，如Array, Date；
不要在內層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量；
變量不要先使用后聲明；
不要在一句代碼中單單使用構造函數，記得將其賦值給某個變量；
不要在同個作用域下聲明同名變量；
不要在一些不需要的地方加括號，例：delete(a.b)；
不要使用未聲明的變量（全局變量需要加到.jshintrc文件的globals屬性里面）；
不要聲明了變量卻不使用；
不要在應該做比較的地方做賦值；
debugger不要出現在提交的代碼里；
數組中不要存在空元素；
不要在循環內部聲明函數；
不要像這樣使用構造函數，例：new function () { … }, new Object；

// not good
if (a == 1) {
    a++;
}

// good
if (a === 1) {
    a++;
}

// good
for (key in obj) {
    if (obj.hasOwnProperty(key)) {
        // be sure that obj[key] belongs to the object and was not inherited
        console.log(obj[key]);
    }
}

// not good
Array.prototype.count = function(value) {
    return 4;
};

// not good
var x = 1;

function test() {
    if (true) {
        var x = 0;
    }

    x += 1;
}

// not good
function test() {
    console.log(x);

    var x = 1;
}

// not good
new Person();

// good
var person = new Person();

// not good
delete(obj.attr);

// good
delete obj.attr;

// not good
if (a = 10) {
    a++;
}

// not good
var a = [1, , , 2, 3];

// not good
var nums = [];

for (var i = 0; i < 10; i++) {
    (function(i) {
        nums[i] = function(j) {
            return i + j;
        };
    }(i));
}

// not good
var singleton = new function() {
    var privateVar;

    this.publicMethod = function() {
        privateVar = 1;
    };

    this.publicMethod2 = function() {
        privateVar = 2;
    };
};

雜項

不要混用tab和space；
不要在一處使用多個tab或space；
換行符統一用’LF’；
對上下文this的引用只能使用’_this’, ‘that’, ‘self’其中一個來命名；
行尾不要有空白字符；
switch的falling through和no default的情況一定要有注釋特別說明；
不允許有空的代碼塊。