Method Chaining in JavaScript

Javascriptet írsz, és rémülettel és rettegéssel hirtelen rájössz, hogy hatalmas funkciót írtál. A legjobbakkal is megtörtént. Most jön a szinte megállíthatatlan késztetés a funkció kisebb darabokra történő elválasztására.

a nagy funkciók sok felelősséget jelentenek egy helyen, és esetleg kódszagot is jelentenek, tehát ez önmagában jó ötlet. De meg akarja szakítani a funkciót oly módon, hogy ne veszítse el jelentését vagy kontextusát. Ehhez meg kell gondolni módszer láncolás – más néven funkció láncolás. Ez a cikk elmagyarázza, mit értek ezen.

előfeltételek

mielőtt elkezdenénk, itt van néhány JavaScript fogalom, amelyet már ismernie kell:

• Arrow functions
• Array methods
• Async functions

a legtöbb tapasztalt fejlesztőnek van némi tapasztalata a Array metódusokkal kapcsolatban, mint például a térkép, a kicsinyítés és a szűrő. Valószínűleg már találkozott valami hasonlóval:

const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: 

a metódus-láncolás akkor történik, amikor több függvényt szeretne meghívni ugyanazon objektum és annak hivatkozása segítségével. A fenti példában a map tömb metódus Array értéket ad vissza, amelynek félelmetes számú metódusa van.

mivel egy Array – re mutató hivatkozást ad vissza, hozzáférhet a Array összes tulajdonságához. Ugyanaz az elv, amelyet a saját módszeréhez használ láncolás.

ennek jobb megértése

nem fogom lefedni a this összes árnyalatait, de jó megérteni, hogy a this miért működik úgy, ahogy. Nem számít, mennyire tapasztalt vagy, a kulcsszó ezt nehéz megérteni. Gyakran ez az oka annak, hogy a dolgok nem úgy működnek, ahogy elvárják őket, hogy legyenek.

itt van a lényege: this mindig az aktuális scope – re mutat, vagy arra a példányra, ahonnan hívják. Egy példa:

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();

ha írsz egy függvény, mint ez (nem szójáték célja), érdemes lánc módszerek, amelyek kapcsolódnak az objektum. A dog objektumnak 3 módszere van: walk, barkés eat. Minden alkalommal, amikor felhívom bármelyik funkcióját, a konzolnak meg kell mutatnia, hogy mit csinál a kutya abban a pillanatban.

de van egy probléma ezzel. Ha a böngészőben futtatja, rájön, hogy nem a várt módon működik. Ennek oka, hogy az arrow függvények lexikális hatókört használnak, ahol a this a környező hatókörre utal – ebben az esetben window, nem magára az objektumra.

ennek megoldásához névtelen függvényhívást kell használnunk a log tulajdonság képviseletére:

// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); }

most a kutya this hatóköre elérhető lesz a funkció belsejében.

a

osztály használatával ugyanazt az eredményt érheti el az osztályok használatával:

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();

a prototípus használata

ha prototípust kell használnia, tegye ezt így:

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();

Mi A Helyzet Az Aszinkron Funkciókkal?

async funkciók szintetikus cukor ígéretek és generátorok. Ha async függvényt deklarál, akkor tudja, hogy az ígéretet fog visszaadni. Emiatt, akkor is hozzáférhet az ígéret minden módszeréhez.

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());

azonban ez nem egy jó ötlet, hogy lánc egy csomó ígéreteket együtt. Javaslom egy csomó await kulcsszó használatát. Ez könnyebb, és sokkal olvashatóbbá teszi a kódot.

await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programming

és itt ugyanazokat a tulajdonságokat érheti el:

console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programming

összefoglalva

a láncolási funkciók jól jönnek, ha egy objektumot kell manipulálni. Ez egy praktikus módszer a kód olvashatóságának javítására is. Azonban, ahogy fentebb láttad, bölcsen kell láncolnod.

ebben a cikkben a this, osztályok, prototípusok és async függvényekről beszéltünk a JavaScript metódus láncolásában. Remélem, hogy összeszedtél néhány hasznos tippet, és most jobban tájékozódsz a témáról. Itt található a repository az összes kódot JavaScript módszer láncolás itt. Találkozunk a következő bejegyzésben!

tetszett olvasni ezt a cikket? Nyugodtan ossza meg a közösségi médiában az alábbi gombok segítségével. Alternatív megoldásként arról is írtam, hogyan lehet színpalettagenerátort építeni a Nuxt és a Vuetify segítségével. Menj, nézd meg!