使用原生JS进行前后端同构

voyagelab 发布于2019-08-22 16:31 / 2985人阅读

摘要：什么是前后端同构明确三个概念后端渲染指传统的或的渲染机制前端渲染指使用来渲染页面大部分内容，代表是现在流行的单页面应用同构渲染指前后端共用，首次渲染时使用来直出。

什么是前后端同构

明确三个概念：「后端渲染」指传统的 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参数，加载跟前端共用的模板，配合数据进行渲染，发送到浏览器。

混合云专线服务 js前后端分离框架前后端前后端分离 webrtc前后端

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94431.html

无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

fish 2019-08-29 11:27 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

Pluser 2019-08-01 15:52 评论0 收藏0
React同构直出优化总结

摘要：同构的关键要素完善的属性及生命周期与客户端的时机是同构的关键。的一致性在前后端渲染相同的，将输出一致的结构。以上便是在同构服务端渲染的提供的基础条件。可以将封装至的中，在服务端上生成随机数并传入到这个中，从而保证随机数在客户端和服务端一致。原文地址 React 的实践从去年在 PC QQ家校群开始，由于 PC 上的网络及环境都相当好，所以在使用时可谓一帆风顺，偶尔遇到点小磕绊，也能够...

alaege 2019-08-21 10:53 评论0 收藏0
FEDAY2016之旅

摘要：前戏补上参会的完整记录，这个问题从一开始我就是准备自问自答的，希望可以通过这种形式把大会的干货分享给更多人。 showImg(http://7xqy7v.com1.z0.glb.clouddn.com/colorful/blog/feday2.png); 前戏 2016/3/21 补上参会的完整记录，这个问题从一开始我就是准备自问自答的，希望可以通过这种形式把大会的干货分享给更多人。 ...

red_bricks 2019-08-19 17:55 评论0 收藏0