Zaletą stosując metodę w OOP JavaScript

Question

natknąłem pliku JS, który został zbudowany w dziwny sposób:

var modal = (function(){ 
    var method = {}; 

    // Center the modal in the viewport 
    method.center = function() {}; 

    // Open the modal 
    method.open = function (settings) {}; 

    // Close the modal 
    method.close = function() {}; 

    return method; 
}()); 

Rozumiem część zawijania funkcję w „Modal” obiektu, ale dlaczego wiązać wszystko funkcje do method, a następnie zwrócić go na końcu?

Answer 1

To wzór do grupowania funkcjonalności w moduły i pozbywania się zmiennych globalnych. To prowadzi do lepszego kodu.

1. Wywołanie funkcji tworzy „zamknięcie” czyli zakres dla wszystkich zmiennych zadeklarowanych w ramach tej funkcji, pozostają nawet po opuszczeniu funkcji, a oni nie są widoczne na zewnątrz funkcji.

    var modal = (function(){ 
        var method = {}; 
        // Center the modal in the viewport 
        method.center = function() {}; 
   
        // Open the modal 
        method.open = function (settings) {}; 
   
        // Close the modal 
        method.close = function() {}; 
   
        return method; 
       }()); // This function call here creates a "closure" (scope) 
   

2. Teraz, aby niektórzy członkowie moduł dostępny na zewnątrz modułu, muszą być zwracane z funkcji, tutaj return method robi dokładnie to, co method publiczny obiekt modułu, który może być stosowany na zewnątrz .

3. Zamiast tworzyć zmienne rozkodowanego kodu traceability jak open, close etc, związane z nim funkcje są przypisane jako właściwości (elementy obiektu) do głównego method obiektu, tak że zwrócenie pojedynczego obiektu sprawia, że ​​wszystkie związane z nimi funkcje dostępne. Służy to również zmniejszeniu liczby identyfikatorów (nazw) w ramach zakresu zamknięcia.

Przeczytaj ten bardzo dobry artykuł na ten modular wzoru:

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Answer 2

Dla tego konkretnego kodu, nie ma przewagę. To działa tak samo jak:

var modal = { 

    // Center the modal in the viewport 
    center: function() {}, 

    // Open the modal 
    open: function (settings) {}, 

    // Close the modal 
    close: function() {}, 

}; 

Jednakże, jeśli umieścić zmiennej lokalnej w funkcji, to inna sprawa:

var modal = (function(){ 

    // a variable that is private to the object 
    var local = 'hello world'; 

    var method = {}; 

    // Center the modal in the viewport 
    method.center = function() {}; 

    // Open the modal 
    method.open = function (settings) {}; 

    // Close the modal 
    method.close = function() {}; 

    return method; 
}()); 

Teraz wszystkie metody obiektu mają dostęp do prywatnej zmiennej, ale nie jest bezpośrednio osiągalny z zewnątrz obiektu.