Dieser Artikel wurde von Vildan Softic überprüft. Vielen Dank an alle Peer -Rezensenten bei SitePoint für die perfekte Erstellung von SitePoint -Inhalten!

Ich bin die Art von Entwickler, die gerne von vorne anf?ngt und versteht, wie alles funktioniert. Ich wei?, dass dies mir eine (unn?tige) Arbeitsbelastung bringt, aber es hilft mir, die Mechanismen hinter einem bestimmten Rahmen, einer Bibliothek oder einem bestimmten Modul zu sch?tzen und zu verstehen.

In letzter Zeit habe ich diesen Moment wieder erlebt und mit der Entwicklung einer Webanwendung mit Redux und reinem JavaScript begonnen. In diesem Artikel m?chte ich meine Anwendungsstruktur skizzieren, meine frühen (schlie?lich fehlgeschlagenen) Iterationen untersuchen und dann die L?sung betrachten, die ich schlie?lich ausgew?hlt habe und was ich auf dem Weg gelernt habe.

Schlüsselpunkte

• Redux kann Pure JavaScript verwenden, um den Anwendungszustand zu verwalten, ohne sich auf React zu verlassen, was seine Flexibilit?t in der Zustandsführung in verschiedenen UI -Schichten demonstriert.
• Es ist entscheidend, Redux -Speicher ordnungsgem?? zu initialisieren und zu verwalten.
• In Redux-Einstellungen k?nnen Komponenten der Komponentenstruktur von React ?hnlich sein, die in Pr?sentations- und Containerschichten unterteilt ist, was dazu beitr?gt, Bedenken zu trennen und Rollendefinitionen zu kl?ren.
• Im Gegensatz zum virtuellen DOM von React (das die UI -?nderungen basierend auf Statusaktualisierungen automatisch übernimmt) muss das DOM bei Verwendung von reinem JavaScript und Redux manuell aktualisiert werden.
• Es wird empfohlen, Anwendungsfall-Fall-gesteuerte Speicher zu implementieren, um sicherzustellen, dass nur notwendige Daten gespeichert werden, was die Leistung und die Benutzererfahrung verbessern kann, indem unn?tiges Zustandsdauerversuchen vermieden wird.

Einstellungen

Sie haben m?glicherweise von der Kombination aus popul?rer React.js und Redux geh?rt, die die neueste Front-End-Technologie verwendet, um schnelle und leistungsstarke Webanwendungen zu erstellen.

React ist eine von Facebook erstellte Komponenten-basierte Open-Source-Bibliothek zum Erstellen von Benutzeroberfl?chen. W?hrend React nur eine Ansichtsschicht ist ( ist kein vollst?ndiges Gerüst wie Angular oder Ember ), verwaltet Redux den Zustand der Anwendung. Es fungiert als vorhersehbarer Zustandsbeh?lter , bei dem der gesamte Zustand in einem einzelnen Objektbaum gespeichert wird und nur durch Ausgabe einer sogenannten -Klüftung ge?ndert werden kann. Wenn Sie dieses Thema überhaupt nicht verstehen, schlage ich vor, dass Sie diesen Artikel lesen.

Für den Rest dieses Artikels müssen Sie kein Redux -Experte sein, aber zumindest wird es hilfreich sein, sein Konzept ein gewisses Verst?ndnis zu haben.

reag-freie Redux-Anwendung von Grund auf

Der Vorteil von Redux besteht darin, dass Sie dazu gezwungen sind, vorw?rts nachzudenken und das Design Ihrer Anwendung so früh wie m?glich zu verstehen. Sie beginnen zu definieren, was tats?chlich gespeichert werden soll, welche Daten ge?ndert werden k?nnen und auf welche Komponenten auf den Speicher zugreifen k?nnen. Da sich Redux jedoch nur auf den Staat konzentriert, bin ich ein wenig verwirrt darüber, wie ich den Rest der Anwendung aufbauen und verbinden kann. React macht einen gro?artigen Job, um Sie durch alle Schritte zu führen, aber ohne sie muss ich herausfinden, was am besten funktioniert.

