kirjoitat JavaScriptiä ja huomaat yhtäkkiä kauhulla ja kauhulla kirjoittaneesi valtavan funktion. Niin on käynyt parhaimmillekin. Nyt tulee lähes pysäyttämätön halu erottaa toiminto pienemmistä palasista.
Isot funktiot tarkoittavat paljon vastuuta yhdessä paikassa ja mahdollisesti myös koodinhajua, joten se on sinänsä hyvä idea. Funktio halutaan kuitenkin hajottaa niin, ettei se menetä merkitystään tai asiayhteyttään. Voit tehdä sen, sinun täytyy ajatella menetelmä ketjuttaminen-kutsutaan myös funktio ketjuttaminen. Tämä artikkeli selittää, mitä tarkoitan tällä.
Edeltävät opinnot
ennen kuin aloitamme, tässä muutamia JavaScript-käsitteitä, joihin sinun on jo syytä perehtyä:
- Arrow-funktiot
- Array-menetelmät
- Async-funktiot
kokeneimmilla kehittäjillä on jonkin verran kokemusta Array – menetelmistä, kuten kartta -, pelkistys-ja suodatusmenetelmistä. Olet varmaan jo törmännyt tällaiseen.:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: menetelmä ketjuttaminen tapahtuu, kun haluat soittaa useita toimintoja käyttäen samaa objektia ja sen viite. Yllä olevassa esimerkissä array-menetelmä map palauttaa arvon Array, jolla on valtava määrä menetelmiä.
koska palautat viitteen, joka osoittaa Array, saat käyttöösi kaikki Arrayominaisuudet. Se on sama periaate, jota käytät omassa menetelmässäsi ketjutuksessa.
parempi ymmärrys tästä
En kata kaikkia this nyansseja, mutta on hyvä ymmärtää, miksi this toimii niin kuin toimii. Ei ole väliä kuinka kokenut olet, avainsana tämä voi olla vaikea ymmärtää. Se on usein syy, miksi asiat eivät toimi niin kuin odotat niiden 😅.
tässä sen ydin: this osoittaa aina nykyisen scope tai instanssin, josta sitä kutsutaan. Esimerkki:
const dog = { is: null, log: () => console.log(this.is), bark() { this.is = "woofing"; this.log(); return this; }, walk() { this.is = "walking"; this.log(); return this; }, eat() { this.is = "eating"; this.log(); return this; }};dog .bark() .eat() .walk();kun kirjoitat funktion kuten tämä (ei sanaleikki tarkoitettu), saatat haluta ketjuttaa menetelmiä, jotka liittyvät objekti. Kohteella dog on 3 menetelmää: walk, bark ja eat. Joka kerta, kun kutsun jotain sen toimintoja, konsolin pitäisi näyttää esitys siitä, mitä koira tekee juuri sillä hetkellä.
mutta siinä on ongelma. Jos suoritat sen selaimessa, huomaat, ettei se toimi odotetulla tavalla. Tämä johtuu siitä, että nuolifunktiot käyttävät leksikaalista rajausta, jossa this viittaa sen ympäröivään laajuuteen – tässä tapauksessa window, ei itse kohteeseen.
tämän ratkaisemiseksi tulisi käyttää anonyymiä funktiokutsua edustamaan log ominaisuutta:
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); }nyt koiran this scope tulee olemaan käytettävissä funktion sisällä.
käyttämällä luokkaa
voit saavuttaa saman tuloksen käyttämällä luokkia:
class Dog { is = null; log() { console.log(this.is); } bark() { this.is = "woofing"; this.log(); return this; } walk() { this.is = "walking"; this.log(); return this; } eat() { this.is = "eating"; this.log(); return this; }}const dog = new Dog();dog .bark() .eat() .walk();käyttämällä prototyyppiä
jos sinun on käytettävä prototyyppiä, tee se näin:
function Dog() {}Dog.prototype.is = null;Dog.prototype.log = function() { console.log(this.is);};Dog.prototype.bark = function() { this.is = "woofing"; this.log(); return this;};Dog.prototype.walk = function() { this.is = "walking"; this.log(); return this;};Dog.prototype.eat = function() { this.is = "eating"; this.log(); return this;};const dog = new Dog();dog .bark() .eat() .walk();Entä Async-Funktiot?
async funktiot ovat synteettistä sokeria lupauksille ja generaattoreille. Kun julistaa async funktion, tietää sen palauttavan lupauksen. Sen takia sinulla on myös pääsy kaikkiin lupauksen keinoihin.
const requests = { user: null, action: null, log(something) { console.log(this); }, async getUser() { this.user = await new Promise(resolve => { setTimeout(() => { resolve("Douglas Pires"); }, 1000); }); this.log("user"); return this; }, async registerAction() { this.action = await new Promise(resolve => { setTimeout(() => { resolve("programming stuff"); }, 1000); }); this.log("action"); return this; }};requests.getUser().then(() => requests.registerAction());lupauksia ei kuitenkaan kannata kahlita yhteen. Suosittelen käyttämään await hakusanoja sen sijaan. Se on helpompaa ja se tekee koodin paljon luettavampi.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programmingja samoihin kiinteistöihin pääset täältä:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programmingjohtopäätöksenä
funktioiden ketjuttaminen on kätevää, kun objektia joutuu manipuloimaan. Se on myös käytännöllinen tapa parantaa koodin luettavuutta. Kuitenkin, kuten olet nähnyt edellä, sinun pitäisi ketjuttaa viisaasti.
tässä artikkelissa on puhuttu this, luokista, prototyypeistä ja async funktioista JavaScript-menetelmän ketjuttamisen yhteydessä. Toivottavasti olet poiminut hyödyllisiä vinkkejä ja olet nyt paremmin perillä aiheesta. Löydät my repository kaikki koodi JavaScript method ketjutus täällä. Nähdään seuraavassa viestissä!
Nautitko tämän artikkelin lukemisesta? Voit vapaasti jakaa sosiaalisessa mediassa käyttämällä alla olevia painikkeita. Vaihtoehtoisesti olen myös kirjoittanut siitä, miten voit rakentaa väripaletti generaattori nuxt ja Vuetify. Mene katsomaan!
