动态加载/卸载外部JS

Question

在尝试模仿 Youtube 等网站并在链接点击时仅加载页面的特定片段的过程中，我尝试制作一个加载/卸载当前页面所需的特定 JS 文件和 CSS 文件的函数。

我注意到，当 CSS 文件从 DOM 中删除时，该文件的样式不再有效，并且只有在我再次添加特定的 link 标记时才会再次有效。但是，似乎 JS 文件在加载时会存储在内存中，并且简单地删除 DOM 中的引用并不会阻止与该文件关联的函数仍然有效。 Youtube 是如何解决这个问题的，或者你对我应该走哪条路径来实现“完全”卸载/加载 JS 文件有自己的建议？

我的一个想法是让我的代码（包括 HTML 和 JS）中的所有变量、元素 ID 等都是唯一的，并有一个数组来检查哪些 JS 文件已加载 - 所以内存中的每个 JS 文件不会超过一个。但我想这不是一个安全的解决方案，因为如果那个“页面”长时间没有使用，GC 可以从内存中删除一个 JS 文件？

Answer 1

您可以将一个变量设置为空，然后垃圾收集器会将其从内存中清除，这样，您可以将您的 javascript 动态加载到一个变量中，以便稍后您可以将其设置为空。你的文件可以有一个对象或者是一个构造函数。

这只是一个基本的解释，但是，我的建议是您检查 angularjs、reactjs 和许多其他适合开发单页应用程序的框架。

如果您已经开发了一些东西，requierejs 是一个用于动态加载依赖项的库，并且实现非常简单明了。

缓存是另一回事，您可以通过加载文件的方式来避免/刷新缓存。您可以使用例如时间戳向 url 添加查询参数。这样文件的url每次都会不同，浏览器不会从缓存中加载它。您还可以使用标题来告诉浏览器何时应该从缓存中刷新文件，甚至完全阻止它缓存它。