后台管理网站选项卡的设计

对于后台管理网站，目前主流布局是上左右结构，上面是一些网站和登录用户信息，左边是导航菜单，右边是内容。

用户多开菜单，切换编辑的情况还是比较普遍的。这个时候点击左侧菜单，就在右侧新开一个tab选项卡，直接将右侧的内容替换掉。

一、选项卡实现方式

选项卡的内容主流也有两种方式：一种是iframe嵌套新页面；一种是单页模式，通过异步请求，在前端渲染div。

两种各有各的优缺点。

iframe

优点：

• 1.代码隔离，无需担心js污染
• 2.可以单独刷新框架内容，不影响父框架

缺点：

• 1.iframe引用的js和css虽然有缓存不需要下载，但是每个iframe都必须重新渲染，文件多的话，效率会低一点。
• 2.不同iframe间想要实现数据交互更为困难。目前我是没有这个需求，如果有的话，我想我会通过在top和各个iframe上注册自定义事件监听器，来实现数据交互。

单页

优点：

• 1.由于js和css已经渲染完毕，无需重新渲染。
• 2.页面结构更为简单
• 3.一般有统一的数据管理，数据交互更为简单。

缺点：

• 1.公共（非闭包）数据会变得很多，类似vuex这种的，后期如果没有文档，维护难度很大，一旦交接断层，容易形成屎山代码。
• 2.对前端程序员要求高点，如果不用三大前端框架，而是用jquery之类自己手撸，大概率会有js变量污染。

二、多选项卡历史记录

不管用哪种形式，多选项卡还需要关注一个问题就是记住打开历史。当打开多个选项卡，关闭整个网页，下次打开时需要重新打开之前的选项卡。

这里可以实际成按电脑或者按用户两种方式区分。

1.按电脑区分

按电脑区分比较简单，用cookie或localstorage存储，所有选项卡的id,url和title，以及当前选中的选项卡id即可。 新开和关闭选项卡的时候，更新数据。 重新打开页面的时候加载所有选项卡。 为了避免一次加载所有选项卡数据。应该做到在选中时并且未加载的时候才加载选项卡内容。

2.按用户区分

按用户区分比较麻烦，大致和按电脑区分流程相同。 唯一不同的是新开和关闭选项卡存储时还需要调用后端接口存储到后端数据库，然后重新打开页面的时候需要先从后端获取数据并更新到本地。 为了避免一次加载所有选项卡数据。应该做到在选中时并且未加载的时候才加载选项卡内容。