Die fragliche Anwendung ist ein mobiler Tetris-Klon mit verschiedenen Ansichten. Die tats?chliche Spiellogik erfolgt in Redux, w?hrend die Offline -Funktionalit?t von LocalStorage und Custom View -Verarbeitung bereitgestellt wird. Das Repository ist auf Github zu finden, obwohl die App noch unter aktiver Entwicklung steht und ich diesen Artikel w?hrend der Entwicklung geschrieben habe.

Definieren Sie die Anwendungsarchitektur

Ich habe beschlossen, die Ordnerstruktur zu übernehmen, die bei Redux- und React -Projekten üblich ist. Dies ist eine logische Struktur, die für viele verschiedene Einstellungen funktioniert. Es gibt viele Variationen dieses Themas, die meisten Projekte sind etwas unterschiedlich, aber die Gesamtstruktur ist gleich.

src/scripts/

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Meine Tags werden in ein anderes Verzeichnis unterteilt und werden von einer einzelnen Index.html -Datei wiedergegeben. Diese Struktur ?hnelt den Skripten/ um eine konsistente Architektur in der gesamten Codebasis aufrechtzuerhalten.

src/markup/

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

Speicher verwalten und zugreifen

Um auf den Speicher zuzugreifen, müssen Sie ihn einmal erstellen und an alle Instanzen der Anwendung übergeben. Die meisten Frameworks verwenden eine Art Abh?ngigkeitsinjektionsbeh?lter, sodass wir als Framework -Benutzer keine eigenen L?sungen finden müssen. Aber wenn ich meine eigene L?sung verwende, wie kann ich es für alle meine Komponenten zur Verfügung stellen?

Meine erste Iteration ist fehlgeschlagen. Ich wei? nicht, warum ich denke, dass dies eine gute Idee ist, aber ich stelle den Speicher in ein eigenes Modul (Skripte/Store/Index.js) ein, das dann vom Rest der Anwendung importiert werden kann. Am Ende habe ich es bereut und habe mich schnell mit kreisf?rmigen Abh?ngigkeiten befasst. Das Problem ist, dass der Speicher nicht korrekt initialisiert wird, wenn die Komponente versucht, auf den Speicher zuzugreifen. Ich habe ein Diagramm erstellt, um den Abh?ngigkeitsfluss zu demonstrieren, an dem ich arbeite:

Einstiegspunkt für die Anwendung ist die Initialisierung aller Komponenten und dann die Verwendung des Speichers entweder direkt oder über Helferfunktionen (hier als Connect bezeichnet). Da der Speicher jedoch nicht explizit erstellt wird, sondern nur ein Nebeneffekt in seinem eigenen Modul ist, verwendet die Komponente den Speicher, bevor er erstellt wird. Es gibt keine Kontrolle über die Zeit, in der eine Komponente oder eine Helferfunktion zum ersten Mal zum Speichern gerufen wird. Das ist sehr verwirrend.

Speichermodul lautet wie folgt:

scripts/store/index.js (? schlecht)

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Wie oben erw?hnt, wird der Speicher als Nebeneffekt erstellt und dann exportiert. Helferfunktionen müssen ebenfalls gespeichert werden.

Skripte/speichern/connect.js (? schlecht)

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Dies ist genau der Moment, in dem sich meine Komponenten gegenseitig wiederholen. Helferfunktionen erfordern den Speicher ausgeführt und werden gleichzeitig aus der Speicherinitialisierungsdatei exportiert, damit sie auf andere Teile der Anwendung zugreifen k?nnen. Sehen Sie, wie chaotisch das klingt?

L?sung

Es scheint jetzt offensichtlich, und ich habe eine Weile gebraucht, um zu verstehen. Ich habe dies gel?st, indem ich die Initialisierung auf meinen Anwendungseinstiegspunkt (Skripte/Index.js) verlagert und an alle erforderlichen Komponenten weitergegeben habe.

