Variable im Modulmuster nicht zugewiesen Ausgabe

Question

Ich bin neu in Javascript und Modulmuster. Also versuche ich, die folgende kleine Bibliothek

(function(window, $){ 
    'use strict'; 


    function myLibrary(){ 
     var myLib = {}; 
     var options= {}; 
     var map; 

     //_options = {'map':ol.map, 'geojson': testdata} 
     myLib.init = function init(_options){ 
      options = _options; 

      map = _options.map; 
      console.log("Initializing ..."); 
      console.log("map : "+ map); 
      console.log("options : "+ options); 
     } 

     myLib.map = map; 
     myLib.options = options; 

     return myLib; 
    } 

    if(typeof (window.testLib) === 'undefined'){ 
     window.testLib = myLibrary(); 
    } 

})(window, $); 

ich erste Aufruf init-Funktion mit den folgenden Parametern zu schreiben:

testLib.init({'map':ol.map, 'geojson': testdata}) 

Das Problem kommen, wenn ich die Karte und die Möglichkeit, den Zugriff versuchen

testLib.map // return undefined instead of the map object 
testLib.options // reutrn {} instead of {'map':ol.map, 'geojson': testdata} 

Ich habe die Zuordnung in init, aber es scheint nicht zu funktionieren. die in init() für map und options vorgenommene Zuordnung scheint lokal zu sein für die init()

Wie kann ich die Zuordnung die Karte und Optionen, die ich deklariere mit Var ??

Vielen Dank für Hilfe

EDIT: korrekte Satz sollte lauten: „Ich init-Funktion mit den folgenden Parametern aufrufen zuerst:“

Answer 1

Diese Zuordnung hier nicht tun, was Sie denken.

myLib.map = map; 
myLib.options = options; 

Zu der Zeit, die noch nicht passiert zuerst init() läuft hat, so map ist undefined und options{} ist. Dann später init() läuft und ändert Ihre internen Variablen, aber das aktualisiert den Wert von überhaupt nicht, weil es Variable zu trennen.

Dieses Muster funktioniert nicht gut mit Eigenschaften, stattdessen möchten Sie Funktionen, die auf diesen Bereich zugreifen können. Zum Beispiel:

myLib.getMap = function() { return map; }; 

Mit diesen testLib.getMap() sollen, dass internen Variable holen und zurück. In diesem Muster fungieren die Funktionen als Gatekeeper für Ihre Daten.

---

Wenn Ihre Zielumgebung dies unterstützt, können Sie auch Eigenschaften-Getter verwenden.

var myLib = { 
    get map() { return map }; 
} 

Und dann wird dies wie erwartet funktionieren, weil es eine Funktion unter der Haube ausführt.

testLib.map; // trigger property getter function. 

Aber das ist nicht allgemein unterstützt, und Legacy-JavaScript-Engines haben keine Unterstützung.

Answer 2

Die Zeit testLib.map wird map so wird nicht definiert ist, dass zurückgegeben, wenn Sie testLib.map zugreifen, wird der Wert gleich für Optionen bleibt der erste Wert, den Sie zugewiesen, das heißt {}.

Um Ihre Frage auf der init Methode manipuliert direkt das myLib Objekt wie so

(function(window, $){ 
    'use strict'; 

    function myLibrary(){ 
     var myLib = {}; 
     var options= {}; 
     var map; 

     //_options = {'map':ol.map, 'geojson': testdata} 
     myLib.init = function init(_options){ 
      options = _options; 
      map = _options.map; 

      // ADD THESE TWO LINES 
      myLib.map = map; 
      myLib.options = options 
     } 

     return myLib; 
    } 

    if(typeof (window.testLib) === 'undefined'){ 
     window.testLib = myLibrary(); 
    } 

})(window, $); 

HINWEIS

Als Alex Wayne wies darauf hin, zu lösen, wenn es keine andere Verwendung für die lokale Karte und Optionen Variablen können Sie ihre lokalen Referenzen entfernen, um Ihren Code so sauber zu machen

Answer 3

Hier ist ein working solution, Sie sollten die Karte und die Optionen mit this festgelegt haben, damit der Teil des Objekts und nicht nur private members sein wird.

(function(window, $){ 
    'use strict'; 


    function myLibrary(){ 
     var myLib = {}; 
     var options= {}; 
     var map; 

     //_options = {'map':ol.map, 'geojson': testdata} 
     myLib.init = function init(_options){ 
      this.options = _options; 

      this.map = _options.map; 
      console.log("Initializing ..."); 
      console.log("map : "+ map); 
      console.log("options : "+ options); 
     } 

     myLib.map = map; 
     myLib.options = options; 

     return myLib; 
    } 

    if(typeof (window.testLib) === 'undefined'){ 
     window.testLib = myLibrary(); 
    } 


})(window, $);