javascript - 同一页面上的多个脚本版本 (d3.js)

Question

我需要在同一个页面上有多个版本的 javascript 库。如果不手动重构一个版本以避免命名冲突，我该如何实现这一目标？

关于如何使用 Jquery 执行此操作的示例很多 (example)。然而，这似乎依赖于 jQuery 的优点。我如何为任意脚本执行此操作？

更多细节:我正在使用 d3.js ，我正在插入其他人使用 d3 制作的可视化效果。问题是，其中一个可视化项需要一个版本的 d3，另一个需要更新的版本。这两个可视化应该在同一页面上可用 - 用户通过单击缩略图交换显示哪个可视化，然后使用 js 隐藏一个可视化并构建另一个可视化。因此，似乎交换脚本而不是以无冲突的方式加载两者也是一种选择。

Answer 1

如果您查看主 d3 源文件:https://github.com/mbostock/d3/blob/master/d3.js

你看到它开始了:

d3 = function() {
  var d3 = {
    version: "3.1.5"
  };
  //.....

所以d3只是一个对象。我不确定这是否是最好的方法，但我认为以下方法可行:

1. 包含一个版本的d3
2. 放行:d3versionX = d3;
3. 包含下一个版本
4. 与 2 相同，但版本号不同。
5. 输入 d3 = d3versionX，其中 X 是页面加载时可视化的默认版本
6. 在触发版本切换的缩略图上放置一个事件处理程序，并将 d3 变量设置为适当的版本号作为发生的第一件事。

更新示例代码

参见 this jsbin一个工作的例子。相关代码:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
  <script>
    d3version4 = d3
    window.d3 = null
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script>
    d3version3 = d3
    window.d3 = null
    // test it worked
    console.log('v3', d3version3.version)
    console.log('v4', d3version4.version)
  </script>