原生JS进行前后端同构


Posted in Javascript onApril 22, 2018

什么是前后端同构

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

Javascript 相关文章推荐
举例讲解AngularJS中的模块
Jun 17 Javascript
javascript中sort() 方法使用详解
Aug 30 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
Jul 19 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
js实现图片懒加载效果
Jul 17 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
Jun 28 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 #Javascript
vue移动端实现下拉刷新
Apr 22 #Javascript
实例讲解Vue.js中router传参
Apr 22 #Javascript
用Vue写一个分页器的示例代码
Apr 22 #Javascript
vue-cli3.0 特性解读
Apr 22 #Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 #Javascript
You might like
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php截取视频指定帧为图片
2016/05/16 PHP
示例详解Laravel的注册重构
2016/08/14 PHP
javascript 复杂的嵌套环境中输出单引号和双引号
2009/05/26 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
超棒的响应式布局jQuery插件Freetile.js
2014/11/17 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
[01:04:35]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第一场
2018/04/04 DOTA
Python中的ConfigParser模块使用详解
2015/05/04 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
python创建临时文件夹的方法
2015/07/06 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
pytorch多GPU并行运算的实现
2019/09/27 Python
Python decimal模块使用方法详解
2020/06/08 Python
英国最大的化装舞会服装网站:Fancydress.com
2017/08/15 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
Python里面search()和match()的区别
2016/09/21 面试题
红领巾心向党广播稿
2014/01/19 职场文书
高校十八大报告感想
2014/01/27 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
环保倡议书格式范文
2014/05/14 职场文书
党员服务承诺书
2014/05/28 职场文书
比赛口号大全
2014/06/10 职场文书
物流管理专业自荐信
2014/06/23 职场文书
好的旅游活动方案
2014/08/19 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
幼儿园感恩节活动方案
2014/10/06 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书