implementing interfaces in JavaScript with Implement.js

Josh J
Josh j

Follow
Nov 7, 2017 · 5 min read

tässä blogikirjoituksessa esittelen rajapintojen käsitettä ja sitä, miten niistä voi olla hyötyä myös dynaamisissa kielissä. Käytän myös kirjastotyökalua.js tuoda käsite JavaScript, ja näyttää, miten saada joitakin ylimääräisiä apuohjelma pois rajapintoja.

Google määrittelee rajapinnan ”pisteeksi, jossa on kaksi järjestelmää, subjektia, organisaatiota jne. meet and interact”, ja tämä määritelmä pätee ohjelmoinnin rajapintoihin. Ohjelmistokehityksessä rajapinta on rakenne, joka vahvistaa objektin tiettyjä ominaisuuksia — useimmissa kielissä tämä Olio on luokka.

tässä esimerkki rajapinnasta Javassa:

yllä olevassa esimerkissä Car liittymä kuvaa luokkaa, jossa on kaksi menetelmää, joilla ei ole paluutyyppiä ja jotka molemmat ottavat yhden kokonaisluvun argumentin. Kunkin funktion toteutuksen yksityiskohdat jätetään luokan päätettäväksi, minkä vuoksi kummallakaan menetelmällä ei ole runkoa. Varmistaaksemme, että luokka toteuttaa Car liittymän, käytämme implements avainsanaa:

yksinkertainen

rajapinnat Javascriptissä

liitännät eivät ole asia Javascriptissä, eivät oikeastaan muutenkaan. JavaScript on dynaaminen kieli, jossa tyypit vaihdetaan niin usein, että kehittäjä ei ehkä ole edes tajunnut, koska tämän ihmiset väittävät, että ei ole tarvetta lisätä käyttöliittymän ECMAScript standardi, johon JavaScript perustuu.

JavaScript on kuitenkin kasvanut massiivisesti backend-kielenä solmun muodossa.js, ja sen mukana tulee erilaisia vaatimuksia ja erilainen yleisö, joka voi olla eri mieltä. Tämän lisäksi kielestä on nopeasti tulossa etupään työkalu; se on päässyt pisteeseen, jossa monet kehittäjät kirjoittavat suurimman osan HTML: stä sisällä .JS tiedostot muodossa JSX.

kun kieli kasvaa ottamaan enemmän rooleja, on hyödyllistä varmistaa, että yksi tärkeimmistä tietorakenteistamme on se, mitä odotimme sen olevan. Javascriptillä voi olla class avainsana, mutta todellisuudessa kyseessä on vain uninstantioitu konstruktorifunktio, jota kerran kutsutaan pelkäksi objektiksi. Esineet ovat kaikkialla, joten on joskus hyödyllistä varmistaa, että ne vastaavat tiettyä muotoa.

äskettäin töissä löysin tapauksen, jossa kehittäjä odotti API-vastauksen osana palautettua ominaisuutta olevan true, mutta sen sijaan sai "true" aiheuttaen vian. Helppo virhe, joka olisi voitu myös välttää, jos meillä olisi ollut käyttöliittymä.

mutta odota, siellä on lisää!

käyttöliittymiä voitiin käyttää muutamin pienin muutoksin objektien muokkaamiseen. Kuvittele toteuttaa ”tiukka” käyttöliittymä, jossa ei ole ominaisuuksia ulkopuolella rajapinnan sallitaan, voisimme poistaa tai nimetä nämä ominaisuudet, tai jopa heittää virhe, jos kohtaamme niitä.

joten nyt meillä on käyttöliittymä, joka kertoo, milloin meiltä puuttuu tiettyjä ominaisuuksia, mutta myös milloin meillä on odottamattomia ominaisuuksia, tai jos ominaisuuksien tyypit eivät ole sitä, mitä odotamme. Tämä lisää muita mahdollisuuksia, esimerkiksi refactoring vastauksen API ja lisäämällä että ylimääräinen kerros turvallisuutta päälle käyttöliittymän standardikäyttäytymistä. Rajapintoja voisi käyttää myös yksikkötesteissä, jos meillä on niitä heittovirheitä.

toteuta.js

toteuttaa.js on kirjasto, joka pyrkii tuomaan rajapintoja Javascriptiin. Idea on yksinkertainen: määrittele käyttöliittymä, määrittele sen ominaisuuksien tyypit ja varmista sen avulla, että objekti on sitä, mitä odotat sen olevan.

