是否可以动态重新加载JS脚本文件？

Question

我们正在考虑使用Blockly来让高级用户以非编码的沙盒方式设计业务规则。

当他们编辑图表以重新生成新的JS代码时，我想将其重新加载到浏览器中。其中一个方面是，如果代码保存为外部JS脚本，如何在不刷新整个页面的情况下在浏览器中重新加载它？

Answer 1

即使您的解释非常混乱，我也会尝试坚持标题，并提供一个示例，说明如何动态重新加载特定的JS文件（如果它不是您想要的，那就道歉，但那时你会更好地重写你的问题）。

我猜你没有经常搜索Google，因为在这个SO answer中你会发现如何重新加载一个JS文件：

function reloadJs(src) {
    src = $('script[src$="' + src + '"]').attr("src");
    $('script[src$="' + src + '"]').remove();
    $('<script/>').attr('src', src).appendTo('body');
}

正如用户指出的那样，您可以删除旧标记，但为此应该已经完成​​代码运行时。您只需要调用指定源地址的函数。

这将重新加载文件，但您想要通过一些修改，因此您需要在服务器端运行一个脚本，根据您的需要提供文件。您可以在JS重新加载中将信息指定为GET参数，例如‘?parameter1=data1&parameter2=data2’。

但是，我不建议这样做，形成我的JS代码应该改为AJAX调用来修改它的行为，而不是重新加载整个文件。但这取决于你。

编辑

如果我理解正确，你想要做的实际上是给客户端实际的JS代码，而不是在服务器中运行该文件，根据他们设计的一些图表，最终将构建成JS代码。然后你可以得到一个带有<div>标签的<pre><code>标签，其内容通过AJAX调用用jQuery改变。

那么你不应该将JS文件实际加载为脚本，因为这将使浏览器执行它。你要做的是这样的事情：

index.html

<div>
    <pre>
        <code id=“myCode”>
            Your JS file will show soon.
        </code>
    </pre>
</div>

从jQuery文档：

script.js

var jqxhr = $.get( "myFile.js", function(data) {
  $(“#myCode”).html(data)
})
  .done(function() {
    alert( "second success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "finished" );
  });

您显然必须在HTML文件中引用JS文件，否则将无法加载。您可以将其封装在一个函数中，并根据您的方便调用它。