原生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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
JSON为什么那样红为什么要用json(另有洞天)
Dec 26 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
Mar 25 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
微信小程序实现元素渐入渐出动画效果封装方法
May 18 Javascript
vue前后分离调起微信支付
Jul 29 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 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注入实例
2006/10/09 PHP
CodeIgniter删除和设置Cookie的方法
2015/04/07 PHP
PHP实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
详解php用static方法的原因
2018/09/12 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
实例讲解避免javascript冲突的方法
2016/01/03 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
解决npm安装Electron缓慢网络超时导致失败的问题
2018/02/06 Javascript
koa2 从入门到精通(小结)
2019/07/23 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
100行代码实现vue表单校验功能(小白自编)
2019/11/19 Javascript
Vue+Node实现的商城用户管理功能示例
2019/12/23 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
python生成随机验证码(中文验证码)示例
2014/04/03 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
Python Matplotlib绘图基础知识代码解析
2020/08/31 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
大学生社会实践方案
2014/05/11 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书