建站
咨詢
售后
建站咨詢
新聞中心
今天給大家?guī)淼氖?nbsp;幾個大廠的前端代碼規(guī)范 。
目前成都創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、無棣網(wǎng)站維護等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
前端代碼規(guī)范
代碼千萬行，安全第一行；前端不規(guī)范，同事兩行淚。
騰訊
包含內(nèi)容也挺多的：
PC端專題：快速上手、文件目錄、頁面頭部、通用title、通用foot、統(tǒng)計代碼、兼容測試
移動端專題：快速上手、文件目錄、頁面頭部、REM布局、通用foot、統(tǒng)計代碼、分享組件、兼容要求
雙端官網(wǎng)：快速上手、頁面跳轉(zhuǎn)
http://tgideas.qq.com/doc/index.html
不過里面也有一些內(nèi)容是針對其業(yè)務(wù)的，并不通用。
京東
對比騰訊的代碼規(guī)范，我更推薦凹凸實驗室的代碼規(guī)范，比較齊全。
HTML規(guī)范
基于W3C、蘋果開發(fā)者等官方文檔，并結(jié)合團隊日常業(yè)務(wù)需求以及團隊在日常開發(fā)過程中總結(jié)提煉出的經(jīng)驗而約定。
圖片規(guī)范
了解各種圖片格式特性，根據(jù)特性制定圖片規(guī)范，包括但不限于圖片的質(zhì)量約定、圖片引入方式、圖片合并處理等。
CSS 規(guī)范
統(tǒng)一團隊 CSS 代碼書寫和 SASS 預(yù)編譯語言的語法風(fēng)格，提供常用媒體查詢語句和瀏覽器私有屬性引用，并從業(yè)務(wù)層面統(tǒng)一規(guī)范常用模塊的引用。
命名規(guī)范
從 “目錄命名”、“圖片命名”、“ClassName” 命名等層面約定規(guī)范團隊的命名習(xí)慣，增強團隊代碼的可讀性。
JavaScript 規(guī)范
統(tǒng)一團隊的 JS 語法風(fēng)格和書寫習(xí)慣，減少程序出錯的概率，其中也包含了 ES6 的語法規(guī)范和最佳實踐。
凹凸實驗室： https://guide.aotu.io/index.html
阿里巴巴
包含了：類型、對象、數(shù)組、字符串、函數(shù)、屬性、變量、提升、比較運算符 & 等號、塊、注釋、空白、逗號、分號、類型轉(zhuǎn)化、命名規(guī)則、存取器、構(gòu)造函數(shù)、事件、模塊、jQuery、ECMAScript 5 兼容性、測試、性能、資源、JavaScript 風(fēng)格指南說明
Airbnb Javascript Style Guide： https://github.com/airbnb/javascript
百度
JavaScript編碼規(guī)范、HTML、CSS、Less、E-JSON 數(shù)據(jù)傳輸標(biāo)準(zhǔn)、模塊和加載器、包結(jié)構(gòu)、項目目錄結(jié)構(gòu)、圖表庫標(biāo)準(zhǔn)、react 編碼規(guī)范。
比如：縮進
- [強制] 使用
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...
- }
規(guī)范文檔： https://github.com/ecomfe/spec/blob/master/javascript-style-guide.md
網(wǎng)易編碼規(guī)范：
CSS規(guī)范：一系列規(guī)則和方法，幫助你架構(gòu)并管理好樣式
HTML規(guī)范：一系列建議和方法，幫助你搭建簡潔嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)
工程師規(guī)范：前端頁面開發(fā)工程師的工作流程和團隊協(xié)作規(guī)范
但是并不止于此，還有更多：
http://nec.netease.com/standard
JavaScript Standard Style
除很多公司組織外，很多個人也在項目中使用的規(guī)范。
https://github.com/standard/standard
Vue
這里是官方的 Vue 特有代碼的風(fēng)格指南。
如果在工程中使用 Vue，為了回避錯誤、小糾結(jié)和反模式，該指南是份不錯的參考。
不過我們也不確信風(fēng)格指南的所有內(nèi)容對于所有的團隊或工程都是理想的。
所以根據(jù)過去的經(jīng)驗、周圍的技術(shù)棧、個人價值觀做出有意義的偏差是可取的。
官方風(fēng)格指南： https://cn.vuejs.org/v2/style-guide/index.html
es6
如何將 ES6 的新語法，運用到編碼實踐之中，與傳統(tǒng)的 JavaScript 語法結(jié)合在一起，寫出合理的、易于閱讀和維護的代碼。
es6 編程風(fēng)格： http://es6.ruanyifeng.com/#docs/style
Bootstrap
內(nèi)容包含 HTML 和 CSS。
HTML
語法、HTML5 doctype、語言屬性、IE 兼容模式、字符編碼、引入 CSS 和 JavaScript 文件、實用為王、屬性順序、布爾型屬性、減少標(biāo)簽的數(shù)量、JavaScript 生成的標(biāo)簽。
CSS
語法、聲明順序、不要使用 @import、媒體查詢（Media query）的位置、帶前綴的屬性、單行規(guī)則聲明、簡寫形式的屬性聲明、Less 和 Sass 中的嵌套、Less 和 Sass 中的操作符、注釋、class 命名、選擇器、代碼組織。
Bootstrap 編碼規(guī)范： https://codeguide.bootcss.com/
ESLint
目前絕大多數(shù)前端項目都會用到的 可組裝的 JavaScrip t和 JSX 檢查工具。
發(fā)現(xiàn)問題
ESLint 靜態(tài)分析您的代碼以快速發(fā)現(xiàn)問題。ESLint 內(nèi)置于大多數(shù)文本編輯器中，您可以將ESLint 作為持續(xù)集成管道的一部分運行。
自動修復(fù)
ESLint 發(fā)現(xiàn)的許多問題都可以自動修復(fù)。ESLint 修復(fù)程序可識別語法，因此您不會遇到傳統(tǒng)的查找和替換算法引入的錯誤。
定制
預(yù)處理代碼，使用自定義解析器，并編寫與 ESLint 內(nèi)置規(guī)則一起使用的自己的規(guī)則。您可以自定義 ESLint，使其完全按照項目所需的方式工作。
ESLint: https://eslint.org/
ESLint 中文網(wǎng)： https://eslint.bootcss.com/
Prettier
Prettier 是一個“有主見”的代碼格式化工具。
簡而言之，這個工具能夠使輸出代碼保持風(fēng)格一致。
也是目前絕大多數(shù)前端項目都會用到的哦。
Prettier： https://prettier.io/
文章名稱：推薦幾個大廠的前端代碼規(guī)范，學(xué)會了，你也能寫出詩一樣的代碼！
標(biāo)題網(wǎng)址：http://www.dlmjj.cn/article/dphdopg.html
