iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 23
0
Modern Web

忍住不打牌位,只要30天VueJS帶你上A牌系列 第 23

Day23 介紹vue風格指南-命名原則

命名原則(Naming Rules)

元件命名_Component names

  1. 大駝峰(PascalCase
  2. 全局元件註冊時,可以兼容使用橫線連接(kebab-case)
  3. 元件名必須為多個單詞
Vue.component('MyComponent', {
...
})
// 全局元件註冊兼容橫線連接命名
Vue.component('my-component', {
...
})
export default {
    name: 'MyComponent'
}

元件檔案命名_Component File names

全部大駝峰(PascalCase),無底線,不能縮寫
或全部橫線連接(kebab-case),無底線,不能縮寫
Ex. TodoList.vuetodo-list.vue

元件在模版中的命名規則_Component name casing in templates

1.在single file components、string templates使用大駝峰(PascalCase),若沒有內容的元件應該是自閉合
2.在DOM templates 使用橫線連接(kebab-case),且永遠不要使用自閉合/
3.或者全部使用橫線連接(kebab-case),因為HTML對大小寫不敏感

<!-- In single file components, string templates -->
<MyComponent />
...
<!-- In DOM templates -->
<my-component></my-component>
...
<!-- In All templates -->
<my-component></my-component>

p.s:
1.single file components是指我們常見.vue檔,有<script><template><style>的單文件元件
2.string templates是指字符串的元件,如

Vue.component('AboutPage', {
  template: '<p>This is a about page</p>'
})

私有屬性,$_ 做為前綴命名_Private property names

在 plugin、mixin 中的私有屬性使用 $_ 做為前綴,同時,為了迴避和其它作者的衝突,再附帶一個命名空間(小駝峰)以迴避和其它作者的衝突
Ex. $_myNameSpace_updateData ()

使用prototype應用 $ 做為前綴命名_Prototype property names

官方建議 prototype 的命名最好冠上 $ 符號,原因是避免與組件內的方法名稱衝到,另外就是開發慣例(ex. this.$router, this.$store) 好讓所有使用者一眼就可以理解這就是 prototype!
Ex. this.$isDev()

基礎組件命名_Base component names

應用特定樣式和約定的基礎組件(也就是展示類的、無邏輯的或無狀態的組件)應該全部以一個特定的前綴開頭,比如BaseAppV
Ex. BaseButton.vue

單例組件名_Single-instance component names

對於每個頁面只會使用一次的組件只應該擁有單個活躍實例的組件,應該以 The 前綴命名,以示其唯一性,這些組件永遠不接受任何 props
Ex. TheHeader.vue

緊密耦合的組件_Tightly coupled component names

和父組件緊密耦合的子組件應該以父組件名作為前綴命名
Ex. components/
| - Searchbar.vue
| - SearchbarNavigation.vue

組件命名順序性_Order of words in component names

組件名應該以層次較高、較普遍的單詞開頭,以描述性的修飾詞結尾
Ex. components/
| - SearchButtonClear.vue
| - SearchButtonRun.vue
| - SearchInputQuery.vue

Props 命名_Props names

1.在聲明 props 的時候,其命名應該始終使用小駝峰(camelCase)
2.在模板(template)和 JSX 中應該始終使用橫線連接 (kebab-case)

props: {
  greetingText: String
}
...
<WelcomeMessage greeting-text="hi"/>

有任何問題歡迎下方留言,如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang


上一篇
Day 22介紹vue風格指南-寫作規範
下一篇
Day24 你要去哪裡? - Vue Router 路由-1
系列文
忍住不打牌位,只要30天VueJS帶你上A牌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言