Pokročilé použití CoffeeScriptu

V minulých tutoriálech jsme pracovali s třídami, čímž byla naše aplikace více modulární, dokonce jsme do hloubky viděli, jak provádět asynchronní práci pomocí CoffeeScript jako jazyk, což nám dává větší škálu možností, jak s ním pracovat.
Po zvládnutí těchto konceptů je čas jít o krok dále a použít to, co víme, k napsání čistšího, funkčnějšího a samozřejmě výkonnějšího kódu. Je načase se naučit, jak se stát výkonnými uživateli CoffeeScript.
Nyní, když víme, jak používat třídy v naší aplikaci, je jen otázkou času, kdy s tím narazíme na problémy. kontext. Když jsme u jednoduchých funkcí, je docela snadné zjistit, jaká data má tato funkce ve svém rozsahu, zná globální proměnné, proměnné definované v rámci funkce a všechny proměnné, které byly definovány v místním rozsahu při vytváření funkce.
Ale když jsou metody vázány na objekty, je to trochu komplikovanější. Abychom to ilustrovali, podívejme se na příklad, kde vidíme tento problém, a pak uvidíme, jak CoffeeScript nám může pomoci:

 třída Zvedací kotva lodi: (doneCallback) -> console.log "Zvedací kotva." setVel: (speed) -> console.log "Nastavení rychlosti na # {speed}" nastavit plachtu: -> @levantarAncla @ fixVel 70

Předpokládejme tedy, podle našeho kódu, že chceme okamžitě vyplout, proto pro vyvolání naší funkce provedeme následující:

 bot = new Barco bot.zarpar ()

Podíváme -li se pozorně a přeneseme tento kód do reálného světa, můžeme si uvědomit, že zvednutí kotvy se nestane okamžitě, musíme počkat, až bude kotva zcela zvednuta, aby mohla vyplout. Tento problém můžeme vyřešit přidáním a zpětné volání a ptát se, jestli to bylo dokončeno, takže budeme vědět, jak dlouho tato akce trvá, a po dokončení zavolá naši funkci, uvidíme:

 liftAnchor: (doneCallback) -> console.log "Zvedací kotva." pokud je hotovo Zpětné volání? setTimeout doneCallback, 1000

Jak vidíme, zpětné volání vyvoláme pouze tehdy, pokud existuje, tímto způsobem zajistíme, aby byl tento proces dokončen, a proto musíme upravit naši funkci vyplout:

 vyplujte: -> @levantarAncla -> @ fixVel 70

Nyní provedeme vyvolání funkce vyplout Po zvednutí kotvy to zajistí, že se nebudeme hýbat, dokud nebude kotva úplně zvednutá. To vypadá docela dobře, budeme kompilovat náš kód a zahrneme generovaný soubor .js do HTML, abychom viděli odpověď konzoly:

Jak vidíme na obrázku, dostali jsme chybu, která říká, že funkce neexistuje. Co se stalo? Je to velmi jednoduché, JavaScript nastavil hodnotu Este způsobem, jakým byla funkce vyvolána, protože při volání bot.zarpar hodnota Este je spojen s objektem bot, takže toto je svázáno s globálním kontextem a to není to, co chceme.
Chceme to zajistit Este je vždy spojena s instancí bot uvnitř těla zpětného volání a od té doby máme štěstí CoffeeScript v takovém případě má funkci. Za tímto účelem deklarujeme funkci pomocí tlustý šíp nebo tlustá šipka, tímto způsobem bude mít funkce Este propojeno s kontextem, ve kterém bylo deklarováno, podívejme se, jak náš kód vypadá s touto změnou:

 třída Zvedací kotva lodi: (doneCallback) -> console.log "Zvedací kotva." pokud je hotovo Zpětné volání? setTimeout doneCallback, 1000 setVel: (rychlost) -> console.log "Nastavení rychlosti na # {speed}" nastavit plachtu: -> @levantarAncla => @fixVel 70 bot = nový Barco bot.zarpar ()

Pojďme sestavit náš soubor a uvidíme, jak CoffeeScript Vazba úspěchu s funkcí silné šipky:

Co to dělá CoffeeScript před vyhlášením zpětné volání je nastavit lokální proměnnou _Este, který odkazuje na Este, protože i když zpětné volání je dynamicky vázán na hodnotu, která stále načítá místní kontext, ve kterém byla deklarována. Nakonec spustíme náš vygenerovaný soubor a uvidíme, jak byla chyba vyřešena:

