Partage de technologie

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

1. MVC

est une solution permettant de réduire la complexité de l'interface utilisateur et de l'association des données.

Au début, lorsque le front-end et le back-end n'étaient pas séparés, le serveur répondait avec un code HTML complet, comprenant toutes les données nécessaires à la page.Le navigateur est uniquement responsable du rendu de la page, et le processus global estRendu côté serveur。

Le flux de traitement côté serveur : traite la demande, intègre les données requises dans HTML, puis les renvoie au navigateur.

Afin de réduire la complexité de ce processus, il existe MVC modèle.

• Le serveur reçoit différentes requêtes et les distribue à différents Cresponsable du traitement (responsable du traitement) pour traiter et rassembler les données nécessaires à cette demande.
• MLa couche modèle assemblera les données dans un modèle de données pour le rendu de l'interface utilisateur.
• VLa couche iew assemblera le modèle de données en HTML et le renverra au navigateur.

Une partie des raisons de la séparation du front-end et du back-end，

Dans le modèle MVC, le modèle de données est assemblé dans la couche View pour générer le HTML final, qui devient de plus en plus complexe.
Je souhaite donc renvoyer directement les données au front-end et laisser la logique d'assemblage des données à afficher au front-end.

2. Difficultés avec le MVC frontal

cadre frontal Vue、Réagir résoluDonnées --> Vueproblème, mais le contrôleur est beaucoup plus compliqué que le serveur.

1. Le contrôleur frontal traite en fait les opérations des utilisateurs, et les scénarios d'opération sont complexes et il existe trop de situations dans lesquelles les données sont modifiées.

1. Différents composants ont des opérations et des réponses différentes, et chaque gestionnaire d'événements fait quelque chose de différent.
2. Par exemple, le serveur a uniquement besoin de savoir si une certaine interface est appelée et le contrôleur gère la logique.
Il peut y avoir plusieurs scénarios dans lesquels le frontal déclenche l'interface appelante : déclenchement en cliquant sur un bouton, déclenchement par une minuterie ou déclenchement après l'exécution d'une autre logique.

2. Le cadre frontal utilise un flux de données unidirectionnel lors du partage de données, les données ne peuvent être promues qu'au composant de niveau supérieur et transmises couche par couche, ce qui est relativement fastidieux.

Donc le contexte (React.createContext / prvide/inject ) pour fournir des données partagées. Mais il existe encore quelques lacunes, notamment pour les applications de moyenne et grande taille.

• Le contexte est plus couramment utilisé dans la communication entre des composants ayant des relations hiérarchiques locales et profondes, et est destiné àtransfert de données, il est rare de modifier les données transmises.
• Vuex et Redux sont conçus pour fournir une solution plus complèteGestion des statutsLes solutions incluent également le voyage dans le temps (débogage, régression d'état), la modularisation, etc.

3. Flux

La plus grande signification historique de la solution de données proposée par FaceBook est l'introduction de action concept.

• actionest un objet utilisé pour décrire ce qui doit être fait,est la seule raison qui déclenche des modifications de données。
• store Représente un entrepôt de données (mode singleton global) pour stocker les données partagées.cela dépendra de différentsaction Modifiez les données dans l'entrepôt.

// 示例
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. Redux

exister Fléchir introduit sur la base dereducer, utilisé selon action Pour traiter les données, les données traitées seront réenregistrées par l'entrepôt.

En comparant le processus MVC côté serveur,action Equivaut à déclencher une requête,reducer Équivalent au contrôleur.

Comparaison avec vuex :

Simple à utiliser :

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

Par rapport Vuex：

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

---

au-dessus de.