推薦幾個大廠的前端代碼規範，學會了，你也能寫出詩同樣的代碼！

時間 2020-11-12

標籤 javascript css html 前端 vue java react git 程序員 es6 欄目 JavaScript 简体版

原文原文鏈接

你們好，我是大家的前端章魚貓，一個不喜歡吃魚、又不喜歡喵的超級貓 ~javascript

簡介

前端章魚貓從 2016 年加入 GitHub，到如今的 2020 年，快整整 5 個年頭了。css

相信不少人都沒有逛 GitHub 的習慣，所以總會有開源信息的不對稱，有哪些優秀的前端開源項目值得學習的也不知道。html

初步前端與高級前端之間，最大的差距可能就是信息差形成的。前端

從 2018 年開始，我就養成了天天逛 GitHub 的習慣，通常在早上上班前或者中午午休的時候都會逛一下。vue

看看天天都開源了哪些好的前端項目，還有用到的主流前端技術棧又是哪些，值得我去學習的。java

所以也收藏了很多好的開源項目，在此推薦給你們，每週會有一到三篇精華文章推送。react

但願你在瀏覽、學習了前端章魚貓推薦的這些開源項目的過程當中，你能學習到更多編程知識、提升編程技巧、找到編程的樂趣。git

公衆號： 前端GitHub，專一於挖掘 GitHub 上優秀的前端開源項目，抹平你的前端信息不對稱，涵蓋 JavaScript、Vue、React、Node、小程序、Flutter、Deno、HTML、CSS、數據結構與算法等等。

如下爲【前端GitHub】的第 5 期內容。程序員

今天給你們帶來的是 幾個大廠的前端代碼規範。es6

前端代碼規範

代碼千萬行，安全第一行；前端不規範，同事兩行淚。

騰訊

包含內容也挺多的：

PC端專題：快速上手、文件目錄、頁面頭部、通用title、通用foot、統計代碼、兼容測試

移動端專題：快速上手、文件目錄、頁面頭部、REM佈局、通用foot、統計代碼、分享組件、兼容要求

雙端官網：快速上手、頁面跳轉

http://tgideas.qq.com/doc/index.html

不過裏面也有一些內容是針對其業務的，並不通用。

京東

對比騰訊的代碼規範，我更推薦凹凸實驗室的代碼規範，比較齊全。

HTML規範

基於W3C、蘋果開發者等官方文檔，並結合團隊平常業務需求以及團隊在平常開發過程當中總結提煉出的經驗而約定。

圖片規範

瞭解各類圖片格式特性，根據特性制定圖片規範，包括但不限於圖片的質量約定、圖片引入方式、圖片合併處理等。

CSS 規範

統一團隊 CSS 代碼書寫和 SASS 預編譯語言的語法風格，提供經常使用媒體查詢語句和瀏覽器私有屬性引用，並從業務層面統一規範經常使用模塊的引用。

命名規範

從「目錄命名」、「圖片命名」、「ClassName」命名等層面約定規範團隊的命名習慣，加強團隊代碼的可讀性。

JavaScript 規範

統一團隊的 JS 語法風格和書寫習慣，減小程序出錯的機率，其中也包含了 ES6 的語法規範和最佳實踐。

凹凸實驗室： https://guide.aotu.io/index.html

阿里巴巴

包含了：類型、對象、數組、字符串、函數、屬性、變量、提高、比較運算符 & 等號、塊、註釋、空白、逗號、分號、類型轉化、命名規則、存取器、構造函數、事件、模塊、jQuery、ECMAScript 5 兼容性、測試、性能、資源、JavaScript 風格指南說明

Airbnb Javascript Style Guide： https://github.com/airbnb/javascript

百度

JavaScript編碼規範、HTML、CSS、Less、E-JSON 數據傳輸標準、模塊和加載器、包結構、項目目錄結構、圖表庫標準、react 編碼規範。

好比：縮進

[強制] 使用 4 個空格作爲一個縮進層級，不容許使用 2 個空格或 tab 字符。
[強制] switch 下的 case 和 default 必須增長一個縮進層級。

// good
switch (variable) {

    case '1':
        // do...
        break;

    case '2':
        // do...
        break;

    default:
        // do...

}

// bad
switch (variable) {

case '1':
    // do...
    break;

case '2':
    // do...
    break;

default:
    // do...

}