Detaillierte Erläuterung der Schritte für Front-End- und Back-End-Isomorphismus mit JS

Dieses Mal werde ich Ihnen eine detaillierte Erklärung der Schritte geben, mit denen JS Front-End- und Back-End-Isomorphismus durchführt. Was sind die Vorsichtsmaßnahmen für JS, um Front-End- und Back-End-Isomorphismus durchzuführen? . Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

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 der Seite, was die beliebte SPA-Einzelseitenanwendung darstellt. „Isomorphes Rendering“ bezieht sich auf die gemeinsame Nutzung von JS im Front-End und im Back-End 🎜>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.

Der Front-End- und Back-End-Isomorphismus ermöglicht die Ausführung eines Codes sowohl auf dem Server als auch im Browser durch die Wiederverwendung von Vorlagen und JS-Dateien. Das erste Rendering verwendet NodeJS zum Rendern der Seite und verwendet dann SPA

Route zum Springen. Es kann die Wartezeit für Benutzer beim ersten Besuch 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, nach dem Empfang der Front-End-Übertragung. Wenn eine Seitenanforderung eingeht, werden Daten vom API-Server angefordert und es wird festgestellt, ob die Seitenanforderung den Parameter json= enthält 1. Wenn dies der Fall ist, handelt es sich um eine Anfrage, wenn die Front-End-Route springt, und die Daten werden direkt zurückgegeben. Wenn sie keine JSON-Parameter enthalten, laden Sie die mit dem Front-End geteilte Vorlage und rendern Sie sie mit den Daten. und senden Sie es an den 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:

Detaillierte Erläuterung der Installationsschritte von vue-devtools

Detaillierte Erläuterung der Klassenverwendung in js und typescript

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte für Front-End- und Back-End-Isomorphismus mit JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!