动态加载HTML，JS等文件

Question

我正在尝试在不使用任何框架的情况下实现SPA（单页面应用程序）。我想我需要先在我的第一页加载时下载所有应用程序资源（HTML，JS，CSS等），然后再使用它们。

现在，由于我必须预先加载资源并在以后使用它，所以我认为我有两个选择：

• 选项1 ：使用＆＃34;脚本＆＃34;下载它们或＆＃34;链接＆＃34;标记等，然后再参考下载的资源。
• 选项2 ：然后使用xhr或jquery.get()下载，将它们放入全局变量中，然后再使用这些全局变量。

选项1的问题：

1. 第一个也是最大的挑战是如何在以后引用下载的资源。假设我已经以某种方式下载了我的所有HTML，JS等，但后来动态地，我将如何推荐或阅读或稍后加载？我会从缓存中读取它吗？但是，如果用户禁用了资源缓存呢？
2. 我知道我可以使用<script>标签下载JS文件，但如何动态下载HTML资源？我知道一些模板引擎可以下载但我不想使用任何外部库。

选项2的问题：

除了以下问题，我几乎可以做到这一点：

• 我使用jquery.get下载了资源，但由于我想在DOM渲染之前引用它们，所以我无法使用异步模式。我不得不同步下载它们。但是XHR警告说不推荐同步下载。那么，那么我如何同步下载应用程序资源呢？
• 我必须将下载资源的内容保存在全局变量中。所以，我担心这会是一个坏主意，因为它会消耗我的浏览器内存？ Backbone.js或AngularJS等框架是如何做到的？

Answer 1

选项1的问题：

•   

  第一个也是最大的挑战是如何引用下载的资源   后来。可以说我已经以某种方式下载了我的所有HTML，JS等等   以后，动态地，我将如何引用或读取或加载它们？一世   会从缓存中读取它吗？但是，如果用户禁用了缓存，该怎么办？   资源？

首先，据我所知，您无法使用<script>或<link>代码直接下载HTML。

您可以下载脚本和css，下载后脚本将被编译和执行，CSS将应用于网页。之后无需引用。

•   

  我知道我可以使用<script>标签下载JS文件，但我该怎么做   动态下载HTML资源？我知道一些模板引擎   可以下载，但我不想使用任何外部库。

在上面的项目符号中，您声明可以使用<script>标记下载HTML，现在您说不能在下一个相同选项的子弹中。这已经回答了，你不能。

选项2的问题：

除了以下问题，我几乎可以做到这一点：

•   

  我使用jquery.get下载了我的资源，但是因为我想要   在DOM渲染之前引用它们，所以我不能使用异步模式。   我不得不同步下载它们。但随后有警告   不推荐使用同步下载的XHR。那么，我怎么做   同步下载应用程序资源？

“因为我想    在DOM渲染之前引用它们“ - 考虑DOM渲染是下载和处理强制资源的过程 - 显示初始状态所需的资源，并加载要进行的资源稍后需要。这些将由浏览器下载（考虑index.html及其中的<script>和<link>代码资源）

•   

  我必须将下载资源的内容保存在全局中   变量。所以，我担心这会是一个坏主意，因为它会   消耗我的浏览器内存？像Backbone.js这样的框架如何？   还是AngularJS呢？

有一些技术，如名称间距，IIFE等，用于避免全局变量。关于内存，在文档准备就绪后，在需要时下载额外资源 。在文档准备好之前，您不需要任何额外资源。

Angular有一些可选的缓存，我没有在骨干中遇到过类似的东西。

总而言之，只需使用index.html中的<script>和<link>标记加载必需的JS和CSS资源。并且使用AJAX加载之后所需的任何其他资源，您不需要引用JS或CSS，因为当通过<script>和<link>标记注入时，浏览器会处理这些资源。您可以使用var myHTML= ajaxResponse等变量来保持对HTML字符串的引用。

总而言之，请查看已经处理过这类内容的requireJS，lazyload等库。