Explication détaillée des étapes de l'isomorphisme front-end et back-end avec JS

Cette fois, je vais vous donner une explication détaillée des étapes permettant à JS d'effectuer l'isomorphisme front-end et back-end. Quelles sont les précautions pour que JS effectue l'isomorphisme front-end et back-end. . Voici un cas pratique, jetons un coup d'oeil.

Qu'est-ce que l'isomorphisme front-end et back-end

Trois concepts clairs : "Le rendu back-end" fait référence au mécanisme de rendu traditionnel ASP, Java ou PHP ; « Rendu front-end » Il fait référence à l'utilisation de JS pour restituer la plupart du contenu de la page, qui représente l'application populaire SPA monopage ; le « rendu isomorphe » fait référence au JS de partage front-end et back-end, et Node.js est utilisé pour générer directement du HTML lors du premier rendu. De manière générale, le rendu isomorphe est une partie commune entre le front-end et le back-end.

On dirait que le front-end est vraiment un combat. La séparation du front-end et du front-end était populaire auparavant. Pourquoi devons-nous faire un isomorphisme front-end et back-end maintenant ?

La raison est que l'application frontale monopage populaire SPA est relativement lourde et nécessite le chargement de nombreux fichiers pour la première visite. Le premier chargement est trop lent et l'utilisateur doit attendre. le front-end pour afficher la page. Il n'est pas propice au référencement et à la mise en cache, et a un certain seuil de développement.

En réutilisant les modèles et les fichiers JS, l'isomorphisme front-end et back-end permet à un code de s'exécuter simultanément sur le serveur et le navigateur. Le premier rendu utilise nodejs pour restituer la page, puis utilise. SPAroutage pour sauter . Il peut réduire efficacement le temps d'attente des utilisateurs pour la première visite, et est convivial pour le référencement et facile à mettre en cache.

Introduction au projet

Ce projet isomorphe front-end et back-end est principalement divisé en deux parties, l'une est un serveur de rendu basé sur koa2, et l'autre est basé sur JS natif et zepto Front-end SPA.

Les caractéristiques du projet sont qu'il n'utilise pas de frameworks tels que vue et React, qu'il a un seuil bas, une vitesse de développement rapide, qu'il est facile à démarrer et qu'il est relativement léger. une centaine de lignes de code. Il convient aux scénarios dans lesquels il y a peu d’interactions de pages et de changements peu fréquents, et peut améliorer efficacement les performances et la vitesse de chargement.

Partie front-end

Le cœur de la partie front-end est la partie routage. L'implémentation spécifique peut être basée sur l'API d'historique ou le hachage. implémentations sur Internet.Cette fois, je parlerai principalement de l'architecture
La partie front-end adopte la structure en couches MVC.

Ce que fait la couche routeur est principalement de créer des exemples de routage, d'appeler la méthode get de la route et de lier les fonctions de la couche de contrôle à des pages spécifiques.
Le formulaire est le suivant :

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

L'objectif principal de la couche de contrôle est de charger le modèle de rendu et les données de rendu partagées avec le backend. Après le rendu de la page, exécutez la fonction de page

Le formulaire est le suivant :

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)
 })
}

La couche de vue est le modèle. Le modèle xtpl est utilisé ici. Il prend en charge le rendu des pages à la fois dans l'environnement serveur et dans l'environnement front-end.

La forme de la fonction page

La fonction page nécessite l'utilisation de l'écriture du module es6, en conjonction avec la fonction de chargement à la demande de webpack

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

La partie back-end

Un serveur de rendu construit à l'aide de koa2, lors de la réception d'une demande de page depuis le front-end, il demandera des données au serveur API et identifiera si la demande de page contient le paramètre json=1. Si c'est le cas, il s'agit d'une requête lorsque la route du front-end saute, et les données sont renvoyées directement. Cependant, s'il n'y a pas de paramètre json, chargez le modèle partagé avec le front-end, restituez-le. avec les données et envoyez-les au navigateur.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes d'installation de vue-devtools

Explication détaillée de l'utilisation des classes en js et typescript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!