du skriver JavaScript og plutselig innser med horror og frykt at du har skrevet en stor funksjon. Det har skjedd med de beste av oss. Nå kommer den nesten ustoppelige trangen til å skille funksjonen i mindre stykker.
Store funksjoner betyr mye ansvar på ett sted og muligens kode lukt også, så det er en god ide i seg selv. Men du vil bryte opp funksjonen på en slik måte at den ikke mister sin mening eller kontekst. For å gjøre det, må du tenke metode kjeding – også kalt funksjon kjeding. Denne artikkelen vil forklare hva jeg mener med det.
Forutsetninger
Før vi kommer i gang, her er Noen JavaScript-konsepter som du allerede trenger å være kjent med:
- Arrow funksjoner
- Array metoder
- Async funksjoner
de fleste erfarne utviklere vil ha litt erfaring med Array metoder, for eksempel kart, redusere og filter. Du har sikkert allerede kommet over noe slikt:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: Metode kjeding skjer når du vil ringe flere funksjoner ved hjelp av samme objekt og referanse. I eksemplet ovenfor returnerer matrisemetoden map en Array, som har et formidabelt antall metoder.
fordi du returnerer en referanse som peker til en Array, har du tilgang til alle egenskapene til Array. Det er det samme prinsippet som du bruker for din egen metode kjeding.
Bedre Forståelse av dette
jeg vil ikke dekke alle nyanser av this, men det er godt å forstå hvorfor this fungerer slik det gjør. Uansett hvor erfaren du er, kan søkeordet dette være vanskelig å forstå. Det er ofte grunnen til at ting ikke fungerer slik du forventer at de skal 😅.
Her er kjernen i det: this vil alltid peke på gjeldende scope eller forekomst fra der den heter. Et eksempel:
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();Når du skriver en funksjon som dette (ingen ordspill ment), vil du kanskje kjede metoder som er relatert til objektet. Objektet dog har 3 metoder: walk, bark og eat. Hver gang jeg ringer noen av funksjonene, bør en konsoll vise representasjonen av hva hunden gjør i det nøyaktige øyeblikket.
Men det er et problem med det. Hvis du kjører det i nettleseren, vil du innse at det ikke fungerer som forventet. Det er fordi pilfunksjoner bruker leksikalsk omfang, der this refererer til det omkringliggende omfanget-i dette tilfellet window, ikke selve objektet.
for å løse det, bør vi bruke et anonymt funksjonskall for å representere egenskapen log :
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); }nå vil hundens this omfang være tilgjengelig inne i funksjonen.
Bruke Klasse
du kan oppnå samme resultat ved hjelp av klasser:
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();Bruk Prototype
hvis du må bruke prototype, gjør du det på denne måten:
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();Hva Med Asynkrone Funksjoner?
async funksjoner er syntetisk sukker for løfter og generatorer. Når du erklærer en async – funksjon, vet du at den vil returnere et løfte. På grunn av det, vil du også ha tilgang til alle metoder for løftet.
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()); det er imidlertid ikke en god ide å kjede en rekke løfter sammen. Jeg anbefaler å bruke en haug med await søkeord i stedet. Det er enklere, og det vil gjøre koden din mye mer lesbar.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programmingOg du har tilgang til de samme egenskapene her:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programmingKonklusjon
Kjedefunksjoner kommer til nytte når du må manipulere et objekt. Det er også en praktisk måte å forbedre lesbarheten til koden din. Men som du har sett ovenfor, bør du kjede klokt.
i denne artikkelen har vi snakket om this, klasser, prototyper og async funksjoner i Sammenheng Med JavaScript – metodekobling. Jeg håper du har plukket opp noen nyttige tips og er nå bedre informert om emnet. Du kan finne depotet mitt med all kode på JavaScript-metodekobling her. Se deg i neste innlegg!
Likte du å lese denne artikkelen? Føl deg fri til å dele på sosiale medier ved hjelp av knappene nedenfor. Alternativt har jeg også skrevet om hvordan du kan bygge en fargepalettgenerator ved Hjelp Av Nuxt og Vuetify. Gå sjekk det ut!
