Jak vytvořit opakovaně použitelný kód v JavaScriptu pomocí návrhových vzorů

Pokud někdy chcete vytvořit opakovaně použitelný kód JavaScript nebo spolupracovat s týmem vývojářů, musíte vědět, jak používat a identifikovat různé vzory designu v jazyce.

V JavaScriptu termín návrhový vzor odkazuje na konkrétní způsob psaní kódu a je často považován za programovací šablonu. Zajímavostí je, že vzor návrhu štítku lze použít na cokoli od celé aplikace až po jednoduchý blok kódu.

Vzorec návrhu je široké téma, ale porozuměním vzoru modulu a tovární metodě byste se s ním měli vypořádat.

Modulární vzor

Moduly JavaScript byly zavedeny v roce 2009 s verzí programovacího jazyka ES5. Pomocí modulů mohli vývojáři nyní vytvářet vlastní části kódu a exportovat je pro použití v jiných sekcích aplikace JavaScript.

Základní struktura vzoru modulu

  
(function(){  
//Declare private variables and functions  
//Declare and return public variables and functions  
})();

Ve výše uvedeném příkladu jsou vzory modulů vždy uzavřeny ve výrazu funkce okamžitě vyvolané (IIFE). To znamená, že vzor modulu je spuštěn, jakmile je definován. Důležité je poznamenat, že vzor modulu se skládá ze dvou odlišných částí.

První část slouží k deklaraci soukromých proměnných a funkcí, ke kterým je přístup pouze v rámci rozsahu vzoru modulu.

Druhá část se skládá z návratové hodnoty, která uzavírá veřejné proměnné a funkce, ke kterým lze přistupovat mimo rozsah vzoru modulu.

Použití vzoru modulu k vytvoření aplikace

Zvažte jednoduchou aplikaci, jako je správce úloh. Pomocí vzoru modulu budete muset vytvořit vlastní moduly pro každou sekci. Ty mohou zahrnovat:

Řadič úloh
Ovladač uživatelského rozhraní
Řadič úložiště
Ovladač aplikace

Příbuzný: Programování projektů pro začátečníky

K vytvoření každého nového úkolu bude použit řadič úloh. Ovladač uživatelského rozhraní bude použit k ovládání funkcí souvisejících s uživatelským rozhraním, jako je poslouchání kliknutí na tlačítko nebo změna toho, co se zobrazuje. Řadič úložiště bude použit k uložení každé nové úlohy do databáze. Ke spuštění aplikace bude použit modul aplikace.

Použití vzoru modulu k vytvoření příkladu ovladače UI

  
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();  
}  
}  
})();

Výše uvedený příklad jasně ukazuje dvě části, které se nacházejí v rámci modulu - soukromý a veřejný.

V soukromé části funkce jsou proměnná komponenty a funkce changeComponent soukromé. Pokud byste tedy chtěli změnit veškerý text h1 na webové stránce, došlo by k chybě, pokud byste napsali následující kód.

Nesprávný způsob vyvolání příkladu changeComponent

  
UIController.changeComponent();

Chybová zpráva výslovně uvádí, že changeComponent () není funkcí funkce UIController. V tom je krása vzoru modulu; proměnné a funkce, které jsou vytvořeny v soukromé sekci, nebudou nikdy přímo přístupné mimo rozsah této funkce.

Přestože k soukromým proměnným nelze přistupovat přímo, lze k nim přistupovat nepřímo (z veřejné sekce). Takeaway z výše uvedeného příkladu ovladače UI je, že veřejná část ve vzoru modulu je vždy označena vlastností return.

V rámci parametrů vlastnosti return jsme nyní schopni získat nepřímý přístup k funkci changeComponent. Nyní můžeme použít následující řádek kódu (s vzorem modulu výše) k efektivní změně celého textu h1 na cílené webové stránce na Náhradní text.

Správný způsob vyvolání příkladu changeComponent

  
UIController.callChangeComponent();

Tovární vzor

Tovární vzor (také známý jako tovární metoda) je další populární návrhový vzor JavaScript. Modul modulu svítí, když je vyžadováno zapouzdření dat, a tovární vzor je nejužitečnější v případech, kdy máme co do činění se sbírkou různých objektů, které jsou v některých aspektech podobné.

Vraťme se zpět k našemu správci úloh výše; pokud bychom měli umožnit uživateli přiřadit typ ke každému úkolu, který je vytvořen, pak bychom mohli vytvořit tento aspekt aplikace (docela efektivně) pomocí továrního vzoru

Použití továrního vzoru k přiřazení příkladu typu úkolu

  
//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  
}  
}

Výše uvedený kód používá tovární metodu k vytváření nových úkolů, kontrole typu (naléhavého nebo triviálního) a přiřazení příslušné vlastnosti před tiskem nového úkolu do konzoly.

Vnitřní funkce createTask nastavuje fázi pro vytváření více úkolů současně, ale než se pokusíme vytvořit nějaké nové úkoly, je v této části projektu potřeba zahrnout další kód.

V kódu výše vytváříme nový UrgentTask nebo nový Trivialtask, pokud je splněna konkrétní podmínka. V našem projektu však není žádná funkce nebo třída s těmito názvy - tento problém lze snadno vyřešit zavedením následujícího kódu do našeho projektu.

Vytvořte naléhavé a triviální typy úkolů

  
//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'  
}

Kvůli výše uvedenému kódu jsme nyní schopni přiřadit každému novému úkolu, který je vytvořen, vlastnost UrgentTask nebo TrivialTask. Dalším krokem je nyní vytvořit nový úkol, ale před tím musíme vytvořit databázi pro uložení každého nového úkolu při jeho vytváření.

Vzhledem k tomu, že vytvoření databáze je celý článek sám o sobě, nahradíme databázi datovou strukturou (maticí).

Vytvoření příkladu pole

  
//create an array to host the different task  
const task = [];

Nyní můžeme konečně vytvořit nový úkol.

Příklad vytváření nových úkolů

  
//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'));

S výše uvedeným kódem nyní můžete vytvořit dvě nové úlohy pomocí funkce TaskFactory, kterou jsme původně vytvořili. Když vytváříme každý nový úkol, vlastnosti (název a typ) jsou minulostí funkce createTask, která se nachází ve funkci TaskFactory, kterou jsme vytvořili pomocí továrního vzoru.

Poté, co se každý úkol dostal do TaskFactory a je mu přiřazena příslušná vlastnost typu. Poté se vloží do pole úloh, které jsme vytvořili dříve.

Naším jediným dilematem nyní je, jak víme, že tyto dva úkoly byly vytvořeny nebo že náš tovární vzor fungoval? Pokud bychom použili databázi, mohli bychom jednoduše zkontrolovat databázi a zjistit, zda byly vytvořeny dva nové úkoly.

Vraťte se zpět k výše uvedenému příkladu přiřazení typu úkolu pomocí továrního vzoru, přímo pod tlačítkem použitým k tisku úkolu a jeho typu do komentáře konzoly je malá funkce task.define, která byla vytvořena pro tisk každé úlohy v poli na konzolu pomocí následujícího metoda pole .

  
//print each task to the console  
task.forEach(function(task){  
task.define();  
});

V konzole byste měli vidět následující výstup.

  
Clean the house (urgent): as soon as possible  
Reach level 30 in Candy Crush (trivial): when you can

Nyní můžete ve svých projektech JavaScript používat návrhové vzory

V této fázi byste měli porozumět návrhovým vzorům v jazyce JavaScript a porozumět tomu, jak lze návrhové vzory použít k vytvoření opakovaně použitelného kódu a usnadnit život všem vývojářům zapojeným do projektu.

Nyní víte, jak fungují dva populární návrhové vzory JavaScriptu, měli byste je umět efektivně aplikovat na vývoj aplikace.

Uznání: Alltechbuzz/ Pixabay

mám stáhnout 64 nebo 32 bit

Podíl Podíl tweet E-mailem Jak deklarovat proměnné v JavaScriptu

Chcete -li začít s JavaScriptem, musíte porozumět proměnným. Zde jsou tři způsoby, jak deklarovat proměnné v JavaScriptu.

Číst dále Související témata

Programování
JavaScript

O autorovi Kadeisha Kean(21 článků zveřejněno)

Kadeisha Kean je vývojář softwaru a technický/technologický spisovatel v plném zásobníku. Má výraznou schopnost zjednodušit některé z nejsložitějších technologických konceptů; produkující materiál, kterému každý technologický nováček snadno porozumí. Je nadšená psaním, vývojem zajímavého softwaru a cestováním po světě (prostřednictvím dokumentů).

Více od Kadeisha Kean

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru