让浏览器获取并重新编译脚本以进行实时编辑答案

【问题标题】：Getting browsers to source and recompile script for live editing让浏览器获取并重新编译脚本以进行实时编辑
【发布时间】：2015-04-07 09:23:18
【问题描述】：

如何在不涉及浏览器特定扩展或浏览器特定调试协议的情况下仅从客户端代码触发脚本采购和重新编译？

我说的是实时编辑，其中对对象原型的更改会影响已创建的实例。

【问题讨论】：

你尝试livejs.com了吗？
livejs 只是做了一个location.reload()
对于完全重新编译（全局、DOM、原型、所有内容）我不知道，但将旧代码设置为 null 然后使用 requirejs 之类的东西重新执行可能至少会给您带来一般效果'正在寻找。希望我有更好的东西给你，因为我肯定也会用它。
stackoverflow.com/questions/18077217/… ?
没有很好的方法来做到这一点，因为脚本被加载到内存中，所以删除脚本标签不会撤消脚本所做的事情，这意味着您必须手动清理所有内容并重新运行整个代码以避免错误等。当然，创建手动清理脚本可能完成的所有内容的任务是一项艰巨的任务，您必须检查每个属性，跟踪 DOM 更改，原型等，它就是这么多重新加载页面比这样做更容易，并且重新加载为您提供了一个干净的状态，不需要非常复杂的清理工作。

标签： javascript google-chrome internet-explorer firefox

【解决方案1】：

我发现的唯一一件事就是告诉您的网络服务器发送一个刷新参数，其值例如为 5 秒。
不过我还没来得及测试。

【讨论】：

这里的缓存不是问题，我说的是编辑并继续代码重新编译。
等一下，您要在外部编辑文件并重新获取它们吗？
是的，我已经在使用caspervonb.github.io/bitty 中看到的调试协议进行此操作，但这仅适用于 chrome 和 opera。
我自己也想知道，我会做一些研究并回复你。
通过 chrome 远程调试协议github.com/caspervonb/srcr 编写了一个 CLI 工具来执行此操作，但需要注意的是，您无法打开检查器，它将断开 cli 工具。

【解决方案2】：

为什么不将文本存储在一个变量中，然后eval() 就可以了？

【讨论】：

简而言之，这就像比较苹果和橘子 Eval 可以很好地执行新代码，用于实时编辑，但是它几乎没有用，除非您正在创建一个专用于让用户编辑单个函数的应用程序，这不是这里的目标。

【解决方案3】：

使用 iframe！

在 javascript（主站点 - 不是 iframe）中，您可以重写进入 iframe 的 html，然后附加 iframe 或只调用 iframe 内容窗口的 .open - .write - .close 方法。（我没有这个的精确代码，但你可以在网上找到它......）

我试着做这样的事情，但至少有一个问题需要你处理：

我的代码包含一个不会停止的循环，至少 chrome 浏览器会死机！（也是主站）

【讨论】：

再次声明，这里并没有真正满足要求，虽然会有不重装的样子，但基本上是重装。会执行副作用等。
那我真的不明白你想要什么！你能再解释一下吗？我尝试进行实时编辑，发现唯一的方法是 iframe。但是你不希望这种“假”重载，那你想要什么？
没有重新加载；）基本上在编辑后继续。在大多数情况下，它可以通过客户端的远程调试器来实现，那么问题就在于有很多协议需要支持。在我的初步研究之后，工具开始出现，npmjs.com/package/budo 就是其中之一。还有我的npmjs.com/package/amok。我们在这里讨论的是实时编辑，而不是在文件更改时重新加载页面，这基本上是实时重新加载及其表亲黑客。

【解决方案4】：

如果我正确理解了这个问题，您需要检测何时更改了某些代码并将其呈现在您的页面上。

如果您想检测外部代码文件何时更改并在您的应用程序中使用它，您可以使用 HTML5 轮询甚至 websockets。

主要问题在于 JavaScript，因为它需要由浏览器执行。

对于代码执行，我个人不喜欢 eval() ，你有没有考虑在你的头部或身体上附加一个脚本？代码很容易理解：

var s = document.createElement("script");
s.type = "text/javascript";
s.id = "codetoexecute";
s.innerHTML = thecode;
$("head").remove("#codetoexecute");

http://jsfiddle.net/s6tkyxyh/1/

在以下示例中，我使用一个简单的文本区域来编写一些 JavaScript。我还添加了一些变量来玩。

请记住，这是一个非常糟糕的做法，因为您必须注意内存泄漏以及每个函数或变量的范围。建议使用全局访问的方法和属性，因为调试太难了。

【讨论】：