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

Da Sie möglicherweise verschiedene JavaScript-Dateien schreiben und diese später in einer Anwendung kombinieren oder nicht kombinieren, muss jede Datei in der Lage sein, das Namespace-Objekt wiederherzustellen oder zu konstruieren, ohne die Arbeit der anderen Dateien zu beeinträchtigen...

Eine Datei könnte beabsichtigen, den Namespace namespace.namespace1 :

namespace = window.namespace || {};
namespace.namespace1 = namespace.namespace1 || {};

namespace.namespace1.doSomeThing = function(){}

Eine andere Datei möchte vielleicht den Namensraum namespace.namespace2 :

namespace = window.namespace || {};
namespace.namespace2 = namespace.namespace2 || {};

namespace.namespace2.doSomeThing = function(){}

Diese beiden Dateien können zusammen oder getrennt leben, ohne miteinander zu kollidieren.

Answer 2

So macht es Stoyan Stefanov in seinem JavaScript-Muster Buch, das ich sehr gut fand (es zeigt auch, wie er Kommentare macht, die eine automatisch generierte API-Dokumentation ermöglichen, und wie man eine Methode zum Prototyp eines benutzerdefinierten Objekts hinzufügt):

/**
* My JavaScript application
*
* @module myapp
*/

/** @namespace Namespace for MYAPP classes and functions. */
var MYAPP = MYAPP || {};

/**
* A maths utility
* @namespace MYAPP
* @class math_stuff
*/
MYAPP.math_stuff = {

    /**
    * Sums two numbers
    *
    * @method sum
    * @param {Number} a First number
    * @param {Number} b Second number
    * @return {Number} Sum of the inputs
    */
    sum: function (a, b) {
        return a + b;
    },

    /**
    * Multiplies two numbers
    *
    * @method multi
    * @param {Number} a First number
    * @param {Number} b Second number
    * @return {Number} The inputs multiplied
    */
    multi: function (a, b) {
        return a * b;
    }
};

/**
* Constructs Person objects
* @class Person
* @constructor
* @namespace MYAPP
* @param {String} First name
* @param {String} Last name
*/
MYAPP.Person = function (first, last) {

    /**
    * First name of the Person
    * @property first_name
    * @type String
    */
    this.first_name = first;

    /**
    * Last name of the Person
    * @property last_name
    * @type String
    */
    this.last_name = last;
};

/**
* Return Person's full name
*
* @method getName
* @return {String} First name + last name
*/
MYAPP.Person.prototype.getName = function () {
    return this.first_name + ' ' + this.last_name;
};

Answer 3

Ich verwende diesen Ansatz:

var myNamespace = {}
myNamespace._construct = function()
{
    var staticVariable = "This is available to all functions created here"

    function MyClass()
    {
       // Depending on the class, we may build all the classes here
       this.publicMethod = function()
       {
          //Do stuff
       }
    }

    // Alternatively, we may use a prototype.
    MyClass.prototype.altPublicMethod = function()
    {
        //Do stuff
    }

    function privateStuff()
    {
    }

    function publicStuff()
    {
       // Code that may call other public and private functions
    }

    // List of things to place publically
    this.publicStuff = publicStuff
    this.MyClass = MyClass
}
myNamespace._construct()

// The following may or may not be in another file
myNamespace.subName = {}
myNamespace.subName._construct = function()
{
   // Build namespace
}
myNamespace.subName._construct()

Externer Code kann dann sein:

var myClass = new myNamespace.MyClass();
var myOtherClass = new myNamepace.subName.SomeOtherClass();
myNamespace.subName.publicOtherStuff(someParameter);

Answer 4

Dies ist ein Follow-up zu user106826's Link zu Namespace.js. Es scheint, dass das Projekt nach GitHub . Es ist jetzt smith/namespacedotjs .

Ich habe mit diesem einfachen JavaScript-Helfer für mein kleines Projekt und so weit scheint es zu sein, Licht noch vielseitig genug, um Namespacing behandeln y Laden von Modulen/Klassen. Es wäre toll, wenn es mir erlauben würde, ein Paket in einen Namespace meiner Wahl zu importieren, nicht nur in den globalen Namespace... seufz, aber das ist nicht der Punkt.

Es erlaubt Ihnen, den Namespace zu deklarieren und dann Objekte/Module in diesem Namespace zu definieren:

Namespace('my.awesome.package');
my.awesome.package.WildClass = {};

Eine andere Möglichkeit besteht darin, den Namensraum und seinen Inhalt auf einmal zu deklarieren:

Namespace('my.awesome.package', {
    SuperDuperClass: {
        saveTheDay: function() {
            alert('You are welcome.');
        }
    }
});

Weitere Anwendungsbeispiele finden Sie in der Datei example.js in die Quelle .

Answer 5

Beispiel:

var namespace = {};
namespace.module1 = (function(){

    var self = {};
    self.initialized = false;

    self.init = function(){
        setTimeout(self.onTimeout, 1000)
    };

    self.onTimeout = function(){
        alert('onTimeout')
        self.initialized = true;
    };

    self.init(); /* If it needs to auto-initialize, */
    /* You can also call 'namespace.module1.init();' from outside the module. */
    return self;
})()

Sie können optional eine local variabel, same , wie self und zuweisen local.onTimeout wenn Sie es privat halten wollen.