javascript - 如何在同一页面中使用同一个 javascript 库的两个版本而不泄漏函数？

Question

我有一个用例，我需要为 Angular 应用程序中同一页面上的不同图表使用多个版本的 Nvd3 库(每个图表都通过单独的模板加载)。如何避免此类碰撞？

因此，假设 partial_1.html 上的图表需要 v1.8，partial_2.html 上的图表需要 v1.1，依此类推。任何帮助将不胜感激。

jQuery 尝试使用 noConflict 方法解决此问题，但我似乎找不到适用于任意 js 库(不仅仅是 jQuery)的解决方案。

Answer 1

如果您无法更新旧图表以使用最新版本，那么您只有一个选择，即为您正在使用的每个版本重命名全局变量“d3”。然后，您应该在每个模板上进行查找和替换以更改引用的变量。这样每个都指向一个特定的版本。您可以使用如下所示的代码来完成此操作:

(function (w, d) {
    "use strict";
    var h = d.getElementsByTagName("head")[0],
        s = d.createElement("script");
    w.d3 = null;
    s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js";
    s.onload = function () {
        w.d3_3_5_3 = w.d3;
        w.d3 = undefined;
        s = d.createElement("script");
        s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.4/d3.min.js";
        s.onload = function () {
            w.d3_3_5_4 = w.d3;
            w.d3 = undefined;
            s = d.createElement("script");
            s.src = "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js";
            s.onload = function () {
                w.d3_3_5_5 = w.d3;
                w.d3 = undefined;
            };
            h.appendChild(s);
        };
        h.appendChild(s);
    };
    h.appendChild(s);
}(window, document));

上面的示例加载了三个版本，并通过使用 onload 事件捕获了 d3 的每个新实例并将其放入自己的变量中。在这种情况下，d3_3_5_3、d3_3_5_4 和 d3_3_5_5