Dies ist erneut sehr ?hnlich wie React tats?chlich zug?nglich macht (siehe Quellcode). Es gibt einen Grund, warum sie so gut zusammenarbeiten. Warum nicht sein Konzept lernen?

Anwendungseinstiegspunkt erstellt zuerst den Speicher und übergibt ihn dann an alle Komponenten. Die Komponente kann dann eine Verbindung zum Speicher- und Zeitplanvorgang herstellen, ?nderungen abonnieren oder bestimmte Daten abrufen. Schauen wir uns die ?nderungen an:

scripts/store/configureStore.js

(? Gut)

Ich habe das Modul aufbewahrt, sondern eine Funktion namens configurestore exportiert, die Speicher an anderer Stelle in der Codebasis erstellt.

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Beachten Sie, dass dies nur ein grundlegendes Konzept ist.

scripts/speichern/connect.js

(? Gut)

Helferfunktion verbinden sich im Wesentlichen nicht, aber jetzt muss der Speicher als Parameter übergeben werden. Zuerst z?gerte ich, diese L?sung zu verwenden, weil ich dachte,

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

"Was bedeutet Helferfunktion?" Jetzt denke ich, dass sie gut und fortgeschritten genug sind, um alles zu lesen.

scripts/index.js

Dies ist der Anwendungseinstiegspunkt. Das Gesch?ft wird erstellt und an alle Komponenten übergeben. PageControls fügt einen globalen Ereignis -Listener für bestimmte Aktionsschaltfl?chen hinzu, und Tetrisgame ist die tats?chliche Spielkomponente. Es sieht grunds?tzlich gleich aus, bevor der Speicher hier verschoben wird, gibt den Speicher jedoch nicht getrennt auf alle Module weiter. Wie bereits erw?hnt, kann die Komponente über meine fehlgeschlagene Verbindungsmethode auf den Speicher zugreifen.

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Komponenten

Ich habe beschlossen, zwei Komponenten zu verwenden: Pr?sentationsschicht

und

Containerkomponente . Pr?sentationskomponenten tun nur reine DOM -Verarbeitung. Andererseits kann die Containerkomponente Aktionen planen oder ?nderungen abonnieren. Dan Abramov hat einen gro?artigen Artikel für React -Komponenten geschrieben, diese Methoden k?nnen jedoch auch auf jede andere Komponentenarchitektur angewendet werden.

Es gibt jedoch Ausnahmen für mich. Manchmal sind die Komponenten sehr klein und machen nur eine Sache. Ich m?chte sie nicht in eines der oben genannten Muster aufteilen, also habe ich beschlossen, sie zu mischen. Wenn die Komponente w?chst und mehr Logik bekommt, werde ich sie trennen.

scripts/components/pageControls.js

Das obige Beispiel ist eine der Komponenten. Es enth?lt eine Liste von Elementen (in diesem Fall alle Elemente mit Daten-Handlungsattributen) und plant Aktionen, wenn sie basierend auf dem Attributinhalt klicken. Das ist alles. Andere Module k?nnen dann auf ?nderungen im Speicher h?ren und sich entsprechend aktualisieren. Wie bereits erw?hnt, werde ich es trennen, wenn die Komponente auch ein DOM -Update hat.

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Lassen Sie mich nun eine klare Trennung dieser beiden Komponententypen zeigen.

Aktualisieren Sie DOM

Ein gr??eres Problem, das ich hatte, als ich das Projekt startete, war, wie man das DOM tats?chlich aktualisiert. React verwendet eine schnelle Darstellung eines DOM, das als virtuelles DOM bezeichnet wird, um DOM-Updates zu minimieren.

Ich denke tats?chlich darüber nach, dasselbe zu tun. Wenn meine Anwendung gr??er wird und DOM mühsamer ist, k?nnte ich zu einem virtuellen DOM wechseln, aber im Moment mache ich klassische DOM -Operation, welche Funktioniert gut mit Redux.

Der Grundprozess ist wie folgt:

• Initialisieren Sie eine neue Instanz der Containerkomponente und übergeben Sie den Speicher für die interne Verwendung
• ?nderungen in der Komponentenabonnement -Speicherung
• und rendern Updates in DOM mithilfe verschiedener Pr?sentationsschichtkomponenten

Hinweis: Ich bin ein Fan des $ -Symbol -Pr?fixes für alles, was mit DOM in JavaScript zu tun hat. Wie Sie vielleicht erraten haben, stammt es von JQuery's $. Daher wird der Name der reinen Pr?sentationskomponenten mit dem Dollar -Zeichen vorangestellt.

scripts/index.js

<code>actions/
├── game.js
├── score.js
└── ...
components/
├── router.js
├── pageControls.js
├── canvas.js
└── ...
constants/
├── game.js
├── score.js
└── ...
reducers/
├── game.js
├── score.js
└── ...
store/
├── configureStore.js
├── connect.js
└── index.js
utils/
├── serviceWorker.js
├── localStorage.js
├── dom.js
└── ...
index.js
worker.js</code>

Nichts Besonderes hier. Importieren, erstellen und initialisieren Sie Containerkomponenten ScoreObserver. Was genau macht es? Es aktualisiert alle Ansichtselemente im Zusammenhang mit Bewertungen: High -Score -Liste und aktuelle Score -Informationen w?hrend des Spiels.

Skripte/Komponenten/ScoreObserver/index.js

<code>layouts/
└── default.html
partials/
├── back-button.html
└── meta.html
pages/
├── about.html
├── settings.html
└── ...
index.html</code>

Denken Sie daran, dass dies eine einfache Komponente ist. Was ist hier los? Die ScoreObServer-Komponente spart interne Verweise auf den Speicher und erstellt zwei Komponenten auf Pr?sentationsebene der neuen Instanz für die sp?tere Verwendung. Die Init -Methode zeichnet sich bei den Speicheraktualisierungen an und aktualisiert die $ -T -Label -Komponente jedes Mal, wenn sich der Speicher ?ndert - jedoch nur, wenn das Spiel tats?chlich ausgeführt wird.

updatesCoreboard -Methode wird an anderer Stelle verwendet. Es ist nicht sinnvoll, die Liste jedes Mal zu aktualisieren, wenn eine ?nderung eintritt, da die Ansicht ohnehin inaktiv ist. Es gibt auch eine Routing -Komponente, die jedes Mal, wenn sich die Ansicht ?ndert, eine andere Komponente aktualisiert oder deaktiviert. Seine API ist ungef?hr wie folgt:

import { createStore } from 'redux'
import reducers from '../reducers'

const store = createStore(reducers)

export default store
export { getItemList } from './connect'

Hinweis: $ (und $$) ist keine JQuery -Referenz, sondern eine bequeme Versorgungsverknüpfung zu document.querySelector.

Skripte/Komponenten/ScoreObserver/$ board.js

import store from './'

export function getItemList () {
  return store.getState().items.all
}

Dies ist wieder ein grundlegendes Beispiel und eine grundlegende Komponente. Die updateboard () -Methode nimmt ein Array an, iteriert es und fügt den Inhalt in die Punktzahlliste ein.

Skripte/Komponenten/ScoreObserver/$ label.js

import { createStore } from 'redux'
import reducers from '../reducers'

export default function configureStore () {
  return createStore(reducers)
}

Diese Komponente entspricht fast genau der obigen Anzeigetafel, aber nur ein einzelnes Element aktualisiert.

Andere Fehler und Vorschl?ge

Ein weiterer wichtiger Punkt ist die Implementierung von Anwendungsfall-gesteuerten Speicher. Ich denke, es ist wichtig, nur Inhalte zu speichern, die für die Anwendung unerl?sslich sind. Zu Beginn habe ich fast alles gespeichert: die aktuelle aktive Ansicht, Spieleinstellungen, Punktzahlen, Schwebebereicheffekte, Benutzernatmodus usw.

