Question

我正在开发一个单页面Web应用程序，它具有许多不同的功能和形式。当开发深度（我的意思是主页上没有的东西）功能时，我会经历这个循环：

开发代码，编辑类和函数
刷新整个页面
一直点击，直到我到达我需要测试的部分（有时加起来大约一分钟）
测试新代码
回到（1）代码编辑器进行更新

进行大约15次小修改，可能会花费30分钟的重复重新加载并点击

是否有任何插件，javascript或方法，允许重新加载更新的javascript而不重新加载所有内容，因此可以跳过上面的循环中的2.和3.并继续进行实时测试？

如果没有这样的东西，我打算开发一个小的javascript插件，它将重新加载脚本，并且可能与socket.io连接到后端node.js服务器，该服务器将监视文件以获取任何更新并将加载事件推送到浏览器。

所以，我对这个问题感兴趣，在编写插件时我应该考虑的任何事情。

谢谢：）

Answer 1

你可以这样做。

function LoadMyJs(scriptName) {
   var docHeadObj = document.getElementsByTagName("head")[0];
   var dynamicScript = document.createElement("script");
   dynamicScript.type = "text/javascript";
   dynamicScript.src = scriptName;
   docHeadObj.appendChild(newScript);
}

在页面加载时调用LoadMyJs函数

<body onLoad="LoadMyJs()">

然后单击按钮（或从控制台）重新加载

<input type="button" name="reloadjs" value="Reload JavaScript" onclick="LoadMyJs('my_live_loading_script.js')">

这可以使用例如jQuery

进行简化

感谢： http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/

Answer 2

这就是我想出的：一个Node.js模块，用于监视.js和amp;中的变化。 .coffee脚本，并在编辑文件时将更改推送到浏览器。

即使您在不使用Web服务器的情况下在文件系统file:///上进行开发，它也可以独立运行。
它适用于任何框架，只需启动独立脚本并将其指向您的js/目录。
它有一个express.js帮助程序，它使它使用相同的服务器实例运行。

就像

一样简单

在现有代码中添加一行<script>代码，
运行live脚本，将其指向html根目录。

代码：/etabits/live.js

Answer 3

这可能不是最佳答案，但对于我使用firefox插件的本地开发：

https://addons.mozilla.org/en-US/firefox/addon/auto-reload/

重新加载css，js或目录中的任何内容

对于真正需要远程的开发，我使用你可以适应重新加载js的小js代码。

function refreshCss(rule){

    if (rule == null)
         rule = /.*/;

    var links = document.getElementsByTagName("link");
    for(var i=0;i<links.length;i++)
    {

        if (!links[i].href.match(rule))
            continue;

        if (! links[i].href.match(/(.*)time=/)){
            if (links[i].href.match(/\?/))
                var glue = '&';
            else
                var glue = '?';
            links[i].href += glue+"time="+new Date().getTime();
        }
        else{
            links[i].href.replace(/time=\d+/, "time"+new Date().getTime());
        }
    }
    if (!no_refresh)
    {
        setTimeout(function(){refreshCss(rule)}, 5000);
    }

};

// and then call it  refreshCss("regex to match your css, or not"); var no_refresh=false;

编辑：这是一个带有“setTimeout”的版本，但您可以轻松制作一个“按键”版本

Answer 4

替换为动态脚本。

{{1}}

重新加载更新的java <script>代码，而无需完全重新加载html页面</script>

4 个答案: