關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

前端 vue 開發準則

前端 vue 開發準則

為了讓其他開發者也能理解你每一行程式碼的涵義及作用
在建構程式時,盡力打造清晰直觀的架構,讓程式更容易維護及重構
有關傳遞相關的參數,應該避免過度複雜,避免我們無法直覺看出它的功能

框架結構

使用開源框架,其優點是可以遵循公認的標準格式,
在框架內自定義架構,需要留意幾點:
組織必須有序,直觀,以及有所邏輯性
結構或程式,階按照字母順序排列

Component

Component 命名要具體描述,由簡單2-3單字組成
第一個單字可作為一些公用component 前綴空間命名 (例如 app- )
每一個component必須保持獨立,並且能提供給大多數組件使用

Template

Template 應該盡量避免寫入太多表達式
表達式可以放在 method 或 computed 裡面來進行

props

雖然 vue 支援可以透過 props 傳遞複雜的物件或資料,但是應盡量只傳遞基本的數據形態(int, number, string, boolean....)
props 須遵循向下傳遞,向上傳遞需透過事件 (events)

穩定,並且可預測的API

必須確保所開發出的功能,可以應對不同情況
例如,
有傳參數,需校驗型態,以及因應參數類型錯誤時的做法
無傳入參數,需要返回預設值

代碼檢查

可以透過 eslint-plugin-html 來追蹤校驗代碼
(安裝 vue-cli 預設就會啟動這項檢驗)
保證開發者可以使用同樣的編碼規範

Mixins

對於需要大量重複使用到的組件,可以包裝成 Minins export,讓程式可以重複被應用,共享

避免

避免使用 this.$parent, this.$refs

實際使用過程,若透過 props, events 仍無法有效的解決問題,在考慮透過 $this.refs 實現

Reference:
https://pablohpsilva.github.io/vuejs-component-style-guide/
https://addyosmani.com/first/


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