|
程序員寫好看的代碼，不亞于寫一行好看的字 以下來自B站的學(xué)習(xí)視頻：前端必備-阿里大廠前端開發(fā)規(guī)范！ 1、命名規(guī)范 1.1 項目命名 · 全部采用小寫的方式 · 以下劃線分割 正確命名：sdgk_app 或 gkux_yxtool_app 錯誤命名：mall-management-system 或 mallManagementSystem 1.2 目錄命名 · 全部采用小寫的方式 · 以中劃線命名 · 復(fù)數(shù)時，要采用復(fù)數(shù)結(jié)構(gòu) 正確命名：sctipts / styles / utils / demo-scripts 1.3 JS、CSS、SCSS、HTML、PNG等文件命名 · 全部采用小寫的方式 · 以中劃線命名 正確命名：render-dom.js / signup.css / index.html / company-logo 1.4 命名嚴(yán)謹(jǐn)性 · 嚴(yán)禁使用 拼音和中文混合的方式 · 嚴(yán)禁使用中文、中文拼音 · 正確使用 英文拼寫和語法 · 一些特殊的詞語可以采用國際通用的名稱 如：河南=henan / 人民幣=rmb 正確命名：movie(電影) / employee(員工) 錯誤命名：dianyin(電影) condition --> condi (×) 2、HTML規(guī)范（Vue Template通用） 2.1 HTML類型 · 推薦使用 HTML5 的文檔類型申明 <!DOCTYPE html> · 規(guī)定的字符編碼 <meta charset="UTF-8"> · IE兼容模式 <meta http-equiv="X-UA-Compatible" content="IE-Edge"> · doctype 大寫 2.2 縮進(jìn) · 一個tab 使用四個空格 · 嵌套的節(jié)點應(yīng)該縮進(jìn) 2.3 分塊注釋 在每一個塊級元素，列表元素 和 表格元素中，加上一對HTML注釋，注釋格式 <!-- 英文 中文 start --> <!-- 英文 中文 end --> 例如： <!-- header 頭部 start --> <header> <div> <a href=""></a> </div> </header> <!-- header 頭部 end --> 2.4 語義化標(biāo)簽 HTML5 有很多語義化標(biāo)簽，優(yōu)先使用這些語義化標(biāo)簽，避免每一個頁面都是 div或者 p 2.5 引號 html標(biāo)簽中使用雙引號" " ，而不是單引號'' · 類名使用小寫字母，以中劃線分割 .swiper-image { ... } · id 使用 駝峰式命名 #header { ... } · scss中的變量、函數(shù)、混合、placeholder采用駝峰命名 · ID和class 的名稱總是使用可以反應(yīng)元素目的和用途的名稱，或其他通用名稱，代替表象和晦澀難懂的名稱 不推薦： .fw-800{ font-weight: 800; } .red{ color ：red; } 推薦： .heavy{ font-weight : 800; } .important{ color ：red; } 1）css選擇器中避免使用標(biāo)簽名 從結(jié)構(gòu)、表現(xiàn)、行為分離的原則來看，應(yīng)該盡量避免css中出現(xiàn)HTML標(biāo)簽，并且在css選擇器中出現(xiàn)標(biāo)簽名會存在潛在的問題。 2）盡量使用直接子選擇器，否則，有時會造成性能損耗。 不推薦： .content .title { font-size: 2rem; } 推薦： .content > .title { font-size: 2rem; } 不推薦： border-style: solid; border-width: 1px; border-color: red; 推薦： border: 1px solid red; 不推薦： img { width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1); } 推薦： img { width: 100%; box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1); } 能不用 id選擇器 就不要 使用id選擇器，避免不是禁止 · 將公告less文件放置在 style/less/common文件夾 · 按以下順序組織 1. @import 2. 變量聲明 3. 樣式聲明 @import 'mixins/size.less' @default-text-color: #333; .page { width: 960px; margin: 0 auto; } 將嵌套深度限制在 3 級 不推薦： .main { .title { .name { color: #fff; } } } 推薦： .main-title { .name { color: #fff; } } 5、Javascript規(guī)范 · 采用小寫駝峰命名 lowerCameCase，代碼命名均不能以下劃線開頭，也不能以下劃線或美元符號結(jié)尾 反例：_name / name_ / name$ · 方法名、參數(shù)名、成員變量、局部變量統(tǒng)一采用駝峰命名風(fēng)格 正確命名：localValue / getHttpMessage() 錯誤命名：localvalue / gethttpmessage() · 方法名 必須是 動詞 或者 動詞+名詞 形式 · 增刪查改，統(tǒng)一使用如下 5 個單詞 add / update / delete / get / detail 附：函數(shù)常用方法的動詞： get 獲取 / set 設(shè)置 add 增加 / remove 刪除 create 創(chuàng)建 / destory 移除 start 啟動 / stop 停止 open 打開 / close 關(guān)閉 read 讀取 / write寫入 load 載入 / save 保存 begin 開始 / end 結(jié)束 backup 備份 / restore 恢復(fù) import 導(dǎo)入 / export 導(dǎo)出 split 分割 / merge 合并 inject 注入 / extract 提取 · 常量全部大寫，單詞之間用下劃線隔開，力求語義表達(dá)完整清楚，不要嫌名字長 正確命名：PROVINCE_TYPE / BATCH_TYPE_LIST 錯誤命名：province_type / provinceType / province-type · · 使用四個空格進(jìn)行縮進(jìn) if (x < y) { x += 10; } else { x += 1; } · 不同邏輯，不同語義，不同業(yè)務(wù)之間插入一個空行分隔 統(tǒng)一使用單引號''，不使用雙引號""，這對創(chuàng)建HTML字符串非常有好處 let str = 'foo'; let testDiv = '<div id="test"></div>' · 使用字面量創(chuàng)建對象 推薦： let user = []; 不推薦： let user = new Object(); · 使用字面量來代替對象構(gòu)建器 推薦： let user = { age: 0 } 不推薦： let user = new Object(); user.age = 0; 簡化程序，使代碼更加靈活和可復(fù)用 如：箭頭函數(shù)、await/async、解構(gòu)、let、for…of 等 下列關(guān)鍵詞必須有大括號（即使代碼只有一行）:if / else / for / while / try / catch / finally / with 推薦： if (isTrue) { doSomeThing(); } 不推薦： if (isTrue) doSomeThing(); 永遠(yuǎn)不要直接使用undefined進(jìn)行變量判斷；使用typeof 和字符串 'undefined'對變量進(jìn)行判斷 推薦： if (typeof person === 'undefined') { ... } 不推薦 if (person === undefined) { ... } 條件判斷能使用 三目運算符 和 邏輯運算符的，就不要使用條件判斷。 如果超過三層的 ，抽成函數(shù)，并寫清楚注釋 對上下文 this的引用只能使用 self來命名 let self = this; 對 console.log會有性能問題，生產(chǎn)環(huán)境下請清除console.log |
|
|
來自： 昵稱71062804 > 《前端》
