第一章 總則
第一條 目的
前端開發是一系列工具和流程的集合，本規範旨在提升前端代碼的質量，對前端開發進行全方位指導，統一編碼規範、提高可讀性、降低維護成本，以實現高效、可持續的工作流。
第二條 範圍
本標準適用於所有的Web應用及App開發。
第二章 開發規範
第三條 一般規範
應用在HTML、CSS、JavaScript等的通用規則。
3.1 通用規範
3.1.1 技術選型
前端是一門發展中的技術，標準、框架等更新速度快、調整幅度大，技術選型時應考慮到開源技術中適用於當前項目的多種可能，多角度考察比較，並從中選取框架運行穩定的版本，在技術儲備充足時，應兼顧考慮相對前沿技術。
3.1.2 目錄結構
規範的文件目錄結構有助於提高項目的邏輯結構合理性，對應用擴展和合作，及團隊開發均有益處。
應用的核心框架、靜態資源、腳本模塊、上傳文件等應分置不同文件，嚴格遵循模塊化開發的要求，儘量做到規範化。不需要直接暴露給用戶的文件，應該放在web服務器訪問不到的目錄，避免泄露設置信息。
3.1.3 文件資源命名
1).項目命名全部採用小寫，以下劃線分隔；
2).使用駝峯方式命名文件名與文件所在的文件夾，便於統一配置；
3).確保文件命名總以字母開頭而不是數字；
3.1.4 編碼格式
通過聲明一個明確的字符編碼，讓瀏覽器快速確定適合的渲染方式，通常指定爲’UTF-8’。
3.1.5 文本縮進
採用四個空格或者Tab縮進，不要混用。
3.1.6 代碼註釋
註釋是對無法自我說明的代碼進行解釋，註釋可提高代碼的可維護性、可讀性，開發人員應在必要時添加符合規範的註釋。註釋應至少包含方法、函數的作者/維護人，描述，出入參，示例及維護日期等信息。如下場景必須添加註釋：
1). 核心代碼及較晦澀部分。
2). 易存在錯誤的代碼段。
3). 瀏覽器特殊的HACK代碼。
4). 業務邏輯強相關的代碼。
3.1.7 代碼檢查
對於JavaScript這種弱類型的編程語言，嚴格遵循編碼規範和格式化風格非常重要。前端開發人員需嚴格遵循開發規範，並使用自動代碼檢查工具(如ESLint)降低語法錯誤，確保代碼正確執行。
ESLint是一款檢查JS代碼是否規範的工具，用來檢查JS代碼的規範性。它提供了配置的方法，來檢查不符合開發規範的錯誤，並支持ES6語法。
3.2 HTML規範
3.2.1 文檔類型
使用HTML5的文檔類型聲明：<!DOCTYPE html>。
3.2.2 腳本加載
出於性能考慮，腳本應該異步加載。腳本引用寫在body結束標籤之前，並帶上async屬性，避免阻塞CSSOM執行。
3.2.3 語義化
使用合適的HTML元素，可提高代碼的渲染效率，有利於提升SEO，對於可訪問性、代碼重用、代碼效率有重要意義。
3.2.4 關注點分離
結構、表現、行爲分離是前端開發工程化的最佳實踐，爲保持代碼乾淨整潔可維護，降低代碼耦合度，並進行工程化，應嚴格遵循三者分離的規範要求。
3.3 CSS規範
3.3.1 選擇器
1). 構建選擇器時應使用清晰、準確、有語義的類名。
2). 選擇器的設計應儘可能精準，避免使用標籤選擇器，使用類名而不是元素，這樣更容易維護。
3). 減少選擇器的長度，每個組合選擇器的長度應控制在3個以內。
3.3.2 屬性
css提供了各種縮寫屬性，如font字體、transiton變換、animation動畫等，使用縮寫屬性對於代碼效率和可讀性亦有裨益。
3.3.3 重繪重排
爲了保證更好的可讀性和渲染效率，樣式聲明應該遵循以下順序：
1). 結構性屬性：
a). display, float，visibility，overflow, clear等
b). position, left, top, right, z-index 等.
c). border ，width，height 等.
d). margin, padding
2). 表現性屬性：
a). font, text，word，opacity 等
b). color，background等
c). transition，animation，content等
3.3.4 代碼組織
1). 以組件爲單位組織代碼。
2). 制定一個一致的註釋層級結構。
3). 當使用多個 CSS 文件時，通過組件而不是頁面來區分他們。
3.3.5 效率工具
預處理工具和後處理工具能提高css開發效率，推薦使用less、sass、stylus及postcss等工具使用模塊化開發以提高效率，CSS reset文件宜採用開源標準，如normalize.css等。
3.4 圖像規範
3.4.1 圖像壓縮
所有的圖片必須經過壓縮和優化才能發佈。
3.4.2 圖片格式
背景圖建議使用PNG格式，在需要兼容古老瀏覽器(IE8及以前)的項目中，儘可能選擇PNG-8而不是PNG-24。
內容圖片建議使用JPG。
裝飾性圖使用PNG。
3.4.3 CSS Sprite
CSS Sprite可以減少HTTP請求數，是推薦使用的圖片處理技術。
3.4.4 圖標字體
圖標字體可大幅減少零碎小圖標的使用，可使用圖標字體的場景應減少圖片的使用。
3.4.5 其他
圖片是web應用中最耗費資源的內容，應儘量減少圖片的使用，可使用CSS、Canvas、SVG等技術實現的簡單樣式應避免使用圖片。
3.5 JavaScript規範
3.5.1 嚴格模式
嚴格模式 ‘Use strict’ 對不同的JS語境會做嚴格地錯誤檢查，使用嚴格模式也可確保代碼更加健壯、運行更加快捷，並禁止使用未來可能被引入的預留關鍵字。
3.5.2 代碼風格
本規範無意於規定是否需要空格、分號等代碼風格問題，關於這等規範，建議採用統一的ESLint配置以解決代碼風格問題(參考standardjs風格)。
3.5.3 標準特性
優先考慮使用標準特性，爲最大限度的保證擴展性與兼容性，首選標準特性，而不是非標準特性，如：首選string.charAt(3)而非string[3]。
3.5.4 函數式編程
函數式編程可以簡化代碼並縮減維護成本，易複用、利於降低耦合度。
例外：在“重代碼性能，輕代碼維護”的情況之下，要選擇最優性能的解決方案而非可維護性更好的方案（比如用簡單的循環語句代替 forEach）。
3.5.4 組件化開發
1). 頁面上的每個獨立的可視/可交互區域視爲一個組件；
2). 每個組件對應一個工程目錄，組件所需的各種資源都在該目錄下就近維護；
3). 由於組件具有獨立性，因此組件與組件之間可自由組合；
4). 頁面是組件的容器，負責組合各組件形成功能完整的界面；
5). 當不需要或替換組件時，可以整個目錄刪除/替換。
3.5.7 技術框架/庫
前端技術發展日新月異，主流框架各具特色。如何對當前項目進行技術選型是一項複雜且沒有定論的工作，但選型時的一些基本遵循是有共識的。參考點有：
1). 框架是否成熟
2). 架構和模式
3). 生態系統
4). 與項目契合度
5). 團隊技術儲備
目前一些代表性框架/庫有：React、Angular、Vue、jQuery、Bootstrap等，如：
React：採用Virtual Dom，並衍生有React Native支持原生應用，採用單向數據流，但底層採用的JSX有技術門檻；
Angular： 依賴注入，雙向數據綁定，支持TypeScript，面向對象等，但髒檢查在watcher增多時效率會有明顯下降；
Vue：輕量級，雙向數據綁定，平緩的學習曲線，在中小型簡單應用中有更大優勢。
以上對當前主流框架的說明僅做技術選型時的一般參考，要經達權變，不可荊人涉澭。
第三章 工程規範
第四條 性能優化
開發一款完整的web應用時，前端將面臨諸多的工程問題，如：多功能、多系統、多人合作，高性能的CDN部署、緩存控制、按需加載、首屏渲染、服務端推送等，這些問題的基本要求就是組件化開發和資源管理。
依照不同的優化目標，應該採用的方案至少有：
| 優化目標 | 優化方案 |
|---|---|
| 請求數量 | 合併腳本和樣式表，CSS Sprites，拆分初始化負載，劃分主域 |
| 請求帶寬 | 開啓GZip，精簡JavaScript，移除重複腳本，圖像優化 |
| 緩存使用 | 使用CDN，使用外部JavaScript和CSS，添加Expires頭，減少DNS查找，配置ETag，使Ajax可緩存 |
| 頁面結構 | 將樣式表放在頂部，將腳本放在底部，儘早刷新文檔的輸出 |
| 代碼校驗 | 避免CSS表達式，避免重定向 |
在前端開發的工程管理領域有很多細節值得挖掘和探索，性能優化的分析和研究對前端團隊技術的積累發展也大有裨益，項目開發中應對此有充分考量。
第五條 web安全
本章節的目的是讓開發者對各種web安全威脅的常見攻擊手段有基本的瞭解，以便我們能夠快速定位漏洞代碼、解除安全隱患。
XSS：攻擊者利用應用程序的動態數據展示功能，在html頁面裏嵌入惡意代碼。當用戶瀏覽該頁面時嵌入的html惡意代碼即被執行。危害主要有：盜取用戶cookie僞造身份、下載病毒木馬、釣魚、蠕蟲攻擊等。
FLASH：利用flash在安全配置和文件編碼上的問題，繞過瀏覽器同源策略發起跨域請求，如CSRF攻擊、釣魚。
注入攻擊：包括SQL注入、代碼注入、XML注入等，如SQL注入，當程序將用戶輸入的內容拼接到SQL中一起提交給數據庫執行時，就會產生SQL注入威脅。解決方案是對用戶輸入進行轉義。
文件操作： 應用在處理用戶上傳的文件時，沒有判斷文件的擴展名是否在白名單內，導致攻擊者可以上傳任意文件甚至腳本木馬到服務器上直接控制服務器。解決方案是在用戶上傳文件請求的代碼中過濾文件擴展名，並保證上傳文件的目錄必須是http請求無法直接訪問到的。
訪問控制： 由於應用沒有做權限控制或者權限控制過於簡單，攻擊者可以通過猜測管理員頁面URL進行訪問，實現權限提升攻擊，建議使用成熟的權限框架解決該問題。
Session管理：爲防止XSS漏洞導致用戶cookie被盜，應設置cookie爲httponly、Secure，並設置超時時間。
密碼算法安全： 項目中涉及到的敏感信息不可採用簡單算法加密、否則當攻擊者獲取有足夠樣本時，將可以反推出解密算法，從而泄露重要信息。其他一些如base64、escape、urlencode等只是編碼格式，不可用作密碼算法。必須採用符合業內安全強度標準的密碼算法，如SHA-256等。
第四章 附則
第六條
本規範作爲web開發人員的一般參考，自發布之日起執行。