前端開發(fā)規(guī)范
規(guī)范目的
命名規(guī)范
結(jié)構(gòu)化規(guī)范
注釋規(guī)范
編碼規(guī)范
CSS 規(guī)范
規(guī)范目的
為提高團隊協(xié)作效率
便于后臺人員添加功能及前端后期優(yōu)化維護
輸出高質(zhì)量的文檔
命名規(guī)范
為了讓大家書寫可維護的代碼，而不是一次性的代碼
讓團隊當中其他人看你的代碼能一目了然
甚至一段時間時候后你再看你某個時候?qū)懙拇a也能看
普通變量命名規(guī)范
命名方法 ：駝峰命名法
命名規(guī)范 ：
命名必須是跟需求的內(nèi)容相關(guān)的詞，比如說我想申明一個變量，用來表示我的學校，那么我們可以這樣定義const mySchool = "我的學校";
命名是復數(shù)的時候需要加s,比如說我想申明一個數(shù)組，表示很多人的名字，那么我們可以這樣定義const names = new Array();
常量
命名方法 : 全部大寫
命名規(guī)范 : 使用大寫字母和下劃線來組合命名，下劃線用以分割單詞。
const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'
組件命名規(guī)范
官方文檔推薦及使用遵循規(guī)則：
PascalCase (單詞首字母大寫命名)是最通用的聲明約定
kebab-case (短橫線分隔命名) 是最通用的使用約定
組件名應該始終是多個單詞的，根組件 App 除外
有意義的名詞、簡短、具有可讀性
命名遵循? ? PascalCase 約定
公用組件以 Abcd
? ? ? (公司名縮寫簡稱) 開頭，如（AbcdDatePicker,AbcdTable）
頁面內(nèi)部組件以組件模塊名簡寫為開頭，Item 為結(jié)尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）
使用遵循? ? kebab-case 約定
在頁面中使用組件需要前后閉合，并以短線分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）
導入及注冊組件時，遵循? ? PascalCase 約定
同時還需要注意：必須符合自定義元素規(guī)范: 切勿使用保留字。
method 方法命名命名規(guī)范
駝峰式命名，統(tǒng)一使用動詞或者動詞+名詞形式
? //bad
? go、nextPage、show、open、login
??? // good
? jumpPage、openCarInfoDialog
請求數(shù)據(jù)方法，以? ? data 結(jié)尾
? //bad
? takeData、confirmData、getList、postForm
? // good
? getListData、postFormData
init、refresh 單詞除外
盡量使用常用單詞開頭（set、get、go、can、has、is）
附：函數(shù)方法常用的動詞:
get 獲取/set 設置,
add 增加/remove 刪除
create 創(chuàng)建/destory 移除
start 啟動/stop 停止
open 打開/close 關(guān)閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創(chuàng)建/destroy 銷毀
begin 開始/end 結(jié)束,
backup 備份/restore 恢復
import 導入/export 導出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標記
copy 復制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動/run 運行
compile 編譯/execute 執(zhí)行,
debug 調(diào)試/trace 跟蹤
observe 觀察/listen 監(jiān)聽,
build 構(gòu)建/publish 發(fā)布
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect斷開,
send 發(fā)送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize同步
update 更新/revert 復原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結(jié)束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate廢舊,
collect 收集/aggregate 聚集
views 下的文件命名
只有一個文件的情況下不會出現(xiàn)文件夾，而是直接放在 views 目錄下面，如Index.vue
盡量是名詞,且使用駝峰命名法
開頭的單詞就是所屬模塊名字（WorkbenchIndex、WorkbenchList、WorkbenchEdit）
名字至少兩個單詞（good:
? ? WorkbenchIndex）（bad:Workbench）
props 命名
在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板中應該始終使用kebab-case
props: {
? 'greeting-text':String
}
props: {
? greetingText:String
}
例外情況
作用域不大臨時變量可以簡寫，比如：str，num，bol，obj，fun，arr。
循環(huán)變量可以簡寫，比如：i，j，k 等。
結(jié)構(gòu)化規(guī)范
目錄文件夾及子文件規(guī)范
以下統(tǒng)一管理處均對應相應模塊
以下全局文件文件均以? ? index.js 導出，并在main.js 中導入
以下臨時文件，在使用后，接口已經(jīng)有了，發(fā)版后清除
vue 文件基本結(jié)構(gòu)
??? export default{
????? components :{
????? },
????? data () {
??????? return {
??????? }
????? },
????? mounted() {
????? }，
????? methods: {
????? }
?? }
多個特性的元素規(guī)范
多個特性的元素應該分多行撰寫，每個特性一行。(增強更易讀)
?src="https://vuejs.org/images/logo.png"
? alt="VueLogo"
>?
? foo="a"
? bar="b"
? baz="c"
>?
元素特性的順序
原生屬性放前面，指令放后面
如下所示：
? - class
? - id,ref
? - name
? - data-*
? - src, for, type,href,value,max-length,max,min,pattern
? - title, alt，placeholder
? - aria-*, role
? -required,readonly,disabled
? - is
? - v-for
? - key
? - v-if
? - v-else-if
? - v-else
? - v-show
? - v-cloak
? - v-pre
? - v-once
? - v-model
? - v-bind,:
? - v-on,@
? - v-html
? - v-text
組件選項順序
如下所示：
? - components
? - props
? - data
? - computed
? - created
? - mounted
? - metods
? - filter
? - watch
注釋規(guī)范
代碼注釋在一個項目的后期維護中顯的尤為重要，所以我們要為每一個被復用的組件編寫組件使用說明，為組件中每一個方法編寫方法說明
務必添加注釋列表
公共組件使用說明
各組件中重要函數(shù)或者類說明
復雜的業(yè)務邏輯處理說明
特殊情況的代碼處理說明,對于代碼中特殊用途的變量、存在臨界值、函數(shù)中使用的 hack、使用了某種算法或思路等需要進行注釋描述
多重 if 判斷語句
注釋塊必須以/**（至少兩個星號）開頭**/
單行注釋使用//
單行注釋
注釋單獨一行，不要在代碼后的同一行內(nèi)加注釋。例如：
? bad
? var name =”abc”;//姓名???
? good
? //姓名
? var name =“abc”;????????
多行注釋
組件使用說明，和調(diào)用說明
????? /**
????? *組件名稱
????? * @module組件存放位置
????? * @desc組件描述
????? * @author組件作者
????? * @date 2017年12月05日17:22:43
????? * @param{Object} [title]??? -參數(shù)說明
????? * @param{String} [columns] -參數(shù)說明
????? * @example調(diào)用示例
????? *?
????? **/
編碼規(guī)范
優(yōu)秀的項目源碼，即使是多人開發(fā)，看代碼也如出一人之手。統(tǒng)一的編碼規(guī)范，可使代碼更易于閱讀，易于理解，易于維護。盡量按照 ESLint 格式要求編寫代碼
源碼風格
使用 ES6 風格編碼
定義變量使用 let
? ? ,定義常量使用const
靜態(tài)字符串一律使用單引號或反引號，動態(tài)字符串使用反引號
? // bad
? const a ='foobar'
? const b = 'foo' +a + 'bar'
? // acceptable
? const c =`foobar`
? // good
??const a = 'foobar'
? const b =`foo${a}bar`
? const c ='foobar'
解構(gòu)賦值
數(shù)組成員對變量賦值時，優(yōu)先使用解構(gòu)賦值
? //數(shù)組解構(gòu)賦值
? const arr = [1,2, 3, 4]
? // bad
? const first =arr[0]
? const second =arr[1]
? // good
? const [first,second] = arr
函數(shù)的參數(shù)如果是對象的成員，優(yōu)先使用解構(gòu)賦值
? //對象解構(gòu)賦值
? // bad
? functiongetFullName(user) {
??? const firstName= user.firstName
??? const lastName= user.lastName
? }
? // good
? functiongetFullName(obj) {
??? const {firstName, lastName } = obj
? }
? // best
? functiongetFullName({ firstName, lastName }) {}
拷貝數(shù)組
使用擴展運算符（...）拷貝數(shù)組。
? const items = [1,2, 3, 4, 5]
? // bad
? const itemsCopy =items
? // good
? const itemsCopy =[...items]
箭頭函數(shù)
需要使用函數(shù)表達式的場合，盡量用箭頭函數(shù)代替。因為這樣更簡潔，而且綁定了this
? // bad
? const self =this;
? const boundMethod= function(...params) {
??? returnmethod.apply(self, params);
? }
? // acceptable
? const boundMethod= method.bind(this);
? // best
? const boundMethod= (...params) => method.apply(this, params);
模塊
如果模塊只有一個輸出值，就使用 export default，如果模塊有多個輸出值，就不使用 export
? ? default，export default 與普通的 export 不要同時使用
? // bad
? import * asmyObject from './importModule'
? // good
? import myObjectfrom './importModule'
如果模塊默認輸出一個函數(shù)，函數(shù)名的首字母應該小寫。
? functionmakeStyleGuide() {
? }
? export defaultmakeStyleGuide;
如果模塊默認輸出一個對象，對象名的首字母應該大寫。
? const StyleGuide= {
??? es6: {
??? }
? };
? export defaultStyleGuide;
指令規(guī)范
指令有縮寫一律采用縮寫形式
? // bad
? v-bind:class="{'show-left'：true}"
?v-on:click="getListData"
? // good
?:class="{'show-left'：true}"
?@click="getListData"
v-for 循環(huán)必須加上 key 屬性，在整個 for 循環(huán)中 key 需要唯一
????? {{ todo.text}}
????? {{ todo.text}}
避免 v-if 和 v-for 同時用在一個元素上（性能問題）
以下為兩種解決方案：
將數(shù)據(jù)替換為一個計算屬性，讓其返回過濾后的列表
????? {{ user.name}}
????? {{ user.name}}
? computed: {
??? activeUsers:function () {
????? return this.users.filter(function(user) {
??????? returnuser.isActive
????? })
??? }
? }
將 v-if 移動至容器元素上 (比如ul, ol)
????? {{ user.name}}
????? {{ user.name}}
Props 規(guī)范
Props 定義應該盡量詳細
// bad 這樣做只有開發(fā)原型系統(tǒng)時可以接受
props: ['status']
// good
props: {
? status: {
??? type: String,
??? required: true,
??? validator:function (value) {
????? return [
??????? 'syncing',
??????? 'synced',
???????'version-conflict',
??????? 'error'
?????].indexOf(value) !== -1
??? }
? }
}
其他
避免this.$parent
調(diào)試信息? ? console.log() debugger 使用完及時刪除
除了三目運算，if,else
? ? 等禁止簡寫
? // bad
? if (true)
????? alert(name);
?console.log(name);
? // bad
? if (true)
? alert(name);
? console.log(name)
? // good
? if (true) {
????? alert(name);
? }
?console.log(name);
CSS 規(guī)范
通用規(guī)范
統(tǒng)一使用"-"連字符
省略值為 0 時的單位
公用組件,需要有自己的前綴
?// bad
? padding-bottom:0px;
? margin: 0em;
?// good
? padding-bottom:0;
? margin: 0;
如果 CSS 可以做到，就不要使用JS
建議并適當縮寫值，提高可讀性，特殊情況除外
“建議并適當”是因為縮寫總是會包含一系列的值，而有時候我們并不希望設置某一值，反而造成了麻煩，那么這時候你可以不縮寫，而是分開寫。
當然，在一切可以縮寫的情況下，請務必縮寫，它最大的好處就是節(jié)省了字節(jié)，便于維護，并使閱讀更加一目了然。
? // bad
? .box{
? ??border-top-style: none;
??? font-family:palatino, georgia, serif;
??? font-size:100%;
??? line-height:1.6;
??? padding-bottom:2em;
??? padding-left:1em;
??? padding-right:1em;
??? padding-top: 0;
? }
? // good
? .box{
??? border-top: 0;
??? font: 100%/1.6palatino, georgia, serif;
??? padding: 0 1em2em;
? }
聲明應該按照下表的順序
左到右，從上到下
顯示屬性自身屬性文本屬性和其他修飾
displaywidthfont
visibilityheighttext-align
positionmargintext-decoration
floatpaddingvertical-align
clearborderwhite-space
list-styleoverflowcolor
topmin-widthbackground
? // bad
? .box {
??? font-family:'Arial', sans-serif;
??? border: 3pxsolid #ddd;
??? left: 30%;
??? position:absolute;
??? text-transform:uppercase;
???background-color: #eee;
??? right: 30%;
??? isplay: block;
??? font-size:1.5rem;
??? overflow:hidden;
??? padding: 1em;
??? margin: 1em;
? }
? // good
? .box {
??? display: block;
??? position:absolute;
??? left: 30%;
??? right: 30%;
??? overflow:hidden;
??? margin: 1em;
??? padding: 1em;
??? background-color:#eee;
??? border: 3pxsolid #ddd;
??? font-family:'Arial', sans-serif;
??? font-size:1.5rem;
??? text-transform:uppercase;
? }
元素選擇器應該避免在? ? scoped 中出現(xiàn)
官方文檔說明：在 scoped 樣式中，類選擇器比元素選擇器更好，因為大量使用元素選擇器是很慢的。
分類的命名方法
使用單個字母加上"-"為前綴
布局（grid）（.g-）；
模塊（module）（.m-）；
元件（unit）（.u-）；
功能（function）（.f-）；
皮膚（skin）（.s-）；
狀態(tài)（.z-）。
統(tǒng)一語義理解和命名
布局（.g-）
語義命名簡寫
文檔docdoc
頭部headhd
主體bodybd
尾部footft
主欄mainmn
主欄子容器maincmnc
側(cè)欄sidesd
側(cè)欄子容器sidecsdc
盒容器wrap/boxwrap/box
模塊（.m-）、元件（.u-）
語義命名簡寫
導航navnav
子導航subnavsnav
面包屑crumbcrm
菜單menumenu
選項卡tabtab
標題區(qū)head/titlehd/tt
內(nèi)容區(qū)body/contentbd/ct
列表listlst
表格tabletb
表單formfm
熱點hothot
排行toptop
登錄loginlog
標志logologo
廣告advertisead
搜索searchsch
幻燈slidesld
提示tipstips
幫助helphelp
新聞newsnews
下載downloaddld
注冊registreg
投票votevote
版權(quán)copyrightcprt
結(jié)果resultrst
標題titlett
按鈕buttonbtn
輸入inputipt
功能（.f-）
語義命名簡寫
浮動清除clearbothcb
向左浮動floatleftfl
向右浮動floatrightfr
內(nèi)聯(lián)塊級inlineblockib
文本居中textaligncentertac
文本居右textalignrighttar
文本居左textalignlefttal
垂直居中verticalalignmiddlevam
溢出隱藏overflowhiddenoh
完全消失displaynonedn
字體大小fontsizefs
字體粗細fontweightfw
皮膚（.s-）
語義命名簡寫
字體顏色fontcolorfc
背景backgroundbg
背景顏色backgroundcolorbgc
背景圖片backgroundimagebgi
背景定位backgroundpositionbgp
邊框顏色bordercolorbdc
狀態(tài)（.z-）
語義命名簡寫
選中selectedsel
當前currentcrt
顯示showshow
隱藏hidehide
打開openopen
關(guān)閉closeclose
出錯errorerr
不可用disableddis
sass 規(guī)范
當使用 Sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序，以下內(nèi)容是一個 SCSS 塊應具有的順序。
當前選擇器的樣式屬性
父級選擇器的偽類選擇器(:first-letter, :hover, :active etc)
偽類元素(:before and :after)
父級選擇器的聲明樣式(.selected, .active, .enlarged etc.)
用 Sass 的上下文媒體查詢
子選擇器作為最后的部分
? .product-teaser {
??? // 1. Styleattributes
??? display:inline-block;
??? padding: 1rem;
???background-color: whitesmoke;
??? color: grey;
??? // 2. Pseudoselectors with parent selector
??? &:hover {
????? color: black;
??? }
??? // 3. Pseudoelements with parent selector
??? &:before {
????? content:"";
????? display:block;
????? border-top:1px solid grey;
??? }
??? &:after {
??? ??content: "";
????? display:block;
????? border-top:1px solid grey;
??? }
??? // 4. Stateclasses with parent selector
??? &.active {
?????background-color: pink;
????? color: red;
????? // 4.2.Pseuso selector in state class selector
????? &:hover {
??????? color:darkred;
????? }
??? }
??? // 5.Contextual media queries
?? ?@media screen and (max-width: 640px) {
????? display:block;
????? font-size:2em;
??? }
??? // 6. Subselectors
??? > .content> .title {
????? font-size:1.2em;
????? // 6.5.Contextual media queries in sub selector
????? @media screenand (max-width: 640px) {
???????letter-spacing: 0.2em;
???????text-transform: uppercase;
????? }
??? }
? }
特殊規(guī)范
對用頁面級組件樣式，應該是有作用域的
對于公用組件或者全局組件庫，我們應該更傾向于選用基于 class 的 BEM 策略
? // bad
? // good
? //good
? .c-Button {
??? border: none;
??? border-radius:2px;
? }
? .c-Button--close{
???background-color: red;
? }
關(guān)于git 和svn
1. 需熟用
2. 不確定不能提交,提交有沖突需及時解決
關(guān)于typescript
目前項目暫時沒有用到,可以部分地方先用起來
其他
1.嚴格按照設計稿還原;
2.禁止行內(nèi)樣式;(非改不動樣式)
3.非必要,不允許用jq,用jq需提前和我方負責人說明;
