Funktionsausdruck in JavaScript Verwirrung

Question

Ich versuche, diesen Code von einem anderen Entwickler zu verstehen, und meine JavaScript-Kenntnisse fehlen. Diese Funktion soll das Header-Menü einer Site übernehmen und in ein mobiles Style-Menü umwandeln.

Ich verstehe, warum jQuery als $ übergeben wird. Ich verstehe nicht, wie die Variable CPCU in sich zurückgereicht wird oder warum sie als CPCU || {} zurückgegeben wird. Kann mir jemand helfen zu verstehen, wie die Variable CPCU in dieser Situation funktioniert?

var CPCU = (function (_cpcu, $) { 
    'use strict'; 

    /** 
    * Mobile Menu 
    */ 

    var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {}; 
    // Properties. 
    mmenu.id = '#mobile-menu'; 
    mmenu.el = $(''); 
    mmenu.api = {}; 
    mmenu.button = '#header-content .menu.button'; 
    mmenu.aniClass = 'animate'; 
    mmenu.opts = { 
    slidingSubmenus: false 
    }; 
    mmenu.config = { 
    classNames: { 
     selected: 'active' 
    } 
    }; 
    // Methods. 
    mmenu.init = function() { 
    mmenu.el = $(mmenu.id); 
    // Move the active class to from the A to the LI, must happen before mmenu init. 
    $('#mobile-menu').find('a.active').parent('li').addClass('active'); 
    // Now we can init the menu. otherwise it doesn't pick up the active LI. 
    mmenu.api = mmenu.el.mmenu(mmenu.opts, mmenu.config).data('mmenu'); 
    mmenu.button = $(mmenu.button); 
    mmenu.button.data('lines', $('.line1,.line2,.line3')); 
    mmenu.button.click(function() { 
     mmenu.api.open(); 
    }); 
    mmenu.api.bind('open', function() { 
     mmenu.button.data('lines').addClass(mmenu.aniClass); 
    }); 
    mmenu.api.bind('close', function() { 
     mmenu.button.data('lines').removeClass(mmenu.aniClass); 
    }); 
    }; 
    // Set up doc ready. 
    $(document).ready(function() { 
    mmenu.init(); 
    }); 
    return _cpcu; 
})(CPCU || {}, jQuery); 

Answer 1

Es wird versucht, ein Objekt mit mehr Eigenschaften/Funktionalität zu erweitern, indem sofort eine Funktion aufgerufen wird, ein Objekt übergeben wird, um dieses Objekt nach der Erweiterung wieder zu erweitern und zurückzugeben.

Zuerst, unter CPCU || {}, wenn CPCU bereits definiert ist, wird es das in die Funktion übergeben. Wenn nicht, CPCU wird falsy sein, so wird die rechte Seite von || übergeben, die ein neues leeres Objekt ist. Dies wird dann als _cpcu Parameter innerhalb verwendet und hat zusätzliche Eigenschaften usw. zugewiesen.

Mit diesem Ansatz können Sie verschiedene Teile der Funktionalität in verschiedene Bereiche brechen, vielleicht bestimmte Variablen privat zu jenen Bereichen, oder in verschiedenen Dateien für eine einfachere Wartbarkeit usw.

ich sagen „Versuch“ weiter halten up, weil dieser Code eigentlich fehlerhaft ist. Wenn CPCU ist in der Tat durch die Zeit nicht definiert diese läuft, und es geht in {}, dann ist diese Zeile:

var mmenu = _cpcu.Menu.mobile = _cpcu.Menu.mobile || {}; 

werden Fehler, weil es nicht die mobile Eigenschaft der undefined Menu Eigenschaft zugreifen kann. Während also der Entwickler ein Muster benutzt hat, um verschiedene Bereiche des Codes zu zerlegen, stützt sich dieser Abschnitt tatsächlich darauf, dass ein anderer Abschnitt (der die Menu-Eigenschaft definiert) zuvor ausgeführt wurde, was das ganze CPCU || {} erzwingt.

Answer 2

Der Parameter CPCU || {} gibt es die Möglichkeit zu berücksichtigen, dass vor der var CPCU Erklärung am Anfang des Codes Sie auf dem Laufenden, einige andere Code CPCU bereits initialisiert haben. Das Muster ist üblich.

Wenn also CPCU ist nicht definiert (wahrscheinlich den gemeinsamen Fall, obwohl ich über Ihre Software natürlich nicht viel wissen), dann wird der Wert auf die anonyme Funktion übergeben wird das neue leere Objekt ({}) sein . Wenn jedoch CPCU bereits definiert und initialisiert ist, wird stattdessen der aktuelle Wert übergeben.

So hypothetisch, wenn auf irgendeiner Seite ein anderes Skript gibt es, dass Sie über einen <script> Tag vor dem Code geschrieben importiert wird, und es tut so etwas wie:

var CPCU = { debug: true }; 

dann, wenn der Code, den Sie laufen gebucht wird, es wird sehen, dass CPCU bereits einen Wert hat. Dies geschieht in der Regel, um Flexibilität zu schaffen und unvorhergesehene Möglichkeiten zu berücksichtigen.