无需完全重新加载HTML页面即可重新加载更新的Java <script>代码

Question

无需完全重新加载HTML页面即可重新加载更新的Java <script>代码

javascripthtmlweb

6

我正在开发一个单页Web应用程序，其中包含许多不同的功能和表单。在开发深度功能（我的意思是不在主页上的功能）时，我会经历以下循环：

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

进行约15次小修改就可能需要重复刷新和点击，这可能需要耗费30分钟，非常令人沮丧。

是否有任何插件、JavaScript片段或方法可以重新加载更新后的JavaScript而无需重新加载所有内容，以便可以跳过上述循环中的步骤2和3并继续进行实时测试？

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

因此，我对此感兴趣，希望您能提供任何关于此事的想法，以及在编写插件时应考虑的任何内容。

谢谢 : )

- aularon

1

为什么不直接自动化到你想要测试的部分呢？ - Sacho

使用Chrome控制台实时编辑JavaScript代码，可以帮助您更快地进行测试。 - mguimard

@Sacho，这里有很多部分，编写代码以单独自动化到达每个部分似乎对我来说是一种负担，我相信通过脚本加载来完成会更简单。 - aularon

@mguimard 我用 Firebug 进行一些小的更改，只涉及一个调用时可以这样做，但有时您需要编辑一个或多个相互调用的函数，然后在 Firebug 中更新调用、测试并将新的调用放回文件中是很繁琐的，特别是如果使用 coffeescript 开发代码。 - aularon

1

“一直点击直到我找到需要测试的部分（有时需要大约一分钟）” - 这意味着如果普通用户想要进入网站的某个特定“部分”，他们也必须做同样的事情，因为您没有提供使用某种“书签”或外部链接到特定部分的可能性？那么这就是一个错误的概念。 - CBroe

@CBroe，你说得很有道理，实际上最终产品会考虑到所有这些因素，但首先我正在为应用程序制作一个功能原型，需要在制作完全成熟的应用程序之前进行审查和协商。 - aularon

4个回答

1

这是我的方案：一个Node.js模块，它监视.js和.coffee脚本的更改，并在编辑文件时将更改推送到浏览器中。

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

它就像这样简单：

添加单个<script>标签行到您现有的代码中，然后
运行live脚本，将其指向html根目录。

代码：/etabits/live.js

- aularon

0

这可能不是最好的答案，但对于本地开发，我使用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”的版本，但您可以轻松制作一个“keypress”版本

- Asenar

0

使用动态脚本进行替换。

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

- Arnab Nath

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- subZero · Accepted Answer

你可以像这样做。

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/