javascript - 单页应用view显示细节

问题描述

问 题

要实现一个类似邮箱的系统，左侧菜单，点击之后右侧tab显示。有点像网易邮箱。

在实现过程中，点击了左侧菜单导航，右侧内容该如何取回来展示呢？

自己实现方式是通过ajax获取html片段，然后使用jquery的html方法写入到页面， 且html片段中的script标签的type属性写成了非 text/javascript 的类型，然后再通过jquery方法获取所有的script 得到对应src,然后动态创建script标签加载js，以此建立起当前tab页与该页js实例间的关系 从而实现关闭tab时 执行相应的destroy操作，比如：清空dom引用，解绑事件等等。

老版本实现方式是直接用的iframe实现，点击左侧菜单a标签的target配置为右侧iframe的name对应值实现，但是父子页面间通讯、交互之类的很麻烦。

想知道其他的单页应用在具体编码时，通过路由变更回调中，展示对应的view时 如果管控html的。

解决方案

如果不用 iframe，现在常用的 VUE、React 这些框架做单页应用都很方便的。

如果用 iframe，自己写个简单的通讯框架其实也不难，无非就是判断一下自己是在 top 还是在 iframe 里，然后跟另一方建立联系(通常是 iframe 主动向 top 发送请求)

因为对框架我没深入研究，所以对路由不太熟。但大概也就是一个寻找资源的方式，一般按照框架约定来实现路由是不会有啥大问题的。但是如果你相自己写单页框架，那可能就麻烦了，尤其需要注意资源的加载、缓存和销毁，搞得不好浏览器内存占用涨得飞快。

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