Dieses Mal zeige ich Ihnen, wie Sie JS verwenden, um Front-End- und Back-End-Isomorphismus zu erreichen Praktische Fälle, 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. 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 SPARoute
zum Springen. Es kann die Wartezeit für Benutzer beim ersten Zugriff effektiv verkürzen, ist SEO-freundlich und leicht zwischenzuspeichern.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 ArchitekturDer 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
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) }) }
🎜>
Seite sowohl in der Serverumgebung als auch in der Front-End-Umgebung. Die Funktion erfordert die Verwendung des ES6-Modulschreibens in Verbindung mit der On-Demand-Ladefunktion von Webpackexport default () => { window.addEventListener('scroll', fn) //页面函数支持返回一个卸载函数,在页面离开的时候会被调用 //主要用于内存的释放,定时器的清除,事件监听的移除等等 return function () { window.removeEventListener('scroll', fn) } }
So deklarieren Sie JS-Variablen var, let.const
Wie Sie Vue zum Berechnen von Eigenschaften verwenden und Methoden Listener
Das obige ist der detaillierte Inhalt vonSo verwenden Sie JS, um Front-End- und Back-End-Isomorphismus zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!