Kuidas kasutada JavaScripti kujundusmustreid

JavaScripti disainimustrid pakuvad tõestatud lahendusi tavalistele tarkvaraarenduse probleemidele. Nende mustrite mõistmine ja rakendamine võimaldab teil kirjutada paremat ja tõhusamat JavaScripti koodi.

Sissejuhatus JavaScripti disainimustritesse

JavaScripti kujundusmustrites sisalduvad kontseptsioonid aitavad teil lahendada levinud probleeme, millega JavaScripti arendajana kokku puutute.

Peaksite mõistma mustrite taga olevaid abstraktsioone, et saaksite neid oma konkreetsele probleemile rakendada. Samuti peaksite suutma tuvastada, millal mõni nimetatud mustritest võib teie koodi jaoks kasulik olla.

Mooduli muster

Mooduli muster, mis pakub kapseldamist, on osa JavaScripti moodulsüsteem. See annab võimaluse kaitsta privaatseid andmeid ja käitumist moodulis, paljastades samal ajal avaliku API. See võimaldab teil luua iseseisvaid moodulobjekte privaatse ja avaliku juurdepääsutasemega.

See on natuke nagu see, kuidas saate kasutada juurdepääsu modifikaatoreid klassis sellises keeles nagu Java või C++.

JavaScriptis saate mooduli mustri rakendada sulgemiste abil.

Kasutades privaatliikmete (funktsioonide, muutujate, andmete) kaasamiseks sulgemist, loote ulatuse, kus need liikmed on juurdepääsetavad, kuid mitte otseselt välismaailmaga kokku puutunud. See aitab saavutada kapseldamist, hoides sisemised detailid välise koodi eest peidus.

Lisaks võimaldab avaliku API sulgemisel tagastamine privaatset juurdepääsu teatud funktsioonidele või atribuutidele, mida soovite mooduli liidese osana avaldada.

See annab teile kontrolli selle üle, millised mooduli osad on koodibaasi teistele osadele juurdepääsetavad. See säilitab selge piiri avaliku ja erafunktsioonide vahel.

Siin on näide:

