Kā izmantot JavaScript dizaina modeļus

JavaScript dizaina modeļi nodrošina pārbaudītus risinājumus izplatītām programmatūras izstrādes problēmām. Šo modeļu izpratne un pielietošana ļaus jums uzrakstīt labāku un efektīvāku JavaScript kodu.

Ievads JavaScript dizaina modeļos

JavaScript dizaina modeļos ietvertie jēdzieni palīdz jums pārvarēt izplatītākās problēmas, ar kurām saskarsities kā JavaScript izstrādātājs.

Jums vajadzētu saprast pamatā esošās abstrakcijas, kas slēpjas aiz modeļiem, lai jūs varētu tos piemērot savai konkrētajai problēmai. Jums vajadzētu arī noteikt, kad kāds no minētajiem modeļiem var būt noderīgs jūsu kodam.

Moduļa modelis

Moduļa modelis, kas nodrošina iekapsulēšanu, ir daļa no JavaScript moduļu sistēma. Tas nodrošina veidu, kā nodrošināt privātus datus un uzvedību modulī, vienlaikus atklājot publisko API. Tas ļauj jums izveidot autonomus moduļu objektus ar privātiem un publiskiem piekļuves līmeņiem.

Tas ir mazliet līdzīgs tam, kā jūs varat izmantot piekļuves modifikatorus klasē tādā valodā kā Java vai C++.

Programmā JavaScript varat ieviest moduļa modeli, izmantojot aizvērumus.

Izmantojot slēgšanu, lai ietvertu privātos dalībniekus (funkcijas, mainīgos lielumus, datus), jūs izveidojat tvērumu, kurā šie dalībnieki ir pieejami, bet nav tieši pakļauti ārpasaulei. Tas palīdz panākt iekapsulēšanu, saglabājot iekšējās detaļas paslēptas no ārējā koda.

Turklāt publiskā API atgriešana no slēgšanas nodrošina privātu piekļuvi noteiktām funkcijām vai rekvizītiem, kurus vēlaties atklāt kā daļu no moduļa saskarnes.

Tas ļaus jums kontrolēt, kuras moduļa daļas ir pieejamas citām koda bāzes daļām. Tas saglabā skaidru robežu starp publisko un privāto funkcionalitāti.

Šeit ir piemērs:

konst ShoppingCartModule = (funkciju () {
// Privātie dati
ļaut cartItems = [];
// Privātā metode
funkcijuaprēķināt TotalItems() {
atgriezties cartItems.reduce((kopā, vienība) => kopā + vienumu daudzums, 0);
 }
// Publiskā API
atgriezties {
 addItem (prece) {
 cartItems.push (prece);
 },
 getTotalItems() {
atgriezties aprēķinātTotalItems();
 },
 clearCart() {
 cartItems = [];
 }
 };
})();
// Lietojuma piemērs
ShoppingCartModule.addItem({ nosaukums: 1. produkts, daudzums: 2 });
ShoppingCartModule.addItem({ nosaukums: 2. produkts, daudzums: 1 });
konsole.log (ShoppingCartModule.getTotalItems()); // Izvade: 3
Iepirkumu grozsModule.clearCart();
konsole.log (ShoppingCartModule.getTotalItems()); // Izvade: 0

Šajā piemērā Iepirkumu groza modulis apzīmē moduli, kas izveidots, izmantojot moduļa modeli. Koda izpilde notiek šādi:

1. The IIFE iesaiņo visu koda bloku, izveidojot funkciju, kas tiek izpildīta uzreiz pēc deklarēšanas. Tādējādi moduļa dalībniekiem tiek izveidota privāta darbības joma.
2. grozsPreces ir privāts masīvs. Tas nav tieši pieejams no ārpuses moduļa.
3. aprēķināt TotalItems() ir privāta metode, kas aprēķina kopējo preču skaitu grozā. Tas izmanto samazināt () metode, kā atkārtot grozsPreces masīvu un summējiet visu preču daudzumus.
4. Modulis atgriež publisko API kā objekta burtu, atklājot trīs publiskās metodes: addItem(), getTotalItems(), un notīrīt grozu().
5. Ārpus moduļa varat piekļūt moduļa publiskajām metodēm, lai mijiedarbotos ar iepirkumu groza funkcionalitāti.

Šis piemērs parāda, kā moduļa modelis ļauj iekapsulēt privātos datus (grozsPreces) un uzvedība (aprēķināt TotalItems) modulī, vienlaikus nodrošinot publisku saskarni (pievienot vienumu, getTotalItems, un notīrītGrozs), lai mijiedarbotos ar moduli.

Novērotāja modelis

Novērotāja modelis nosaka atkarību starp objektiem viens pret daudziem. Kad mainās viena objekta stāvoklis, tas informē visus tā apgādājamos, un tie tiek automātiski atjaunināti. Šis modelis ir īpaši noderīgs, lai pārvaldītu uz notikumu balstītu mijiedarbību vai sistēmas komponentu atsaistīšanu.

Programmā JavaScript varat ieviest Observer modeli izmantojot iebūvēto addEventListener, dispatchEvent metodes vai jebkura cita notikumu apstrādes mehānismi. Abonējot novērotājus notikumiem vai tēmām, varat paziņot un atjaunināt tos, kad notiek konkrēti notikumi.

