Home-theater-designers
Ha valaha is szeretne újrafelhasználható JavaScript -kódot létrehozni, vagy együttműködni egy fejlesztői csapattal, akkor tudnia kell, hogyan kell használni és azonosítani a nyelv különböző tervezési mintáit.
A JavaScriptben a tervezési minta kifejezés a kód írásának meghatározott módjára utal, és gyakran programozási sablonnak tekintik. Az érdekes dolog az, hogy a címke tervezési mintája bármire alkalmazható az egész alkalmazástól az egyszerű kódblokkig.
A tervezési minta széles körű téma, de ha megérti a modulmintát és a gyári módszert, meg kell értenie azt.
A modul minta
A JavaScript modulokat 2009 -ben vezették be, a programozási nyelv ES5 verziójával. A modulok használatával a fejlesztők mostantól egyéni kódrészleteket hozhattak létre és exportálhattak, hogy felhasználhassák őket egy JavaScript -alkalmazás más szakaszaiban.
A modulminta alapstruktúrája
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); A fenti példában a modulmintákat mindig egy azonnal meghívott függvénykifejezés (IIFE) zárja. Ez azt jelenti, hogy egy modulminta végrehajtásra kerül, amint meg van határozva. Fontos megjegyezni, hogy a modul minta két különálló részből áll.
Az első szakasz privát változók és függvények deklarálására szolgál, amelyek csak a modulminta keretein belül érhetők el.
A második szakasz egy visszatérési értékből áll, amely nyilvános változókat és függvényeket foglal magában, amelyek a modulminta hatókörén kívül érhetők el.
A modulminta használata alkalmazás létrehozásához
Tekintsünk egy egyszerű alkalmazást, például egy feladatkezelőt. A modulminta használatával egyedi modulokat kell létrehoznia minden szakaszhoz. Ezek a következők lehetnek:
- Feladatvezérlő
- UI vezérlő
- Tároló vezérlő
- Egy alkalmazásvezérlő
Összefüggő: Programozási projektek kezdőknek
A feladatvezérlő minden új feladat létrehozására szolgál. A felhasználói felület vezérlője a felhasználói felülethez kapcsolódó funkciók vezérlésére szolgál, mint például a gombnyomásra való figyelés vagy a megjelenített adatok módosítása. A tárolóvezérlő minden új feladat adatbázisba mentésére szolgál. Az alkalmazásmodul az alkalmazás végrehajtására szolgál.
Példa a modulminta használatával felhasználói felület vezérlő létrehozására
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();
}
}
})();
A fenti példa világosan bemutatja azt a két szakaszt, amelyek a modulmintában találhatók - privát és nyilvános.
A függvény privát részében az összetevőváltozó és a changeComponent függvény egyaránt privát. Ezért, ha meg szeretné változtatni az összes h1 szöveget egy weboldalon, akkor hibaüzenetet kap, ha a következő kódot írja.
Helytelen módszer a changeComponent példa meghívására
UIController.changeComponent();
A hibaüzenet kifejezetten kimondja, hogy a changeComponent () nem az UIController függvény funkciója. Ez a modul minta szépsége; a privát részben létrehozott változók és függvények soha nem érhetők el közvetlenül a függvény hatókörén kívül.
Bár a privát változók nem érhetők el közvetlenül, ezek azonban közvetve (a nyilvános részből) érhetők el. A fenti felhasználói felület -vezérlő példából kivonható, hogy a modul minta nyilvános szakaszát mindig a return tulajdonság jelöli.
A visszatérési tulajdonság paraméterein belül közvetett hozzáférést kapunk a changeComponent függvényhez. Most a következő kódsor segítségével (a fenti modulmintával) hatékonyan megváltoztathatjuk a megcélzott weblap összes h1 szövegét helyettesítő szövegre.
Példa a változtatás meghívásának helyes módjára
UIController.callChangeComponent();
A gyári minta
A gyári minta (más néven gyári módszer) egy másik népszerű JavaScript tervezési minta. A modul minta akkor ragyog, amikor adatbeágyazásra van szükség, és a gyári minta akkor a leghasznosabb, ha különböző objektumok gyűjteményével van dolgunk, amelyek bizonyos szempontból hasonlóak.
Visszatérve a fenti feladatkezelőnkhöz; ha megengednénk a felhasználónak, hogy minden egyes létrehozott feladathoz hozzárendeljen egy típust, akkor az alkalmazásnak ezt a aspektusát (meglehetősen hatékonyan) létrehozhatjuk a gyári minta használatával
Példa a gyári minta használatával a feladattípus hozzárendeléséhez
//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
}
}A fenti kód a gyári módszert használja az új feladatok létrehozásához, a típus ellenőrzéséhez (sürgős vagy triviális), és a megfelelő tulajdonság hozzárendeléséhez, mielőtt kinyomtatja az új feladatot a konzolra.
A createTask belső függvény határozza meg, hogy egyszerre több feladatot kell létrehozni, de mielőtt új feladatokat próbálnánk létrehozni, van néhány további kód, amelyet be kell illesztenünk a projekt ezen szakaszába.
A fenti kódban létrehozunk egy új UrgentTask -t vagy egy új Trivialtask -t, ha egy adott feltétel teljesül. Projektünkben azonban nincs funkció vagy osztály ezekkel a nevekkel - ez a probléma könnyen megoldható a következő kód bevezetésével a projektünkbe.
Sürgős és triviális feladattípusok létrehozása
//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'
}
A fenti kód miatt mostantól minden új feladathoz hozzárendelhetjük az UrgentTask vagy TrivialTask tulajdonságot. A következő lépés most egy új feladat létrehozása, de előtte létre kell hoznunk egy adatbázist, amely minden új feladatot a létrehozásakor tárol.
Tekintettel arra, hogy az adatbázis létrehozása önmagában egy teljes cikk, az adatbázist adatszerkezettel (tömbvel) helyettesítjük.
Tömb példa létrehozása
//create an array to host the different task
const task = [];
Most végre létrehozhatunk egy új feladatot.
Példa új feladatok létrehozására
//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'));
A fenti kóddal most két új feladatot hozhat létre az eredetileg létrehozott TaskFactory függvénnyel. Amikor minden új feladatot létrehozunk, a tulajdonságok (név és típus) már túl vannak a createTask függvényen, amely a TaskFactory függvényben található, amelyet a gyári minta alapján hoztunk létre.
Miután minden feladat átjutott a TaskFactory -n, és hozzárendelték a megfelelő típusú tulajdonságot. Ezután a korábban létrehozott feladatsorba kerül.
Az egyetlen dilemmánk most az, hogy honnan tudjuk, hogy ez a két feladat létrejött, vagy hogy a gyári mintánk működött? Ha adatbázist használtunk volna, akkor egyszerűen ellenőrizhetnénk az adatbázist, hogy nem jött -e létre két új feladat.
Térjen vissza a fenti Gyári minta használata a feladattípus hozzárendelésére példához, közvetlenül a feladat nyomtatásához használt típus alatt, és annak típusát a konzol megjegyzéséhez. a konzolra az alábbiak segítségével tömb módszer .
//print each task to the console
task.forEach(function(task){
task.define();
});
Látnia kell, hogy a következő kimenet jelenik meg a konzolon.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Mostantól tervezési mintákat használhat JavaScript -projektjeiben
Ebben a szakaszban meg kell értenie a JavaScript tervezési mintáit, és meg kell értenie, hogyan lehet a tervezési minták felhasználásával újrafelhasználható kódot létrehozni, és megkönnyíteni a projektben részt vevő összes fejlesztő életét.
Most már tudja, hogyan működik két népszerű JavaScript tervezési minta, és képesnek kell lennie arra, hogy hatékonyan alkalmazza őket egy alkalmazás fejlesztéséhez.
Kép jóváírása: Alltechbuzz/ Pixabay
hogyan menthet képeket a pinterestrőlRészvény Részvény Csipog Email A változók deklarálása a JavaScriptben
A JavaScript használatához meg kell értenie a változókat. Íme három módszer a változók deklarálására a JavaScriptben.
Olvassa tovább Kapcsolódó témák- Programozás
- JavaScript
Kadeisha Kean Full Stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legösszetettebb technológiai fogalmakat; olyan anyagot állít elő, amelyet minden technológiai kezdő könnyen megért. Szenvedélyesen ír, érdekes szoftvereket fejleszt és utazik a világban (dokumentumfilmeken keresztül).
Bővebben: Kadeisha KeanIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide