Говоря об управлении состоянием интерфейса (Часть 1)

внешний интерфейс JavaScript
Говоря об управлении состоянием интерфейса (Часть 1)

предисловие

Когда дело доходит до управления состоянием, вы можете сразу подумать о: Vuex, Redux, Flux, Mobx и других решениях. На самом деле, независимо от того, какое решение, пока контента слишком много, это кажется головной болью. Может быть, у вас есть решение, которое вам подходит, или просто аннотировать и различать модули. Сегодня поговорим об управлении состоянием фронта. конец Если у вас есть хорошие предложения или вопросы, пожалуйста, оставьте сообщение ниже.

Что такое внешнее управление состоянием?

Например, каждый в библиотеке может войти в библиотеку, чтобы брать и возвращать книги по своему желанию.Если количество людей невелико, этот метод может повысить эффективность и сократить процесс.Когда количество людей увеличивается, легко быть запутался, и направление книги неясно или даже потеряно. Поэтому библиотекарь нужен для ведения записей о выдаче книг, то есть вы должны доверить библиотекарю давать и возвращать вам книги.

Фактически, большинство решений по управлению состоянием основаны на вышеуказанной идее, через администратора (например, Vuex) регулировать заимствование и возврат книг в библиотеку (данные, которые необходимо хранить в проекте).

Vuex

Доля Vuex в домашнем бизнесе должна быть самой высокой.Vuex также является продуктом, основанным на идее Flux.Состояние в Vuex — этоможно изменить. Причина связана с механизмом работы Vue.Vue реализует двустороннюю привязку представления и данных на основе геттера/сеттера в ES5.Поэтому об изменении состояния в Vuex можно уведомить соответствующую инструкцию в представлении через сеттер для реализации обновления представления. Единственный способ изменить состояние в хранилище Vuex — отправить мутацию. Возьмем в качестве примера библиотеку:

const state = {
  book: 0
}

const mutations = {
  borrow_book(state) {
    state.book ++
  }
}

//调用时
store.commit('borrow_book')

А как же действие?Смешивание асинхронных вызовов с мутациями может затруднить отладку вашей программы. Как узнать, какой из них выполнить первым? aciton может содержать любую асинхронную операцию, использование в основном аналогично приведенному выше и не будет описываться.

На самом деле, я использовал Vuex только для краткого ознакомления с соответствующим использованием. Все должны быть знакомы с ним. Итак, какую проблему решает Vuex?

  • Управляйте общим состоянием нескольких компонентов.
  • Глобальное управление состоянием.
  • Отслеживание изменений состояния.
  • Сделайте управление состоянием нормой и сделайте структуру кода более понятной.

На самом деле, большинство программистов ленивы (собачья голова спасает им жизнь), просто обмениваются состоянием с несколькими компонентами, а все остальное — второстепенно. Наиболее типичным является количество товаров, добавленных в корзину.Добавьте один и сохраните окончательную сумму с помощью записи Vuex, отображаемой в нижнем столбце.

Вопрос в том, поскольку ваша цель состоит в том, чтобы разделить несколько состояний, почему бы просто не использовать шину Bus?

автобус

Шина Bus на самом деле является общедоступным экземпляром Vue, который обрабатывает события.

На самом деле Bus очень легкий, у него нет структуры Dom, у него просто метод экземпляра.

Vue.prototype.$Bus = new Vue()

Затем вы можете генерировать события для генерирования и для получения событий.

// 发送事件
this.$Bus.$emit('borrow_book', 1)

// 任意组件中接收
this.$Bus.$on('borrow_book', (book) => {
    console.log(`借了${book}本书`)
})

Конечно, есть и такие операции, как выкл (удалить), один раз (мониторить один раз) и т. д. Вы можете сами поискать в движке, если вам интересно.

как насчет этого? Является ли вышеизложенное проще, чем Vuex для удовлетворения общего состояния? На самом деле он намного проще, но это также означает, что он больше подходит для небольших и средних проектов. Bus — это больше, чем просто большой проект, он только запутает вас, когда вы проследите источник изменения, и вы даже не знаете, где он изменился.

Его рабочий принцип - идея публикации и подписки.Хотя это очень элегантно и просто, Vue не поддерживает такой способ написания и удалил большинство связанных API (эмитировать, вкл и т. д.) в версии 3.0 На самом деле публиковать и подписываться Вы также можете сами написать паттерн для реализации:

class Bus {
	constructor() {
		// 收集订阅信息,调度中心
		this.list = {};
	}

	// 订阅
	$on(name, fn) {
		this.list[name] = this.list[name] || [];
		this.list[name].push(fn);
	}

	// 发布
	$emit(name, data) {
		if (this.list[name]) {
                    this.list[name].forEach((fn) => {
                        fn(data);
                    });
                }
	}

	// 取消订阅
	$off(name) {
		if (this.list[name]) {
			delete this.list[name];
		}
	}
}
export default Bus;

Простой не так ли? Вам просто нужно создать экземпляр и использовать его, как Vue Bus. Какой? Если вы хотите разделить два, три или даже меньше состояний (одно), нет необходимости инкапсулировать шину? Хорошо, тогда вы используете веб-хранилище.

web storage

На самом деле, когда дело доходит до этого, хранилище — это всего лишь метод хранения данных, который не имеет ничего общего с управлением состоянием, а только разделяет данные. Но раз уже все упомянуто, давай поговорим об этом кстати (собачья голова)

Существует три типа веб-хранилища: файлы cookie, локальное хранилище и хранилище сеансов.

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

Давайте кратко рассмотрим три первых:

категория Жизненный цикл место хранения место хранения
cookie Он хранится в памяти по умолчанию и истечет при закрытии браузера (если установлено время истечения, он истечет после истечения времени) 4KB Сохраняется на стороне клиента, будет приноситься с каждым запросом
localStorage Теоретически, он действителен постоянно, если только активно не очищается. 4,98 МБ (разные браузеры, сафари 2,49 МБ) Хранится на стороне клиента и не взаимодействует со стороной сервера. Экономьте сетевой трафик
sessionStorage Действителен только для текущего веб-сеанса и будет очищен после закрытия страницы или браузера. 4,98 МБ (в некоторых браузерах нет ограничений) То же

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

loaclStorage может хранить данные, которые теоретически являются постоянными и действительными. Если вы хотите сохранить состояние, обычно рекомендуется поместить его в sessionStorage. LocalStorage также имеет следующие ограничения:

  • Размер браузеров неодинаков, и свойство localStorage поддерживается только в версиях IE выше IE8.
  • В настоящее время все браузеры ограничивают тип значения localStorage строковым типом, что требует некоторых преобразований для наших повседневных распространенных типов объектов JSON.
  • localStorage не читается в режиме конфиденциальности браузера.
  • LocalStorage — это, по сути, чтение строки. Если в хранилище много содержимого, оно будет занимать место в памяти и приведет к зависанию страницы.
  • localStorage не может быть просканирован сканерами.

Единственная разница между localStorage и sessionStorage заключается в том, что localStorage относится к постоянному хранилищу, а sessionStorage принадлежит к Когда сеанс завершится, пары ключ-значение в sessionStorage будут очищены.

Сам localStorage поддерживает только строковое хранилище, поэтому, если вы храните целочисленный тип, это будет строковый тип.

sessionStorage в основном такой же, как localStorage, за исключением того, что при закрытии сеанса данные будут очищены.

Суммировать

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

Вышеизложенное - это всего лишь небольшой разговор, и он может быть недостаточно исчерпывающим. Добро пожаловать, чтобы оставить сообщение ниже ~

Категории