同一页面上的多个版本的脚本（d3.js）
我需要在同一页面上有多个版本的JavaScript库。 我怎样才能实现这一点，除了手动重构一个版本以避免命名冲突？
有很多关于如何使用Jquery（ 示例 ）执行此操作的示例 。 然而，这似乎依赖于jQuery的优点。 我如何为任意脚本执行此操作？
更多细节：我正在使用d3.js ，我正在插入其他人使用d3制作的可视化。 问题是，其中一个vizze需要一个版本的d3，另一个需要更新的版本。 这两个vizze应该在同一页面上可用 – 用户交换哪个viz通过单击缩略图显示，然后js用于隐藏一个viz并构建另一个。 因此，似乎交换脚本而不是以无冲突样式加载它们也可能是一种选择。
如果你看看主d3源文件： https ： //github.com/mbostock/d3/blob/master/d3.js
你看到它开始了：
d3 = function() { var d3 = { version: "3.1.5" }; //..... 所以d3只是一个对象。 我不确定这是否是最好的方法，但我认为以下方法可行：
- 包括一个版本的d3
- 放线：
d3versionX = d3; - 包括下一个版本
- 与具有不同版本号的2相同。
- put
d3 = d3versionX其中X是页面加载时可视化的默认版本 - 在触发切换版本的缩略图上放置一个事件处理程序，并将d3变量设置为适当的版本号作为第一件事。
使用示例代码更新
有关工作示例，请参阅此jsbin 。 相关代码：
我有类似你的问题，一些可视化需要d3 v3而其他人需要v4。 这就是我实现它的方式。
- 在index.html中包含d3 v3（因为我的大多数可视化都在v3上）
- 在index.html上包含require.js脚本//可以使用cdn路径
- 转到需要v4的JavaScript。
-
在顶部写下面的代码。
function graphicviz(id) { require.config({ paths: { d3: "https://d3js.org/d3.v4.min" } }); require(["d3"], function(d3) { //... D3 Code Here... }); } //Call The Function graphicviz(id);
你需要使用这个一般原则
var x = { version: 1, alert1: function() { alert("1hi1"); }, alert2: function() { alert("1hi2"); } }; var y = x; var x = { version: 2, alert1: function() { alert("2hi1"); }, alert2: function() { alert("2hi2"); } }; y.alert1(); x.alert1();
在jsfiddle
jquery提供了noconflict方法，许多库提供相同的（不一定是名称）方法。 但是您可以通过引用我的示例来自行完成，具体取决于您加载的脚本的复杂程度。
以下是如何注入2个不同版本并使用上述原理将它们分配给不同的变量。
var script1 = document.createElement("script"), script2 = document.createElement("script"), oldD3; function noConflict() { oldD3 = d3; console.log("loaded old"); script2.type = 'text/javascript'; script2.src = "http://d3js.org/d3.v3.min.js"; script2.addEventListener("load", ready, false); document.head.appendChild(script2); } function ready() { console.log("loaded new"); console.log(d3, oldD3); document.getElementById("version1").textContent = oldD3.version; document.getElementById("version2").textContent = d3.version; } script1.type = 'text/javascript'; script1.src = "http://d3js.org/d3.v2.min.js"; script1.addEventListener("load", noConflict, false); document.head.appendChild(script1);
在jsfiddle
从d3版本d3.v4开始，脚本的标题看起来有点不同。 您可以将标识符global.d3更改为global.d3v4 ，使其看起来像这样
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) : typeof define === 'function' && define.amd ? define(['exports'], factory) : (factory((global.d3v4 = global.d3v4 || {}))); }(this, (function (exports) { 'use strict'; var version = "4.8.0"; ...
现在你可以通过d3v4调用d3函数了。