Question

我有一个用例，我需要在角度应用程序的同一页面上为不同的图表使用多个版本的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

如何使用同一个javascript库的两个版本而不会在同一页面中出现函数？

1 个答案: