通过动态 <script> 标签进行 JavaScript 依赖注入答案

【问题标题】：JavaScript dependency injection via dynamic <script> tag通过动态 <script> 标签进行 JavaScript 依赖注入
【发布时间】：2012-08-11 05:04:17
【问题描述】：

通过创建带有src 的<script> 标记在vanilla JavaScript 中使用JSONP 导致我考虑在JavaScript 插件和其他利用库但希望尽可能独立的JavaScript 组件中使用相同的方法进行依赖注入。

使用 jQuery 作为可能需要注入的流行库的示例...

// make sure we don't load it if already loaded.
if (typeof jQuery === 'undefined') {
    var dependency = document.createElement('script');
    dependency.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";
    document.getElementsByTagName('head')[0].appendChild(dependency);
}

window.onload = function() {
    // jQuery is now available w/o the extra <script> tag added by the end user...
}

在这一点上真的主要是概念性的（但确实有效），但我想知道这是否会被认为是 JavaScript 依赖注入的可接受解决方案？对此有什么想法吗？

【问题讨论】：

标签： javascript jquery dependency-injection script-tag

【解决方案1】：

在实施这个技巧之前，您应该考虑为什么需要它。当您的代码至关重要并且必须在未知环境中使用时，使用该方法是可以接受的。当您为外部网站构建网络插件时，请尝试强制开发人员包含所需的库。它更高效，也更可靠。

关于您的示例：将代码放在（匿名）函数中，不要用不必要的变量填充全局范围。

【讨论】：

【解决方案2】：

是的，我相信这就是 google.load() 背后的概念。

【讨论】：

哈哈，但这本身就是一个非注入依赖项......对吧？
:) 是的。关键在于，它不仅是一种有效的方法，而且还被一家大型的、受人尊敬的软件公司和库开发人员所使用。我并不是说您必须使用 Google 才能使用该技术。