彈窗是我們熟視無睹的一種互動方式，經常用到，但從沒好好想過這種互動行為背后的意義...
彈窗是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="https://www.cnblogs.com/hiisea/archive/2022/08/30/xxx" target="_blank">或者window.open(xxx)，然而在SPA中即便是操作一個Dialog都是相對麻煩的事情，況且Dialog也不能算是Window，
實作虛擬Window
基于以上分析，個人實作了一個基本能滿足需求的虛擬Window，
先看看效果：虛擬Window
之所以說它是虛擬Window，而非Dialog，理由如下：
- ?? 它里面裝的是獨立的Page而非Fragment，僅根據Url就可以重建彈窗，例如http://admin-react-antd.eluxjs.com/admin/member/item/edit/50?__c=_dialog
- ?? 它里面裝的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就在原視窗中打開，隨意控制，
專案地址
虛擬Window也算是摸著石頭過河，大家有什么意見、想法、改進思路，都歡迎提供哦...
最后附上專案地址:
- React版本
- github: https://github.com/hiisea/elux-react-antd-admin
- gitee: https://gitee.com/hiisea/elux-react-antd-admin-fork
- Vue版本
- github: https://github.com/hiisea/elux-vue-antd-admin
- gitee: https://gitee.com/hiisea/elux-vue-antd-admin-fork
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/503211.html
標籤：其他