Heim > Web-Frontend > js-Tutorial > Hauptteil

Was sind JavaScript-Namespaces? Was ist der Nutzen?

不言
Freigeben: 2019-01-14 16:08:22
Original
4563 Leute haben es durchsucht

Namespace wird auf Englisch als Namespace bezeichnet. Das Konzept des „Namespace“ kann Namenskonflikte vermeiden. In diesem Artikel werfen wir einen Blick auf den Inhalt und die Verwendung von Namespaces in JavaScript.

Was sind JavaScript-Namespaces? Was ist der Nutzen?

Was ist der Namespace?

Namespace bezieht sich auf einen Sortiermechanismus, sodass es im „Leerzeichen“ nur einen identischen Namen gibt.

Der Weltraum ist wie ein Container.

Zum Beispiel kann sich der Name „Tom“ auf mehrere Personen beziehen, aber indem wir für jeden Nachnamen einen Namensraum erstellen, können wir unterscheiden, welcher „Tom“ welcher ist.

Tatsächlich können Sie wissen, dass „Tom“ im Namensraum „Shangguan“ und „Tom“ in „Ouyang“ unterschiedliche Personen sind.

Vorteile der Verwendung von Namespaces

Der Hauptzweck von Namespaces besteht darin, Namenskonflikte zu vermeiden.

Für kleine Programme sind die Vorteile der Verwendung von Namespaces möglicherweise nicht allzu groß.

Jedoch kann eine Art Großprogramm mit anderen Programmen, Servern usw. in Zusammenhang stehen.

In diesem Fall kann die Verwendung von Namespaces die Belastung für den Programmierer verringern.

Da Probleme durch Namenskonflikte verhindert werden können, können wir unnötige Verarbeitung vermeiden.

Wie verwende ich Namespaces?

Lassen Sie uns das Konzept von Namespaces tatsächlich in JavaScript-Programmen einführen.

Schauen wir uns zunächst ein einfaches Programm an, das keine Namespaces verwendet.

<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>
Nach dem Login kopieren

Ausführungsergebnis: 15

Im obigen Code definieren wir zunächst eine Additionsfunktion Addition und eine Multiplikationsfunktion Multiplikation.

Das Ergebnis der Addition wird dann in einer globalen Variablen gespeichert und in der JavaScript-Konsole angezeigt.

Die an die Funktion übergebenen hinzugefügten Parameter sind 5 und 10, sodass 15 auf der Konsole angezeigt wird.

Im obigen Code existiert alles als globale Variablen.

Wenn daher Funktionen und Variablen mit demselben Namen im globalen Bereich vorhanden sind, führt dies zu einem Konflikt.

Als nächstes habe ich versucht, den obigen Code mithilfe von Namespaces zu verbessern.

<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>
Nach dem Login kopieren

Ausführungsergebnis: 15

Im obigen Code ist die einzige definierte globale Variable eine MYFUNCTION-Variable in Großbuchstaben.

Darin definieren wir Additions- und Multiplikationsfunktionen.

Auf diese Weise erstellen wir einen Raum namens MYFUNCTION und enthalten darin beliebige Funktionen.

Um eine Funktion in MYFUNCTION aufzurufen, verwenden Sie die Syntax: MYFUNCTION.Funktionsname.

Rufen Sie die Additionsfunktion auf, indem Sie MYFUNCTION.addition(5,10) schreiben.

Das Ergebnis ist das gleiche wie beim vorherigen Code.

Wie überlagert man Namespaces?

Abschließend stellen wir vor, wie man Namespaces „hierarchisiert“.

Das ist praktisch, da über Ebenen mehr Funktionen und Variablen verwaltet werden können.

Das Codebeispiel lautet wie folgt

<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>
Nach dem Login kopieren

Ausführungsergebnis: Ihre Zahlen sind 5 und 10

Im obigen Code legen wir die einzige globale fest Variable MYAPPLICATION in mehrere Leerzeichen unterteilt.

Additionsfunktion und Multiplikationsfunktion im OPERATION-Bereich hinzugefügt und neue Funktionsanzeige im OTHER-Bereich hinzugefügt.

Das Erstellen von Leerzeichen innerhalb von Leerzeichen erleichtert das Überlagern und Erstellen von sauberem Code.

Um beispielsweise die Show-Funktion im ANDEREN Raum aufzurufen, können Sie Syntax wie Außenraum, Innenraum und Funktionsname verwenden.

Wenn Sie MYAPPLICATION.OTHER.show(5,10) schreiben, wird tatsächlich die in den Parametern 5 und 10 angegebene Show-Funktion aufgerufen.

Die Show-Funktion gibt Phrasen wie „Ihre Zahlen sind Parameter 1 und Parameter 2“ an die JavaScript-Konsole aus.

Daher lautet das Ergebnis: Ihre Zahlen sind 5 und 10.

Dieser Artikel endet hier. Weitere spannende Inhalte finden Sie in anderen Kolumnen-Tutorials auf der chinesischen PHP-Website! ! !

Das obige ist der detaillierte Inhalt vonWas sind JavaScript-Namespaces? Was ist der Nutzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!