Setup

Asenna paketti ensin:

npm install implement-js

seuraavaksi luo a .js file and import implementInterface, ja type:

ensimmäinen rajapintamme

luodaksesi käyttöliittymän, soita Interface ja syötä merkkijono käyttöliittymän nimenä — se ei ole suositeltavaa, mutta jos jätät nimen pois, syntyy yksilöllinen tunnus. Tämä palauttaa funktion, joka hyväksyy objektin, jossa kaikki ominaisuudet ovat type objektit, toinen argumentti voidaan myös ohittaa valinnoilla näyttää varoituksia, heittää virheitä, poistaa tai nimetä uudelleen ominaisuuksia, varmistaa vain käyttöliittymän ominaisuudet ovat läsnä, tai laajentaa olemassa olevaa Interface.

tässä on liittymä, joka kuvaa autoa:

sillä on seats ominaisuus, jonka pitäisi olla tyyppinumero, matkustajaryhmä, joka sisältää kohteita, joiden on itse toteutettava Passenger liitäntä, ja se sisältää beep ominaisuus, jonka tulisi olla funktio. error ja strict vaihtoehdot on asetettu todeksi, eli virheet heitetään, kun rajapinnan ominaisuus puuttuu ja myös kun rajapintaan kuulumaton ominaisuus löytyy.

Implementing our interface

Now we want to implement our interface, in a simple example we will create an object using an object literal and see if we able to implement our interface.

ensin luodaan Ford objekti, sitten yritetään toteuttaa se meidän Car interface:

kuten näemme kommentti yllä, tämä heittää virhe. Muistellaanpa Car rajapinta:

voidaan nähdä, että vaikka kaikki ominaisuudet ovat olemassa, tiukka tila on myös tosi, eli lisäominaisuus fuelType aiheuttaa virheen heittämisen. Lisäksi, vaikka meillä on passengers ominaisuus, se ei ole joukko.

jotta rajapinta voidaan toteuttaa oikein, poistetaan fuelType ja muutetaan passengers niin, että se on joukko, joka sisältää olioita, jotka toteuttavat Passenger rajapinta:

”mutta JavaScript ei ole Oliopainotteinen kieli!”

on totta, että vaikka rajapinnat liitetään tyypillisesti oliokeskeisiin kieliin ja JavaScript on moniparadigmaattinen kieli, joka käyttää prototyyppistä periytymistä, rajapinnat voivat silti olla erittäin hyödyllisiä.

esimerkiksi käyttämällä implement-js voimme helposti refaktoida API-vastauksen varmistaen, ettei se ole poikennut odotuksistamme. Tässä esimerkki, jota käytetään yhdessä redux-thunk:

ensin määritellään TwitterUser liitäntä, joka laajentaa User liitäntä, objektina twitterId ja twitterUsername ominaisuudet. trim on totta, että hylkäämme kaikki ominaisuudet, joita ei ole kuvattu TwitterUser – rajapinnassa. Koska API palauttaa ominaisuudet epäystävällisessä muodossa, olemme nimenneet ominaisuudet twitter_username ja twitter_id camelcase-versioiksi itsestään.

seuraavaksi määrittelemme async-toiminnon redux-thunk, toiminto laukaisee API-puhelun, ja käytämme TwitterUser – käyttöliittymää hylkäämään ominaisuuksia, joita emme halua, ja varmistamaan, että se toteuttaa odotetut ominaisuudet oikeilla tyypeillä. Jos haluat pitää toiminnantekijät puhtaina (er) tai et käytä redux-thunk, voit tarkistaa käyttöliittymän sisällä twitterService.getUser ja palauttaa tuloksen.

Huomautus: liittymän laajentamisessa vaihtoehdot eivät periydy

yksikkötestit ovat myös sopiva paikka rajapintojen käyttöön:

yhteenvetona

olemme nähneet, miten rajapinnat voivat olla hyödyllisiä Javascriptissä: vaikka kyseessä on erittäin dynaaminen kieli, kohteen muodon tarkistaminen ja sen ominaisuuksien tietynlainen tietotyyppi antaa meille ylimääräisen turvallisuuskerroksen, josta muuten jäisimme paitsi. Kehittämällä rajapintojen konseptia ja käyttämällä implement-js olemme myös saaneet lisäedun lisäturvan päälle.

Posted on

Vastaa

Sähköpostiosoitettasi ei julkaista.