Reagieren Sie mit Beispielcode zur Implementierung der automatischen Browseraktualisierung

Inhaltsverzeichnis

Was ist Front-End-Routing?
Wie implementiere ich Front-End-Routing?

Hash-Implementierung
Verlauf Implementierung

Native JS-Version der Front-End-Routing-Implementierung

Hash-basierte Implementierung
Verlaufsbasierte Implementierung

React-Version der Front-End-Routing-Implementierung

Hash-basierte Implementierung
Verlaufsbasierte Implementierung

Implementierung des Front-End-Routings in der Vue-Version

Hash-basierte Implementierung
Verlaufsbasierte Implementierung

Zusammenfassung

siehe

Da Single-Page-Anwendungen heute so beliebt sind, ist das einst erstaunliche Front-End-Routing zum grundlegenden Standard der wichtigsten Frameworks geworden. Jedes Framework bietet leistungsstarke Routing-Funktionen, was die Routing-Implementierung kompliziert macht. Es ist immer noch etwas schwierig, die interne Implementierung des Routings zu verstehen, aber es ist relativ einfach, wenn Sie nur die Grundprinzipien der Routing-Implementierung verstehen möchten. Dieser Artikel stellt sechs Versionen von nativem JS/React/Vue als Referenz bereit und zielt auf die gängigen Implementierungsmethoden von Front-End-Routing, Hash und Verlauf ab. Der Implementierungscode jeder Version umfasst etwa 25 bis 40 Zeilen (einschließlich Leerzeilen).

Was ist Front-End-Routing?

Das Konzept des Routings kommt vom Server, wo Routing die Zuordnungsbeziehung zwischen URLs und Verarbeitungsfunktionen beschreibt.

In der Web-Frontend-Single-Page-Anwendung SPA (Single Page Application) beschreibt Routing die Zuordnungsbeziehung zwischen URL und UI. Diese Zuordnung ist unidirektional, d. h. URL-Änderungen führen zu UI-Updates (ohne die Seite zu aktualisieren).

Wie implementiere ich Front-End-Routing?

Um Front-End-Routing zu implementieren, müssen zwei Kernprobleme behoben werden:

Wie ändere ich die URL, ohne eine Seitenaktualisierung auszulösen? Wie erkennt man, wenn sich eine URL geändert hat?

Die folgenden beiden Kernfragen werden jeweils anhand von Hash- und Verlaufsimplementierungen beantwortet.

Hash-Implementierung

