So verwenden Sie Front-End- und Back-End-Isomorphismus in JS

Dieses Mal zeige ich Ihnen, wie Sie Front-End- und Back-End-Isomorphismus in JS verwenden und welche Vorsichtsmaßnahmen für die Verwendung von Front-End- und Back-End-Isomorphismus in JS gelten. Das Folgende ist ein praktischer Fall ein Blick.

Was ist Front-End- und Back-End-Isomorphismus?

Klare drei Konzepte: „Back-End-Rendering“ bezieht sich auf den traditionellen ASP-, Java- oder PHP-Rendering-Mechanismus; „Front-End-Rendering“ bezieht sich auf die Verwendung von JS zum Rendern des größten Teils des Seiteninhalts, was die mittlerweile beliebte SPA-Einzelseitenanwendung darstellt. „Isomorphes Rendering“ bezieht sich auf die Front-End- und Back-End-Freigabe von JS Node.js wird verwendet, um HTML beim ersten Rendern direkt auszugeben. Im Allgemeinen ist isomorphes Rendering ein gemeinsamer Bestandteil zwischen Front- und Back-End.

Es fühlt sich an, als wäre das Front-End wirklich ein Kampf. Die Trennung von Front-End und Front-End war früher beliebt. Warum müssen wir jetzt Front-End- und Back-End-Isomorphismus herstellen?

Der Grund dafür ist, dass die beliebte SPA-Front-End-Einzelseitenanwendung relativ umfangreich ist und beim ersten Besuch viele Dateien geladen werden müssen. Der erste Ladevorgang ist zu langsam und der Benutzer muss warten das Frontend, um die Seite zu rendern. Es ist für SEO und Caching nicht förderlich und weist bestimmte Entwicklungsschwellen auf.

Durch die Wiederverwendung von Vorlagen und JS-Dateien ermöglicht der Front-End- und Back-End-Isomorphismus die gleichzeitige Ausführung eines Codes auf dem Server und dem Browser. Beim ersten Rendern werden NodeJS zum Rendern der Seite verwendet und anschließend verwendet SPA-Routing zum Springen. Es kann die Wartezeit für Benutzer beim ersten Zugriff effektiv verkürzen, ist SEO-freundlich und leicht zwischenzuspeichern.

Projekteinführung

Dieses isomorphe Front-End- und Back-End-Projekt ist hauptsächlich in zwei Teile unterteilt: Der eine ist ein auf KOA2 basierender Rendering-Server und der andere ist basierend auf nativem JS und zepto Front-end SPA.

Die Merkmale des Projekts sind, dass es keine Frameworks wie Vue und React verwendet, einen niedrigen Schwellenwert aufweist, eine schnelle Entwicklungsgeschwindigkeit aufweist, einfach zu starten ist und nur den Kern-Router-Teil hat etwa hundert Zeilen Code. Es eignet sich für Szenarien mit wenigen Seiteninteraktionen und seltenen Änderungen und kann die Leistung und Ladegeschwindigkeit effektiv verbessern.

Front-End-Teil

Der Kern des Front-End-Teils ist der Routing-Teil. Die spezifische Implementierung kann auf der Verlaufs-API oder dem Hash basieren Viele Implementierungen im Internet. Dieses Mal sprechen wir hauptsächlich über die Architektur
Der Front-End-Teil übernimmt die MVC-Schichtstruktur.

Die Aufgabe der Router-Schicht besteht hauptsächlich darin, Routing-Beispiele zu erstellen, die Get-Methode der Route aufzurufen und Funktionen von der Kontrollschicht an bestimmte Seiten zu binden.
Das Formular lautet wie folgt:

import control from '../control'
//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子
router = new Router(render,'ROUTER',beforeFn)
router.get('/page/a', control.pageA')

Der Hauptzweck der Steuerebene besteht darin, die mit dem Backend geteilten Rendering-Vorlagen und Rendering-Daten zu laden und nach dem Rendern der Seite die Seitenfunktion auszuführen

Das Formular ist wie folgt:

let control = {
 pageA(req,res) {
  //webpack的动态加载，代码分割功能
  import(/* webpackChunkName: "pageA" */'script/pageA').then(module=> {
  // 检测该页面是否已有服务器渲染好，是的话直接运行module.default
  //否则加载模板和数据进行渲染,最后再调用页面函数
  if(this.needRender(module.default)) {
  //加载数据时访问的地址就是当前准备渲染的页面地址，只是加上了json=1的参数
   loadData('pageA').then(data => 
    res.render(xtpl,data,module.default))
  }
 }
}
// 捕捉webpack热更新，让他只进行相当于页面跳转的操作而不是刷新页面
if(module.hot) {
 module.hot.accept(['script/pageA'], () => {
  control[ROUTER.req.currentControl].call(ROUTER,null,ROUTER.res)
 })
}

Ansichtsebene ist die Vorlage. Die xtpl-Vorlage wird hier verwendet. Sie unterstützt die Seitenfunktion

🎜> Seite sowohl in der Serverumgebung als auch in der Front-End-Umgebung. Die Funktion erfordert die Verwendung des ES6-Modulschreibens und der On-Demand-Ladefunktion von Webpack

export default () => {
 window.addEventListener('scroll', fn)
//页面函数支持返回一个卸载函数，在页面离开的时候会被调用
//主要用于内存的释放，定时器的清除，事件监听的移除等等
 return function () {
  window.removeEventListener('scroll', fn)
 }
}

Der Back-End-Teil

Ein mit koa2 erstellter Rendering-Server, der nach dem Empfang der Front-End-Übertragung Daten vom API-Server anfordert und ermittelt, ob die Seitenanforderung den Parameter json=1 enthält Wenn die Front-End-Route springt, handelt es sich um eine Anfrage, und die Daten können direkt zurückgegeben werden. Wenn sie keine JSON-Parameter enthalten, laden Sie die mit dem Front-End geteilte Vorlage, rendern Sie sie mit den Daten und senden Sie sie an der Browser.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

React+antd-Komponenten zum Erstellen eines vollständigen Backends (mit Code)

React-Anwendungsentwicklungsgerüst Anwendungsfälle

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Front-End- und Back-End-Isomorphismus in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!