原生JavaScript进行先后端同构

什么是先后端同构

明确三个概念：「后端渲染」指传统的 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') 复制代码

前端全栈学习交流圈：866109386,面向1-3经验年前端开发人员,帮助突破技术瓶颈，提高思惟能力,群内有大量PDF可供自取，更有干货实战项目视频进群免费领取。

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参数，加载跟前端共用的模板，配合数据进行渲染，发送到浏览器。