Vue設計模式-工廠模式應用

工廠模式 Factory Pattern

目的：提供一個工廠介面，將產生實體的程式碼交由子類別各自實現

以登入頁面為例:

我們先將每個欄位分解成最簡單的元件

account.vue

<template>
  <div>
    <label>Account</label>
    <input type="text" name="account">
  </div>
</template>

password.vue

<template>
  <div>
    <label>Password</label>
    <input type="text" name="password">
  </div>
</template>

email.vue

<template>
  <div>
    <label>Email</label>
    <input type="text" name="email">
  </div>
</template>

使用工廠模式
1. import 所有欄位元件
2. 根據傳入的type，回傳不同的欄位(元件)回去
3. 利用 Dynamic Components(動態組件) 的技巧

InputFactory.vue

<template>
  <component :is="getComponentByType" :type="type" />
</template>

<script>
import Account from './input/account'
import Email from './input/email'
import Password from './input/password'
const ComponentMap = {
  Account,
  Email,
  Password
}
export default {
  name: 'InputFactory',
  props: {
    type: String
  },
  components: ComponentMap,
  computed: {
    getComponentByType() {
      return ComponentMap[this.type]
    }
  }
}
</script>

登入主畫面

準備一個formMap
type=login時我們只需要Account,Password這兩個欄位

type=register時我們只需要Account,Password,Email這三個欄位 (這裡只是舉例所以懶得寫太多啦)
Login.vue

<template>
  <div>
    <InputFactory v-for="component in formMap[type]" :type="component" :key="component"/>
  </div>
</template>

<script>
import InputFactory from './InputFactory'
export default {
  name: 'Login',
  data () {
    return {
      formMap: {
        login: ['Account', 'Password'],
        register: ['Account', 'Password', 'Email']
      },
      type: 'login'
    }
  },
  components: {
    InputFactory
  }
}
</script>

這樣就大功告成啦，只要我們根據不同的狀態去切換type，就可以達到重複使用元件的效果喔
而且如果我們想要改Account欄位新增一些圖示之類的東西，也只要改account.vue一個檔案就好
是不是很實用呢！

最後，如果你有興趣學程式，可以參考下列平台:

裡面有很多豐富的課程，線上學習，不用出門唷！

↓↓↓ 如果喜歡我的文章，可以幫我按個Like！ ↓↓↓

>> 或者，請我喝杯咖啡，這樣我會更有動力唷！ <<<

街口支付

街口帳號: 901061546