JavaScript で名前空間を設定する「簡潔な」方法はありますか?

https://stackoverflow.com/questions/13021

08-06-2019
|

質問

すべての JavaScript を namespace 次のような構造になっています。

namespaces = { com : { example: { example.com's data} }

ただし、他の名前空間フレームワークに対してこれを安全に設定するには、比較的大量のコード (2 行以上として定義) が必要なようです。誰かがこれを行うための簡潔な方法を知っているかどうか疑問に思いました?さらに、それを構造化するための比較的標準的/一貫した方法があるかどうか。たとえば、 com 名前空間はグローバルオブジェクトに直接接続されていますか、それとも名前空間オブジェクトを通じて接続されていますか?

[編集：おっと、明らかに {com = { ... } } 私の意図に近いことは何も達成できませんでした。それを指摘してくれた Shog9 に感謝します。]

解決

JavaScript にはスタンドアロンの名前空間がありません。これには、名前を解決するためのスコープを提供できる関数と、指定されたスコープでアクセスできる名前付きデータに貢献できるオブジェクトがあります。

修正された例は次のとおりです。

var namespaces = { com: { example: { /* example.com's data */ } } }

これは変数です namespaces オブジェクトリテラルが割り当てられます。オブジェクトには 1 つのプロパティが含まれています。 com, 、1 つのプロパティを持つオブジェクト: example, 、おそらく何か興味深いものが含まれているであろうオブジェクト。

したがって、次のように入力できます namespaces.com.example。somePropertyOrFunctionOnExample そしてそれはすべてうまくいきます。もちろん、それもおかしいです。階層的な名前空間はありません。実際に必要なものを含むオブジェクトを含むオブジェクトを含むオブジェクトがあります。

var com_example_data = { /* example.com's data */ };

無意味な階層構造を持たずに、これでも同様に機能します。

今, 、実際に 欲しい 階層を構築するには、次のようなことを試すことができます。

com_example = com_example || {};
com_example.flags = com_example.flags || { active: false, restricted: true};

com_example.ops = com_example.ops || (function()
    {
       var launchCodes = "38925491753824"; // hidden / private
       return {
         activate: function() { /* ... */ },
         destroyTheWorld: function() { /* ... */ }
       };
    })();

...これは、私見ですが、かなり簡潔です。

他のヒント

Peter Michaux による興味深い記事がありました。 JavaScript の名前空間. 。彼は 3 つの異なるタイプの JavaScript 名前空間について説明しています。

プレフィックスの名前空間
単一オブジェクトの名前空間
ネストされたオブジェクトの名前空間

ここで彼の発言を盗用するつもりはありませんが、彼の記事は非常に有益だと思います。

Peter は、それらの一部にはパフォーマンスに関する考慮事項があるとまで指摘しました。新しい ECMAScript Harmony 計画で名前空間とパッケージ化に関する 4.0 計画が廃止されたことを考慮すると、このトピックについて話すのは興味深いことになると思います。

私は、すべてを含めるために単一の親オブジェクトをグローバルスコープ内に作成するという Yahoo の規則に従おうとしています。

var FP = {};
FP.module = {};
FP.module.property = 'foo';

既存のオブジェクトを上書きしないようにするには、次のようにする必要があります。

if(!window.NameSpace) {
    NameSpace = {};
}

または

var NameSpace = window.NameSpace || {};

こうすることで、名前空間オブジェクトの上書きを心配することなく、これをアプリケーション/Web サイト内のすべてのファイルの先頭に置くことができます。また、これにより、各ファイルの単体テストを個別に作成できるようになります。

のゆいライブラリーライブラリには、望ましいと思われる関数を使用して名前空間を処理するコードがあります。他のライブラリでもこれを行う場合があります。

ドットまたはアンダースコアの代わりに、ドル記号文字を使用できます。

var namespaces$com$example = "data";

これも好きです(ソース):

(function() {
    var a = 'Invisible outside of anonymous function';
    function invisibleOutside() {
    }

    function visibleOutside() {
    }
    window.visibleOutside = visibleOutside;

    var html = '--INSIDE Anonymous--';
    html += '<br/> typeof invisibleOutside: ' + typeof invisibleOutside;
    html += '<br/> typeof visibleOutside: ' + typeof visibleOutside;
    contentDiv.innerHTML = html + '<br/><br/>';
})();

var html = '--OUTSIDE Anonymous--';
html += '<br/> typeof invisibleOutside: ' + typeof invisibleOutside;
html += '<br/> typeof visibleOutside: ' + typeof visibleOutside;
contentDiv.innerHTML += html + '<br/>';

オブジェクトリテラルと、 this オブジェクトまたは明示的な名前を使用して、関数を含むローカル変数の兄弟プロパティに基づいて名前空間を設定します。例えば：

var foo = { bar: function(){return this.name; }, name: "rodimus" }
var baz = { bar: function(){return this.name; }, name: "optimus" }

console.log(foo.bar());
console.log(baz.bar());

あるいは明示的なしで name 財産：

var foo = { bar: function rodimus(){return this; } }
var baz = { bar: function optimus(){return this; } }

console.log(foo.bar.name);
console.log(baz.bar.name);

もしくは使わずに this:

var foo = { bar: function rodimus(){return rodimus; } }
var baz = { bar: function optimus(){return optimus; } }

console.log(foo.bar.name);
console.log(baz.bar.name);

使用 RegExp または Object コンストラクター関数を使用して名前プロパティをカウンター変数やその他の一般的な名前に追加し、 hasOwnProperty チェックを行うためのテスト:

 var foo = RegExp(/bar/);
 
/* Add property */
foo.name = "alpha";

document.body.innerHTML = String("<pre>" + ["name", "value", "namespace"] + "</pre>").replace(/,/g, "&#09;");

/* Check type */
if (foo.hasOwnProperty("name")) 
  {
  document.body.innerHTML += String("<pre>" + ["foo", String(foo.exec(foo)), foo.name] + "</pre>").replace(/,/g, "&#09;");
  }

/* Fallback to atomic value */
else 
  {
  foo = "baz";
  }

var counter = Object(1);

/* Add property */
counter.name = "beta";

if (counter.hasOwnProperty("name")) 
  {
  document.body.innerHTML += String("<pre>" + ["counter", Number(counter), counter.name] + "</pre>").replace(/,/g, "&#09;");
  } 
else 
  {
  /* Fallback to atomic value */
  counter = 0;
  }

DOM は、次の規則を使用して HTML および SVG 要素インターフェイス定義に名前空間を付けます。

HTMLタイトル要素
SVGタイトル要素
SVGScript要素
HTMLScript要素

JavaScript コアはプロトタイプを使用して名前空間を設定します。 toString ポリモーフィズムの単純な形式としてのメソッド。

参考文献

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow