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

Nachdem ich mehrere meiner Bibliotheken in verschiedene Projekte portiert habe und ständig den (statisch benannten) Namespace der obersten Ebene ändern musste, bin ich dazu übergegangen, diese kleine (quelloffene) Hilfsfunktion zur Definition von Namespaces zu verwenden.

global_namespace.Define('startpad.base', function(ns) {
    var Other = ns.Import('startpad.other');
    ....
});

Eine Beschreibung der Vorteile finden Sie auf meiner Blog-Beitrag . Sie können sich die Quellcode hier .

Einer der Vorteile, die ich sehr schätze, ist die Isolierung zwischen den Modulen in Bezug auf die Lastreihenfolge. Sie können auf ein externes Modul verweisen, BEVOR es geladen wird. Und der Objektverweis, den Sie erhalten, wird eingefügt, wenn der Code verfügbar ist.

Answer 2

Ich verwende die folgende Syntax für den Namensraum.

var MYNamespace = MYNamespace|| {};

 MYNamespace.MyFirstClass = function (val) {
        this.value = val;
        this.getValue = function(){
                          return this.value;
                       };
    }

var myFirstInstance = new MYNamespace.MyFirstClass(46);
alert(myFirstInstance.getValue());

jsfiddle: http://jsfiddle.net/rpaul/4dngxwb3/1/

Answer 3

Ich denke, Sie verwenden alle zu viel Code für ein so einfaches Problem. Es ist nicht nötig, ein Repo dafür zu erstellen. Hier ist eine einzeilige Funktion.

namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

Probieren Sie es aus:

// --- definition ---
const namespace = name => name.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

// --- Use ----
const c = namespace("a.b.c");
c.MyClass = class MyClass {};

// --- see ----
console.log("a : ", a);

Answer 4

ES6-Module Namespace-Importe

// circle.js
export { name, draw, reportArea, reportPerimeter };

// main.js
import * as Circle from './modules/circle.js';

// draw a circle
let circle1 = Circle.draw(myCanvas.ctx, 75, 200, 100, 'green');
Circle.reportArea(circle1.radius, reportList);
Circle.reportPerimeter(circle1.radius, reportList);

Damit werden alle Exporte, die in circle.js verfügbar sind, als Mitglieder eines Objekts verfügbar gemacht Circle und erhält damit seinen eigenen Namensraum.

Answer 5

Mein Lieblingsmuster ist in letzter Zeit dieses geworden:

var namespace = (function() {

  // expose to public
  return {
    a: internalA,
    c: internalC
  }

  // all private

  /**
   * Full JSDoc
   */
  function internalA() {
    // ...
  }

  /**
   * Full JSDoc
   */
  function internalB() {
    // ...
  }

  /**
   * Full JSDoc
   */
  function internalC() {
    // ...
  }

  /**
   * Full JSDoc
   */
  function internalD() {
    // ...
  }

})();

Natürlich kann return am Ende stehen, aber wenn nur Funktionsdeklarationen folgen, ist es viel einfacher zu sehen, worum es in dem Namespace geht und welche API verfügbar ist.

Die Verwendung von Funktionsausdrücken in solchen Fällen führt dazu, dass man nicht wissen kann, welche Methoden offengelegt werden, ohne den gesamten Code zu überprüfen.