Už jsme viděli, jak vyřešit kontextový problém v našich aplikacích pomocí CoffeeScript Uvidíme celkem jednoduchou, ale výkonnou techniku, která nám pomůže ušetřit práci. Nejde o pokročilou techniku, ale je to logický způsob, jak zlepšit náš kód bez velkého úsilí z naší strany.
ZapamatováníCo technika memoizace je ukládat hodnoty funkce místo jejich přepočítávání při každém volání funkce. Nyní, když víme, jak používat třídy a objekty, můžeme tyto znalosti použít k jejich použití uvnitř CoffeeScript a použijte dotyčnou techniku.
Existuje mnoho způsobů, jak tento proces provést memoizace, v případě tohoto tutoriálu ponecháme věci jednoduché. Za tímto účelem uděláme, že když jsou požadovány určité informace, ověříme, zda jsou uloženy, pokud ano, okamžitě je vrátíme, jinak je můžeme vypočítat a uložit pro budoucí použití. Tato technika je velmi užitečná, když potřebujeme použít složitý algoritmus k přijetí odpovědi nebo v případě, že k získání informací používáme pomalou síť.
Podívejme se tedy na kód pro ilustraci této techniky:

 třída Rocket getPath: -> @path? = @doMathComplexProcess ()

Abychom tuto část kódu lépe vysvětlili, zkompilováme ji, abychom zjistili, jak CoffeeScript postavit JavaScript že naše technika nám bude muset ušetřit práci při vývoji, podívejme se, jak vypadá náš kód:

ZVĚTŠIT

Jak vidíme v našem kódu, výpočet trajektorie bude proveden pouze poprvé žádost a uložená hodnota bude od nynějška používána. Také jsme mohli vidět v našem kódu CoffeeScript že jsme měli pomoc terciárního operátora ?= který vyhodnotí výraz v případě, že je cesta nulová, navíc budeme mít pomoc z implicitního návratu funkcí, které vrátí výsledek výrazu, v tomto případě hodnotu @trajektorie zda již byla uložena nebo byla právě vypočítána.
Ale to není vše, co můžeme s naší novou technikou udělat CoffeeScript, můžeme dokonce uložit více než jednu hodnotu pomocí datové struktury, podívejme se, jak to můžeme udělat:

 třída SecurityGateway hasAccess: (guard) -> @access? = {} @access [guard.plate_number]? = verifyCredentials guard.plate_number

Tato část kódu dělá, že v našem objektu je výsledek uložen pro každého strážce, který požadoval přístup, potřebovali bychom jen něco jedinečného, ​​abychom je mohli v našem objektu identifikovat, takže pro tento úkol použijeme číslo tabulky, podívejme se jak je náš kód přeložen při jeho kompilaci:

ZVĚTŠIT

Je důležité zmínit, že tato technika by měla být používána pouze s informacemi, které se během provádění našeho programu nezmění, v případě, že ano, doporučujeme implementovat řešení založené na mezipaměti.
Nakonec uvidíme způsob, jak předat možnosti funkci, toto není speciální funkce CoffeeScriptJe to spíše konvence, která využívá mnoho charakteristik jazyka a používá je ve vzoru, který je snadno srozumitelný a který je stejně užitečný v mnoha situacích, které mohou nastat.
Jak to funguje?Myšlenka je jednoduchá, je mít funkci, která to přijímá objekt možností který může obsahovat asociativní klíče pro argumenty této funkce. Díky tomu jsou možnosti snadno pochopitelné z kódu, ve kterém jsou volány, protože existují složené závorky, které určují, co která hodnota dělá. To také snižuje potíže s pozorováním argumentů a jejich pořadí, protože klíče objektu na tom nezávisí a mohou být vynechány, pokud nejsou potřeba.
Chcete -li implementovat objekty možností nejprve použijeme volitelné argumenty pro výchozí nastavení na prázdný argument. Tímto způsobem při volání můžeme vynechat možnosti v případě, že hodnoty nejsou potřeba:

 launchNave = (název, možnosti = {}) -> vrátit se, pokud options.drift suchý vzlétnout ()

Nyní použijeme terciárního operátora ?= k vyplnění hodnot možností, které chceme mít speciální výchozí hodnotu:

 launchNave = (název, options = {}) -> options.count? = 10 console.log "# {i} …" pro i v [options.count … 0] vrátit, pokud options.drift suché vzlétnout ()

Definujeme poslední hodnotu a použijeme operátor ? v případě, že je použit na jednom místě:

 launchSave = (název, options = {}) -> checkFuel (options.waitComb? 100) options.count? = 10 console.log "# {i} …" pro i v [options.count… 0] vrátit if options. suchý vzlet ()

Nakonec využijeme výhody permisivní syntaxe CoffeeScript poslat možnosti do naší funkce bez závorek, což nám dává docela jednoduché a přirozené volání:

 launchShip „Millenium Falcon“, DryGear: true, odpočítávání: 15

Na závěr zkompilováme náš soubor a uvidíme výstup našeho kódu v JavaScript:

ZVĚTŠIT

Tím druhým jsme dokončili tento tutoriál, kde jsme se mohli naučit nejen pokročilé způsoby používání CoffeeScript ale spíše techniky, které nám pomohou napsat lepší kód, že s neustálým používáním a výzkumem se můžeme stát lepšími vývojáři, kteří používají nejlepší postupy pro vývoj aplikací.