Wie deklariere ich einen Namespace in JavaScript?

Question

Wie erstelle ich einen Namespace in JavaScript, damit meine Objekte und Funktionen nicht von anderen gleichnamigen Objekten und Funktionen überschrieben werden? Ich habe das Folgende verwendet:

if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}

Gibt es eine elegantere oder prägnantere Methode, dies zu tun?

Answer 1

Eine Fortsetzung der Antwort von Ionut G. Stan, die jedoch die Vorteile eines übersichtlichen Codes durch die Verwendung von var ClassFirst = this.ClassFirst = function() {...} die die Vorteile von JavaScript's Closure Scoping für weniger Namespace Cluttering für Klassen im gleichen Namespace nutzt.

var Namespace = new function() {
    var ClassFirst = this.ClassFirst = function() {
        this.abc = 123;
    }

    var ClassSecond = this.ClassSecond = function() {
        console.log("Cluttered way to access another class in namespace: ", new Namespace.ClassFirst().abc);
        console.log("Nicer way to access a class in same namespace: ", new ClassFirst().abc);
    }
}

var Namespace2 = new function() {
    var ClassFirst = this.ClassFirst = function() {
        this.abc = 666;
    }

    var ClassSecond = this.ClassSecond = function() {
        console.log("Cluttered way to access another class in namespace: ", new Namespace2.ClassFirst().abc);
        console.log("Nicer way to access a class in same namespace: ", new ClassFirst().abc);
    }
}

new Namespace.ClassSecond()
new Namespace2.ClassSecond()

Sortie :

Cluttered way to access another class in namespace: 123
Nicer way to access a class in same namespace: 123
Cluttered way to access another class in namespace: 666
Nicer way to access a class in same namespace: 666

Answer 2

Ich habe eine weitere Namespacing-Bibliothek geschrieben, die ein bisschen mehr wie Pakete / Einheiten in anderen Sprachen arbeiten. Es ermöglicht Ihnen, ein Paket von JavaScript-Code zu erstellen und die Referenz, die Paket von anderen Code:

Datei hello.js

Package("hello", [], function() {
  function greeting() {
    alert("Hello World!");
  }
  // Expose function greeting to other packages
  Export("greeting", greeting);
});

Datei Example.js

Package("example", ["hello"], function(greeting) {
  // Greeting is available here
  greeting();  // Alerts: "Hello World!"
});

Nur die zweite Datei muss in die Seite aufgenommen werden. Ihre Abhängigkeiten (Datei hallo.js in diesem Beispiel) werden automatisch geladen und die aus diesen Abhängigkeiten exportierten Objekte werden verwendet, um die Argumente der Callback-Funktion zu füllen.

Sie finden das entsprechende Projekt unter Pakete JS .

Answer 3

JavaScript unterstützt standardmäßig keine Namespaces. Wenn Sie also ein beliebiges Element (Funktion, Methode, Objekt, Variable) erstellen, wird es global und verschmutzt den globalen Namespace. Nehmen wir ein Beispiel für die Definition von zwei Funktionen ohne Namensraum,

function func1() {
    console.log("This is a first definition");

}
function func1() {
    console.log("This is a second definition");
}
func1(); // This is a second definition

Sie ruft immer die zweite Funktionsdefinition auf. In diesem Fall löst der Namespace das Problem der Namenskollision.

Answer 4

Meine Gewohnheit ist es, die Funktion meinName() als Eigentumsspeicher, und dann var meinName als Inhaber der "Methode"...

Ob das legitim genug ist oder nicht, sei dahingestellt! Ich verlasse mich die ganze Zeit auf meine PHP-Logik, und die Dinge funktionieren einfach :D

function myObj() {
    this.prop1 = 1;
    this.prop2 = 2;
    this.prop3 = 'string';
}

var myObj = (
 (myObj instanceof Function !== false)
 ? Object.create({

     $props: new myObj(),
     fName1: function() { /* code..  */ },
     fName2: function() { /* code ...*/ }
 })
 : console.log('Object creation failed!')
);

if (this !== that) myObj.fName1(); else myObj.fName2();

Sie können es auch umgekehrt machen, um vor der Objekterzeugung zu prüfen, d.h. viel besser :

function myObj() {
    this.prop1 = 1;
    this.prop2 = 2;
    this.prop3 = 'string';
}

var myObj = (
    (typeof(myObj) !== "function" || myObj instanceof Function === false)
    ? new Boolean()
    : Object.create({
        $props: new myObj(),
        init: function () { return; },
        fName1: function() { /* code..  */ },
        fName2: function() { /* code ...*/ }
    })
);

if (myObj instanceof Boolean) {
    Object.freeze(myObj);
    console.log('myObj failed!');
    debugger;
}
else
    myObj.init();

Bezugnahme auf dies: _JavaScript: Objekt erstellen mit Object.create()_