双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