ホームページ > 記事 > ウェブフロントエンド > JavaScript 名前空間とは何ですか?用途は何ですか?

JavaScript 名前空間とは何ですか?用途は何ですか?

不言オリジナル: 2019-01-14 16:08:224541ブラウズ

名前空間は英語ではnamespaceといいますが、この記事では名前の衝突を避けるための概念の一つです。

#ネームスペースとは何ですか?

ネームスペースとは、「スペース」内に同一の名前が 1 つだけ存在するようにするための順序付けメカニズムを指します。

宇宙はコンテナのようなものです。

たとえば、「Tom」という名前は複数の人物を指す場合がありますが、姓ごとに名前空間を作成することで、どの「Tom」がどれであるかを区別できます。

実際、名前空間「上関」の「トム」と「欧陽」の「トム」は別人であることが分かります。

ネームスペースを使用する利点

ネームスペースの主な目的は、名前の競合を回避することです。

小規模なプログラムの場合、名前空間を使用する利点はそれほど大きくない可能性があります。

ただし、ある種の大規模なプログラムは、他のプログラムやサーバーなどと関連している場合があります。

この場合、名前空間を使用するとプログラマの負担を軽減できます。

名前の競合による問題を防ぐことができるため、無駄な処理を省くことができます。

ネームスペースを使用するにはどうすればよいですか?

実際に、名前空間の概念を JavaScript プログラムに導入してみましょう。

まず、名前空間を使用しない単純なプログラムを見てみましょう。

<html>
  <body>
    <script>
 
        function addition(num1,num2) {
            return num1+num2;
        }
 
        function multiplication(num1,num2) {
            return num1*num2;
        }
 
        var operation = addition(5,10);
        console.log(operation)
 
    </script>
  </body>
</html>

実行結果: 15

上記のコードでは、まず加算関数addと乗算関数multiplicationを定義します。

加算の結果はグローバル変数に保存され、JavaScript コンソールに表示されます。

関数に追加されたパラメータは 5 と 10 であるため、コンソールには 15 が表示されます。

上記のコードでは、すべてがグローバル変数として存在します。

したがって、グローバルスコープ内に同名の関数や変数が存在すると競合が発生します。

次に、名前空間を使用して上記のコードを改良してみました。

<html>
  <body>
    <script>
 
        var MYFUNCTIONS = {
 
            addition: function(num1,num2){
                return num1+num2;
            },
 
            multiplication: function(num1,num2){
                return num1*num2;
            }
        } 
 
        var operation = MYFUNCTIONS.addition(5,10);
        console.log(operation)
 
    </script>
  </body>
</html>

実行結果: 15

上記のコードでは、定義されている唯一のグローバル変数は大文字の MYFUNCTION 変数です。

その中で加算関数と乗算関数を定義します。

これにより、MYFUNCTION という名前のスペースが作成され、その中に任意の関数が含まれます。

MYFUNCTION で関数を呼び出すには、MYFUNCTION.関数名という構文を使用します。

MYFUNCTION.addition(5,10) と記述して加算関数を呼び出します。

結果は前のコードと同じです。

名前空間を階層化するにはどうすればよいですか?

最後に、名前空間を「階層化」する方法を紹介します。

これにより、より多くの関数や変数をレイヤーを通じて管理できるため、非常に便利になります。

コード例は次のとおりです

<html>
  <body>
    <script>
 
        var MYAPPLICATION = {
 
            OPERATIONS: {
 
                addition: function(num1,num2){
                    return num1+num2;
                },
 
                multiplication: function(num1,num2){
                    return num1*num2;
                }
            },
 
            OTHER: {
 
                show: function(num1,num2){
                    console.log("Your numbers are " + num1 + " and " + num2);
                } 
            }
 
        } 
 
        MYAPPLICATION.OTHER.show(5,10);
 
    </script>
  </body>
</html>

実行結果: 数値は 5 と 10です

上記のコードでは、唯一のグローバルを設定します変数 MYAPPLICATION は複数のスペースに分割されます。

OPERATION 空間には加算関数と乗算関数が追加され、OTHER 空間には新しい関数 show が含まれます。

スペース内にスペースを作成すると、階層化してクリーンなコードを生成することが容易になります。

たとえば、OTHER 空間で show 関数を呼び出すには、外部空間、内部空間、関数名の構文を使用できます。

実際には、MYAPPLICATION.OTHER.show(5,10)と書くと、パラメータ5と10で指定したshow関数が呼び出されます。

show 関数は、「あなたの数値はパラメータ 1 とパラメータ 2 です」などのフレーズを JavaScript コンソールに出力します。

したがって、結果は「あなたの番号は 5 と 10 です」と表示されます。

この記事はここで終わります。さらに興味深い内容については、php 中国語 Web サイトの他のコラムチュートリアルに注目してください。！！

以上がJavaScript 名前空間とは何ですか?用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript でリンクを開くいくつかの方法の紹介次の記事：JavaScript でリンクを開くいくつかの方法の紹介

続きを見る

js 名前空間の記述例コード