javascript - 求类单页应用方案

问题描述

问 题

要实现个类似网易邮箱的功能：

顶部是banner,左侧为菜单，右侧上部为打开页面对应的tab标签，类似于浏览器tab,下面是当前激活的tab对应的页面内容。

像类似这种需求，有点像单页应用，但在下在这方便并无实际应用经验。请各位大神帮忙指点下方向。
要求支持IE8+,所以vue被我否了。

自己实现了一个采用最简单方案，拦截左侧导航，点击之后获取对应页面的html片段，插入到当前页面，并建立tab和对应的内容区关联，以及html片段中的引入的JS之间的关系，从而实现在关闭tab页面 调用对应js中的销毁方法。

但是感觉有点low，怕最后没有管理好，造成内存溢出问题，项目进行到一半，悲吹了。另外没有实现地址栏解析参数解析，以实现直接打开特定菜单的功能。

也没有采用iframe直接打开对应菜单的方案，不知道直接采用iframe打开页面与采用html片段方式都有什么区别，我看qq邮箱 163邮箱都没有采用iframe来做，除了显示邮件主题内容时。

说的有点乱，望大神指点下方向。

Ps: 我看了下网易的代码，他们把所有的html都给打包js里面去了，由js来做的html渲染，但是前端这边js这块儿就我一人儿，一个人搞不了这么多事情，所以都是美工这边把页面布局写好，我来填js功能。

PPS:

我现在采用的html片段类似下面的结构，

div#xxxx

<script type="text/fscript" data-src="/script/page/address/index.js?t=<?=ResourceLoader::TIME_STAMP?>"></script>

后端返回这种格式，然后我把html插入到页面，然后读取script[type="text/fscript"]标签，获取data-src地址，然后创建script标签，建立起当前tabtabContent以及script中的实例之间的关系，来实现最后关闭tab时 调用实例的destroy做销毁，解绑之类的操作。

我想知道我这么做是不是好low，有没有什么潜在的问题啊。

解决方案

路由： 可以用hashchange监听路由（IE8支持）
页面：

1. `iframe`
2. 单独请求一段`HTML`插入
3. 页面一次性加载，先隐藏，需要显示再显示

这篇关于javascript - 求类单页应用方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！