Konzepte: Das JavaScript-Modul-Designmuster

Verwendung von JavaScript-Variablen

Vor der Veröffentlichung von ES2015 (ES6) wurden JavaScript-Variablen mit dem var Schlüsselwort deklariert. Aber mit der Einführung von ES6 let Und const wurden als neue Möglichkeit zum Deklarieren von Variablen hinzugefügt. Dies wirft häufig die Frage auf, welches Schlüsselwort wann verwendet werden sollte.

Hier ist eine kurze Erklärung der verschiedenen Möglichkeiten, eine Variable in JavaScript zu deklarieren.

Mit var

Using var ist die älteste Methode der Variablendeklaration in JavaScript. Wenn es innerhalb einer Funktion definiert ist, var ist any auf diese Funktion beschränkt, aber a var ist global, wenn es außerhalb einer Funktion definiert wird.

// Global Declaration
var variable = value;

const varExampleFunction = () => {
    // Local Declaration
    var variable = value;
}

Mit let

Die let Deklaration wurde mit ES6 eingeführt. Diese Art der Deklaration ist blockspezifisch, was bedeutet, dass auf die mit deklarierten Variablen nur in dem Block oder der Funktion zugegriffen werden let kann, in dem sie definiert ist.

const letExampleFunction = () => {
    let variable = value;
}

Verwendung von const

Wie let, const wurde auch mit ES6 eingeführt. Aus diesem Grund sind beide Erklärungen sehr ähnlich. Der Hauptunterschied besteht darin, const dass auf Daten im Speicher verwiesen wird, die konstante Werte enthalten, und const Referenzvariablen können nicht einem anderen Objekt im Speicher zugewiesen werden.

 const constExampleFunction = () => {
    const variable = value;
}

Umfangskonflikte

Wenn Sie in JavaScript eine Variable mit der var , let oder const -Element, ist es innerhalb der Funktion, die es definiert hat, gültig. Globale Variablen sind anfällig für Kollisionen mit anderen Skripten auf Ihrer Seite.

Schauen wir uns ein Codebeispiel an. Im folgenden Code befinden sich die Funktion und die Variablen im Bereich der Seite.

// script 1
const incrementCount = () => {
    count++;
}

const myButton = document.getElementById('buttonId');
let count = 0;

myButton.onclick = incrementCount;

Angenommen, es gibt eine Funktion außerhalb Ihres Skripts, die auch die globale Funktion ändert count Variable. Diese Kollision von Skripten kann zu unerwarteten Ergebnissen führen.

// script 2
const countVideos = videoList => {
    count = videoList.length;
}

Ergebnisse:

1. Benutzer wählt die aus myButton Taste zweimal drücken, um die count Variable in script 1.
   • count = 2
2. Die countvideos Funktion wird aufgerufen, die in Script 2, aber auch auf Ihrer Webseite existiert. Sagen wir, dass die videoList enthält 10 Artikel. Jetzt die count globale Variable hat einen Wert von 10.
   • count = 10
3. Wenn der Benutzer das nächste Mal die auswählt myButton Taste, die count Variable gibt unerwartete Ergebnisse zurück.
   • Erwartet: count = 3
   • Tatsächlich: count = 11

Sie können versuchen, Konflikte in Ihren Skripten zu vermeiden, es gibt jedoch keine Garantie dafür, dass auf Ihrer Seite enthaltene Skripte von Drittanbietern keine ähnlichen Funktions- und Variablennamen verwenden.

Anonyme Funktionen

Eine Lösung besteht darin, Ihren Code in eine anonyme Funktion (auch als Closure bezeichnet) zu verpacken, die sofort ausgeführt wird. Auf Ihren Code innerhalb eines Abschlusses können andere Skripte nicht zugreifen. Auf diese Weise können Sie private Funktionen und Variablen erstellen.

Hier ist die Syntax für eine anonyme Funktion:

• Zeile 3: enthält einen zusätzlichen Satz von Klammern, der JavaScript anweist, die Funktion unmittelbar nach dem Analysieren auszuführen, anstatt auf einen anderen Code zu warten, der die Funktion aufruft.

( () => {
    // your code
}());

Ein weiteres Beispiel für die Syntax:

