使いまわしたいインスタンスはどうやって渡す？

Question

前提

JavaScriptのThree.jsというWebGLライブラリでゲームを作っています。
このライブラリでは、
const scene = new Scene()
でシーンを作成して、何かモデルを追加する場合は このsceneのaddメソッドを使用します。

scene.add(追加したいモデルオブジェクト)

問題

クラスごとにファイルを分けて作っているので、他のファイルでsceneを使うために、どうしてもこのsceneインスタンスをバケツリレーのように渡していかなければならなく、sceneの他にも似たように全体で使いたいインスタンスがいくつか出てきてしまい、他に良い手法が無いかと質問させていただきました。

考えついたこと

単純に、全体で使いまわしたいインスタンスは、以下のように export して、使いたい場所で import する、というのは、なにかアンチパターンに触れてしまうのでしょうか？

const canvas = document.querySelector('canvas.world')
const scene = new THREE.Scene();

export {
canvas,
scene,
...
}

よろしくお願いいたします。

Answer 1

単純に、全体で使いまわしたいインスタンスは、以下のように export して、使いたい場所で import する、というのは、なにかアンチパターンに触れてしまうのでしょうか？

それが、importでモジュールとして使用する想定の使い方です。
なので、むしろ正しい使い方です。
export、import文は、JSでも、他の言語同様の使用感が可能となった仕様です。
（それでも違う部分は多々あるが）

他の方法といえば、ルートオブジェクトに、定数として定義する方法ですが、

// ルートスコープ上

Object.defineProperty(this, 'constValue', {
  value: value
});

こうすることによって、ルートのオブジェクト（ブラウザだと、ルートオブジェクトはwindowを指す）に対して、
定数を定義とできるので、
他の後読み込みのJSファイル上でも定数を取得できます。

ただ、上記は、使う必要がある場面に止め、
export、import文を使用した方が、
モダンで保守性が高いプログラムになると思います。