原生JavaScript进行前后端同构，网友：很nice！

谁借莪１个温暖的怀抱￠ 2022-03-26 00:51 112阅读 0赞

![1240][]

**什么是前后端同构**

明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现在流行的 SPA 单页面应用；「同构渲染」指前后端共用 JS，首次渲染时使用 Node.js 来直出 HTML。一般来说同构渲染是介于前后端中的共有部分。

感觉前端的确是折腾，之前还在流行前后端分离，现在怎么又要做前后端同构了？

原因是现在流行的SPA前端单页面应用比较沉重，首次访问需要加载文件较多，第一次加载过慢，用户需要等待前端进行渲染页面。而且不利于SEO及缓存，并且有一定的开发门槛。

前后端同构通过复用模板和JS文件，让一份代码可以同时跑在服务器和浏览器，首次渲染使用nodejs渲染页面，之后使用SPA路由跳转。可以有效减少用户首次访问的等待时间，并且对SEO比较友好，也便于缓存。

**项目简介**

本前后端同构项目主要分为两个部分，一个是基于koa2的渲染服务器，另一个是基于原生JS和zepto的前端SPA。

项目的特点是不使用vue和react等框架，门槛低，开发速度快，便于上手，比较轻巧，核心的router部分只有一百行左右的代码。适用于页面交互较少，变化不频繁的场景下，可以有效的提升性能和加载速度。

前端部分

前端部分的核心是路由部分，具体实现可以基于history API或是hash，网上有很多实现，这次主要讲下架构 前端部分采用MVC分层结构。

router层做的主要是创建路由示例，调用路由的get方法，给特定页面绑定来自control层的函数。 形式如：

import control from '../control'

//路由的构造函数支持传入渲染函数，路由的全局名称，路由跳转前调用的钩子

router = new Router(render,'ROUTER',beforeFn)

router.get('/page/a', control.pageA')

control层主要做的是加载跟后端共有的渲染模板和渲染数据，渲染出页面后运行页面函数

形式如：

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)

\})

\}

view层即模板，这里使用的是xtpl模板，在服务器环境和前端环境下都支持渲染页面

**页面函数的形式**

页面函数要求使用es6的模块写法，配合webpack的按需加载功能

export default () => \{

window.addEventListener('scroll', fn)

//页面函数支持返回一个卸载函数，在页面离开的时候会被调用

//主要用于内存的释放，定时器的清除，事件监听的移除等等

return function () \{

window.removeEventListener('scroll', fn)

\}

\}

**后端部分**

使用koa2搭建的一个渲染服务器，在收到前端传来的页面请求时，会向API服务器请求数据，并识别页面请求是否带有json=1的参数，如果带有，则为前端路由跳转时的请求，直接返回数据即可，如果没有带json参数，加载跟前端共用的模板，配合数据进行渲染，发送到浏览器。

> **        自己整理了一份最全面前端学习资料,从最基础的HTML+CSS+JS \[炫酷特效，游戏，插件封装，设计模式\]到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴, 有想学习web前端的，或是转行，或是大学生，还有工作中想提升自己能力的，正在学习的小伙伴欢迎加入学习。”**
> 
> **        加Q 裙：956940552（招募中）**

[1240]: /images/20220326/95e198cef12f4bd7934998bcd517bac3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，112人围观）

还没有评论，来说两句吧...

相关阅读

相关树的同构

include<stdio.h> typedef struct node { char data; int

快来打我*/ 2023年05月31日 12:14/ 0 赞/ 35 阅读

相关 java 中同构和异构_听课随想（17）同课之“同构”与“异构”

this.p=\{ m:2, b:2, loftPermalink:'', id:'fks\_08406408709508206808508708509508108108

拼搏现实的明天。/ 2022年11月12日 02:42/ 0 赞/ 205 阅读

相关 mysql数据同构_图的同构 (Graph Isomorphism)

同构是在数学对象之间定义的一类映射，它能揭示出在这些对象的属性或者操作之间存在的关系。若这两个数学结构之间存在同构映射，那么这两个结构叫做是同构的。一般来说，如果忽略掉同构的对

以你之姓@/ 2022年11月05日 03:22/ 0 赞/ 181 阅读

相关 ogg同构安装

Oracle Golden Gate配置使用手册环境：Oracle 11.2.0.4 OGG 11.1.1.0 Oracle -> Ora

ゝ一纸荒年。/ 2022年09月23日 08:07/ 0 赞/ 251 阅读

相关同构数

今天突然看到了关于同构数的问题，试着理解了一下同构数的概念：正整数n若是它平方数的尾部，则称n为同构数。例如：5的平方数是25，且5出现在25的右侧，那么5就是一个

怼烎@/ 2022年04月04日 10:42/ 0 赞/ 301 阅读

相关新闻客户端nices

![240931051095881.png][]![240931134373704.png][] ![240931353901930.png][]![240931248128

柔情只为你懂/ 2022年03月31日 15:42/ 0 赞/ 222 阅读

相关原生JavaScript进行前后端同构，网友：很nice！

![1240][] 什么是前后端同构明确三个概念：「后端渲染」指传统的 ASP、Java 或 PHP 的渲染机制；「前端渲染」指使用 JS 来渲染页面大部分内容，代表是现

谁借莪１个温暖的怀抱￠/ 2022年03月26日 00:51/ 0 赞/ 113 阅读

相关 node前后端同构的踩坑经历

项目背景 nodejs项目，webpack打包，用axios请求，Promise封装，nunjucks模板引擎；之前已将nunjucks模板通过webpack打包策略

Bertha 。/ 2022年01月12日 08:15/ 0 赞/ 154 阅读

相关同构字符串

题目描述给定两个字符串 s 和 t，判断它们是否是同构的。如果 s 中的字符可以被替换得到 t ，那么这两个字符串是同构的。所有出现的字符都必须用另一个字符替换

小灰灰/ 2021年12月14日 03:07/ 0 赞/ 307 阅读

相关树的同构

这里给出一种O（N）判断两棵树是否同构的方法：首先找出两个树的重心，然后对这个重心进行树的哈希。然后比对哈希结果，没有找到例题，但是有一个判断多棵树是否同构的例题，因为

谁践踏了优雅/ 2021年11月04日 10:26/ 0 赞/ 353 阅读