Technologieaustausch

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

1. MVC

ist eine Lösung zur Reduzierung der Komplexität der Benutzeroberfläche und der Datenzuordnung.

In den frühen Tagen, als Front-End und Back-End nicht getrennt waren, antwortete der Server mit einem vollständigen HTML-Code, einschließlich aller für die Seite erforderlichen Daten.Der Browser spielt nur die Rolle des Renderns der Seite, und der Gesamtprozess ist esServerseitiges Rendering。

Der serverseitige Verarbeitungsablauf: Verarbeitet die Anfrage, bettet die erforderlichen Daten in HTML ein und gibt sie dann an den Browser zurück.

Um die Komplexität dieses Prozesses zu reduzieren, gibt es MVC Modell.

• Der Server empfängt verschiedene Anfragen und verteilt sie an verschiedene CVerantwortlicher (Verantwortlicher) ist für die Verarbeitung und Zusammenstellung der für diese Anfrage erforderlichen Daten verantwortlich.
• MDie Odel-Schicht fügt die Daten zu einem Datenmodell für das UI-Rendering zusammen.
• VDie Ansichtsebene stellt das Datenmodell in HTML zusammen und gibt es an den Browser zurück.

Einer der Gründe für die Trennung von Front- und Back-End，

Im MVC-Muster wird das Datenmodell in der Ansichtsebene zusammengestellt, um den endgültigen HTML-Code zu generieren, der immer komplexer wird.
Daher möchte ich Daten direkt an das Frontend zurückgeben und die Logik des Zusammenstellens der Daten für die Anzeige dem Frontend überlassen.

2. Schwierigkeiten mit Front-End-MVC

Frontend-Framework Ausblick、Reagieren gelöstDaten -> AnsichtProblem, aber der Controller ist viel komplizierter als der Server.

1. Der Front-End-Controller verarbeitet tatsächlich Benutzervorgänge. Die Betriebsszenarien sind komplex und es gibt zu viele Situationen, in denen Daten geändert werden.

1. Unterschiedliche Komponenten haben unterschiedliche Operationen und Reaktionen, und jeder Ereignishandler macht etwas anderes.
2. Der Server muss beispielsweise nur wissen, ob eine bestimmte Schnittstelle aufgerufen wird, und der Controller übernimmt die Logik.
Es kann mehr als ein Szenario geben, in dem das Front-End die aufrufende Schnittstelle auslöst: Auslösen durch Klicken auf eine Schaltfläche, Auslösen durch einen Timer oder Auslösen, nachdem eine andere Logik ausgeführt wurde.

2. Das Front-End-Framework verwendet einen unidirektionalen Datenfluss. Beim Teilen von Daten können die Daten nur zur Komponente der obersten Ebene hochgestuft und Schicht für Schicht weitergegeben werden, was relativ umständlich ist.

Der Kontext (React.createContext / prvide/inject ), um gemeinsame Daten bereitzustellen. Dennoch gibt es insbesondere bei mittleren und großen Anwendungen noch einige Defizite.

• Kontext wird häufiger in der Kommunikation zwischen Komponenten mit lokalen und tiefen hierarchischen Beziehungen verwendet und dient dazuDatentransfer, ist es selten, die übergebenen Daten zu ändern.
• Vuex und Redux sollen eine vollständigere Bereitstellung bietenStatusverwaltungZu den Lösungen gehören auch Zeitreisen (Debugging, Zustandsregression), Modularisierung usw.

3, Flussmittel

Die größte historische Bedeutung der von FaceBook vorgeschlagenen Datenlösung ist die Einführung von action Konzept.

• actionist ein Objekt, mit dem beschrieben wird, was getan werden soll,ist der einzige Grund, der Datenänderungen auslöst。
• store Stellt ein Data Warehouse (globaler Singleton-Modus) zum Speichern gemeinsam genutzter Daten dar.wird von verschiedenen abhängenaction Ändern Sie die Daten im Lager.

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

existieren Biegen eingeführt basierend aufreducer, verwendet nach action Zur Verarbeitung der Daten werden die verarbeiteten Daten vom Lager erneut gespeichert.

Vergleich des MVC-Prozesses auf der Serverseite,action Entspricht dem Auslösen einer Anfrage,reducer Entspricht Controller.

Vergleich mit vuex:

Einfach zu benutzen:

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

Verglichen 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

---

über.