Tagjavascript

23 javascriptových návrhových vzorů

Proč návrhové vzory?

Abyste nemuseli vynalézat kolo.
Aby to co napíšte mělo hlavu a patu a rozuměli tomu i ostatní.

Pěkný článek popisující javascriptové návrhové vzory. Jednoduše a pochopitelně.

this v arrow functions

Tohle jsem viděl nesčetněkrát. Tohle vám skutečně fungovat nebude 🙂

Arrow functions jsou super, ale je dobré vědět jak fungují… Respektive vědět minimálné to, že nemají this, mino jiné, a proto se neprovede this.num++ nad num definovaném v objektu a, jak by se na první pohled mohlo zdát. this ukazuje na parent, tedy v tomto případě global, kde žádný num není 🙂

Správně tedy

Pěkný článek popisující detailně chování this kdekoliv v JS.

ES moduly v NodeJS

Modularita, co by nezbytná vlastnost jakéhokoliv programovacího jazyka pro psaní velkých aplikací, je v NodeJS zajištěna pomocí funkce require. Samotnou fyzcickou definici a implementaci pak zajišťuje CommonJS.

Takže takto v NodeJS

JavaScript a import

JavaScript, skrze svou specifikaci ECMAScript 2015 zavádí, mimo jiné, i nové klíčové slova import a export pro možnost modularizovat javasxriptový kód.
To dovoluje následující zápis kódu:

Tohle vám bude například fungovat, pokud píšete React, VueJS, nebo Typescript aplikaci, protože ta je teprve skrze nějaký transpiler kompilována do požadované verze JavaScriptu.

Nicméně v NodeJS import nefunguje… Zatím 🙂

node –experimental-modules

A tady přichází na scénu parametr příkazového řádku --experimental-modules, který vám umožní v NodeJS používat klíčové slovo import místo require. Přesně tak, jak byste jej použili v Reactí apce…
Opravdu píšu místo, protože obě možnosti zatím nejdou kombinovat.
Takže pokud spustíte NodeJS script s tímto parametrem, můžete použít novou syntaxi pro importování, ale samozřejmě i exportování na úrovni modulu:

Dalším rozdílem je samotná přípona souboru se zdrojákem. Původní require funguje v klasických .js souborech, nově import pak v souborech s příponou .mjs.
Samozřejmě můžete import přímo psát do.js souboru a spouštět pokaždé s potřebným parametren, ale je to proti zavedené konvenci a navíc, nejde na první pohlef vidět jaký způsob práce s moduly jste použili.

Moje doporučení?

Pište v TypeScriptu 🙂 budete moct v .ts souborech použít obě konstrukce pro import, ale vedle toho mnohem víc věcí, které JavaScript dělají skutečně silným programovacím jazykem.

NodeJS: MongoDB callback VS async/await

Odjakživa co píšu v NodeJS se držím callbackového zápisu asynchronních funkcí. Callback-hellu se snažím vyhnout rozumnou dekompozicí řešené úlohy a Promises zápis mě nikdy nedostal… Nicméně s jazykovou konstrukcí async/await, která se do JavaScriptu dostala ve verzi ES2017, se dá leckdy kód napsat čitelněji, pochopitelněji a tím pádem snad i bezpečněji.

Takhle by tedy mohl vypadat kód pro čtení dat z MongoDB:

Původní callback implementace

Nová async/await implementace

Resumé

Na první pohled jde vidět několik věcí: ošetření všech chyb se přesouvá jen do jednoho místa a tím odpadá mnoho opakujícího se kódu, výsledek, načtená data nejsou nikde hluboce zanořená a nemusíte řešit problém s kaskádou otevřených závorek if-else větví.
Nutno podotknout, že výhoda nového zápisu ještě více vzroste v momentě, kdy máte sérii callback dotazů a obslužný kód vám začne ještě více narůstat.

