动态加载HTML，JS等文件

Question

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

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

• 选项1 ：使用“脚本”或“链接”标签等下载它们，然后再参考下载的资源。
• 选项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之类的库，这些库已经可以处理此类内容。