命名規(guī)范

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

1：作用域不大臨時變量可以簡寫，比如：str，num，bol，obj，fun，arr。

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

標準變量采用駝峰式命名

ID在變量名中全大寫

URL在變量名中全大寫

Android在變量名中大寫第一個字母

iOS在變量名中小寫第一個，大寫后兩個字母

常量全大寫，用下劃線連接

構造函數(shù)，大寫第一個字母

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

指令規(guī)范：

1.為v-for設置Key值。(不建議 用index 作為 key，和沒寫基本上沒區(qū)別，因為不管你數(shù)組的順序怎么顛倒，index 都是 0, 1, 2 這樣排列，導致 Vue 會復用錯誤的舊子節(jié)點，做很多額外的工作)

2.規(guī)避v-if和v-for用在一起。或者增加一層

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

4.復用多用v-show少用v-if

路由

1.路由至少包含三個選項：path、name、component。path統(tǒng)一小寫；name對應于組件中的name，大寫開頭駝峰；component組件駝峰。名稱大寫開頭的組件

Template模板文件

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

2.標簽語義化，避免清一色的div元素

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

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

5.及時模塊化

我們在實際進行組件抽離工作的時候，需要考慮到不要過度的組件化

在決定是否將代碼分開時，無論是 Javascript 邏輯還是抽離為新的組件，都需要考慮以下幾點：

是否有足夠的頁面結構/邏輯來保證它？

• 代碼重復（或可能重復）？
• 它會減少需要書寫的模板嗎？
• 性能會收到影響嗎？
• 是否會在測試代碼的所有部分時遇到問題？
• 是否有一個明確的理由？
• 這些好處是否超過了成本？

css:

1.使用 scoped關鍵字，約束樣式生效的范圍。

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

其它注意事項

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

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

對應的方法應該使用對應的動詞，例如：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

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

文件夾小寫，vue文件大寫

補充：結構化規(guī)范

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

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

以下全局文件文件均以 index.js 導出，并在 main.js 中導入

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

src 源碼目錄

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

總結

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

最新評論