即时替换Javascript

Question

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

如何在不重新加载页面的情况下更改/替换正在运行的Web应用程序中的Javascript代码？

许多人以“你不能，因为这是不可能的”来回答这个问题。使用IntelliJ IDEAs实时编辑插件的一些实验证明了它是可行的。但我不想被这个功能绑定到IDE。 （奖金：独立于浏览器）

Here is what I tried:

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

请理解，我不希望更改后的JS在更改后会神奇地应用于网页，但我希望在再次执行执行点时使用新代码。

示例：

1. 给出一个触发'alert（1）;'
的按钮
2. 更改为'alert（2）;'
3. 我希望按钮触发'alert（2）;'

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

Answer 1

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

但是如果您想要实现您的示例，请按照以下步骤操作：

制作如下代码段：

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

function showMessage() {
    alert(message);
}

  

给出一个触发'alert（1）;'

的按钮

按钮调用函数即：onclick='showMessage()'

  

更改为'alert（2）;'   我希望按钮能触发'alert（2）;'

现在很容易，当您检测到意味着将警报消息更改为2的事件时，您只需要更改message值：

message = "2";

就是这样。

Answer 2

选项1：Livereload

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

取决于您的服务器类型。我注意到apach，glassfish和其他java世界的大专家，但在JS（nodejs）的世界中，这是一个更短的方式。

（npm-livereload的链接）

Hack：您可以使用带有内置livereload的简单node.js服务器来处理静态文件，例如js，css。

选项2：jRebel

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

选项3：修补猴子

你可以使用monkey-patching技术：js中的每个函数只是一个字符串，你可以转string - ＆gt; function与new Function()。

就像：

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

//...

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

检查this article关于做猴子修补的优美方式。

我的用于猴子修补的lib的小广告：monkey-punch

选项4：附加新标记

您可以使用以下命令附加js文件：

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

您还可以随时删除dom元素（脚本，样式）并附加新元素。