动态加载/卸载外部JS

Loading/unloading external JS dynamically

本文关键字：外部 JS 卸载加载动态更新时间：2023-09-26

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

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

我的一个想法是只是有所有的变量，元素id等在我的代码(当涉及到HTML和JS)是唯一的，并有一个数组，保持检查哪些JS文件已加载-这样就不会有超过一个每个JS文件在内存中。但我想这不是一个安全的解决方案，因为GC可以从内存中删除一个JS文件，如果"页面"没有使用很长时间?

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

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

如果你已经开发了一些东西，requierejs是一个动态加载依赖的库，它的实现非常直接和容易。

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