Konzepte: Das Entwurfsmuster des Java

Scope Konflikte

Wenn Sie in JavaScript eine Variable mit dem var Element definieren, ist sie innerhalb der Funktion, die sie definiert hat, festgelegt. Wenn Sie eine Variable ohne Verwendung definieren var, wird ihr der globale Bereich zugewiesen. Dies bedeutet, dass globale Variablen anfällig für Kollisionen mit anderen Skripten auf Ihrer Seite sind.

Sehen wir uns ein Codebeispiel an. Im folgenden Code existieren die Funktion und die Variablen im Rahmen der Seite.

// script 1
var incrementCount = function() {
    count++;
}

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

myButton.onclick = incrementCount;

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

// script 2
var countVideos = function(videoList) {
    count = videoList.length;
}

Ergebnisse:

1. Der Benutzer wählt die myButton Schaltfläche zweimal aus und erhöht die count Variable in script 1.
   • count = 2
2. Die countvideos Funktion heißt die in Script 2 , aber auch auf Ihrer Webseite existiert. Sagen wir, dass das 10 Elemente videoList enthält. Jetzt hat die count globale Variable einen Wert von 10.
   • count = 10
3. Wenn der Benutzer das nächste Mal die myButton Schaltfläche auswählt, gibt die count Variable unerwartete Ergebnisse zurück.
   • Erwartet: count = 3
   • Aktuell: count = 11

Sie können versuchen, Konflikte in Ihren Skripten zu vermeiden, aber es gibt keine Garantie dafür, dass in 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 Schließung genannt) einzubinden, die sofort ausgeführt wird. Ihr Code innerhalb einer Schließung ist für andere Skripte nicht zugänglich. 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 sofort nach dem Analysen auszuführen, anstatt darauf zu warten, dass ein anderer Code die Funktion aufruft.

(function () {
    // your code
}());

Schließungen können leistungsstark sein, da sie während der gesamten Lebensdauer der Anwendung Privatsphäre und Status bieten. Für den Code innerhalb des Closure befinden sich alle Variablen und Funktionen nur im Schließungsbereich. Ihr Code innerhalb der Schließung kann jedoch weiterhin auf globale Variablen oder Funktionen zugreifen.

Globals

Obwohl JavaScript eine Funktion hat, die als implizierte Globals bekannt ist, kann es die Verwaltung Ihres Codes erschwer machen, da es nicht einfach ist zu bestimmen, welche Variablen global sind. Um festzustellen, ob eine Variable global ist, muss der Interpreter rückwärts durch die Bereichskette gehen und nach einer namentlich übereinstimmenden var Aussage suchen. Wenn keine gefunden wird, wird davon ausgegangen, dass die Variable global ist.

Übergeben Sie Globals

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

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 wird das window Objekt an einen Parameter mit dem Namen übergeben window1.
• Zeile 3: übergibt das window Objekt an die Funktion.

(function( window1, undefined ) {
    ...
})(window);

Da nur ein Objekt übergeben wird, aber es gibt zwei Parameter, ist der Wert von undefined undefiniert.

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)

Exportieren von Globals

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

Beispiel:

• Zeile 1: ordnet unsere anonyme Funktion zu BCLS. Dieser Wert kann alles sein, was du wählst. In diesem Beispiel verwenden wir BCLS (Brightcove Learning Services).

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

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

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

Vollständige Beispiele

Hier sind einige vollständige Beispiele für das Design Pattern 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
• Public Funktion: fname3

var BCLS = ( function() {
   var myvar = value,
       myvar2 = value;

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

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

Beispiel 2

In diesem Beispiel wird globale Objekte weitergegeben und eine öffentliche Funktion verfügbar gemacht.

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

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

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

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

Codebeispiele

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

• Schwebender Spieler