IOING 在做些什麼？
IOING 在你的代碼和浏覽器之間架設了一個中間解釋層，該解釋層提供了一套新的文法來填補浏覽器所不具備的能力。
SPA 開發痛點
開發一個 SPA 應用的痛點是不同子產品頁面的狀态儲存，當從一個頁面跳轉到另一個頁面的時候視窗的所有狀态都将被清空重載，曆史頁面與目前頁面将不産生任何聯系，這個過程是一個拆毀重建的過程，如果你要回到曆史同樣隻能再次拆毀重建，并且在這個過程中不可避免的出現加載期的視窗白屏，顯然這樣的醜陋效果不符合一個高貴 App 的設定，但正因這種方式前後頁面不共存的簡單特性也使得開發邏輯變得簡單，開發者隻需考慮單個頁面的邏輯即可，而每一次新頁面的加載都能将之前頁面進行完全釋放，完全不需要擔心高耦合和記憶體無法完全釋放的問題，這也算是傳統技術的優點，雖然簡單粗暴，但是它很管用。那到底有沒有兩全其美的辦法呢？
傳統模式帶來的挑戰
和 SPA 應用不同的是多頁面應用往往相對要變得簡單，頁面與頁面之間不需要有複雜的資料交換，也無需儲存頁面曆史狀态，是以使用傳統技術最适合不過了。
而 SPA 應用則要協調頁面間的關系，它的每一個子產品都可能是關聯的，而且需要保持視窗的資料狀态，因而催生了另一個技術的流行，即通過使用 Ajax 和模版将新子產品内容載入到目前頁面，但這也導緻新載入子產品的腳本和 DOM 樹内容在主文檔下不斷堆積，且在不需要時也無法将其很好移除和釋放（比如 setTimeout 等僵屍事件）。另一種情況是一旦其中一個子產品發生錯誤将很有可能導緻整個 SPA 應用崩潰。
除了高耦合問題外，Ajax 每次載入大量的 DOM 結構到主 DOM Tree 下時都将可能會導緻這個龐大的 DOM Tree 進行 reflow(回流) 和 repaint(重繪)，進而影響整體運作效率
實作方案分析
基于上述分析，我們要得到一個穩定的 SPA 應用時必須改造浏覽器使其支援以下特性：
- 為保證應用松耦合，浏覽器必須具備能夠使新加載的子產品與已加載子產品不産生互相幹擾的能力。
- 為使浏覽器載入大量子產品時不會造成記憶體占用過高，浏覽器應能使被移除後的子產品能被完全釋放。
- 浏覽器應使子產品運作在獨立空間中，以保證子產品自身錯誤時不至于導緻整個應用停止工作。
隻有具備了這些特性時才能保證一個大型 WEB 應用的穩定運作，那麼對于上述問題 IOING 是怎麼處理的呢？
首先為了保證子產品的代碼錯誤不至于影響整個應用的運作，我們需要保證除引擎外的所有不可控腳本都不能運作在主 window 下，而子產品腳本自需要運作在單獨的沙盒中。
什麼是沙盒子產品？
沙盒（Sandbox）簡單來講就是: <iframe src="_blank" sandbox="..."></iframe>
無需解釋大家也就都懂了，但是很多人在看到 iframe 時就開始各種擔心起來，聯想起各種文章對 iframe 的負面描述。這裡需要解釋一下，iframe 直接作為嵌入網頁使用時确實會占用目前頁面連接配接池，但其在引擎中其主要目的是作為沙盒使用而并不是為了嵌入網頁使用的，當引擎将編譯好内容時會先主動建立一個空 iframe，然後直接将編譯内容直接丢入其中，注意 iframe 的 src="_blank"，這是一個空頁面，該情況下 iframe 并不會共享主視窗連接配接池。
我們設想一下這樣一個場景：你在浏覽器打開多個視窗分别載入不同的子產品頁面，然後在你需要打開其他頁面時能通過自定義動畫使浏覽器視窗進行動畫過渡将頁面展示，當你傳回時也能通過反向動畫再将之前視窗内容過渡回來，如果浏覽器支援這些或許 webApp 看起來将更酷，但現實是浏覽器并沒有這樣的操作?♂️。
而這個設想可以通過沙盒來實作，在沙盒中的頁面就像新開一個浏覽器視窗那樣，能夠很好的隔離子產品的 DOM 元素和變量，也能儲存頁面狀态，并能通過動畫控制其轉場。
沙盒雖然很穩妥，但其過于獨立，這導緻子產品内元素不能突破沙盒限制顯示在子產品外區域，比如說一些複合型子產品（即嵌入主子產品中的子產品，沙盒一般适用與獨立的全屏子產品），當你有這個需求時沙盒特性則不能滿足你，此時你應該支援另一種子產品運作方式：shadowbox 應運而生。
shadowbox
使用 shadowbox 配置的子產品，其子產品内容将以一顆新 DOM Tree 插入到主 DOM Tree 中（即 shadowdom 方式），這顆新 DOM Tree 中的 CSS樣式 和 元素id 将不會和外部元素耦合，而此時子產品的 js 檔案則依舊在其沙盒中運作。（若運作浏覽器不支援該特性時應自動降級處理）
後續
當然隻有一個沙盒模型是遠遠不夠的，比如元件同樣需要一套合理運作機制。之後「兩分鐘了解IOING」将會繼續推出以下話題：
- 元件設計與通信
- 子產品重新整理機制
- 量子 DOM 原理（和 Def 算法不同的資料雙向綁定設計）
- CSS 引擎的設計思想
更多敬請期待...
往期話題
IOING在開發SPA大型應用時有哪些必要的技術條件？
如何用 js 擷取虛拟鍵盤高度？（适用所有平台）
讓 CSS 完成背景圖加載完畢後顯示 之 解析 IOING 的 onload url 原理
IOING 主要特點圖示
IOING 是一款高性能的前端開發引擎。它為建立一個大型應用提供一整套的完備方案，如頁面子產品化拆分、層級路由控制、可程式設計CSS、熱拔插元件、雙向資料綁定、DOM文法擴充、自動相容處理等
聯系
掃碼二維碼關注我的公衆号：
資源
傳送門：IOING 仿ios界面
傳送門：官網
傳送門：Github 項目位址
本文轉載于:猿2048➼https://www.mk2048.com/blog/blog.php?id=hahbbhh11ib
