Sådan udføres CRUD-operationer ved hjælp af vanille JavaScript

I dag er der en række JavaScript-rammer omkring såsom React, Angular, Vue og så videre. De tilbyder alle en enkel og nem tilgang til udvikling af webapplikationer, især SPA'er.

Imidlertid har mange JavaScript-studerende en tendens til at begynde at lære disse rammer og ved lidt om, hvordan man udvikler lignende apps i vanilje JavaScript.

En af de mest basale operationer i enhver applikation er CRUD (står for Opret, læse, opdatere, slette). Dette er noget, vi skal opnå i dag. Vi tager et grundlæggende og godt gammelt eksempel: en Todo-app.

Selvom vanille JavaScript vil blive brugt til denne tutorial, bruger vi ES6-syntaks i stedet for almindelig gammel JavaScript-syntaks. For at opnå det, bruger vi babel-overføreren til at konvertere ES6 / ES7 til ES5, og vi bruger webpack som et byggeværktøj.

Jeg antager, at du allerede har den nyeste version af node.js på din computer. Opsætning af vores miljø vil tage lidt ekstra tid, så det er ikke nødvendigt at gå i detaljer. Klon blot min kedelpladekode herfra (//github.com/zafar-saleem/hut) og kør "npm install" for at installere alle afhængigheder.

De nye filer går ind i / src-mappen. Så lav en ny fil kaldet Todo.js inde i / src / scripts / mappen og skriv nedenstående kode i den fil.

Som du kan se i ovenstående kode opretter vi en klasse Todo, og inde i den klasse skriver vi en konstruktorfunktion. Selvom JavaScript ikke har klasser som standard, har ES6 klasser (hvilket i virkeligheden er syntaktisk sukker oven på JavaScript-prototypen).

Når vi nu opretter en ny forekomst af denne klasse ved hjælp af det nye nøgleord, kaldes konstruktorfunktionen automatisk. Det er her, vi vil tilføje nogle attributter til Todo-klassen, som vi kan få adgang til i hele denne klasse ved hjælp af nøgleordet dette .

Nu hvor vi har ovenstående kode, skal du fortsætte og importere ovenstående fil i filen src / index.js og oprette en ny forekomst af denne klasse som nedenfor.

Nu har vi nogle grundlæggende kode i Todo.js. Vi har også brug for nogle grundlæggende html-koder. Skriv nedenstående kode i index.html-filen i rodmappen.

Nu hvor vi har den grundlæggende html-kode, lad os gå tilbage til Todo.js og få henvisningen til vores '.list-item' container. Skriv nedenstående kode inde i konstruktøren.

Efter at have fået henvisningen til ".list-item" -elementet, ringer jeg til gengivelsesfunktionen for at gengive en liste over emner på skærmen. Denne funktion findes endnu ikke, så vi skriver den næste.

Men inden vi skriver gengivelsesfunktionen, har vi brug for nogle mock-data, som vi skal gengive. Så med henblik på denne vejledning skal vi bruge en række objekter. Skriv nedenstående kode øverst i Todo.js-filen.

Nu tilbage til gengivelsesfunktionen: nedenfor er hele gengivelsesfunktionen.

I denne funktion sørger vi for, at denne.list-container er tom, det vil sige, at vi ikke ønsker, at nogen vare skal føjes til eksisterende varer. Den første linje gør containeren simpelthen tom, før den tilføjer nye varer.

Dernæst sløjfer vi mockData-arrayet, som vi oprettede øverst i Todo.js-filen ved hjælp af forEach-funktionen. Inde i forEach tilbagekaldsfunktionen opretter vi først nogle DOM-elementer ved at kalde createDomElements (item.id); funktion, og vi sender det aktuelle artikels id til denne funktion. Jeg skriver denne funktion næste gang, men lad os færdig med at skrive denne funktion, inden vi kommer dertil.

Når det opretter det nye DOM-element (li-elementet) med underordnede elementer (knapper i dette tilfælde), tilføjer det det li-element i Todo-klassen som en attribut ved hjælp af "dette" nøgleordet. Nu kan vi få adgang til dette li-element i hele Todo-klassen, så jeg får adgang til det li-element og tilføjer titlen ved hjælp af funktionen insertAdjacentHTML ().

Dernæst kontrollerer jeg, om den aktuelle vare er afsluttet eller færdig. Hvis det er tilfældet, tilføjer jeg en klasse til det aktuelle li-element, der tilføjer en gennemgangstil på elementet.

Og til sidst tilføjer jeg dette li-element til this.list.

Lad os nu skrive funktionen createDomElements (), som er nedenfor.

Denne funktion ser ud til at have masser af kode, men den er let at forstå. Jeg opretter simpelthen li-elementer, sletter, redigerer og fuldfører knapper. Derefter tilføjer jeg nogle klasser til alle disse knapper og indstiller data-id-attributten og tildeler det aktuelle artikels id, som vi har sendt som et argument fra gengivelsesfunktionen. Derefter satte jeg tekst på disse knapper (Edit, Delete and Complete) ved hjælp af "innerHTML".

Endelig tilføjer jeg disse knapper til li-elementet, som jeg senere får adgang til i gengivelsesfunktionen for at udføre yderligere handlinger.

Nu hvor vi har den grundlæggende struktur, hvis du kører npm run dev og går til localhost: 2770 i browseren, skal du have nedenstående emner, et indtastningsfelt og en knap og fire emner med deres respektive knapper.

Indtil nu skal du have “R” -delen af ​​CRUD - jeg læser alle elementerne fra mockData og placerer dem på skærmen.

Nu hvor Læs-delen er færdig, er det tid til at begynde at arbejde på C-delen af ​​CRUD. Skriv en funktion kaldet Opret og tilføj nedenstående kode.

Opret-funktionen er ret selvforklarende: alt hvad den gør er at få værdien fra tekstfeltet. Det opretter et newItem-objekt med attributter-id, titel, færdig og dato.

Til sidst skal du skubbe det nye produkt ind i mockData-arrayet og tømme tekstfeltet og kalde gengivelsesfunktionen for at gengive alle elementerne med det nyoprettede element.

Prøv nu i din browser. Læg tekst i tekstfeltet. Tryk på knappen Tilføj - men du kan ikke se nogen ændring. Det forventes, fordi der stadig er en sidste del af dette. Du skal blot tilføje en begivenhedslytter til "tilføj" -knappen inde i konstruktøren og kalde oprettelsesfunktionen som nedenfor:

Prøv det nu i din browser og voilà. Du har det nye element nederst på listen.

To dele af CRUD-operationerne er afsluttet. Den næste er D-delen, som er Slet.

For at slette et element, lad os skrive en fjern (slet er et reserveret nøgleord i JavaScript og derfor kaldte jeg det fjern) -funktionen nedenfor.

Denne funktion er også ret enkel: hent først id'et fra elementet delete-knap, som blev tilføjet i createDomElements-funktionen ved hjælp af data-id-attributten. Filtrer gennem mockData, og læg en afkrydsningsfelt på det aktuelle artikels id med slet-knapens id. Denne check returnerer simpelthen alle varer undtagen den vare, denne check returnerer sandt.

Efter denne handling skal du gengive alle elementerne igen ved at kalde gengivelsesfunktionen i bunden.

Ting ser godt ud, men vent et øjeblik: denne funktion skal udløses ved at kalde på slet-knappen. Som du måske husker, blev denne knap tilføjet dynamisk i funktionen "createDomElements". Det er lidt vanskeligt at tilføje begivenheder til sådanne elementer. Da disse emner ikke var til stede, da DOM blev indlæst og blev tilføjet senere, føjes begivenhedslytteren direkte til knapperne for sletning, opdatering og komplet ikke.

For at få dette til at ske, skal du tilføje begivenhedslytteren til dokumentobjektet og finde den bestemte knap ("slet" i dette tilfælde) for at udføre sletning eller fjernelse.

For at kalde fjern bruges selvordet. Inde i tilbagekaldsfunktionen mister dette nøgleord sin reference til Todo-klassen. Af den grund skal du oprette en ny variabel kaldet selv og tildele "dette" nøgleordet til den øverst i konstruktionen.

Inde i tilbagekaldsfunktionen kontrollerer jeg, om klikelementet har en klasse 'btn-delete' - det vil sige, er det en sletningsknap? Derefter skal du blot fjerne fjernelsesfunktionen og sende begivenheden som en parameter. Jeg bruger dette inde i fjernelsesfunktionen for at få id'et til det aktuelle klikede element til at udføre sletteoperationen.

Opdateringsdelen er lidt kompliceret. Den består af to funktioner. Den første er at gengive redigeringsformularen, som har et tekstfelt og opdateringsknap. Det andet er at opdatere den funktion, der udfører opdateringsfunktionen.

Alt ovenstående kode gør er at tilføje og fjerne CSS-klasser for at vise og skjule redigeringsformularen, som allerede findes i DOM med redigerings-popup-klassen. Få id'et fra redigeringsknappen, og placer det på opdateringsknappen. Iterer gennem mockData, og kontroller for det aktuelle element ved hjælp af dets id. Sæt titlen på elementet fra mockData i tekstfeltet for at redigere det.

For at udløse denne funktion skal du følge den samme logik for sletning for at tilføje en begivenhedslytter, som denne:

Nu er det tid til at skrive opdateringsfunktionen. Følg koden nedenfor:

De første 2 linjer i denne funktion er at hente elementets id og værdi fra tekstfeltet og placere dem i deres respektive variabler. Kort derefter gennem mockData, og placer en check for at finde det element, der skal opdateres baseret på id'et. Når elementet er fundet, skal du erstatte titlen med en ny titel "itemTobeUpdate". Til sidst returnerer den opdaterede vare fra kortet.

Når denne handling er udført, skal du skjule redigerings-popup-formularen ved at tilføje og fjerne de respektive CSS-klasser. Gendan derefter mockData igen ved at kalde gengivelsesfunktionen.

For at udløse denne funktion skal du tilføje nedenstående kode inde i konstruktøren.

Nu er alle CRUD-operationer afsluttet. Der er et sidste trin, som ikke er en del af CRUD, men er en del af Todo-appen. Det vil sige for at markere varer som færdige. Nedenstående funktion opnår dette.

Igen skal du følge det samme mønster som resten af ​​funktionerne:

  • få id'et fra knappen data-id attribut
  • kortlæg gennem mockData, og find den relevante vare, og indstil dens udførte egenskab til sand og returner den vare
  • endelig gengiv mockData igen ved at kalde gengivelsesfunktionen.

Brug igen den samme logik til at udløse sletningsfunktionen, og tilføj nedenstående kode inde i konstruktøren for at indstille opgaver som afsluttet.

Her er nogle grundlæggende CSS, som jeg brugte til denne vejledning - noget fancy.

Det er det til vanille JavaScript CRUD-operationer! Det næste trin er at skjule dette i en Angular and React-app for at se forskellen og finde ud af, hvor praktiske sådanne rammer er.

For at få koden og det komplette projekt skal du klone under lageret:

//github.com/zafar-saleem/todo