什么是前后端同构
明确三个概念:后端渲染指传统的 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 参数, 加载跟前端共用的模板, 配合数据进行渲染, 发送到浏览器.
来源: http://www.jb51.net/article/138723.htm