Wzorzec modułu JavaScript z przykładem [zamknięty]

Nie mogę znaleźć żadnych dostępnych przykładów pokazujących, jak dwa (lub więcej) różne moduły są połączone, aby ze sobą współpracować.

Chciałbym więc zapytać, czy ktoś ma czas na napisanie przykładu wyjaśniającego, jak moduły współpracują ze sobą.

Aby podejść do wzorca projektowania modułowego, musisz najpierw zrozumieć następujące pojęcia:

Wyrażenie funkcji wywoływane natychmiastowo (IIFE):

(function() {
      // Your code goes here 
}());

Istnieją dwa sposoby korzystania z tych funkcji. 1. Deklaracja funkcji 2. Wyrażenie funkcyjne.

Tutaj używamy wyrażenia funkcyjnego.

Co to jest przestrzeń nazw? Teraz, jeśli dodamy przestrzeń nazw do powyższego fragmentu kodu

var anoyn = (function() {
}());

Co to jest domknięcie w JS?

Oznacza to, że jeśli zadeklarujemy jakąkolwiek funkcję z dowolnym zakresem zmiennej / wewnątrz innej funkcji (w JS możemy zadeklarować funkcję wewnątrz innej funkcji!), To zawsze będzie liczyć ten zakres funkcji. Oznacza to, że każda zmienna w funkcji zewnętrznej będzie zawsze czytana. Nie odczyta zmiennej globalnej (jeśli istnieje) o tej samej nazwie. Jest to również jeden z celów stosowania wzorca projektowania modułowego, unikającego konfliktu nazw.

var scope = "I am global";
function whatismyscope() {
    var scope = "I am just a local";
    function func() {return scope;}
    return func;
}
whatismyscope()()

Teraz zastosujemy te trzy koncepcje, o których wspomniałem powyżej, aby zdefiniować nasz pierwszy wzorzec projektowania modułowego:

var modularpattern = (function() {
    // your module code goes here
    var sum = 0 ;

    return {
        add:function() {
            sum = sum + 1;
            return sum;
        },
        reset:function() {
            return sum = 0;    
        }  
    }   
}());
alert(modularpattern.add());    // alerts: 1
alert(modularpattern.add());    // alerts: 2
alert(modularpattern.reset());  // alerts: 0

jsfiddle dla powyższego kodu.

Celem jest ukrycie zmiennej dostępności przed światem zewnętrznym.

Mam nadzieję że to pomoże. Powodzenia.

Naprawdę poleciłbym każdemu, kto podejmuje ten temat, przeczytanie bezpłatnej książki Addy Osmani:

„Nauka wzorców projektowych JavaScript”.

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Ta książka bardzo mi pomogła, kiedy zaczynałem pisać łatwiejszy w utrzymaniu JavaScript i nadal używam go jako odniesienia. Spójrz na jego różne implementacje wzorców modułów, wyjaśnia je naprawdę dobrze.

Pomyślałem, że rozszerzę powyższą odpowiedź, mówiąc o tym, jak dopasować moduły razem do aplikacji. Czytałem o tym w książce Douga Crockforda, ale javascript był dla mnie nowicjuszem, ale wciąż było trochę tajemnicze.

Pochodzę z ac # background, więc dodałem terminologię, która jest dla mnie przydatna.

HTML

Będziesz miał jakiś plik HTML najwyższego poziomu. Pomyśl o tym jako o pliku projektu. Każdy plik javascript, który dodajesz do projektu, chce się w to znaleźć, niestety nie masz do tego wsparcia narzędziowego (używam IDEA).

Musisz dodać pliki do projektu z tagami skryptów takimi jak:

        <script type="text/javascript" src="app/native/MasterFile.js" /></script>
        <script type="text/javascript" src="app/native/SomeComponent.js" /></script>

Wygląda na to, że zwinięcie tagów powoduje niepowodzenie - chociaż wygląda na XML, to naprawdę coś z bardziej szalonymi zasadami!

Plik przestrzeni nazw

MasterFile.js

myAppNamespace = {};

Otóż ​​to. Służy to tylko do dodania pojedynczej zmiennej globalnej, w której pozostanie reszta naszego kodu. Możesz także zadeklarować zagnieżdżone przestrzenie nazw tutaj (lub w ich własnych plikach).

Moduł (y)

SomeComponent.js

myAppNamespace.messageCounter= (function(){

    var privateState = 0;

    var incrementCount = function () {
        privateState += 1;
    };

    return function (message) {
        incrementCount();
        //TODO something with the message! 
    }
})();

To, co tutaj robimy, to przypisywanie funkcji licznika komunikatów do zmiennej w naszej aplikacji. Jest to funkcja, która zwraca funkcję, którą natychmiast wykonujemy .

Koncepcje

Myślę, że warto pomyśleć o górnej linii w SomeComponent jako o przestrzeni nazw, w której coś deklarujesz. Jedynym zastrzeżeniem jest to, że wszystkie przestrzenie nazw muszą najpierw pojawić się w jakimś innym pliku - są to po prostu obiekty zakorzenione w naszej zmiennej aplikacji.

W tej chwili wykonałem tylko drobne kroki (refaktoryzuję normalny skrypt javascript z aplikacji extjs, aby móc go przetestować), ale wydaje się to całkiem miłe, ponieważ możesz zdefiniować małe jednostki funkcjonalne, unikając grzęzawiska tego ” .

Możesz również użyć tego stylu do definiowania konstruktorów, zwracając funkcję, która zwraca obiekt z kolekcją funkcji i nie wywołując jej od razu.

Tutaj https://toddmotto.com/mastering-the-module-pattern znajdziesz dokładnie wyjaśniony wzór. Dodam, że drugą rzeczą dotyczącą modułowego JavaScript jest struktura kodu w wielu plikach. Wiele osób może ci doradzić, abyś skorzystał z AMD, ale z doświadczenia mogę powiedzieć, że w pewnym momencie skończy się wolna odpowiedź strony z powodu wielu żądań HTTP. Wyjściem jest wstępna kompilacja modułów JavaScript (po jednym na plik) do jednego pliku zgodnie ze standardem CommonJS. Spójrz na próbki tutaj http://dsheiko.github.io/cjsc/

Wzorzec modułu JavaScript można znaleźć tutaj http://www.sga.su/module-pattern-javascript/