VueJS Style Guide 導讀

Slide 1

Slide 1 text

VueJS Style Guide 導讀 Kuro Hsu @ Vue.js 台灣 Meetup 2018#01

Slide 2

Slide 2 text

http://vue.tw VueJS 台灣有專屬網址了了

Slide 3

Slide 3 text

Kuro Hsu http://kuro.tw [email protected] @kurotanshi

Slide 4

Slide 4 text

https://vuejs.org/v2/style-guide/index.html

Slide 5

Slide 5 text

✴ Priority A: 必要遵守 (防⽌止錯誤) ✴ Priority B: 強烈推薦 (增加可讀性) ✴ Priority C: 推薦 (保持程式碼⼀一致性) ✴ Priority D: 謹慎使⽤用 (效能調校與潛在風險)

Slide 6

Slide 6 text

組件的命名 01 • 為避免衝突，以多個單字加上「連字號」命名 • 注意在 HTML 與 template 的表⽰示⽅方式

Slide 7

Slide 7 text

組件的 data 必須是 function 02 • 另⼀一個要注意的點是「data 內不可使⽤用箭頭函數 =>」

Slide 8

Slide 8 text

prop 的定義盡可能詳細 03

Slide 9

Slide 9 text

為 v-for 設定 :key 04

Slide 10

Slide 10 text

ref: https://calendar.perfplanet.com/2013/diff/

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

避免將 v-if 與 v-for ⼀一起⽤用 05

Slide 14

Slide 14 text

為組件的樣式設定作⽤用範圍 06

Slide 15

Slide 15 text

屬性的命名規則 07 • data 內部的屬性也不能以底線 _ 或錢字號 $ 作為開頭

Slide 16

Slide 16 text

將組件個別分為獨立的檔案

Slide 17

Slide 17 text

將組件個別分為獨立的檔案

Slide 18

Slide 18 text

組件檔案命名規則

Slide 19

Slide 19 text

組件檔案命名規則

Slide 20

Slide 20 text

組件檔案命名規則

Slide 21

Slide 21 text

每⾴頁只使⽤用⼀一次的組件 • 對於每個⾴頁⾯面只會使⽤用⼀一次的組件應該以 The 前綴命名，以表⽰示其唯⼀一性。這些組件不應有任何 prop 屬性。

Slide 22

Slide 22 text

緊密耦合的組件 • 以⽗父組件名稱作為⽬目錄名稱來來分層是常⾒見見的做法，但可能造成許多⼦子組件的名稱相同，在開發階段可能不易易辨識。

Slide 23

Slide 23 text

緊密耦合的組件 • 和⽗父組件緊密耦合的⼦子組件，應該以⽗父組件名稱作為前綴

Slide 24

Slide 24 text

組件命名的順序 • 以概念念上較普遍的單詞作為開頭，以描述性的修飾詞結尾

Slide 25

Slide 25 text

Self-closing 組件 • 使⽤用 HTML DOM 作為模板時，不⽀支援 component 使⽤用 self-closing tag。 08

Slide 26

Slide 26 text

DOM 解析注意 • 某些 HTML 元素限制內部的元素只能是某幾種 tag，如 table、select、ul / ol 等，若若是使⽤用組件時就必須特別⼩小⼼心。 09

Slide 27

Slide 27 text

模板命名⼤大⼩小寫 10

Slide 28

Slide 28 text

模板命名⼤大⼩小寫 10

Slide 29

Slide 29 text

prop 命名 11

Slide 30

Slide 30 text

多種屬性的元素

Slide 31

Slide 31 text

多種屬性的元素

Slide 32

Slide 32 text

讓 view 保持簡單 12

Slide 33

Slide 33 text

讓 view 保持簡單 12

Slide 34

Slide 34 text

保持 computed 屬性簡單

Slide 35

Slide 35 text

保持 computed 屬性簡單

Slide 36

Slide 36 text

保持簡寫的⼀一致性

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

避免直接操作 this.$parent • 組件必須保持獨立，如果⼀一個組件需要對它的上/下層直接存取，那麼這個組件則無法解耦，在其他地⽅方使⽤用。 13

Slide 39

Slide 39 text

Event Bus 14

Slide 40

Slide 40 text

注意陣列列、物件更更新的機制 15

Slide 41

Slide 41 text

⼯工商服務

Slide 42

Slide 42 text

專屬優惠 Just for you ! ! 報名【 Vue.js 與 Vuex 前端開發實戰】即享有 NT$ 500 課程優惠請於報名表裡的備註欄欄註明是參參加 1/17 Vue.js Meetup 的朋友將於第⼀一堂課退抵 NT$ 500 優惠：）

Slide 43

Slide 43 text

特別感謝場地⽀支援

Slide 44

Slide 44 text

下回預告「原來來 vue 還可以這樣玩，JSX 與 storybook」 Vue.js 台灣 Meetup 2018#02 預計⼆二⽉月上旬開放報名

Slide 45

Slide 45 text

Thanks