Применение шаблонов проектирования в Vue (3)

Vue.js

предисловие

Расположение каталога:
Применение шаблонов проектирования в Vue (1)
Применение шаблонов проектирования в Vue (2)
Применение шаблонов проектирования в Vue (3)
Применение шаблонов проектирования в Vue (4)
Применение шаблонов проектирования в Vue (5)
Применение шаблонов проектирования в Vue (6)
Применение шаблонов проектирования в Vue (7)

Зачем писать эти статьи. так какШаблон проектирования — это набор повторяющихся, наиболее известных, классифицированных сводок опыта проектирования кода.(из энциклопедии Baidu), я также хочу обсудить со всеми прелесть шаблонов проектирования, поделившись некоторыми накопленными в моей работе.
Сценарии приложений, представленные в этой серии статей, чтобы помочь в объяснении, являются реальными сценариями приложений в действии, конечно, они не могут охватывать все аспекты, но они также охватывают общие бизнес-сценарии по аналогии.

Шаблон стратегии должен быть одним из нескольких шаблонов проектирования, с которыми мы часто сталкивались.Давайте сначала посмотрим на определение:
(из энциклопедии Baidu)

  • определяет набор алгоритмов (бизнес-правил);
  • Каждый алгоритм инкапсулирован;
  • Алгоритмы этого семейства взаимозаменяемы

1. Требования к сценарию

После того, как пользователь войдет в систему, появится метка состояния, соответствующая четырем рабочим подсказкам на приведенном выше рисунке.

2. Анализ

Пользователь входит в систему, чтобы увидеть значение статуса:

  • 0 - не аутентифицирован
  • 1 - на стадии сертификации
  • 2 - сертификация пройдена
  • 3 - Ошибка аутентификации

Очевидно, нам нужноstatusЗначение реализует различные рендеринг и манипуляции

3. Дизайн

// context.vue
<template>
  <!-- 根据策略规则动态渲染组件 -->
  <component :is="authCom" />
</template>
<script>
  import Need from './Need'
  import Pend from './Pend'
  import Pass from './Pass'
  import Refuse from './Refuse'
  
  const AUTH_STATUS_NEED = 0
  const AUTH_STAUTS_PEND = 1
  const AUTH_STATUS_PASS = 2
  const AUTH_STATUS_REFUSE = 3
  
  export default {
    data () {
      status: AUTH_STATUS_NEED // 通过请求api赋值
    },
    computed () {
      authCom () {
        const statusMap = {
          [AUTH_STATUS_NEED]: Need,
          [AUTH_STAUTS_PEND]: Pend,
          [AUTH_STATUS_PASS]: Pass,
          [AUTH_STATUS_REFUSE]: Refuse
        }
        // 应用策略
        return statusMap[this.status]
      }
    },
    components: {
        Need,
        Pend,
        Pass,
        Refuse
    }
  }
</script>

// Need.vue
// Pend.vue
// Pass.vue
// Refuse.vue
... do something

4. Что еще можно сделать

Очевидной особенностью шаблона стратегии является то, что мы инкапсулировали ряд стратегий алгоритма, а контекст отвечает за организацию извонить по требованиюэти алгоритмы.

В приведенном выше сценарии одновременно существует только один статус аутентификации пользователя.Мы инкапсулировали 4 алгоритма, и все ониimport, то есть загружает много бесполезного кода

Шаблон стратегии взаимодействует с асинхронными компонентами vue для загрузки необходимого кода по запросу.

// context.vue
<template>
  <!-- 根据策略规则动态渲染组件 -->
  <component :is="authCom" />
</template>
<script>
  const AUTH_STATUS_NEED = 0
  const AUTH_STAUTS_PEND = 1
  const AUTH_STATUS_PASS = 2
  const AUTH_STATUS_REFUSE = 3
  
  export default {
    data () {
      status: AUTH_STATUS_NEED // 通过请求api赋值
    },
    computed () {
      authCom () {
        const statusMap = {
          [AUTH_STATUS_NEED]: () => ({
            // copy自vue文档
            component: import('./Need'),
            loading: LoadingComponent,
            error: ErrorComponent,
            delay: 200,
            timeout: 3000
          }),
          [AUTH_STAUTS_PEND]: '同上',
          [AUTH_STATUS_PASS]: '同上',
          [AUTH_STATUS_REFUSE]: '同上'
        }
        // 应用策略
        return statusMap[this.status]
      }
    },
    components: {
        Need,
        Pend,
        Pass,
        Refuse,
        LoadingComponent,
        ErrorComponent
    }
  }
</script>

Конечно, требования и стратегии для примеров в этой статье относительно просты в реализации.И наконец, выбрана синхронная упаковка.

Суммировать

Сам шаблон стратегии относительно прост для понимания, и это также один из нескольких шаблонов проектирования, которые мы обычно видим в бизнес-коде. Подумайте еще раз о сценариях его применения:

游戏我们都玩过，一个角色他的武器装扮是刀，那么它的攻击动作是砍；
武器装扮是剑，那么它的攻击动作是刺；
武器装扮是枪，那么攻击动作是射击。

一款游戏一个重要的特性就是玩法的多样性，随着游戏玩法的丰富武器装扮和攻击动作也会越来越多样化
最终在我们的code中不可能通过if、else这样的逻辑判断来管理我们的逻辑

В сочетании с простым требованием сцены я поделился небольшим опытом и надеюсь помочь вам

Реализация этой статьи также применима к реакции, почему в статье в качестве вопроса используется vue? Шаблон Vue может заставить нас чувствовать себя немного неловко при понимании некоторых концепций, а jsx реакции можно рассматривать как написание JavaScript, чтобы быть более гибким для реализации различных концепций.
Дружеское напоминание: о применении шаблонов проектирования в Vue следует написать серию, и учащиеся, которым это нравится, не забудьте обратить внимание

Категории