原生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 相关文章推荐
JavaScript静态的动态
Sep 18 Javascript
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
Extjs 继承Ext.data.Store不起作用原因分析及解决
Apr 15 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
利用js+css+html实现固定table的列头不动
Dec 08 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
Node.js中的require.resolve方法使用简介
Apr 23 Javascript
详谈Node.js之操作文件系统
Aug 29 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
JS中原始值和引用值的储存方式示例详解
Mar 23 Javascript
vue项目中使用tinymce编辑器的步骤详解
Sep 11 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答题类应用接口实例
2015/02/09 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
PHP配合fiddler抓包抓取微信指数小程序数据的实现方法分析
2020/01/02 PHP
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
EasyUI中combobox默认值注意事项
2015/03/01 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
解决Vue2.0自带浏览器里无法打开的原因(兼容处理)
2017/07/28 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
如何手动实现一个 JavaScript 模块执行器
2020/10/16 Javascript
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
TensorFlow模型保存和提取的方法
2018/03/08 Python
Python中判断子串存在的性能比较及分析总结
2019/06/23 Python
Python hmac模块使用实例解析
2019/12/24 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
如何在python中处理配置文件代码实例
2020/09/27 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
汽车驾驶求职信
2013/10/25 职场文书
股份合作协议书
2014/04/12 职场文书
企业安全标语
2014/06/07 职场文书
祖国在我心中演讲稿450字
2014/09/05 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
单位推荐信范文
2015/03/27 职场文书
nginx+lua单机上万并发的实现
2021/05/31 Servers
mysql 直接拷贝data 目录下文件还原数据的实现
2021/07/25 MySQL
详解Python中*args和**kwargs的使用
2022/04/07 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript
MySQL分布式恢复进阶
2022/07/23 MySQL