按顺序在 SPA 中加载 JavaScript 文件，这些文件都相互依赖以及它们关联的页面

Question

我正在构建单页应用程序 (SPA)，但在处理 SPA 不同部分的 JavaScript 文件时遇到了困难。

在我的 SPA 中，我使用 jQuery 的 .html() 方法动态加载页面。我遇到的问题是某些页面需要多个相互依赖的 JavaScript 文件和页面，因此一旦页面被提取并插入到 DOM 中，我必须按顺序导入它们。澄清一下，我所说的依赖于页面的 JS 文件是指它们包含的代码，例如通过 Id 选择元素，使它们与页面绑定。

为了按顺序导入这些脚本，我使用了 defer 属性，如下所示：

file.html

<!-- Contents of this file that will be dynamically loaded into the SPA -->

<script defer src="/js/script_1.js"></script>
<script defer src="/js/script_2.js"></script>
<script defer src="/js/script_3.js"></script>
<script defer src="/js/script_4.js"></script>
<script defer src="/js/script_5.js"></script>

index.js（这是我原始脚本的精简版，显然包括缓存、错误处理等）

$.ajax({
    type: 'GET',
    url: '/file.html',
    success: function (data) {
        $('#main-container').html(data);
    }
});

file.html 文件已成功插入 DOM，但似乎没有获取任何 JavaScript 文件。事实上，<script></script> 标签内似乎没有任何内容被执行。

我尝试将每个 JavaScript 文件包装在一个函数中，并在 file.html 中以正确的顺序调用它们，但这也不起作用。

我应该如何解决这个问题？我应该重新评估我的设计吗？

Answer 1

你可以选择所有加载的脚本并通过 eval() 执行它们

$.ajax({
    type: 'GET',
    url: '/file.html',
    success: function (data) {
        $('#main-container').html(data);
        $('#main-container script').each(function (index, element) { 
            if (!element.attr('has-run') || element.attr('has-run') != 'true') {                
                eval(element.innerHTML); 
                element.attr('has-run', 'true')
             }
         }
});