Hash ist der Teil der URL, der mit dem Hash ( # ) beginnt und damit endet. Er wird häufig als Anker verwendet, um innerhalb einer Seite zu navigieren. Das Ändern des Hash-Teils der URL führt nicht dazu, dass die Seite aktualisiert wird.
Überwachen Sie URL-Änderungen durch Hashchange-Ereignisse. Es gibt nur wenige Möglichkeiten, URLs zu ändern: Ändern Sie URLs, indem Sie den Browser vorwärts und rückwärts bewegen,標簽改變URL、通過wind window.location. Diese Änderungen lösen Hashchange-Ereignisse aus.

Verlauf Implementierung

History bietet zwei Methoden: pushState und replaceState. Diese beiden Methoden ändern den Pfadteil der URL, ohne dass die Seite aktualisiert wird.
Die Geschichte bietet ein Popstate-Ereignis, das dem Hashchange-Ereignis ähnelt, aber das Popstate-Ereignis ist etwas anders: Das Popstate-Ereignis wird ausgelöst, wenn die URL durch Vorwärts- oder Rückwärtsbewegen des Browsers geändert wird, und das Popstate-Ereignis wird nicht ausgelöst, wenn die URL durch pushState/replaceState oder Tags geändert wird件。好在我們可以攔截pushState/r um URL-Änderungen zu erkennen. So ist eine Überwachung von URL-Änderungen möglich, allerdings ist das nicht so bequem wie Hashchange.

Native JS-Version der Front-End-Routing-Implementierung

Basierend auf den beiden im vorherigen Abschnitt besprochenen Implementierungsmethoden werden die Hash-Version und die Verlaufsversion des Routings jeweils implementiert. Das Beispiel verwendet eine native HTML/JS-Implementierung und ist nicht auf ein Framework angewiesen.

Hash-basierte Implementierung

Wirkung der Operation:

HTML-Teil:

<Text>
  <ul>
ref=""> <!-- Routen definieren -->
    <li><a href="#/home" rel="external nofollow" >Startseite</a></li>
    <li><a href="#/about" rel="external nofollow" >über</a></li>
 
ref=""> <!-- Rendert die Benutzeroberfläche entsprechend der Route -->
    <div id="routeView"></div>
  </ul>
</body>

JavaScript-Teil:

// Die Seite wird nach dem Laden keinen Hash-Change auslösen. Hier werden wir aktiv ein Hash-Change-Ereignis auslösen window.addEventListener('DOMContentLoaded', onLoad)
// Auf Routenänderungen warten window.addEventListener('hashchange', onHashChange)
 
// Routing-Ansicht var routerView = null
 
Funktion beim Laden () {
  Routeransicht = Dokument.Abfrageauswahl('#routeView')
  beiHashChange()
}
 
// Wenn sich die Route ändert, rendern Sie die entsprechende Benutzeroberfläche entsprechend der Route
Funktion onHashChange () {
  Schalter (Standort.Hash) {
    Fall '#/home':
      routerView.innerHTML = "Startseite"
      zurückkehren
    Fall '#/about':
      routerView.innerHTML = "Über"
      zurückkehren
    Standard:
      zurückkehren
  }
}

Verlaufsbasierte Implementierung

Wirkung der Operation:

HTML-Teil:

<Text>
  <ul>
    <li><a href='/home'>Startseite</a></li>
    <li><a href='/about'>Über</a></li>
 
    <div id="routeView"></div>
  </ul>
</body>

JavaScript-Teil:

// Die Seite wird nach dem Laden keinen Hash-Change auslösen. Hier werden wir aktiv ein Hash-Change-Ereignis auslösen window.addEventListener('DOMContentLoaded', onLoad)
// Auf Routenänderungen warten window.addEventListener('popstate', onPopState)
 
// Routing-Ansicht var routerView = null
 
Funktion beim Laden () {
  Routeransicht = Dokument.Abfrageauswahl('#routeView')
  beiPopState()
 
 href=""> // Fange das Standardverhalten des Klickereignisses des Tags <a> ab. Beim Klicken verwende pushState, um die URL zu ändern und die manuelle Benutzeroberfläche zu aktualisieren. Dadurch wird der Effekt erzielt, dass beim Klicken auf einen Link die URL und die Benutzeroberfläche aktualisiert werden.
  var linkList = document.querySelectorAll('a[href]')
  linkList.forEach(el => el.addEventListener('klicken', Funktion (e) {
    e.preventDefault()
    history.pushState(null, '', el.getAttribute('href'))
    beiPopState()
  }))
}
 
// Wenn sich die Route ändert, rendern Sie die entsprechende Benutzeroberfläche entsprechend der Route
Funktion beiPopState () {
  Schalter (Standort.Pfadname) {
    Fall '/home':
      routerView.innerHTML = "Startseite"
      zurückkehren
    Fall '/über':
      routerView.innerHTML = "Über"
      zurückkehren
    Standard:
      zurückkehren
  }
}

React-Version der Front-End-Routing-Implementierung

Hash-basierte Implementierung

Wirkung der Operation:

Die Verwendung ist ähnlich wie bei react-router:

  <BrowserRouter>
    <ul>
      <li>
        <Link zu="/home">Startseite</Link>
      </li>
      <li>
        <Link to="/about">über</Link>
      </li>
    </ul>
 
    <Route path="/home" render={() => <h2>Startseite</h2>} />
    <Route path="/about" render={() => <h2>Über</h2>} />
  </BrowserRouter>

BrowserRouter-Implementierung

exportiere Standardklasse BrowserRouter erweitert React.Component {
  Zustand = {
    aktueller Pfad: utils.extractHashPath(window.location.href)
  };
 
  beiHashChange = e => {
    const currentPath = utils.extractHashPath(e.newURL);
    console.log("onHashChange:", aktueller Pfad);
    Dies.setState({ aktuellerPfad });
  };
 
  componentDidMount() {
    window.addEventListener("hashchange", this.onHashChange);
  }
 
  componentWillUnmount() {
    window.removeEventListener("hashchange", this.onHashChange);
  }
 
  rendern() {
    zurückkehren (
      <RouteContext.Provider-Wert={{currentPath: this.state.currentPath}}>
        {diese.props.children}
      </RouteContext.Provider>
    );
  }
}

Routenimplementierung

export default ({ Pfad, Render }) => (
  <Routenkontext.Verbraucher>
    {({currentPath}) => currentPath === Pfad && render()}
  </RouteContext.Consumer>
);

Link-Implementierung

exportiere Standard ({ nach, ...Eigenschaften }) => <a {...Eigenschaften} href={"#" + nach} />;

Verlaufsbasierte Implementierung

Wirkung der Operation:

Die Verwendung ist ähnlich wie bei react-router:

  <HistoryRouter>
    <ul>
      <li>
        <Link zu="/home">Startseite</Link>
      </li>
      <li>
        <Link to="/about">über</Link>
      </li>
    </ul>
 
    <Route path="/home" render={() => <h2>Startseite</h2>} />
    <Route path="/about" render={() => <h2>Über</h2>} />
  </HistoryRouter>

HistoryRouter-Implementierung

exportiere Standardklasse HistoryRouter erweitert React.Component {
  Zustand = {
    aktueller Pfad: utils.extractUrlPath(window.location.href)
  };
 
  beiPopState = e => {
    const currentPath = utils.extractUrlPath(window.location.href);
    console.log("onPopState:", aktueller Pfad);
    Dies.setState({ aktuellerPfad });
  };
 
  componentDidMount() {
    window.addEventListener("popstate", this.onPopState);
  }
 
  componentWillUnmount() {
    window.removeEventListener("popstate", this.onPopState);
  }
 
  rendern() {
    zurückkehren (
      <RouteContext.Provider-Wert={{currentPath: this.state.currentPath, onPopState: this.onPopState}}>
        {diese.props.children}
      </RouteContext.Provider>
    );
  }
}

Routenimplementierung

export default ({ Pfad, Render }) => (
  <Routenkontext.Verbraucher>
    {({currentPath}) => currentPath === Pfad && render()}
  </RouteContext.Consumer>
);

Link-Implementierung

exportiere Standard ({ nach, ...Eigenschaften }) => (
  <Routenkontext.Verbraucher>
    {({ onPopState }) => (
      <a
        href=""
        {...Requisiten}
        beiKlick={e => {
          e.preventDefault();
          window.history.pushState(null, "", bis);
          beiPopState();
        }}
      />
    )}
  </RouteContext.Consumer>
);

Implementierung des Front-End-Routings in der Vue-Version

Hash-basierte Implementierung

Wirkung der Operation:

Die Verwendung ist ähnlich wie bei vue-router (vue-router fügt Routen über den Plug-in-Mechanismus ein, verbirgt dabei aber die Implementierungsdetails. Um den Code intuitiv zu halten, wird hier keine Vue-Plug-in-Kapselung verwendet):

    <div>
      <ul>
        <li><router-link to="/home">Zuhause</router-link></li>
        <li><router-link to="/about">über</router-link></li>
      </ul>
      <Router-Ansicht></Router-Ansicht>
    </div>
 
const Routen = {
  '/heim': {
    Vorlage: '<h2>Home</h2>'
  },
  '/um': {
    Vorlage: '<h2>Über</h2>'
  }
}
 
const app = new Vue({
  el: ".vue.hash",
  Komponenten:
    'Router-Ansicht': Router-Ansicht,
    'Router-Link': RouterLink
  },
  vorErstellen () {
    dies.$routes = Routen
  }
})

