предисловие
Расположение каталога:
Применение шаблонов проектирования в Vue (1)
Применение шаблонов проектирования в Vue (2)
Применение шаблонов проектирования в Vue (3)
Применение шаблонов проектирования в Vue (4)
Применение шаблонов проектирования в Vue (5)
Применение шаблонов проектирования в Vue (6)
Применение шаблонов проектирования в Vue (7)
Зачем писать эти статьи. так какШаблон проектирования — это набор повторяющихся, наиболее известных, классифицированных сводок опыта проектирования кода.(из энциклопедии Baidu), я также хочу обсудить со всеми прелесть шаблонов проектирования, поделившись некоторыми накопленными в моей работе.
Сценарии приложений, представленные в этой серии статей, чтобы помочь в объяснении, являются реальными сценариями приложений в действии, конечно, они не могут охватывать все аспекты, но они также охватывают общие бизнес-сценарии по аналогии.
Это содержимое относительно простое и включает только один шаблон проектирования — шаблон состояния.
Один, спрос
Изображение со снимка экрана документа iView
Текущее требование: весь этот процесс является непрерывным.Если весь процесс не завершен, независимо от того, на какой шаг он переходит, при обновлении страницы он должен начинаться с первого шага, то есть обрабатывать эти четыре шага под тот же маршрут.
2. Анализ
В начале статьи мы упомянули режим состояния, и мы можем легко связать его с вышеуказанными требованиями:
- Первая операция завершена, чтобы изменить состояние на второй шаг
- Операция второго шага завершает изменение состояния на третий шаг
- Операция третьего шага завершает изменение состояния на четвертый шаг
Три, дизайн
Первый взгляд на введение режима состояния
Следующий контент взят из Интернета
1. Сначала вам нужна роль контекстной среды
// context.vue
<template>
<div>
<Steps :current="status">
<Step title="已完成" content="这里是第一步"></Step>
<Step title="进行中" content="这里是第二步"></Step>
<Step title="待进行" content="这里是第三步"></Step>
<Step title="待进行" content="这里是第四步"></Step>
</Steps>
<!-- 动态渲染当前状态组件 -->
<component :is="statusCom" @onChangeStatus="changeStatus" />
</div>
</template>
<script>
// 引入各状态组件
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
import Step4 from './Step4'
export default {
data() {
return {
status: 1
}
},
computed: {
// 具体状态角色
statusCom() {
const statusMap = {
1: Step1,
2: Step2,
3: Step3,
4: Step4,
}
return statusMap[this.status]
}
},
methods: {
// 代表每一步的状态组件都有改变status的能力
changeStatus(val) {
this.status = val
}
}
}
</script>
2. Реализуйте роль абстрактного состояния State
// Step1.vue
<template>
<div>
<!-- do something -->
<button @click="handleClick">完成</button>
</div>
</template>
<script>
export default {
methods: {
handleClick() {
// 第一步完成，将状态变为状态2
// context角色接受状态改变动态渲染Step2.vue的操作
this.$emit('onChangeStatus', 2)
}
}
}
</script>
Step2.vue
Step3.vue
Step4.vue
同Step1.vue
3. Резюме
- Роль контекста отвечает только за переключение конкретных состояний — на каком шаге рендерить компонент
- Роль состояния отвечает за обработку реализации текущего состояния и переход к следующему состоянию — конкретная реализация логики каждого шага.
В-четвертых, оптимизировать
Благодаря приведенной выше реализации мы обнаруживаем, что все изменение состояния передается каждому компоненту состояния.Что, если я достигну шага 3 и захочу вернуться к шагу 2?
Добавить откат к предыдущему состоянию для каждого компонента состояния?
В нашем требовании состояние одностороннее от 1->2->3->4.Этот метод может работать.Предположим,что в более сложном сценарии состояний изменения каждого состояния не имеют правил и их трудно определить текущее состояние какое последнее состояние
Решение: делать кеш для каждого изменения состояния
// 优化后的context.vue
<template>
<div>
<Steps :current="status">
<Step title="已完成" content="这里是第一步"></Step>
<Step title="进行中" content="这里是第二步"></Step>
<Step title="待进行" content="这里是第三步"></Step>
<Step title="待进行" content="这里是第四步"></Step>
</Steps>
<!-- 返回上一步 -->
<button v-if="canGoBack" @click="goBack">返回上一步</button>
<!-- 动态渲染当前状态组件 -->
<component :is="statusCom" @onChangeStatus="changeStatus" />
</div>
</template>
<script>
// 引入各状态组件
import Step1 from './Step1'
import Step2 from './Step2'
import Step3 from './Step3'
import Step4 from './Step4'
const DEFAULT_STATUS = 1
export default {
data() {
return {
status: DEFAULT_STATUS,
cache: [] // 缓存状态
}
},
computed: {
// 具体状态角色
statusCom() {
const statusMap = {
1: Step1,
2: Step2,
3: Step3,
4: Step4,
}
return statusMap[this.status]
},
canGoBack() {
return this.cache.length > 0
}
},
methods: {
// 代表每一步的状态组件都有改变status的能力
changeStatus(val) {
// 缓存每一次的状态变化
this.cache.push(val)
this.status = val
},
goBack() {
// 弹出当前状态
this.cache.pop()
// 改变状态为上一个状态
this.status = this.cache[this.cache.length - 1] || DEFAULT_STATUS
}
}
}
</script>
Суммировать
Шаблон состояния знакомится с каждым через функциональный дизайн на работе. Может быть, некоторые студенты скажут, что я прошелif elseНе можете ли вы, конечно, сделать то же самое, поскольку ваши потребности продолжают изменять вашеif elseВ конце концов, только ты можешь это понять, медленноbugВероятность возникновения также выше, и для решения этой проблемы используется режим состояния.
Реализация этой статьи также применима к реакции, почему в статье в качестве вопроса используется vue? Шаблон Vue может заставить нас чувствовать себя немного неловко при понимании некоторых концепций, а jsx реакции можно рассматривать как написание JavaScript, чтобы быть более гибким для реализации различных концепций.
Дружеское напоминание: о применении шаблонов проектирования в Vue следует написать серию, и учащиеся, которым это нравится, не забудьте обратить внимание