Rengeteg alkalmazást talál ehhez a két mintához, ezért ügyeljen arra, hogy alaposan ismerje működésüket és használatukat.
A JavaScript tervezési minták bevált megoldásokat kínálnak a szoftverfejlesztés általános problémáira. Ezeknek a mintáknak a megértése és alkalmazása lehetővé teszi, hogy jobb, hatékonyabb JavaScript-kódot írjon.
Bevezetés a JavaScript tervezési mintákba
A JavaScript-tervezési mintákban található fogalmak eligazítást adnak a JavaScript-fejlesztőként felmerülő gyakori problémák leküzdésében.
Meg kell értened a minták mögött meghúzódó absztrakciókat, hogy alkalmazhasd őket az adott problémádra. Azt is képesnek kell lennie azonosítani, ha az említett minták bármelyike hasznos lehet a kódjában.
A modul minta
A tokozást biztosító Modul minta része JavaScript modulrendszere. Módot biztosít a privát adatok és viselkedés egy modulon belüli védelmére, miközben nyilvános API-t tesz közzé. Lehetővé teszi önálló modulobjektumok létrehozását privát és nyilvános hozzáférési szintekkel.
Ez egy kicsit olyan, mint ahogy lehet hozzáférésmódosítókat használjon egy olyan nyelven, mint a Java vagy C++.
A JavaScriptben a modulmintát bezárások segítségével valósíthatja meg.
Ha zárást használ a privát tagok (függvények, változók, adatok) bezárására, akkor egy olyan hatókört hoz létre, ahol ezek a tagok elérhetők, de nincsenek közvetlenül kitéve a külvilágnak. Ez segít a tokozás elérésében, a belső részletek rejtve maradnak a külső kód elől.
Ezenkívül a nyilvános API visszaadása a bezárásból lehetővé teszi a privát hozzáférést bizonyos funkciókhoz vagy tulajdonságokhoz, amelyeket a modul felületének részeként szeretne megjeleníteni.
Ezzel szabályozhatja, hogy a modul mely részei legyenek elérhetők a kódbázis más részei számára. Ez egyértelmű határvonalat tart fenn a nyilvános és a magánfunkciók között.
Íme egy példa:
const ShoppingCartModule = (funkció () {
// Privát adatok
hagyja cartItems = [];// Privát módszer
funkciókalkulálja TotalItems() {
Visszatérés cartItems.reduce((összesen, tétel) => összesen + item.quantity, 0);
}// Nyilvános API
Visszatérés {
addItem (elem) {
cartItems.push (tétel);
},getTotalItems() {
Visszatérés számításTotalItems();
},clearCart() {
cartItems = [];
}
};
})();// Használati példa
ShoppingCartModule.addItem({ név: "1. termék", Mennyiség: 2 });
ShoppingCartModule.addItem({ név: "2. termék", Mennyiség: 1 });konzol.log (ShoppingCartModule.getTotalItems()); // Kimenet: 3
ShoppingCartModule.clearCart();
konzol.log (ShoppingCartModule.getTotalItems()); // Kimenet: 0
Ebben a példában a ShoppingCartModule a modulmintával létrehozott modult jelöli. A kód végrehajtása így megy:
- A IIFE becsomagolja a teljes kódblokkot, létrehozva egy függvényt, amely a deklaráció után azonnal végrehajtódik. Ez egy privát hatókört hoz létre a modul tagjai számára.
- kosárTételek egy privát tömb. A modulon kívülről közvetlenül nem érhető el.
- számításTotal Items() egy privát módszer, amely kiszámítja a kosárban lévő termékek teljes számát. Használja a csökkenti() módszer az iteráció során kosárTételek tömböt és összegezze az összes tétel mennyiségét.
- A modul a nyilvános API-ját objektumliterálként adja vissza, három nyilvános metódust tesz közzé: additetem(), getTotalItems(), és clearCart().
- A modulon kívül elérheti a modul nyilvános metódusait a bevásárlókosár funkcióival való interakcióhoz.
Ez a példa bemutatja, hogy a modulminta hogyan teszi lehetővé személyes adatok beágyazását (kosárTételek) és viselkedés (kalkulálja TotalItems) a modulon belül, miközben nyilvános felületet biztosít (addItem, getTotalItems, és clearCart) a modullal való interakcióhoz.
A megfigyelő minta
Az Observer minta egy a többhez függőséget hoz létre az objektumok között. Amikor az egyik objektum állapota megváltozik, értesíti az összes hozzátartozóját, és azok automatikusan frissülnek. Ez a minta különösen hasznos az eseményvezérelt interakciók kezelésére vagy a rendszer összetevőinek szétválasztására.
A JavaScriptben megvalósíthatja az Observer mintát a beépített addEventListener segítségével, dispatchEvent módszerek, vagy bármilyen eseménykezelési mechanizmusok. Ha megfigyelőket regisztrál eseményekre vagy témákra, értesítheti és frissítheti őket, amikor konkrét események történnek.
Használhatja például az Observer mintát egy egyszerű értesítési rendszer megvalósításához:
// Megfigyelő minta megvalósítása
funkcióÉrtesítési rendszer() {
// Előfizetők listája
ez.subscribers = [];// Az értesítésekre való feliratkozás módja
ez.subscribe = funkció (előfizető) {
ez.subscribers.push (előfizető);
};// Az értesítésekről való leiratkozás módja
ez.leiratkozás = funkció (előfizető) {
const index = ez.subscribers.indexOf (előfizető);ha (index !== -1) {
ez.subscribers.splice (index, 1);
}
};// Az előfizetők értesítésének módja
ez.notify = funkció (üzenet) {
ez.subscribers.forEach(funkció (előfizető) {
subscriber.receiveNotification (üzenet);
});
};
}// Előfizetői objektum
funkcióElőfizető(név) {
// Értesítések fogadásának és kezelésének módja
ez.receiveNotification = funkció (üzenet) {
konzol.log (név + ' értesítés érkezett:' + üzenet);
};
}// Használati példa
const NotificationSystem = új NotificationSystem();// Előfizetők létrehozása
const előfizető1 = új Előfizető("1. előfizető");
const előfizető2 = új Előfizető("2. előfizető");// Előfizetők feliratkozása az értesítési rendszerre
notificationSystem.subscribe (előfizető1);
notificationSystem.subscribe (előfizető2);
// Értesítse az előfizetőket
notificationSystem.notify('Új értesítés!');
A cél itt az, hogy több előfizető kapjon értesítést egy adott esemény bekövetkeztekor.
A Értesítési rendszer függvény jelenti az értesítéseket küldő rendszert, és a Előfizető A funkció az értesítések címzettjeit jelöli.
Az értesítési rendszernek van egy nevű tömbje előfizetők az értesítéseket fogadni kívánó előfizetők tárolására. A Iratkozz fel módszer lehetővé teszi az előfizetők számára, hogy regisztráljanak úgy, hogy hozzáadják magukat az előfizetői tömbhöz. A leiratkozás módszer eltávolítja az előfizetőket a tömbből.
A értesítse metódus a NotificationSystemben az előfizetői tömbön keresztül iterál, és meghívja a kap értesítést módszert minden előfizetőre, lehetővé téve számukra az értesítések kezelését.
Az Előfizető funkció példányai az előfizetőket jelölik. Minden előfizető rendelkezik egy ReceiveNotification metódussal, amely meghatározza, hogyan kezelje a kapott értesítéseket. Ebben a példában a metódus naplózza a kapott üzenetet a konzolon.
A megfigyelő minta használatához hozzon létre egy NotificationSystem példányt. Ezután létrehozhatja az Előfizető példányait, és hozzáadhatja azokat az értesítési rendszerhez az előfizetési módszerrel.
Az értesítés küldése minden előfizetőnél elindítja a ReceiveNotification metódust, és minden előfizetőnél naplózza az üzenetet.
Az Observer minta laza kapcsolódást tesz lehetővé az értesítési rendszer és az előfizetők között, ami rugalmasságot tesz lehetővé. A minta elősegíti a problémák szétválasztását, ami megkönnyíti az eseményvezérelt rendszerek karbantartását.
Speciális JavaScript-minták használata
Íme néhány általános tipp a fejlett JavaScript-minták hatékony használatához:
- Fontolja meg a teljesítményre gyakorolt hatásokat: A fejlett minták további összetettséget okozhatnak, ami befolyásolhatja a teljesítményt. Ügyeljen a teljesítmény következményeire és szükség esetén optimalizálni.
- Kerülje az anti-mintákat: Értse meg alaposan a mintákat, és kerülje az anti-mintákba esést vagy azokkal való visszaélést. Használjon olyan mintákat, ahol van értelme, és igazodnak az alkalmazás követelményeihez.
- Kövesse a kódolási konvenciókat: Kövesse a kódolási konvenciókat, hogy megőrizze az olvashatóságot és a konzisztenciát a kódbázison belül. Használjon értelmes változó- és függvényneveket, és biztosítson egyértelmű dokumentációt a mintákhoz.
Legyen óvatos, amikor ezeket a mintákat alkalmazza
A Modul minta lehetővé teszi a beágyazást, és elősegíti az adatvédelmet, a kódszervezést és az önálló modulok létrehozását.
Másrészt az Observer minta megkönnyíti a kommunikációt a komponensek között azáltal, hogy alany-előfizető kapcsolatot hoz létre.
Tudnia kell a lehetséges buktatókkal és a gyakori hibákkal a fejlett JavaScript-minták alkalmazásakor. Kerülje a minták túlzott használatát, ahol egyszerűbb megoldások léteznek, vagy ne hozzon létre túlságosan összetett kódot. Rendszeresen ellenőrizze és alakítsa át a kódot, hogy biztosítsa a karbantarthatóságát.