Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1, MVC-контейнер

— это решение для упрощения пользовательского интерфейса и сопоставления данных.

Раньше, когда интерфейсная и серверная части не были разделены, сервер отвечал полным HTML-кодом, включая все данные, необходимые для страницы.Браузер отвечает только за отображение страницы, а весь процессСерверный рендеринг。

Процесс обработки на стороне сервера: обрабатывает запрос, встраивает необходимые данные в HTML, а затем возвращает их в браузер.

Чтобы уменьшить сложность этого процесса, существует МВК модель.

• Сервер получает разные запросы и распределяет их по разным Сконтроллер (контроллер) для обработки и сборки данных, необходимых для этого запроса.
• МСлой модели соберет данные в модель данных для рендеринга пользовательского интерфейса.
• ВУровень просмотра соберет модель данных в HTML и вернет ее в браузер.

Часть причин разделения фронт- и бэк-энда，

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

2. Трудности с front-end MVC

интерфейсная платформа Вью、Реагировать решеноДанные -> Просмотрпроблема, но контроллер намного сложнее сервера.

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

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

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

Итак, контекст(React.createContext / prvide/inject ) для предоставления общих данных. Но все же есть некоторые недостатки, особенно для средних и крупных приложений.

• Контекст чаще используется для связи между компонентами с локальными и глубокими иерархическими отношениями и предназначен дляОбмен данными, передаваемые данные изменяются редко.
• Vuex и Redux созданы для более полногоУправление статусамиРешения также включают путешествия во времени (отладка, регрессия состояния), модульность и т. д.

3，Флюс

Наибольшее историческое значение решения по работе с данными, предложенного FaceBook, заключается в внедрении action концепция.

• actionобъект, используемый для описания того, что должно быть сделано,это единственная причина, которая вызывает изменение данных。
• store Представляет хранилище данных (глобальный одноэлементный режим) для хранения общих данных.будет зависеть от разныхaction Измените данные на складе.

// 示例
cosnt loginAction = {
    type: "login",
    payload: {
        loginId:"admin",
        loginPwd:"123123"
    }
}

const deleteAction = {
    type: "delete",
    payload: 1  // 用户id为1
}
1
2
3
4
5
6
7
8
9
10
11
12
13

4，Перевоспитание

существовать Флекс введено на основеreducer, используется в соответствии с action Для обработки данных обработанные данные будут пересохранены складом.

Сравнивая процесс MVC на стороне сервера,action Эквивалентно запуску запроса,reducer Эквивалент контроллера.

Сравнение с vuex:

Простота в использовании:

import { createStore } from "redux";

function reducer(state, action) {
    console.log(action.payload);
    if (action.type === "add") {
        return state + 1;
    } else if (action.type === "minus") {
        return state - 1;
    }
    return state;
}

const store = createStore(reducer, 10);

// 分发 action
store.dispatch({ type: "add", payload: "附加的数据" });
// 获取最新的 store
console.log(store.getState());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

В сравнении Вьюекс：

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment (state, { amount }) {
       state.count += amount
    }
  },
  actions: {
    increment ({ commit }, payload) {
      // 触发 mutation
      commit('increment', payload)
    }
  }
})

// 分发 action
store.dispatch('increment', {
  amount: 10
})

// 以对象形式分发
store.dispatch({
  type: 'increment',
  amount: 10
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

выше.