雙SPA應用程序破解

我有一個內部專有的SPA框架，我們需要支持它的遺留代碼。我們將Reactjs插入應用程序的綠地部分。我擔心合併這兩種從未設計的技術將會導致很多令人頭痛的問題。傳統SPA應用程序的加載最初需要大於5秒。我想避免在應用程序之間進行痛苦的重新加載切換。雙SPA應用程序破解

我最初的想法是寫一些JavaScript中間件可以：

隱藏從傳統應用中的所有內容
禁用所有的CSS從傳統的應用
禁止從傳統的應用程序所有的JavaScript
加載reactjs應用程序
反向按需過程

有沒有可以幫助我的現有工具或技術？基本上，我想要兩個SPA應用技術在同一個沙箱中一起玩。

有點像這樣：

//store old body content and append a new div for new content 
var bodyContent = document.body.innerHTML; document.body.innerHTML = ""; 
document.body.innerHTML += "<div id=\"insertedDiv\" style=\"position: absolute; left: -9999em;\">" 
+ bodyContent 
+ "</div><div id=\"reactContent\" style=\"color: red\">ReactJS Output Goes here</div>"; 

//disable all the css 
var disableCss = true; 
for (index = 0; index < document.scripts.length; index++) { 
    document.styleSheets[index].disabled = disableCss; 
    console.log(document.styleSheets[index].disabled); 
} 

//disable all the JavaScript 
var disableJavaScriptHack = "application/json"; 
for (index = 0; index < document.scripts.length; index++) { 
    document.scripts[index].type = disableJavaScriptHack; 
    console.log(document.scripts[index].type); 
} 

//Make an ajax call to get the ReactJs content 
//Mold the content so it fits into the body, extract style and scripts

來源

2016-02-09 P.Brian.Mackey