有没有办法“热插拔”浏览器中的JavaScript代码? [英] Is there a way to "hot swap" JavaScript code within the browser?

查看:115
本文介绍了有没有办法“热插拔”浏览器中的JavaScript代码?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

Is there any tool that enables you to "hot swap" JavaScript contents while executing a webpage?

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

I am looking for something similar to what HotSpot does for Java, a way to "hot deploy" new JS code without having to reload the whole page.

有没有什么像这样的?

澄清如果人们不明白热插拔如锁定所示:

Clarifying in case people don't understand "hot swap", as indicated by lock:

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

By "hot swap" I mean allowing me to change parts of the code contained on the page itself and its .js files.

然后,这个框架将自动检测或者从我的结尾看一些指示,并动态地重新加载代码,避免了新的服务器端的post(重新加载)。

Then this framework would detect the change - either automagically or by some indication from my end - and reload the code dynamically, avoiding the new server-side post (reload).

这种方法将简化调试和修正错误,因为您不需要重新加载页面,从头开始重新开始交互。

That kind of approach would simplify debugging and error fixing, since you don't need to reload the page and start the interaction all over again, from scratch.

推荐答案

有趣的想法:)

我写了以下书签:

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);}}

将其添加到位置的一个新书签,它将重新加载< head> ;.中引用的所有javascript。不知道这将在实践中有多好,但是值得一试:)我想你必须非常小心地编写你的脚本,以免多次添加到页面的内容,可能支持'reload =true'属性可能是有用的,这样你可以只标记您的库作为可重新加载。

add that to the location of a new bookmark, and it will reload all the javascripts referenced in <head>. Not sure how well this will work in practice, but it was worth a shot :) I guess you'd have to be very careful in the way you write your scripts, so as not to have things added to the page body multiple times, etc. Maybe support for a 'reload="true"' attribute could be useful, that way you could tag only your libraries as reloadable.

完整的来源:

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);
    }
}

这篇关于有没有办法“热插拔”浏览器中的JavaScript代码?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