Home-theater-designers
Jeśli kiedykolwiek będziesz chciał stworzyć kod JavaScript wielokrotnego użytku lub współpracować z zespołem programistów, musisz wiedzieć, jak używać i identyfikować różne wzorce projektowe w tym języku.
W JavaScript termin wzorzec projektowy odnosi się do określonego sposobu pisania kodu i jest często traktowany jako szablon programistyczny. Interesujące jest to, że wzorzec projektu etykiety można zastosować do wszystkiego, od całej aplikacji do prostego bloku kodu.
Wzorzec projektowy to obszerny temat, ale dzięki zrozumieniu wzorca modułu i metody fabrycznej powinieneś się z nim uporać.
Wzorzec modułu
Moduły JavaScript zostały wprowadzone w 2009 roku wraz z wersją języka programowania ES5. Za pomocą modułów programiści mogli teraz tworzyć niestandardowe fragmenty kodu i eksportować je do użycia w innych sekcjach aplikacji JavaScript.
Podstawowa struktura wzorca modułu
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); W powyższym przykładzie wzorce modułów są zawsze zawarte w natychmiast wywoływanym wyrażeniu funkcji (IIFE). Oznacza to, że wzorzec modułu jest wykonywany zaraz po jego zdefiniowaniu. Należy zauważyć, że wzorzec modułu składa się z dwóch odrębnych sekcji.
Pierwsza sekcja służy do deklarowania prywatnych zmiennych i funkcji, do których można uzyskać dostęp tylko w zakresie wzorca modułu.
Druga sekcja składa się z wartości zwracanej, która zawiera zmienne publiczne i funkcje, do których można uzyskać dostęp poza zakresem wzorca modułu.
Używanie wzorca modułu do tworzenia aplikacji
Rozważ prostą aplikację, taką jak menedżer zadań. Używając wzorca modułów, będziesz musiał utworzyć niestandardowe moduły dla każdej sekcji. Mogą to być:
- Kontroler zadań
- Kontroler interfejsu użytkownika
- Kontroler pamięci masowej
- Kontroler aplikacji
Związane z: Programowanie projektów dla początkujących
Kontroler zadań będzie używany do tworzenia każdego nowego zadania. Kontroler interfejsu użytkownika będzie używany do sterowania funkcjami związanymi z interfejsem użytkownika, takimi jak nasłuchiwanie kliknięcia przycisku lub zmiana wyświetlanych treści. Kontroler pamięci masowej będzie używany do zapisywania każdego nowego zadania w bazie danych. Do uruchomienia aplikacji zostanie użyty moduł aplikacji.
Używanie wzorca modułu do tworzenia przykładu kontrolera interfejsu użytkownika
const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();
Powyższy przykład wyraźnie pokazuje dwie sekcje, które znajdują się we wzorcu modułu — prywatna i publiczna.
W prywatnej części funkcji zmienna component i funkcja changeComponent są prywatne. Dlatego, jeśli chciałbyś zmienić cały tekst h1 na stronie internetowej, pojawiłby się błąd, gdybyś napisał następujący kod.
Nieprawidłowy sposób wywołania changeComponent Przykład
UIController.changeComponent();
Komunikat o błędzie będzie wyraźnie stwierdzał, że changeComponent() nie jest funkcją funkcji UIController. To jest piękno wzorca modułu; zmienne i funkcje utworzone w sekcji prywatnej nigdy nie będą dostępne bezpośrednio poza zakresem tej funkcji.
Chociaż do zmiennych prywatnych nie można uzyskać bezpośredniego dostępu, można jednak uzyskać do nich dostęp pośredni (z sekcji public). Jednym z wniosków z powyższego przykładu kontrolera interfejsu użytkownika jest to, że sekcja publiczna we wzorcu modułu jest zawsze oznaczona przez właściwość return.
W ramach parametrów właściwości return możemy teraz uzyskać pośredni dostęp do funkcji changeComponent. Możemy teraz użyć następującego wiersza kodu (z powyższym wzorcem modułu), aby skutecznie zmienić cały tekst h1 na docelowej stronie internetowej na tekst zastępczy.
Prawidłowy sposób wywołania przykładu changeComponent
UIController.callChangeComponent();
Wzór fabryczny
Wzorzec fabryki (znany również jako metoda fabryki) to kolejny popularny wzorzec projektowy JavaScript. Wzorzec modułu błyszczy, gdy wymagana jest enkapsulacja danych, a wzorzec fabryki jest najbardziej przydatny w przypadkach, gdy mamy do czynienia z kolekcją różnych obiektów, które pod pewnymi względami są podobne.
Wracając do naszego menedżera zadań powyżej; gdybyśmy mieli umożliwić użytkownikowi przypisanie typu do każdego tworzonego zadania, moglibyśmy stworzyć ten aspekt aplikacji (dość sprawnie) przy użyciu wzorca fabryki
Używanie wzorca fabrycznego do przypisywania przykładu typu zadania
//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}Powyższy kod używa metody fabrycznej do tworzenia nowych zadań, sprawdzania typu (pilne lub trywialne) i przypisywania odpowiedniej właściwości przed wydrukowaniem nowego zadania do konsoli.
Wewnętrzna funkcja createTask ustawia scenę dla wielu zadań, które mają być tworzone jednocześnie, ale zanim spróbujemy stworzyć nowe zadania, musimy dodać dodatkowy kod w tej sekcji projektu.
W powyższym kodzie tworzymy nowe UrgentTask lub nowe Trivialtask, jeśli zostanie spełniony określony warunek. Jednak w naszym projekcie nie ma żadnej funkcji ani klasy o tych nazwach — ten problem można łatwo rozwiązać, wprowadzając do naszego projektu poniższy kod.
Twórz pilne i trywialne typy zadań
//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}
Ze względu na powyższy kod możemy teraz przypisać właściwość UrgentTask lub TrivialTask do każdego nowego tworzonego zadania. Następnym krokiem jest utworzenie nowego zadania, ale wcześniej musimy utworzyć bazę danych do przechowywania każdego nowego zadania w miarę jego tworzenia.
Biorąc pod uwagę, że tworzenie bazy danych to cały artykuł sam w sobie, podstawimy bazę danych strukturą danych (tablicą).
Tworzenie przykładu tablicy
//create an array to host the different task
const task = [];
Teraz możemy wreszcie stworzyć nowe zadanie.
Przykład tworzenia nowych zadań
//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));
Dzięki powyższemu kodowi możesz teraz utworzyć dwa nowe zadania za pomocą funkcji TaskFactory, którą stworzyliśmy początkowo. Kiedy tworzymy każde nowe zadanie, właściwości (nazwa i typ) są przekazywane do funkcji createTask, która znajduje się w funkcji TaskFactory, którą utworzyliśmy przy użyciu wzorca fabryki.
Po przejściu każdego zadania przez TaskFactory i przypisaniu do niego odpowiedniej właściwości typu. Jest on następnie umieszczany w utworzonej wcześniej tablicy zadań.
Teraz naszym jedynym dylematem jest to, skąd wiemy, że te dwa zadania zostały stworzone lub że nasz fabryczny wzorzec zadziałał? Gdybyśmy korzystali z bazy danych, moglibyśmy po prostu sprawdzić bazę danych, aby zobaczyć, czy zostały utworzone dwa nowe zadania.
Wróć do sekcji Używanie wzorca fabryki do przypisania przykładu typu zadania powyżej, bezpośrednio pod użytym do wydrukowania zadania i jego typem do komentarza konsoli, znajduje się mała funkcja task.define, która została utworzona do drukowania każdego zadania w tablicy do konsoli za pomocą następujących metoda tablicowa .
//print each task to the console
task.forEach(function(task){
task.define();
});
Powinieneś zobaczyć następujące dane wyjściowe wyświetlane w Twojej konsoli.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Teraz możesz używać wzorców projektowych w swoich projektach JavaScript
Na tym etapie powinieneś zrozumieć wzorce projektowe w JavaScript i zrozumieć, w jaki sposób wzorce projektowe mogą być wykorzystywane do tworzenia kodu wielokrotnego użytku i ułatwiania życia wszystkim programistom zaangażowanym w projekt.
Teraz, gdy wiesz, jak działają dwa popularne wzorce projektowe JavaScript, powinieneś być w stanie efektywnie zastosować je do tworzenia aplikacji.
Źródło zdjęcia: Alltechbuzz/ Pixabay
jak zdobyć więcej wyświetleń na TwitchuUdział Udział Ćwierkać E-mail Jak zadeklarować zmienne w JavaScript
Aby zacząć korzystać z JavaScript, musisz zrozumieć zmienne. Oto trzy sposoby deklarowania zmiennych w JavaScript.
Czytaj dalej Powiązane tematy- Programowanie
- JavaScript
Kadeisha Kean jest programistą zajmującym się pełnymi stosami oprogramowania i pisarzem technicznym/technologicznym. Ma wyraźną umiejętność upraszczania niektórych z najbardziej złożonych koncepcji technologicznych; produkcja materiału, który może być łatwo zrozumiały dla każdego nowicjusza w dziedzinie technologii. Pasjonuje się pisaniem, tworzeniem ciekawego oprogramowania i podróżowaniem po świecie (poprzez filmy dokumentalne).
Więcej od Kadeishy KeanZapisz się do naszego newslettera
Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!
Kliknij tutaj, aby zasubskrybować