命名規(guī)范

s：表示字符串。例如：sName，sHtml;
n：表示數(shù)字。例如：nPage，nTotal;
b：表示邏輯。例如：bChecked，bHasLogin;
a：表示數(shù)組。例如：aList，aGroup;
r：表示正則表達(dá)式。例如：rDomain，rEmail;
f：表示函數(shù)。例如：fGetHtml，fInit;
o：表示以上未涉及到的其他對(duì)象，例如：oButton，oDate;

1：作用域不大臨時(shí)變量可以簡(jiǎn)寫(xiě)，比如：str，num，bol，obj，fun，arr。

2：循環(huán)變量可以簡(jiǎn)寫(xiě)，比如：i，j，k等。

標(biāo)準(zhǔn)變量采用駝峰式命名

ID在變量名中全大寫(xiě)

URL在變量名中全大寫(xiě)

Android在變量名中大寫(xiě)第一個(gè)字母

iOS在變量名中小寫(xiě)第一個(gè)，大寫(xiě)后兩個(gè)字母

常量全大寫(xiě)，用下劃線連接

構(gòu)造函數(shù)，大寫(xiě)第一個(gè)字母

var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
    this.name = name;
}

指令規(guī)范：

1.為v-for設(shè)置Key值。(不建議 用index 作為 key，和沒(méi)寫(xiě)基本上沒(méi)區(qū)別，因?yàn)椴还苣銛?shù)組的順序怎么顛倒，index 都是 0, 1, 2 這樣排列，導(dǎo)致 Vue 會(huì)復(fù)用錯(cuò)誤的舊子節(jié)點(diǎn)，做很多額外的工作)

2.規(guī)避v-if和v-for用在一起?；蛘咴黾右粚?/p>

3.函數(shù)中統(tǒng)一使用_this=this來(lái)解決全局指向問(wèn)題。

4.復(fù)用多用v-show少用v-if

路由

1.路由至少包含三個(gè)選項(xiàng)：path、name、component。path統(tǒng)一小寫(xiě)；name對(duì)應(yīng)于組件中的name，大寫(xiě)開(kāi)頭駝峰；component組件駝峰。名稱大寫(xiě)開(kāi)頭的組件

Template模板文件

1.相同的卡片布局，首先整合數(shù)據(jù)，盡量使用循環(huán)方式去增加，避免變更多處的問(wèn)題。

2.標(biāo)簽語(yǔ)義化，避免清一色的div元素

3.DOM的層級(jí)數(shù)盡可能少，優(yōu)化渲染速度。

4.樣式class的命名：統(tǒng)一以小寫(xiě)字母開(kāi)頭，小寫(xiě)字母、下劃線和數(shù)字組成。命名中盡量避免使用中文拼音，應(yīng)該采用更簡(jiǎn)明有語(yǔ)義的英文單詞進(jìn)行組合。不建議使用駝峰法命名class屬性。使用下劃線的目的是為了和第三方庫(kù)中的命名沖突。例如：xx_left,xx_line。

5.及時(shí)模塊化

我們?cè)趯?shí)際進(jìn)行組件抽離工作的時(shí)候，需要考慮到不要過(guò)度的組件化

在決定是否將代碼分開(kāi)時(shí)，無(wú)論是 Javascript 邏輯還是抽離為新的組件，都需要考慮以下幾點(diǎn)：

是否有足夠的頁(yè)面結(jié)構(gòu)/邏輯來(lái)保證它？

• 代碼重復(fù)（或可能重復(fù)）？
• 它會(huì)減少需要書(shū)寫(xiě)的模板嗎？
• 性能會(huì)收到影響嗎？
• 是否會(huì)在測(cè)試代碼的所有部分時(shí)遇到問(wèn)題？
• 是否有一個(gè)明確的理由？
• 這些好處是否超過(guò)了成本？

css:

1.使用 scoped關(guān)鍵字，約束樣式生效的范圍。

2.避免使用標(biāo)簽選擇器（效率低、損耗性能）。

其它注意事項(xiàng)

變量應(yīng)該在最小的范圍內(nèi)定義，并盡可能的保持最少的活動(dòng)時(shí)間。

不要在代碼中重復(fù)使用相同意義的數(shù)字，用一個(gè)變量代替

對(duì)應(yīng)的方法應(yīng)該使用對(duì)應(yīng)的動(dòng)詞，例如：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

校驗(yàn)時(shí)，先去校驗(yàn)公共庫(kù)查找是否有對(duì)應(yīng)校驗(yàn)，有則使用，沒(méi)有則查看是否要多處使用，如果可復(fù)用，則進(jìn)行抽離。公共函數(shù)，還是建議補(bǔ)全注釋，讓后面的人不需要重復(fù)造輪子。復(fù)雜的業(yè)務(wù)邏輯處理說(shuō)明、特殊情況的代碼處理說(shuō)明，對(duì)于特殊用途的變量、存在臨界值、使用了某種算法思路進(jìn)行注釋說(shuō)明

文件夾小寫(xiě)，vue文件大寫(xiě)

補(bǔ)充：結(jié)構(gòu)化規(guī)范

目錄文件夾及子文件規(guī)范

以下統(tǒng)一管理處均對(duì)應(yīng)相應(yīng)模塊

以下全局文件文件均以 index.js 導(dǎo)出，并在 main.js 中導(dǎo)入

以下臨時(shí)文件，在使用后，接口已經(jīng)有了，發(fā)版后清除

src 源碼目錄

|-- api 接口，統(tǒng)一管理
|-- assets 靜態(tài)資源，統(tǒng)一管理
|-- components 公用組件，全局文件
|-- filters 過(guò)濾器，全局工具
|-- icons 圖標(biāo)，全局資源
|-- datas 模擬數(shù)據(jù)，臨時(shí)存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模擬接口，臨時(shí)存放
|-- router 路由，統(tǒng)一管理
|-- store vuex, 統(tǒng)一管理
|-- views 視圖目錄
| |-- staffWorkbench 視圖模塊名
| |-- |-- staffWorkbench.vue 模塊入口頁(yè)面
| |-- |-- indexComponents 模塊頁(yè)面級(jí)組件文件夾
| |-- |-- components 模塊通用組件文件夾

總結(jié)

到此這篇關(guān)于Vue前端書(shū)寫(xiě)規(guī)范的文章就介紹到這了,更多相關(guān)Vue前端書(shū)寫(xiě)規(guī)范內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論