Router-View-Implementierung:

<Vorlage>
  <Komponente: ist = "Routenansicht" />
</Vorlage>
 
<Skript>
importiere Dienstprogramme aus „~/utils.js“
Standard exportieren {
  Daten () {
    zurückkehren {
      routeView: null
    }
  },
  erstellt () {
    dies.boundHashChange = dies.onHashChange.bind(dies)
  },
  vorMount () {
    window.addEventListener('hashchange', this.boundHashChange)
  },
  montiert () {
    dies.onHashChange()
  },
  vorZerstören() {
    window.removeEventListener('hashchange', this.boundHashChange)
  },
  Methoden: {
    beiHashÄnderung () {
      const Pfad = utils.extractHashPath(window.location.href)
      this.routeView = this.$root.$routes[Pfad] || null
      console.log('vue:hashchange:', Pfad)
    }
  }
}
</Skript>

Router-Link-Implementierung:

<Vorlage>
  <a @click.prevent="beiKlick" href=''><slot></slot></a>
</Vorlage>
 
<Skript>
Standard exportieren {
  Requisiten: {
    bis: Zeichenfolge
  },
  Methoden: {
    bei Klick () {
      fenster.standort.hash = '#' + dies.zu
    }
  }
}
</Skript>

Verlaufsbasierte Implementierung

