Implementere grensesnitt I JavaScript Med Implementere.js

Josh J

7 November, 2017 · 5 min lese

i dette blogginnlegget vil jeg introdusere begrepet grensesnitt og hvordan de kan være nyttige selv i dynamiske språk. Jeg vil også bruke biblioteket Implementere.js å bringe konseptet Til JavaScript, og vise deg hvordan du får litt ekstra verktøy ut av grensesnitt.

Google definerer et grensesnitt som » et punkt der to systemer, fag, organisasjoner, etc. meet and interact, » og denne definisjonen gjelder for grensesnitt i programmering. I programvareutvikling er et grensesnitt en struktur som håndhever bestemte egenskaper på et objekt — på de fleste språk er dette objektet en klasse.

her er et eksempel på et grensesnitt I Java:

i eksemplet ovenfor beskriver Car grensesnittet en klasse som har to metoder uten returtype, som begge tar et enkelt heltallsargument. Detaljer om implementeringen av hver funksjon er overlatt til klassen, derfor har metodene begge ingen kropp. For å sikre at en klasse implementererCar grensesnitt, bruker viimplements søkeord:

Enkel

Grensesnitt I JavaScript

Grensesnitt er ikke Noe I JavaScript, egentlig ikke uansett. JavaScript er et dynamisk språk, en hvor typer endres så ofte at utvikleren kanskje ikke engang har innsett, på grunn av dette hevder folk at det ikke er behov for et grensesnitt som skal legges Til ECMAScript-standarden Som JavaScript er basert på.

JavaScript har imidlertid vokst massivt som et backend-språk i Form Av Node.js, og med det kommer forskjellige krav og en annen mengde som kan ha en annen mening. For å legge til dette, blir språket raskt front-end-verktøyet; det har kommet til det punktet hvor mange utviklere vil skrive det store flertallet av DERES HTML inni .js-filer i form AV JSX.Så ettersom språket vokser for å ta på seg flere roller, er det nyttig å sørge for at en av våre mest avgjørende datastrukturer er det vi forventet at det skulle være. JavaScript kan haclass søkeord, men i sannhet er dette bare en avinstallert konstruktørfunksjon, og en gang kalt det er bare et objekt. Objekter er allestedsnærværende, så det er noen ganger gunstig å sikre at de samsvarer med en bestemt form.

Nylig på jobb fant jeg et tilfelle der en utvikler ventet en eiendom returnert som en DEL AV ET API-svar for å være true men i stedet fikk "true", forårsaker en feil. En enkel feil, og en som også kunne vært unngått hvis vi hadde et grensesnitt.

men vent, det er mer!

Grensesnitt, med noen få mindre modifikasjoner, kan brukes til å omforme objekter. Tenk deg å implementere et «strengt» grensesnitt, der ingen egenskaper utenfor grensesnittet er tillatt, vi kan slette eller omdøpe disse egenskapene, eller til og med kaste en feil hvis vi støter på dem.

så nå har vi et grensesnitt som vil fortelle oss når vi mangler visse egenskaper, men også når vi har uventede egenskaper, eller hvis eiendommens typer ikke er det vi forventer. Dette legger til andre muligheter, for eksempel refactoring et SVAR fra EN API mens du legger til det ekstra sikkerhetslaget på toppen av grensesnittets standardadferd. Vi kan også bruke grensesnitt i enhetstester hvis vi har dem kaste feil.

Implementere.Js

Implementere.js er et bibliotek som forsøker å bringe grensesnitt Til JavaScript. Ideen er enkel: definer et grensesnitt, definer typene av egenskapene, og bruk det for å sikre at et objekt er det du forventer at det skal være.

Oppsett

installer først pakken:

npm install implement-js

neste, opprett en .js — fil og import implementInterface og type:

vårt første grensesnitt

for å opprette et grensesnitt, ring bare Interface og send inn en streng som navnet på grensesnittet ditt-det anbefales ikke, men hvis du utelater navnet, genereres en unik id. Dette returnerer en funksjon som godtar et objekt der egenskapene er alletype objekter, et annet argument kan også sendes med alternativer for å vise advarsler, kaste feil, slette eller gi nytt navn til egenskaper, sikre at bare egenskapene til grensesnittet er til stede, eller for å utvide en eksisterende Interface.

Her er et grensesnitt som beskriver en bil:

den har en seats egenskap som skal være av typen nummer, en passasjer matrise som inneholder objekter som selv må implementere Passenger grensesnitt, og den inneholder en beep egenskap, som skal være en funksjon. Alternativeneerror ogstrict er satt til true, noe som betyr at feil vil bli kastet når en egenskap av grensesnittet mangler, og også når en egenskap ikke på grensesnittet er funnet.

Implementere vårt grensesnitt

nå ønsker Vi å implementere vårt grensesnitt, i et enkelt eksempel vil vi lage et objekt ved hjelp av et objekt bokstavelig og se om vi er i stand til å implementere vårt grensesnitt.

først lager vi et Ford objekt, så vil vi forsøke å implementere det mot vår Car grensesnitt:

som vi ser fra kommentaren ovenfor, dette kaster En Feil. La oss se tilbake på vårtCar grensesnitt:

vi kan se at mens alle egenskapene er til stede, er streng modus også sant, noe som betyr at tilleggsegenskapen fuelType forårsaker en feil å bli kastet. I tillegg, selv om vi har en passengers – egenskap, er det ikke en matrise.

for å kunne implementere grensesnittet, fjerner vi fuelType og endrer verdien av passengers slik at det er en matrise som inneholder objekter som implementererPassenger grensesnitt:

» Men JavaScript er ikke Et Objektorientert språk!»

det er sant at mens grensesnitt vanligvis er knyttet til objektorienterte språk, og JavaScript er et multi-paradigmespråk som bruker prototypisk arv, kan grensesnitt fortsatt være svært nyttig.

for eksempel, ved å bruke implement-js kan vi enkelt refactor ET API-svar samtidig som vi sikrer at DET ikke har avviket fra det vi forventer. Her er et eksempel brukt i forbindelse med redux-thunk:

først definerer viTwitterUsergrensesnitt, som utviderUsergrensesnitt, som et objekt medtwitterIdogtwitterUsernameegenskaper.trimer sant betyr at vi vil forkaste noen egenskaper som ikke er beskrevet påTwitterUsergrensesnitt. SIDEN VÅR API returnerer egenskaper i et uvennlig format, har vi omdøpt egenskapene fratwitter_usernameogtwitter_idtil camelcase-versjoner av seg selv.

deretter definerer vi en asynkron handling medredux-thunk, handlingen utløser ET API-kall, og vi bruker vårTwitterUser grensesnitt for å forkaste egenskaper vi ikke vil ha, og for å sikre at den implementerer egenskapene vi forventer, med de riktige typene. Hvis du foretrekker å holde actionskaperne rene (er) eller ikke bruker redux-thunk, vil du kanskje sjekke grensesnittet inni twitterService.getUser og returnere resultatet.

Merk: når utvide et grensesnitt alternativene ikke er arvet

Enhet tester er også et egnet sted å bruke grensesnitt:

i sammendrag

Vi har sett hvordan grensesnitt kan være nyttige I JavaScript: selv om det er et svært dynamisk språk, kontrollerer formen på et objekt og at egenskapene er en bestemt datatype, gir oss et ekstra lag med sikkerhet vi ellers ville gå glipp av. Ved å bygge på begrepet grensesnitt og bruke implement-js har vi også fått ekstra verktøy på toppen av den ekstra sikkerheten.

Posted on

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.