var res = function( [arguments] ) { ... }

Verschlüsse können leistungsstark sein, da sie während der gesamten Lebensdauer der Anwendung Datenschutz und Status bieten. Für den Code innerhalb des Abschlusses befinden sich alle Variablen und Funktionen nur im Abschlussbereich. Ihr Code innerhalb des Abschlusses kann jedoch weiterhin auf alle globalen Variablen oder Funktionen zugreifen.

Globale

Obwohl JavaScript über eine Funktion verfügt, die als implizite globale Elemente bezeichnet wird, kann die Verwaltung Ihres Codes schwierig sein, da es nicht einfach ist, festzustellen, welche Variablen global sind. Um festzustellen, ob eine Variable global ist, muss der Interpreter rückwärts durch die Bereichskette gehen und nach a suchen var Anweisung, die im Namen übereinstimmt. Wenn keine gefunden wird, wird angenommen, dass die Variable global ist.

Pass in Globals

Mit der anonymen Funktion können Sie globale Parameter explizit übergeben. Dies wird als Importieren von Parametern in Ihren Code bezeichnet.

Hier ist ein Beispiel:

• Zeile 1: Definiert den Namen der Parameter, die an die Funktion übergeben werden. Beachten Sie, dass sie nicht mit den Namen in Zeile 3 übereinstimmen müssen. Hier die window Objekt wird an einen Parameter mit dem Namen übergeben window1.
• Zeile 3: passiert die window Objekt in die Funktion.

( ( window1, undefined ) => {
    ...
})(window);

Da nur 1 Objekt übergeben wird, aber zwei Parameter vorhanden sind, der Wert von undefined wird undefiniert sein.

typeof undefined == "undefined"

Dies kann nützlich sein, wenn Sie auf einfache Weise überprüfen möchten, ob andere Variablen definiert sind.

if(variable1 === undefined)

Globale exportieren

Möglicherweise möchten Sie auch Variablen und Funktionen außerhalb Ihrer anonymen Funktion übergeben. Sie können dies tun, indem Sie die return Wert.

Hier ist ein Beispiel:

• Zeile 1: weist unsere anonyme Funktion zu BCLS. Dieser Wert kann beliebig sein. In diesem Beispiel verwenden wir BCLS (Brightcove Learning Services).

const BCLS = ( ( window1, undefined ) => {
    var object1 = {};
    object1.count = 1;
    object1.method = function () {
        ...
    }
    return object1;
})(window);

Das object1 Das Objekt ist jetzt global mit zwei öffentlichen Eigenschaften verfügbar, einer Variablen mit dem Namen count und eine Funktion namens method. Sie können außerhalb unserer anonymen Funktion wie folgt aufgerufen werden:

• BCLS.object1.count
• BCLS.object1.method

Vollständige Beispiele

Hier finden Sie einige vollständige Beispiele für das Entwurfsmuster des JavaScript-Moduls.

Beispiel 1

Dieses Beispiel zeigt, wie private und öffentliche Variablen und Funktionen mithilfe des Modulmusters erstellt werden.

• Private Variablen: myvar, myvar2
• Private Funktionen: fname, fname2
• Öffentliche Variable: myvar3
• Öffentliche Funktion: fname3

const BCLS = ( () => {
   var myvar = value,
       myvar2 = value;

   fname = () =>  {
        ...
   };
   fname2 = () =>  {
        ...
   };

   return {
        fname3 : () =>  {
             ...
        },
        myvar3 = value;
   };
}());

Beispiel 2

Dieses Beispiel übergibt globale Objekte und macht eine öffentliche Funktion verfügbar.

const BCLS = ( ( window, document, videojs ) => {
  var myvar = value;

  // use a global object passed into the anonymous function
  videojs.registerPlugin('overlay');

  fname = () => {
      ...
  }
  return {
    fname2 : () => {
          ...
      }
  }
})(window, document, videojs);

// call the public function fname2
var newvar = BCLS.fname2();

Codebeispiele

Einige unserer Codebeispiele verwenden das JavaScript-Modul-Entwurfsmuster, und Sie können sie auf Ideen zur Implementierung dieses Musters überprüfen.

• Schwebender Spieler