Wirkung der Operation:

Die Verwendung ist ähnlich wie bei vue-router:

    <div>
      <ul>
        <li><router-link to="/home">Zuhause</router-link></li>
        <li><router-link to="/about">über</router-link></li>
      </ul>
      <Router-Ansicht></Router-Ansicht>
    </div>
 
const Routen = {
  '/heim': {
    Vorlage: '<h2>Home</h2>'
  },
  '/um': {
    Vorlage: '<h2>Über</h2>'
  }
}
 
const app = new Vue({
  el: ".vue.history",
  Komponenten:
    'Router-Ansicht': Router-Ansicht,
    'Router-Link': RouterLink
  },
  erstellt () {
    dies.$routes = Routen
    dies.boundPopState = dies.onPopState.bind(dies)
  },
  vorMount () {
    window.addEventListener('popstate', this.boundPopState) 
  },
  vorZerstören () {
    window.removeEventListener('popstate', this.boundPopState) 
  },
  Methoden: {
    beiPopState (...args) {
      dies.$emit('popstate', ...args)
    }
  }
})

Router-View-Implementierung:

<Vorlage>
  <Komponente: ist = "Routenansicht" />
</Vorlage>
 
<Skript>
importiere Dienstprogramme aus „~/utils.js“
Standard exportieren {
  Daten () {
    zurückkehren {
      routeView: null
    }
  },
  erstellt () {
    dies.boundPopState = dies.onPopState.bind(dies)
  },
  vorMount () {
    dies.$root.$on('popstate', dies.boundPopState)
  },
  vorZerstören() {
    dies.$root.$off('popstate', dies.boundPopState)
  },
  Methoden: {
    onPopState (e) {
      const Pfad = utils.extractUrlPath(window.location.href)
      this.routeView = this.$root.$routes[Pfad] || null
      console.log('[Vue] popstate:', Pfad)
    }
  }
}
</Skript>

Router-Link-Implementierung:

<Vorlage>
  <a @click.prevent="beiKlick" href=''><slot></slot></a>
</Vorlage>
 
<Skript>
Standard exportieren {
  Requisiten: {
    bis: Zeichenfolge
  },
  Methoden: {
    bei Klick () {
      history.pushState(null, '', dies.zu)
      dies.$root.$emit('popstate')
    }
  }
}
</Skript>

Zusammenfassung

Das grundlegende Implementierungsprinzip des Front-End-Routings ist sehr einfach. In Kombination mit einem bestimmten Framework werden jedoch viele Funktionen hinzugefügt, z. B. dynamisches Routing, Routing-Parameter, Routing-Animation usw., was die Routing-Implementierung komplizierter macht. Dieser Artikel analysiert nur die Implementierung des Kernteils des Front-End-Routings und bietet drei Implementierungen von nativem JS/React/Vue basierend auf Hash- und Verlaufsmodi, insgesamt sechs Implementierungsversionen als Referenz. Ich hoffe, er wird Ihnen hilfreich sein.

Alle Beispiele sind im Github-Repository verfügbar: https://github.com/whinc/web-router-principle

siehe

Detaillierte Erläuterung mehrerer Implementierungsprinzipien des Single Page Routing

Implementierungsprinzip des Single Page Application Routing: Am Beispiel von React-Router

Dies ist das Ende dieses Artikels über den Beispielcode zur Implementierung der automatischen Browseraktualisierung in React. Weitere relevante Inhalte zur automatischen Browseraktualisierung von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

Bestimmen Sie anhand von JavaScript, ob der Browser geschlossen oder aktualisiert wird (supergenau)
JavaScript aktualisiert den Browser nicht, um die Vorwärts- und Rückwärtsfunktion zu erreichen
Lösung für WeChat-Browser-Javascript kann window.location.reload() nicht verwenden, um die Seite zu aktualisieren
Intelligenter Js-Code, um festzustellen, ob der Browser geschlossen oder aktualisiert wird
Tiefgreifendes Verständnis der verschiedenen Aktualisierungsregeln des Browsers
Detaillierte Erläuterung des Vuex-Persistenz-Plugins zur Lösung des Problems des Verschwindens von Browser-Aktualisierungsdaten

<<: VMware12.0-Installation Ubuntu14.04 LTS-Tutorial

>>: Detaillierte Erklärung der MySQL-Instanz mit aktiviertem SSD-Speicher