Piemēram, varat izmantot Observer modeli, lai ieviestu vienkāršu paziņojumu sistēmu:

// Novērotāja modeļa ieviešana
funkcijuPaziņojumu sistēma() {
// Abonentu saraksts
šis.abonenti = [];
// Paziņojumu abonēšanas metode
šis.abonēt = funkciju (abonents) {
šis.subscribers.push (abonents);
 };
// Paziņojumu abonēšanas atcelšanas metode
šis.atrakstīties = funkciju (abonents) {
konst indekss = šis.subscribers.indexOf (abonents);
ja (indekss !== -1) {
šis.subscribers.splice (indekss, 1);
 }
 };
// Abonentu informēšanas metode
šis.notify = funkciju (ziņa) {
šis.subscribers.forEach(funkciju (abonents) {
 subscriber.receiveNotification (ziņa);
 });
 };
}
// Abonenta objekts
funkcijuAbonents(nosaukums) {
// Paziņojumu saņemšanas un apstrādes metode
šis.receiveNotification = funkciju (ziņa) {
konsole.log (nosaukums + 'saņemts paziņojums:' + ziņa);
 };
}
// Lietojuma piemērs
konst paziņojumu sistēma = jauns Paziņojumu sistēma ();
// Izveidot abonentus
konst abonents1 = jauns Abonents ("1. abonents");
konst abonents2 = jauns Abonents ("2. abonents");
// Abonējiet paziņojumu sistēmas abonentus
notificationSystem.subscribe (abonents1);
notificationSystem.subscribe (abonents2);
// Paziņot abonentiem
notifySystem.notify("Jauns paziņojums!");

Mērķis ir ļaut vairākiem abonentiem saņemt paziņojumus, kad notiek konkrēts notikums.

The Paziņojumu sistēma funkcija apzīmē sistēmu, kas sūta paziņojumus, un Abonents funkcija apzīmē paziņojumu saņēmējus.

Paziņojumu sistēmai ir masīvs ar nosaukumu abonenti lai saglabātu abonentus, kuri vēlas saņemt paziņojumus. The abonēt metode ļauj abonentiem reģistrēties, pievienojot sevi abonentu masīvam. The anulēt abonementu metode noņemtu abonentus no masīva.

The paziņot Metode NotificationSystem atkārtojas caur abonentu masīvu un izsauc saņemt paziņojumu katram abonentam, ļaujot viņam apstrādāt paziņojumus.

Abonenta funkcijas gadījumi apzīmē abonentus. Katram abonentam ir metode getNotification, kas nosaka, kā viņš apstrādā saņemtos paziņojumus. Šajā piemērā metode saņemto ziņojumu reģistrē konsolē.

Lai izmantotu novērotāja modeli, izveidojiet NotificationSystem gadījumu. Pēc tam varat izveidot Abonenta gadījumus un pievienot tos paziņojumu sistēmai, izmantojot abonēšanas metodi.

Nosūtot paziņojumu, katram abonentam tiks aktivizēta saņemšanas paziņojuma metode un katra abonenta ziņojums tiks reģistrēts.

Novērotāja modelis nodrošina brīvu savienojumu starp paziņojumu sistēmu un abonentiem, nodrošinot elastību. Šis modelis veicina problēmu nošķiršanu, kas atvieglos uz notikumiem balstītu sistēmu apkopi.

Uzlaboto JavaScript modeļu izmantošana

Šeit ir daži vispārīgi padomi, kā efektīvi izmantot uzlabotos JavaScript modeļus.

• Apsveriet ietekmi uz veiktspēju: uzlaboti modeļi var radīt papildu sarežģītību, kas var ietekmēt veiktspēju. Ņemiet vērā ietekmi uz veiktspēju un optimizēt, ja nepieciešams.
• Izvairieties no pretrakstiem: rūpīgi izprotiet modeļus un izvairieties no pretrakstiem vai to ļaunprātīgas izmantošanas. Izmantojiet modeļus, kur tiem ir jēga, un tie atbilst jūsu lietojumprogrammas prasībām.
• Ievērojiet kodēšanas noteikumus: konsekventi ievērojiet kodēšanas konvencijas, lai saglabātu lasāmību un konsekvenci visā koda bāzē. Izmantojiet jēgpilnus mainīgo un funkciju nosaukumus un sniedziet skaidru dokumentāciju saviem modeļiem.

Esiet piesardzīgs, piemērojot šos modeļus

Moduļu modelis ļauj iekapsulēt un veicina datu privātumu, koda organizēšanu un autonomu moduļu izveidi.

No otras puses, novērotāja modelis atvieglo saziņu starp komponentiem, izveidojot subjekta un abonenta attiecības.

Ieviešot uzlabotos JavaScript modeļus, jums jāapzinās iespējamās nepilnības un bieži pieļautās kļūdas. Izvairieties no pārmērīgas modeļu izmantošanas, kur pastāv vienkāršāki risinājumi, vai neveidojiet pārāk sarežģītu kodu. Regulāri pārskatiet un pārveidojiet savu kodu, lai nodrošinātu tā apkopi.