konst Ostukorvi moodul = (funktsiooni () {
// Isiklikud andmed
lase cartItems = [];
// Erameetod
funktsiooniArvutaTotal Items() {
tagasi cartItems.reduce((kokku, ese) => kokku + üksus.kogus, 0);
 }
// Avalik API
tagasi {
 addItem (artikkel) {
 cartItems.push (artikkel);
 },
 getTotalItems() {
tagasi arvuta TotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Kasutusnäide
ShoppingCartModule.addItem({ nimi: "toode 1", kogus: 2 });
ShoppingCartModule.addItem({ nimi: "toode 2", kogus: 1 });
konsool.log (ShoppingCartModule.getTotalItems()); // Väljund: 3
OstukorvModule.clearCart();
konsool.log (ShoppingCartModule.getTotalItems()); // Väljund: 0

Selles näites on Ostukorvi moodul tähistab mooduli mustri abil loodud moodulit. Koodi täitmine käib järgmiselt:

1. The IIFE murrab kogu koodiploki, luues funktsiooni, mis käivitatakse kohe pärast deklareerimist. See loob mooduli liikmetele privaatse ulatuse.
2. ostukorviKaubad on privaatne massiiv. See ei ole moodulist väljastpoolt otse juurdepääsetav.
3. arvuta TotalItems() on privaatne meetod, mis arvutab ostukorvis olevate kaupade koguarvu. See kasutab vähenda () kordamise meetod ostukorviKaubad massiivi ja summeerida kõigi esemete kogused.
4. Moodul tagastab oma avaliku API objektisõnana, paljastades kolm avalikku meetodit: addItem(), getTotalItems()ja tühjenda ostukorvi().
5. Väljaspool moodulit pääsete juurde mooduli avalikele meetoditele, et suhelda ostukorvi funktsioonidega.

See näide näitab, kuidas mooduli muster võimaldab kapseldada privaatseid andmeid (ostukorviKaubad) ja käitumine (ArvutaTotal Items) moodulis, pakkudes samal ajal avalikku liidest (lisa üksus, getTotalItemsja ClearCart) mooduliga suhtlemiseks.

Vaatleja muster

Vaatleja muster loob objektide vahel sõltuvuse üks-mitmele. Kui ühe objekti olek muutub, teavitab see kõiki oma ülalpeetavaid ja neid värskendatakse automaatselt. See muster on eriti kasulik sündmustest tingitud interaktsioonide haldamiseks või süsteemi komponentide lahtisidumiseks.

JavaScriptis saate rakendada vaatleja mustrit kasutades sisseehitatud addEventListenerit, dispatchEvent meetodid või mis tahes sündmuste käsitlemise mehhanismid. Kui tellite sündmuste või teemade vaatlejad, saate neid konkreetsete sündmuste toimumisest teavitada ja värskendada.

Näiteks võite kasutada vaatleja mustrit lihtsa teavitussüsteemi rakendamiseks:

// Vaatleja mustri rakendamine
funktsiooniTeavitussüsteem() {
// Tellijate nimekiri
see.tellijad = [];
// Teatiste tellimise meetod
see.tellida = funktsiooni (tellija) {
see.subscribers.push (tellija);
 };
// Teatiste tellimuse tühistamise meetod
see.tühista tellimus = funktsiooni (tellija) {
konst indeks = see.subscribers.indexOf (tellija);
kui (indeks !== -1) {
see.subscribers.splice (indeks, 1);
 }
 };
// Abonentide teavitamise meetod
see.teavitage = funktsiooni (sõnum) {
see.subscribers.forEach(funktsiooni (tellija) {
 subscriber.receiveNotification (sõnum);
 });
 };
}
// Tellija objekt
funktsiooniTellija(nimi) {
// Teadete vastuvõtmise ja käsitlemise meetod
see.receiveNotification = funktsiooni (sõnum) {
konsool.log (nimi + 'saanud teade:' + sõnum);
 };
}
// Kasutusnäide
konst teavitussüsteem = uus Teavitussüsteem();
// Looge tellijaid
konst tellija1 = uus Tellija ("Abonent 1");
konst tellija2 = uus Tellija ("Abonent 2");
// Tellige teavitussüsteemi tellijad
NotificationSystem.subscribe (tellija1);
NotificationSystem.subscribe (tellija2);
// Teavita tellijaid
notifySystem.notify("Uus teade!");

Siin on eesmärk võimaldada mitmel tellijal saada teatisi konkreetse sündmuse toimumisest.

The Teavitussüsteem funktsioon tähistab süsteemi, mis saadab teateid, ja Tellija funktsioon tähistab teatiste saajaid.

Teavitussüsteemil on massiiv nimega tellijad et salvestada tellijad, kes soovivad teatisi saada. The tellida meetod võimaldab abonentidel registreeruda, lisades end abonentide massiivi. The tühistada tellimus meetod eemaldaks abonendid massiivist.

The teatama NotificationSystemi meetod itereerib läbi abonentide massiivi ja kutsub välja saada teatist iga abonendi jaoks, võimaldades neil märguandeid käsitleda.

Funktsiooni Abonent eksemplarid tähistavad abonente. Igal abonendil on vastuvõetud teatise meetod, mis määrab, kuidas ta vastuvõetud teatisi käsitleb. Selles näites logib meetod vastuvõetud sõnumi konsooli.

Vaatlejamustri kasutamiseks looge teavitussüsteemi eksemplar. Seejärel saate luua abonendi eksemplare ja lisada need teavitussüsteemi, kasutades tellimismeetodit.

Teatise saatmine käivitab iga abonendi jaoks meetodi Receive Notification ja logib sõnumi iga abonendi kohta.

Vaatleja muster võimaldab lahtist sidet teavitussüsteemi ja abonentide vahel, võimaldades paindlikkust. Muster soodustab probleemide eraldamist, mis muudab sündmustepõhise süsteemide hoolduse lihtsamaks.

Täiustatud JavaScripti mustrite kasutamine

Siin on mõned üldised näpunäited täiustatud JavaScripti mustrite tõhusaks kasutamiseks.

• Kaaluge mõju jõudlusele: täpsemad mustrid võivad muuta veelgi keerukamaks, mis võib jõudlust mõjutada. Pöörake tähelepanu tulemuslikkusele ja vajadusel optimeerida.
• Vältige antimustreid: mõistke mustreid põhjalikult ja vältige antimustritesse sattumist või nende väärkasutamist. Kasutage mustreid, kus need on mõistlikud, ja ühtivad teie rakenduse nõuetega.
• Järgige kodeerimistavasid: järgige järjekindlalt kodeerimistavasid, et säilitada loetavus ja järjepidevus kogu koodibaasis. Kasutage tähendusrikkaid muutujate ja funktsioonide nimesid ning esitage oma mustrite jaoks selge dokumentatsioon.

Olge nende mustrite rakendamisel ettevaatlik

Mooduli muster võimaldab kapseldamist ja soodustab andmete privaatsust, koodi korraldamist ja iseseisvate moodulite loomist.

Teisest küljest hõlbustab vaatleja muster komponentide vahelist suhtlust, luues subjekti-abonendi suhte.

Täiustatud JavaScripti mustrite rakendamisel peaksite olema teadlik võimalikest lõksudest ja levinud vigadest. Vältige mustrite ülekasutamist seal, kus on olemas lihtsamad lahendused, või liiga keerulise koodi loomist. Vaadake oma kood regulaarselt üle ja muutke seda, et tagada selle hooldatavus.