17

同じページに複数のバージョンの JavaScript ライブラリが必要です。名前の競合を避けるために 1 つのバージョンを手動でリファクタリングする以外に、どうすればこれを達成できますか?

Jquery でこれを行う方法の例はたくさんあります ( example )。ただし、これは jQuery の良さに依存しているようです。任意のスクリプトに対してこれを行うにはどうすればよいですか?

詳細: 私はd3.jsを使用しており、他の人が d3 を使用して作成したビジュアライゼーションをプラグインしています。問題は、Viz の 1 つは d3 の 1 つのバージョンを必要とし、もう 1 つは新しいバージョンを必要とすることです。これらの Viz はどちらも同じページで利用できるようになっています。ユーザーはサムネイルをクリックして表示される Viz を切り替え、js を使用して一方の Viz を非表示にし、もう一方の Viz を作成します。したがって、競合しないスタイルで両方をロードするのではなく、スクリプトを交換することもオプションのようです。

4

4 に答える 4

26

メインの d3 ソース ファイル: https://github.com/mbostock/d3/blob/master/d3.jsを見ると、

あなたはそれが始まるのを見ます：

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

したがって、d3 は単なるオブジェクトです。これが最善の方法かどうかはわかりませんが、次の方法でうまくいくと思います。

  1. d3 の 1 つのバージョンを含める
  2. 次の行を入力します。d3versionX = d3;
  3. 次のバージョンを含める
  4. バージョン番号が異なる 2 と同じです。
  5. d3 = d3versionXX は、ページが読み込まれたときのビジュアライゼーションのデフォルト バージョンです。
  6. バージョンの切り替えをトリガーするサムネイルにイベント ハンドラーを配置し、d3 変数を適切なバージョン番号に最初に設定します。

サンプルコードで更新

実際の例については、この 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>
于 2013-04-22T20:57:00.320 に答える
0

この一般原則を使用する必要があります

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 つの異なるバージョンを注入し、上記の原則を使用してそれらを異なる変数に割り当てる方法を次に示します。

<div id="version1"></div>
<div id="version2"></div>

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で

于 2013-04-22T20:57:20.870 に答える