Question

是否有任何工具可以让您在执行网页时“热插拔”JavaScript内容？

我正在寻找类似于HotSpot为Java所做的事情，这是一种“热部署”新JS代码而无需重新加载整个页面的方法。

那里有类似的东西吗？

澄清以防人们不理解“热插拔”，如 lock 所示：

通过“热插拔”，我的意思是允许我更改页面本身及其.js文件中包含的部分代码。

然后，这个框架会检测到这种变化 - 无论是自动变换还是来自我的结束的一些指示 - 并动态重新加载代码，避免新的服务器端发布（重新加载）。

这种方法可以简化调试和错误修复，因为您无需重新加载页面并从头开始重新开始交互。

Answer 1

有趣的想法:)

我写了以下书签：

function reload(){var scripts=document.getElementsByTagName("script");var head=document.getElementsByTagName("head")[0];var newScripts=[];var removeScripts=[];for(var i=0;i<scripts.length;i++){var parent=scripts[i].parentNode;if(parent==head&&scripts[i].src){var newScript={};newScript.src=scripts[i].src;newScript.innerHTML=scripts[i].innerHTML;newScripts.push(newScript);removeScripts.push(scripts[i]);}}for(var i=0;i<removeScripts.length;i++){head.removeChild(removeScripts[i]);}for(var i=0;i<newScripts.length;i++){var script=document.createElement("script");script.src=newScripts[i].src;script.type="text/javascript";script.innerHTML=newScripts[i].innerHTML;head.appendChild(script);}}

将其添加到新书签的位置，它将重新加载＆lt; head＆gt;中引用的所有javascripts。不确定这在实践中有多好用，但值得一试:)我猜你在编写脚本的方式上必须非常小心，以免多次向页面体添加内容，也许支持'reload =“true”'属性可能很有用，这样你就可以只将你的库标记为可重新加载。

完整来源：

function reload() {
    var scripts = document.getElementsByTagName("script");
    var head = document.getElementsByTagName("head")[0];
    var newScripts = [];
    var removeScripts = [];
    for(var i=0; i < scripts.length; i++) {
        var parent = scripts[i].parentNode;
        if(parent == head && scripts[i].src) {
            var newScript = {};
            newScript.src = scripts[i].src;
            newScript.innerHTML = scripts[i].innerHTML;
            newScripts.push(newScript);
            removeScripts.push(scripts[i]);
        }
    }

    for(var i=0; i < removeScripts.length; i++) {
        head.removeChild(removeScripts[i]);
    }

    for(var i=0; i < newScripts.length; i++) {
        var script = document.createElement("script");
        script.src = newScripts[i].src;
        script.type = "text/javascript";
        script.innerHTML = newScripts[i].innerHTML;
        head.appendChild(script);
    }
}

Answer 2

我不熟悉HotSport，但如果您正在谈论动态加载JavaScript，是的，您可以这样做。 MooTools允许您这样做，jQuery，Prototype，Dojo和YUI也是如此，我相信大多数其他框架都可以这样做好。您也可以使用native JavaScript。

Answer 3

我确定没有太多人知道热插拔的意思但正如virtuosiMedia所说mootools允许的那样，如果你不相信mootools那么多，那么jquery就有一个相同的插件如果你不想要框架，你仍然可以通过dom

添加这些脚本

但我确信你不能改变你已定义的头部级别脚本因为通过DOM动态添加的任何脚本只是正文级别

Answer 4

您可以使用RequireJS前端模块系统轻松热重新加载JavaScript代码，我最近写了一篇关于它的文章（2015年9月）

https://medium.com/@the1mills/hot-reloading-with-react-requirejs-7b2aa6cb06e1

你基本上删除了AMD模块的缓存，而RequireJS将从文件系统中获取新缓存。

诀窍是使用websockets（socket.io正常工作）告诉浏览器文件已更改，并删除缓存并重新要求该文件。

其余信息在文章

中

Answer 5

如果您想使用整个 JavaScript文件执行此操作，请参阅this question了解类似的内容，以便您能够获得该想法的基础知识。

有没有办法在浏览器中“热插拔”JavaScript代码？

6 个答案: