javascript - 即时替换 Javascript

Question

这个问题在互联网上一次又一次地出现(甚至在 SO 上)，但我还没有找到解决这个问题的令人满意的解决方案:

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

许多人的回答是“你不能，因为这是不可能的”。 IntelliJ IDEAs 实时编辑插件的一些实验证明了这是可能的。但我不想为这个功能绑定(bind)到 IDE。 (奖励:独立于浏览器)

Here is what I tried:

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

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

例子:

1. 给定一个触发“alert(1);”的按钮
2. 更改为“警报(2)；”
3. 我希望按钮触发“alert(2);”

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

Answer 1

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

---

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

编写如下代码片段:

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

function showMessage() {
    alert(message);
}

Given a button that triggers 'alert(1);'

让按钮调用一个函数即:onclick='showMessage()'

Change to 'alert(2);' I expect the button to trigger 'alert(2);'

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

message = "2";

就这些。