Vedle toho si samozřejmě dokáži představit kód, kde bych se dál držel callback zápisu, ale to je věc konkrétního použití.

JavaScript: callback, promises, async/await, naposledy…

Mám pocit, že čím dál víc javascriptových vývojářů používá nové jazykové kostrukce pro práci s asynchronním kódem, ale ne všichni mu rozumí jak by měli a jen slepě používají něco co viděli někde jinde. Proto naposledy tohle velice stručné, ale podle mě snad všeříkající shrnutí všech možných současných variant pro psaní asynchronních operací:

Dodám, že v TypeScriptu se píše asynchronní kód úplně stejně.

JavaScript: promises a async/await

Jsem si vědom toho, že o promises toho bylo napsáno dost. Určitě už ale o něco méně o async/await. Nicméně z diskuzí s javascriptovými vývojáři, kterých se v poslední době účastním, mám pocit, že většina z nich vidí async a promise jako zcela odlišné techniky, které krom toho, že řeší stejný problém, chápou jako zcela odlišné věci.

Promises


Určitě ne ideální, ale plně funkčnní javascriptový kód, který pomocí promises řeší asynchronní operace, byť se v příkladu jedná o obyčejné matemtické operace. Důkaz že asynchronně se dá psát i non-blocked kód 🙂

Async/Await


Přepsal jsem výše uvedený kód z promises do async/await.

Vlastně nepřepsal 🙂 Použil jsem všechny jednotlivé funkcionality tak jak jsou s primises a jen jsem nahradil chain volání v promisách implementovaný skrze then do jedné jediné funkce, uvozené klíčovým slovem async. Samotné volání může vypadat složitě, ale to jen kvůli IIEF, které jsem v příkladu použil.

Suma sumárum

Async/await přímo staví na promises. Je vnitřně naiplementovaný skrze promises. Jen zavádí novou konstrukci zápisu, která může být programátorům přicházejících ze světa blokujících operací na první pohled bližší, než více méně funkcionální zápis v zřetězeném chainu pomocí holých promisí.

Osobně se dál držím callbacků, ale pokud bych musel šáhnout po něčem z výše popsaném, vyberu si async/await konstrukci.


PS: calback hell není vlastnost jazyka, je to jen špatně navržená kompozice jednotlivých funkcionalit 🙂

Jaký je rozdíl mezi Javou a JavaScriptem?

Q: What’s the difference between JavaScript and Java?

A: One is essentially a toy, designed for writing small piecess of code, and traditionally used and abused by inexperienced programmers. The other is scripting language for browser.

🙂

npmjs.com

Vytvořil jsem si účet na NpmJS.com. Myslím si, že už jsem v JavaScriptu pod NodeJS něco napsal a asi přišel čas něco vrátit komunitě zpět. Chystám se z toho co jsem už napsal vytovřit nějaké opakovaně použitelné báličky publikovat na NpmJS a dát tak volně k použití všem. Nečekejte nic světobornéhé.
Dalším důvodem proč to dělám je interní osahání si procesů na NpmJS a asi nejlíp jak se do toho dostat je sám publikovat.

Learning JavaScript Design Patterns

Na této adrese najdete elektronickou verzi knihy Learning JavaScrip Design Patterns.

JavaScript pattern: Module

Design pattern Module pomáhá implementovat klasický model softwarových modulů, který zapouzdřením proměnných a funkcí redukuje globální scope. Jedná se o jeden z nejpoužívanějších návrhových vzorů.

V příkladu interně definované proměnné zůstávají pro ostatní kód skryté, protože jejich existence je omezena jen do volání definice samotného modulu (to je ten pár závorek před stredníkem). Jedná se o typický příklad javascriptového closure. Pro přístup k intertním datům modulu je potřeba volat funkci, nebo funkce vracejíci jako návratovou hodnotu definice modulu.

© 2018 pepa.holla.cz

Theme by Anders NorénUp ↑