Question

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

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

但如果我的观点需要额外的脚本怎么办？如何在视图更改的情况下加载和执行脚本（=由于单击按钮而加载了页面片段），当我选择不同的视图时，如何摆脱该脚本？

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

Answer 1

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

Answer 2

您可以使用javascript添加<script>标记，其方式与其他标记相同。

最困难的部分是知道放置它的位置，但如果你能控制你的标记，这不是一个太大的障碍。

这些方面的东西：

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

如果您在加载该脚本时需要自动执行某些操作，则应该可以使用self executing anonymous function来完成此任务。

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

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

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

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

如何在单页面应用程序中加载新脚本？

2 个答案: