如何在单页应用中加载新脚本

how to load a new script in a single-page app?

本文关键字：新脚本 脚本 加载 单页 应用      更新时间：2023-09-26

我正在尝试构建一个具有多个视图（屏幕，页面内容）的单页应用程序

我的应用程序的 UI 有一个永久菜单栏和一个"视图区域"，它根据菜单选择通过 Ajax 检索视图。这适用于简单的 HTML 内容，并使我的菜单脚本在后台运行，无论显示哪个视图。

但是，如果我的视图需要额外的脚本怎么办？您如何加载和执行由于视图更改而导致的脚本（=由于单击按钮而加载页面片段）此外，当我选择其他视图时，如何摆脱该脚本？

我知道我可以将脚本标签嵌入到页面片段中并在那里编写代码，但我真的在寻找一种更强大的方法来做到这一点，最好是在加载视图时创建对象的实例，然后在视图更改时丢弃。

yepnope.js是一个很好的条件加载器。您可以使用它在加载脚本之前检查某些条件（例如视图、状态）。不过，我认为它无法删除已加载的脚本。

您可以使用 javascript 添加 <script> 标签，就像添加任何其他标签一样。

最困难的部分是知道在哪里放置它，但如果您可以控制标记，这并不是太大的障碍。

大致如下：

function DST(url)
{
    var s = document.createElement(’script’);
    s.type=’text/javascript’;
    s.src= url;
    document.getElementsByTagName(’head’)[0].appendChild(s);
}

如果您需要在加载该脚本时自动发生某些事情，您应该能够使用自执行的匿名函数来完成这项工作。

(function(){alert('this happened automatically');})();

如果您需要将任何内容传递给函数，它将如下所示：

(function($){alert('this happened automatically');})(jQuery);

如果确实需要丢弃脚本，可以删除节点，但最好保留它们，以防用户重新激活视图，这样就不必进行 AJAX 调用和关联的 HTTP 请求，从而加快页面加载速度。

相关文章：