共计 1798 个字符，预计需要花费 5 分钟才能阅读完成。
弹窗是咱们熟视无睹的一种交互方式，常常用到，但从没好好想过这种交互行为背地的意义 …
弹窗是 Windows 的灵魂
Windows 的灵魂是什么？当然是 Window，当方便快捷的多窗口进入人们视线的时候，大家无不为之惊呼太好用了！！
弹窗其实是一种多线程
当你须要放弃当前任务运行，同时开启一个新工作时，就须要多线程。弹窗何尝不是一种交互畛域的多线程？它能够挂起以后的操作流，而后开拓一片全新的操作区域，让用户从新开始一条新的操作流，并且期待其实现后还能够从新返回之前的操作环境。
弹窗其实就是 Page
有的 UI 设计师厌恶弹窗，感觉不美观，我不晓得为什么？当你把一个弹窗放到最大，充斥整个视口，你会发现这不就是一个所谓的 Page 吗？
弹窗是一种 keep-alive
为了放弃以后的滚动地位，用户的操作环境等，最简略的方法就是应用弹窗，不销毁底下的 Dom 元素，这不就是 keep-alive 吗？
弹窗与 Window
Window？Dialog？Modal？傻傻分不清楚，我也分不清楚，但咱们也不必去杠，就是一个命名而已。咱们能够约定，Window 特指那些重量级的弹窗，而 Dialog 和 Modal 特指轻量级弹窗。
咱们借用浏览器的 Tab 窗口来看：
- Window 外面装的是独立的 Page，而 Dialog 外面装的是一个独立的 Fragment;
- Window 外面不仅 Dom 元素是独立的，运行环境也是独立的，而 Dialog 只是 Dom 元素独立；
- Window 领有独立的历史记录栈，能够后退 / 后退 / 刷新，而 Dialog 没有这些性能；
没有 Window 的 SPA 是不残缺的
咱们习惯用 Single-Page-Application 来模仿浏览器的多页，从而能够更自在的管制页面间的跳转体验，但始终不足一种对 Window 窗口的模仿。在多页中咱们能够一句话让一个页面在新窗口中关上，比方：<a href="xxx" target="_blank">或者window.open(xxx)，然而在 SPA 中即使是操作一个 Dialog 都是绝对麻烦的事件，况且 Dialog 也不能算是 Window。
实现虚构 Window
基于以上剖析，集体实现了一个根本能满足需要的虚构 Window。
先看看成果：虚构 Window
之所以说它是虚构 Window，而非 Dialog，理由如下：
- 🚀 它外面装的是独立的 Page 而非 Fragment，仅依据 Url 就能够重建弹窗，例如 http://admin-react-antd.eluxj…
- 🚀 它外面装的 Page，不仅有独立的 Dom 构造，还有独立的
全局 Store，相似于实现与外界隔离的运行环境。 - 🚀 它自带独立的历史记录栈，基于它的每一个路由跳转都将主动造成一条历史记录。
- 🚀 它提供相似浏览器窗口的工具条：敞开 / 后退 / 刷新。如：文章列表 => 点击题目 => 点击作者 => 点击文章数。而后你能够顺次回退每一步操作，也可一次性全副敞开。
- 🚀 它提供窗口最大化、最小化按钮，如：文章详情，窗口左上角按钮；并反对默认最大化，如：创立文章
🚀 只需一句话即可关上新窗口，例如
<Link to="/article/list/index" action="push" target="window">：新窗口关上<Link to="/article/list/index" action="push" target="page">：本窗口关上
- 🚀 Window 中能够再开新窗口，最多可达 10 级，主动保护层级关系。
- 🚀 弹窗再弹弹窗体验不好？多层弹窗时自动隐藏上层弹窗，敞开下层弹窗主动复原上层弹窗，保障每一时刻始终之会呈现一层弹窗。
- 🚀 轻松实现是否 keep-alive。
keep-alive长处是用户体验好，毛病是太 TM 占资源（须要缓存所有 Dom 元素还有相干内存变量），当初应用虚构 Windw，你想 keep-alive 你就在新窗口中关上，不想 keep-alive 就在原窗口中关上，随便管制。
我的项目地址
大家有什么意见、想法、改良思路，都欢送提供哦 …
最初附上我的项目地址:
React 版本
- github: https://github.com/hiisea/elu…
- gitee: https://gitee.com/hiisea/elux…
Vue 版本
- github: https://github.com/hiisea/elu…
- gitee: https://gitee.com/hiisea/elux…