W?hrend dies mit einer Anwendung zusammenh?ngt, hat es nichts mit einer anderen zu tun. Es mag sch?n sein, die aktuelle Ansicht zu speichern und beim Nachladen genau an dem gleichen Ort fortzufahren, aber in meinem Fall fühlte es sich wie eine schlechte Benutzererfahrung an und ?rgerlicher als nützlich. Sie m?chten keine Menüs oder modalen Schalter speichern, oder? Warum müssen Benutzer in diesen bestimmten Zustand zurückkehren? In gr??eren Webanwendungen kann dies sinnvoll sein. Aber in meinem kleinen Handy -Focus -Spiel kehren Sie zum Bildschirm der Einstellungen zurück, nur weil ich von dort aus gegangen bin, was ziemlich ?rgerlich ist.

Schlussfolgerung

Ich habe mein Redux -Projekt mit und ohne Reaktion durchgeführt, und mein Hauptaufbau ist, dass der enorme Unterschied im Anwendungsdesign nicht erforderlich ist. Die meisten in React verwendeten Methoden k?nnen tats?chlich alle anderen Ansichtsverarbeitungseinstellungen anpassen. Es dauerte eine Weile, bis ich das erkannte, weil ich dachte, ich musste etwas anderes machen, aber am Ende stellte ich fest, dass es nicht notwendig war. , was unterschiedlich ist, ist, wie Sie Module initialisieren, wie Sie sie speichern und wie gut die Komponenten den gesamten Anwendungszustand verstehen. Das Konzept bleibt gleich, aber die Implementierung und das Codevolumen sind perfekt für Ihre Anforderungen.

Redux ist ein gro?artiges Tool, mit dem Ihre Anwendung auf nachdenklicher erstellt wird. Wenn Sie es allein ohne Ansichtsgalerie verwenden, kann es zun?chst sehr schwierig sein, aber wenn Sie die anf?ngliche Verwirrung überwunden haben, kann Sie nichts aufhalten. Was denkst du über meine Methode? Verwenden Sie Redux und verschiedene Ansichten, um Einstellungen allein zu behandeln? Ich würde gerne von Ihnen h?ren und es in den Kommentaren besprechen.

Wenn Sie mehr über Redux erfahren m?chten, lesen Sie den Mini -Kurs "Umschreiben und Testen von Redux, um Designprobleme zu l?sen". In diesem Kurs erstellen Sie eine Redux -Anwendung, die Tweets erh?lt, die nach Thema über eine WebSocket -Verbindung organisiert werden. Um Ihnen eine Vorstellung davon zu geben, was passieren wird, sehen Sie sich den kostenlosen Kurs unten an.

---

Laden des Players… FAQ auf reag-freier Redux (FAQ) Was ist der Hauptunterschied zwischen der Verwendung von Redux und React und nicht der Verwendung von React?

Redux ist ein vorhersehbarer Zustandsbeh?lter für JavaScript -Anwendungen, die mit jeder UI -Schicht verwendet werden k?nnen. Der Hauptunterschied zwischen der Verwendung von Redux vs. React und nicht der Verwendung von React besteht darin, wie die UI -Schicht mit Redux -Speicher interagiert. Bei Verwendung mit React kann Redux die Komponentenarchitektur von React und ihren Lebenszyklusansatz nutzen, um Aktualisierungen von Komponenten automatisch zu verarbeiten, wenn Zustands?nderungen vorgenommen werden. Ohne Reagieren müssen Sie den Speicher manuell abonnieren und Updates für die Benutzeroberfl?che verarbeiten, wenn sich der Status ?ndert.

Wie kann man mit asynchronen Operationen in Redux ohne Reaktion umgehen?

asynchrone Operationen in Redux werden normalerweise mit Middleware wie Redux Thunk oder Redux -Saga behandelt. Mit dieser Middleware k?nnen Sie Funktionen (Thunks) oder komplexere asynchrone Operationen (SAGAS) und nicht gew?hnliche Objekte planen. Auch ohne Reaktion k?nnen Sie diese Middleware im Redux -Speicher verwenden. Sie müssen nur Middleware anwenden, wenn Sie den Speicher über die Funktion von Reduxs anwenden.

Kann ich Redux Devtools ohne Reaktion verwenden?

