即时替换Javascript

Question

这个问题在互联网上一次又一次地出现（即使是在SO上），但我还没有找到一个令人满意的解决方法：

如何在运行的web应用程序中更改/替换Javascript代码，而不重新加载页面？

很多人对此的回答是“你不能，因为这是不可能的”。IntelliJ IDEAs live edit插件的一些实验证明了这是可能的。但我不想为这个特性绑定到IDE。（加分：与浏览器无关）

下面是我尝试的：

1. 将//#sourceURL=whatery.js添加到动态加载的脚本
2. 将包含Whatever.js的文件夹添加到Chrome中
3. 将本地whatever.js映射到网络whatever.js
4. 在任何一个中更改代码都不会影响网页。事实上，编辑网络端文件会导致开发工具奇怪的“闪烁”。

请理解，我并不期望一旦我更改了它，更改后的JS就会神奇地应用到网页上，而是期望它在执行点再次通过时使用新的代码。

示例：

1. 已给出触发“报警（1）”的按钮
2. 更改为“警报（2）；”
3. 我希望该按钮触发“报警（2）；”

由于有许多依赖项和在工作流中很晚才触发的巨大脚本，刷新页面对我来说真的是一个大问题，所以我需要找到一个即时工作的解决方案。

Answer 1

备选方案1：肝硬变

我会说，只要是出于开发原因，您就可以在服务器上使用livereload。

取决于您的服务器类型。我是apach、glassfish和其他Java世界的大专家，但在js(nodejs)世界中，这是一个更短的方法。

（npm-livereload链接）

Hack：您可以使用内置LivereLoad的简单Node.js服务器处理静态文件，如js、css。

备选方案2:jRebel

我不确定js，但也许JRebel可以处理这个问题。无论如何，这对开发过程是一个很好的补充--至少它会成为Java的“热重装：为你”。

备选方案3：猴子补丁

您可以使用monkey-patching技术：js中的每个函数它只是一个字符串，您可以使用new function()来转换string->function。

就像：

var foo = {
  sum: function (a, b) {return a+b;}
}

//...

obj.sum = new Function(....) //Now you're replaced the original code

查看这篇关于做猴子修补的优美方法的文章。

还有我的小广告：monkey-punch

选项4：附加新标签

您可以通过以下方式附加js文件：

var s = document.createElement("script");
s.type = "text/javascript";
s.src = "http://somedomain.com/somescript";
$("head").append(s);

您还可以在任何时候删除dom元素（脚本、样式）并附加新的元素。

Answer 2

首先：您所要求的是非常棘手的，如果您在应用程序中允许这样做，您就会发现安全问题，无论如何，这并不是不可能的。

但如果您想实现您的示例,请执行以下步骤：

制作一个代码段,如下所示：

var message = "1";   // this must be a global variable!!!!

function showMessage() {
    alert(message);
}

给定一个触发“报警（1）”的按钮；

Make按钮调用函数I:onclick='show message()'

更改为“alert（2）；”我希望按钮会触发'alert(2)；‘

现在很简单，当您检测到暗示将警报消息更改为2的事件时，您只需更改message值：

message = "2";

仅此而已。