vue 組件設計

前言

對於component到底需要設計到多小，沒有一定的標準，根據開發情境決定。

component設計:

可以分成設計面跟程式面，其實兩個是差不多的規則。

設計面可以參考原子設計裡面的5個部分: 原子，分子，組織，模板，頁面。

原子: UI的最小單位。一個button、一個input或少數div組成的文字框，可以在整個網頁不斷覆用。

分子: 少數原子組合起來，例如表單裡面的label + input。

組織: 由分子和原子組合起來，例如一個form或是一個card。

模板: 由以上分子和原子和組織組合起來，一個頁面的版型。

頁面: 這裡的頁面不同於模板，而是實際套用資料的結果頁面，例如: 一個產品模板會給很多的產品資料套用，不同的產品資料套用到同一個模板，就是不同的頁面。

程式面從一個組件該做什麼事，如何覆用和組件分類為主要參考。

vue組件分類:

vue 組件分成幾類:

• page 組件
• 一般可覆用組件
• 最小單位組件
• 業務組件

page 組件放在 view資料夾內，每一個在router引用的view組件都是一個page，沒有覆用可能，用來協調業務組件，類似controller。

一般可覆用組件放在components資料夾內，由最小單元組件組成，通常只為了一個目標，為了增

加覆用性，提供可以配置的參數，在可覆用組件內沒有會造成副作用的功能，如call 第三方api，有的話也是通過把網址傳入達到不同的效果，跟function一樣只接收參數跟返回參數。

最小單位組件: 組件的設計就是要盡量小，然後自底而上建構複雜的組件，最小單位組件就是原子組件，通常提供默認樣式、功能和配置樣式、功能。

業務組件通常比較難覆用(除非剛好有一樣的操作邏輯)，因為可能包含特定的業務邏輯和從第三方取得資料(call api)的操作，拉出組件的目的主要是為了減少和優化在page組件上的程式碼，不然都塞在page組件也是可以運作。

現有組件庫 element ui:

現在的組件庫都會強調不用寫css，他們也包含了最小單位組件跟可覆用組件。

這邊只討論組件，不討論layout或是一些內建的排版class。

最小單位組件

以input來看

<el-input v-model="input" placeholder="请输入内容"></el-input>

配置有

v-model綁數據
是否禁用

長度

類型(是否為textarea)

和綁事件

以日期選擇器來看

<el-date-picker

      v-model="value1"

      type="date"

      placeholder="选择日期">

    </el-date-picker>

配置有

v-model綁數據

是否可以編輯

是否可以清除

日期範圍

default值

綁事件

以分頁選擇器來看

<el-pagination

    layout="prev, pager, next"

    :total="50">

  </el-pagination>

配置有

v-bind綁數據 total、page-count、page-size

按鈕背景色

組件布局

上下頁文字

綁事件

這些組件的共通點就是開始的tag跟結束的tag中間不會放東西，輸入項的組件會用v-model讀取數據，用v-bind當作配置項目。

可覆用組件

<el-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">

      <el-button>上左</el-button>

 </el-tooltip>

<el-card class="box-card">

  <div slot="header" class="clearfix">

    <span>卡片名称</span>

    <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>

  </div>

  <div v-for="o in 4" :key="o" class="text item">

    {{'列表内容 ' + o }}

  </div>

</el-card>

把template包在tag之間，裡面就會有最小單元組件。

業務組件

通常包含websocket、firebase、第三方api、vuex的操作。

最小單位組件只設定配置項目，可覆用組件只傳入數據或是template，業務組件包含業務邏輯，例如blog資料的新增修改刪除，todo list在同一頁做新增修改刪除，或是需要跟複雜的套件互動。

最小單位組件強調統一的樣式跟少數的配置彈性，可覆用組件強調只要可以傳入正確的資料就能獨立運作，不會受store或是api影響，其他複雜的邏輯應該都放在業務組件上，不過這樣的業務組件將會變得非常的龐大。

程式面

vue組件該怎麼設計，可以從程式面來看，好的設計應該是單一職責，關注分離，分層，不重複且好維護，vue的組件終究是在處理view相關的問題，所以如果跟view無關的邏輯應該是抽到其他的js檔，例如引入了three.js套件，處理3D物件移動時，如果將程式碼塞到某一個component裡，程式碼行數多起來將會難以維護，應該要將three的程式碼抽出來到單獨的一個js或資料夾，在component只引用必要的function和data，就可以將業務組件減重。

業務組件相當於一個service，可以將自己的工作委託給其他的service(js檔)，讓自己只專注於跟view相關資料的變化

最小單位組件跟可覆用組件應該是要無副作用的，少數情況組件會跟store一起用，尤其是單例的組件，例如Loading用一個store的變數控制show或是hide，不會因為api或store改變執行結果，一樣的資料每次執行結果都應該要一致。

page組件相當於controller，只是協調各個組件的溝通，行數應該要少。