Ja, Redux Devtools h?ngt nicht von React ab und kann mit jeder UI -Schicht verwendet werden, die Redux verwendet. Sie k?nnen Redux Devtools in Ihre Anwendung integrieren, indem Sie sie beim Erstellen von Redux -Speicher als Middleware hinzufügen. Auf diese Weise k?nnen Sie den Status und die Aktionen Ihrer Anwendung in Echtzeit prüfen, auch ohne Reagieren.

Wie verbindet ich mich ohne Reaktion mit Redux -Speicher in meiner UI -Komponente?

Ohne React und seine Verbindungsfunktion müssen Sie den Redux -Speicher manuell abonnieren und die UI -Komponenten aktualisieren, wenn sich der Status ?ndert. Sie k?nnen den Store mit der Store.Subscribe -Methode abonnieren, die eine H?rerfunktion annimmt, die jedes Mal aufgerufen wird, wenn der Vorgang geplant ist. In dieser Listener -Funktion k?nnen Sie Store.getState verwenden, um den aktuellen Status des Speichers zu erhalten und die UI -Komponenten entsprechend zu aktualisieren.

Kann ich Redux mit anderen Bibliotheken oder Frameworks wie Vue oder Angular verwenden?

Ja, Redux stützt sich nicht auf React und kann mit jeder UI -Schicht verwendet werden. Für andere Bibliotheken und Frameworks wie Vue und Angular werden Bindungen bereitgestellt, die eine ?hnliche Funktionalit?t wie die Connect -Funktion von React bieten. Mit diesen Bindungen k?nnen Sie UI -Komponenten einfach mit Redux -Speicher anschlie?en und Aktualisierungen von Komponenten verarbeiten, wenn sich der Status ?ndert.

Wie testet ich meinen Redux -Code ohne Reaktion?

Testen von Redux -Code ohne React ?hnelt dem Testen mit React. Sie k?nnen Unit -Tests für Ihre Aktionsersteller und Reduzierer erstellen, indem Sie ein JavaScript -Test -Framework wie Scherz oder Mokka verwenden. Zum Testen asynchroner Vorg?nge k?nnen Sie einen Mock -Speicher verwenden, um Redux -Speicher zu simulieren.

Wie kann man mit Nebenwirkungen in Redux ohne Reaktion umgehen?

Nebenwirkungen in Redux werden normalerweise mit Middleware wie Redux Thunk oder Redux -Saga behandelt. Mit dieser Middleware k?nnen Sie Funktionen mit Nebenwirkungen oder komplexeren asynchronen Operationen planen, z. B. API -Anrufe. Auch ohne Reaktion k?nnen Sie diese Middleware im Redux -Speicher verwenden.

Kann ich Redux mit reinem JavaScript verwenden?

Ja, Redux kann mit reinem JavaScript verwendet werden. Sie k?nnen einen Redux -Store erstellen, Aktionen planen und ?nderungen im Zustand mit nur reinem JavaScript abonnieren. Wenn es jedoch keine Bibliothek oder Framework gibt, wie Reaktionen, um Updates für die Benutzeroberfl?che zu verarbeiten, müssen Sie die UI -Komponenten manuell aktualisieren, wenn sich der Status ?ndert.

Wie erbaut man Redux -Code ohne Reaktion?

Die Struktur des Redux -Codes h?ngt nicht davon ab, ob Sie React verwenden. Sie k?nnen weiterhin die gleichen Best Practices zum Erstellen von Redux -Code befolgen, z.

Kann ich Redux Middleware ohne Reaktion verwenden?

Ja, Redux Middleware stützt sich nicht auf React und kann mit jeder UI -Ebene verwendet werden, die Redux verwendet. Middleware in Redux wird verwendet, um Nebenwirkungen und asynchrone Vorg?nge zu verarbeiten, usw. Sie k?nnen die Middleware von Redux anwenden, die über die Anwendung von Reduxs anwenden, unabh?ngig davon, ob Sie React verwenden oder nicht.

Das obige ist der detaillierte Inhalt vonRedux ohne Reaktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!