Modul Muster: Funktion nicht definiert

Question

Ich versuche, das Modul Muster hier zu emulieren: https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/

Hier ist mein Code:

var RPSLS_UI = { 
settings: { 
    playerSelections: $(".card") 
}, 

init: function() { 
    this.bindUIActions(); 
}, 

bindUIActions: function() { 
    this.settings.playerSelections.on("click", function() { 
     console.log($(this)); 
    }); 
} 
}; 

ich die Abhängigkeiten in meinem HTML in dieser Reihenfolge enthalten sind:

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script type="text/javascript" src="assets/js/rpsls-ui-1.0.js"></script> <script type="text/javascript" src="assets/js/index.js"></script>

Wenn ich meine HTML laden, gebe ich in der Konsole:

RPSLS_UI.init();

Ergebnisse in:

undefined

Dann tippe ich in:

RPSLS_UI.init;

Ergebnisse in:

function() { this.bindUIActions(); }

Was passiert hier? Warum ist die Funktion init() nicht definiert?

Answer 1

Die Funktion ist nicht undefined. Es gibt undefined zurück, da es keine return Anweisung gibt. Wenn Sie es etwas zurückgeben möchten können Sie eine return-Anweisung, um es hinzuzufügen:

init: function() { 
    this.bindUIActions(); 
    return 'Hi!'; 
} 

Es scheint nicht, wie es notwendig ist, für sie etwas zurück, da sie eine andere Funktion aufruft, die einen Click-Handler bindet an Ihre DOM. Die Funktion hat Nebenwirkungen, gibt aber nichts zurück.