Miten JavaScript-funktio kääritään oikein

, Author

Javaskriptifunktioiden käärimisen avulla voit lisätä yhteistä logiikkaa funktioihin, joita et hallitse, kuten natiivit ja ulkoiset funktiot. Monet JavaScript-kirjastot, kuten TrackJS-agentit, tarvitsevat ulkoisten funktioiden käärimistä tehdäkseen työnsä. Kääreiden lisääminen antaa meille mahdollisuuden kuunnella telemetriaa, virheitä ja lokitietoja koodissasi ilman, että sinun tarvitsee kutsua API:tamme eksplisiittisesti.

Olet ehkä halukas käärimään funktion lisätäksesi instrumentointia tai väliaikaista virheenkorjauslogiikkaa. Voit myös muuttaa ulkoisen kirjaston käyttäytymistä tarvitsematta muuttaa lähdekoodia.

Basic Function Wrapping

Koska JavaScript on ihmeellisen dynaaminen, voimme paketoida funktion yksinkertaisesti määrittelemällä funktion uudelleen jollain uudella. Mieti esimerkiksi tätä myFunction:

Tässä triviaalissa esimerkissä käärimme alkuperäisen myFunction:n ja lisäsimme siihen lokiviestin. Mutta on paljon asioita, joita emme käsitelleet:

  • Miten välitämme funktion argumentit läpi?
  • Miten ylläpidämme laajuutta (this:n arvoa)?
  • Miten saamme paluuarvon?
  • Mitä jos tapahtuu virhe?

Käsitellaksemme näitä asioita, meidän on oltava hieman fiksumpia kietomisessamme.

Huomaa, että tässä esimerkissä emme vain kutsu funktiota, vaan call-amme sitä this-arvolla ja argumenteilla a, b ja c. Arvo this välitetään siitä, mihin kiinnität käärityn funktiosi, tässä esimerkissä Window.

Ympäröimme myös koko funktion try/catch-lohkolla, jotta voimme kutsua mukautettua logiikkaa virhetilanteessa, heittää sen uudelleen tai palauttaa oletusarvon.

Kehittynyt funktioiden kääriminen

Peruskäärimisesimerkki toimii 90 % ajasta, mutta jos rakennat jaettuja kirjastoja, kuten TrackJS-agentteja, se ei riitä! Jotta voimme kääriä funktiomme ammattilaisen tavoin, on olemassa joitakin ääritapauksia, jotka meidän pitäisi käsitellä:

  • Mitä tapahtuu ilmoittamattomista tai tuntemattomista argumenteista?
  • Miten sovitamme funktiosignatuurin yhteen?
  • Miten peilaamme funktioiden ominaisuuksia?

Tässä on 3 hienovaraista, mutta tärkeää muutosta. Ensinnäkin (#1), nimesimme funktion. Se tuntuu turhalta, mutta käyttäjäkoodi voi tarkistaa function.name:n arvon, joten on tärkeää säilyttää nimi käärittäessä.

Toinen muutos (#2) on siinä, miten kutsuimme käärittyä funktiota, käyttämällä apply:aa call:n sijaan. Näin voimme välittää läpi arguments-olion, joka on matriisimainen objekti kaikista funktiolle ajonaikana välitetyistä argumenteista. Näin voimme tukea funktioita, joilla voi olla määrittelemätön tai muuttuva määrä argumentteja.

apply:n avulla emme tarvitse funktion allekirjoituksessa määriteltyjä argumentteja a, b ja c. Mutta jatkamalla samojen argumenttien ilmoittamista kuin alkuperäisessä funktiossa, säilytämme funktion ariteetin. Toisin sanoen Function.length palauttaa allekirjoituksessa määriteltyjen argumenttien määrän, ja tämä peilaa alkuperäistä funktiota.

Viimeinen muutos (#3) kopioi kaikki käyttäjän määrittelemät ominaisuudet alkuperäisestä funktiosta kääreeseemme.

RAJOITUKSET

Tämä kääre on perinpohjainen, mutta JavaScriptiä käytettäessä on aina rajoituksia. Erityisesti on vaikeaa paketoida oikein funktio, jolla on epästandardi prototyyppi, kuten objektin konstruktori. Tämä käyttötapaus on parempi ratkaista periytymisellä.

Yleisesti funktion prototyypin muuttaminen on mahdollista, mutta se ei ole hyvä idea. Prototyyppien manipuloinnilla on vakavia suorituskykyvaikutuksia ja tahattomia sivuvaikutuksia.

Kunnioita ympäristöä

Funktion kääriminen antaa paljon valtaa instrumentoida ja manipuloida JavaScript-ympäristöä. Sinulla on vastuu käyttää tätä valtaa viisaasti. Jos rakennat funktiokääreitä, muista kunnioittaa käyttäjää ja ympäristöä, jossa toimit. Käytössä voi olla muitakin kääreitä, tapahtumiin liitettyjä kuuntelijoita ja funktioiden API-rajapintoihin kohdistuvia odotuksia. Ole varovainen äläkä riko ulkoista koodia.

Vastaa

Sähköpostiosoitettasi ei julkaista.