Отмена и повтор действий с историей хранилища
Создайте стек истории вокруг доступного для записи хранилища для поддержки отмены и повтора действий.
«Отмена и повтор действий с историей хранилища» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Стек истории
Оберните записываемое хранилище массивами past, текущего и будущего состояния, чтобы поддержать отмену и повтор.
Базовая реализация
Поддерживайте список предыдущих состояний.
function createHistory(initial) {
let past = [], future = [];
const state = writable(initial);
return {
subscribe: state.subscribe,
set(v) { past.push(get(state)); future = []; state.set(v); },
undo() { if (past.length) { future.push(get(state)); state.set(past.pop()); } },
redo() { if (future.length) { past.push(get(state)); state.set(future.pop()); } }
};
}Ограничение размера стека
Ограничьте длину истории, чтобы ограничить использование памяти.
Глубокие копии
Добавляйте глубокие копии объектов, чтобы избежать проблем с изменением данных.
Сочетания клавиш
Привяжите Ctrl+Z и Ctrl+Shift+Z к отмене и повтору, чтобы интерфейс ощущался естественно.
Сохранение истории
Сохраняйте историю в localStorage для отмены действий между сеансами, учитывая ограничение размера.
Производительность
Для больших состояний храните различия вместо полных снимков.
Ветвление
Большинство приложений очищает будущее состояние после нового действия; некоторые редакторы сохраняют ветвящуюся историю.
Варианты библиотек
Библиотеки вроде svelte-undo предоставляют готовые хранилища истории.
Подсказки интерфейса
Отключайте кнопки отмены и повтора, когда отменять или повторять нечего.
Тестирование
Проверяйте последовательности действий с отменой и повтором, чтобы убедиться в корректности отката.
Быстрая проверка
За что отвечает стек будущих состояний?
Итоги
Реализуйте отмену и повтор с помощью стеков past, текущего и будущего состояния вокруг записываемого хранилища. Ограничьте размер и привяжите сочетания клавиш.
Часто задаваемые вопросы
Урок «Отмена и повтор действий с историей хранилища» бесплатный?
Да — полный текст урока «Отмена и повтор действий с историей хранилища» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Отмена и повтор действий с историей хранилища»?
Создайте стек истории вокруг доступного для записи хранилища для поддержки отмены и повтора действий. Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Отмена и повтор действий с историей хранилища»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Архитектура хранилищ: модули функций
- Шаблон шины событий с хранилищами
- Оптимистичные обновления интерфейса
- Отмена и повтор действий с историей хранилища