JavaScript module pattern with example [closed]
Nie mogę znaleźć żadnych dostępnych przykładów pokazujących, jak dwa (lub więcej) różne moduły są połączone ze sobą.
Tak więc, chciałbym zapytać, czy ktoś ma czas, aby napisać przykład wyjaśniający, jak moduły współpracują ze sobą.
5 answers
Aby podejść do modularnego wzorca projektowego, musisz najpierw zrozumieć tę koncepcję:
Wywołane bezpośrednio wyrażenie funkcji (IIFE):
(function() {
// Your code goes here
}());
Istnieją dwa sposoby korzystania z funkcji. 1. Deklaracja funkcji 2. Definicja funkcji. Tutaj używa się wyrażenia definicji funkcji.
Co to jest Przestrzeń nazw? Jeśli dodamy przestrzeń nazw do powyższego fragmentu kodu to
var anoyn = (function() {
}());
Czym jest zamknięcie w JS?
Oznacza to, że jeśli zadeklarujemy jakąkolwiek funkcję z dowolną zmienną scope / wewnątrz innej funkcji (w JS możemy zadeklarować funkcję wewnątrz innej funkcji!) wtedy będzie zawsze liczyć ten zakres funkcji. Oznacza to, że każda zmienna w funkcji zewnętrznej będzie zawsze odczytywana. Nie odczyta zmiennej globalnej (jeśli istnieje) o tej samej nazwie. Jest to również jeden z celów wykorzystania modularnego wzorca projektowego, unikając 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 pojęcia, o których wspomniałem powyżej, aby zdefiniować nasz pierwszy modułowy projekt wzór:
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
Celem jest ukrycie dostępności zmiennej przed światem zewnętrznym.
Mam nadzieję, że to pomoże. Powodzenia.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-31 17:52:16
Naprawdę polecam każdemu wchodzącemu w ten temat przeczytać darmową książkę Addy Osmani:
"Nauka Wzorców Projektowych JavaScript".
Http://addyosmani.com/resources/essentialjsdesignpatterns/book/
Ta książka bardzo mi pomogła, gdy zaczynałem pisać bardziej konserwowalny JavaScript i nadal używam go jako odniesienia. Spójrz na jego różne implementacje wzorców modułów, wyjaśnia je bardzo dobrze.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-15 20:55:17
Pomyślałem, że poszerzę powyższą odpowiedź, mówiąc o tym, jak dopasujesz moduły do aplikacji. Czytałem o tym w książce Douga crockforda, ale bycie nowym w javascript było nadal trochę tajemnicze.
Pochodzę z tła c#, więc dodałem trochę terminologii, którą uważam za przydatną.
Html
Będziesz miał jakiś plik html najwyższego poziomu. Pomaga myśleć o tym jako o pliku projektu. Każdy plik javascript, który dodajesz do projekt chce wejść w to, niestety nie masz do tego wsparcia narzędzi (używam pomysłu).
Musisz dodać pliki do projektu z tagami skryptu, 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 zwijanie znaczników powoduje awarię rzeczy - podczas gdy wygląda jak xml, to naprawdę coś z bardziej szalonymi zasadami!
Plik przestrzeni nazw
MasterFile.js
myAppNamespace = {};
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 przypisanie funkcji licznika Wiadomości do zmiennej w naszej aplikacji. Jest to funkcja, która zwraca funkcję, którą natychmiast wykonujemy .
Koncepcje
Myślę, że pomaga myśleć o górnej linii w SomeComponent jako przestrzeni nazw, w której coś deklarujesz. Jedyne zastrzeżenie aby to wszystko, twoje przestrzenie nazw muszą najpierw pojawić się w innym pliku - są to tylko obiekty zakorzenione przez naszą zmienną aplikacji.
Zrobiłem tylko drobne kroki z tym w tej chwili (jestem refaktoring niektóre normalne javascript z aplikacji extjs, więc mogę go przetestować), ale wydaje się całkiem ładne, jak można zdefiniować małe jednostki funkcjonalne, unikając quagmire " to " .
Możesz również użyć tego stylu do zdefiniowania konstruktorów zwracając funkcję, która zwraca obiekt ze zbiorem funkcji i nie wywołując go od razu.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-05 16:43:09
Tutaj https://toddmotto.com/mastering-the-module-pattern można znaleźć wzór dokładnie wyjaśnione. Dodam, że drugą rzeczą w modularnym JavaScript jest struktura kodu w wielu plikach. Wielu ludzi może Ci doradzić, aby przejść do AMD, ale mogę powiedzieć z doświadczenia, że skończysz w pewnym momencie z powolną reakcją strony z powodu licznych żądań HTTP. Wyjście to wstępna kompilacja modułów JavaScript (po jednym na plik) w jeden plik zgodnie ze standardem CommonJS. Spójrz na próbki tutaj http://dsheiko.github.io/cjsc/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-15 11:22:08
Możesz znaleźć Module Pattern JavaScript tutaj http://www.sga.su/module-pattern-javascript/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-13 19:09:22