Stai scrivendo JavaScript e improvvisamente ti rendi conto con orrore e terrore di aver scritto una funzione enorme. E ‘ successo ai migliori di noi. Ora arriva la voglia quasi inarrestabile di separare la funzione in pezzi più piccoli.
Le grandi funzioni significano molte responsabilità in un unico posto e, possibilmente, anche l’odore del codice, quindi è una buona idea in sé. Ma vuoi rompere la funzione in modo tale che non perda il suo significato o contesto. Per fare ciò, è necessario pensare al concatenamento del metodo, chiamato anche concatenamento delle funzioni. Questo articolo spiegherà cosa intendo con questo.
Prerequisiti
Prima di iniziare, ecco alcuni concetti JavaScript con cui è già necessario avere familiarità:
- Funzioni freccia
- Metodi array
- Funzioni asincrone
Gli sviluppatori più esperti avranno una certa esperienza con i metodi Array, come map, reduce e filter. Probabilmente hai già incontrato qualcosa di simile:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: Il concatenamento del metodo si verifica quando si desidera chiamare più funzioni utilizzando lo stesso oggetto e il suo riferimento. Nell’esempio precedente, il metodo array map restituisce un Array, che ha un numero formidabile di metodi.
Poiché restituisci un riferimento che punta a un Array, avrai accesso a tutte le proprietà di Array. È lo stesso principio che usi per il tuo concatenamento del metodo.
Capire meglio questo
Non coprirò tutte le sfumature di this, ma è bene capire perché this funzioni nel modo in cui funziona. Non importa quanto tu sia esperto, la parola chiave può essere difficile da capire. Spesso è il motivo per cui le cose non funzionano come ti aspetti che 😅.
Ecco il succo: this punterà sempre alla corrente scope o all’istanza da cui viene chiamata. Un esempio:
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();Quando scrivi una funzione come questa (nessun gioco di parole), potresti voler concatenare i metodi correlati all’oggetto. L’oggetto dog ha 3 metodi: walk, barke eat. Ogni volta che chiamo una qualsiasi delle sue funzioni, una console dovrebbe mostrare la rappresentazione di ciò che il cane sta facendo in quel momento esatto.
Ma c’è un problema con questo. Se lo esegui nel browser, ti renderai conto che non funziona come previsto. Questo perché le funzioni arrow usano l’ambito lessicale, dove this si riferisce al suo ambito circostante – in questo caso window, non all’oggetto stesso.
Per risolverlo, dovremmo usare una chiamata di funzione anonima per rappresentare la proprietà log :
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); }Ora l’ambito this del cane sarà accessibile all’interno della funzione.
Utilizzando la classe
È possibile ottenere lo stesso risultato utilizzando le classi:
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();Usando Prototype
Se devi usare prototype, fallo in questo modo:
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();Che dire delle funzioni asincrone?
async le funzioni sono zucchero sintetico per promesse e generatori. Quando dichiari una funzione async, sai che restituirà una promessa. Per questo motivo, avrai anche accesso a tutti i metodi della promessa.
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());Tuttavia, non è una buona idea concatenare un gruppo di promesse insieme. Raccomando invece di utilizzare un gruppo di parole chiave await. È più facile e renderà il tuo codice molto più leggibile.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programmingE avrai accesso alle stesse proprietà qui:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programmingIn conclusione
Le funzioni di concatenamento sono utili quando si deve manipolare un oggetto. È anche un modo pratico per migliorare la leggibilità del tuo codice. Tuttavia, come hai visto sopra, dovresti concatenare saggiamente.
In questo articolo, abbiamo parlato di this, classi, prototipi e async funzioni nel contesto del concatenamento del metodo JavaScript. Spero che tu abbia raccolto alcuni consigli utili e ora sia meglio informato sull’argomento. Puoi trovare il mio repository con tutto il codice sul concatenamento del metodo JavaScript proprio qui. Ci vediamo nel prossimo post!
Ti è piaciuto leggere questo articolo? Sentitevi liberi di condividere sui social media utilizzando i pulsanti qui sotto. In alternativa, ho anche scritto su come è possibile creare un generatore di palette di colori utilizzando Nuxt e Vuetify. Vai a controllare!
