Použití tříd v CoffeeScriptu

Jednou z nejdůležitějších věcí, které nám pomáhají definovat naši aplikaci, je používání tříd, protože s nimi můžeme definovat objekty modelované ze skutečného života a jejich přechod do digitálního světa je mnohem snazší.
v CoffeeScript budování třídy a její vytváření je velmi jednoduché, ve skutečnosti je její syntaxe tak minimalistická, že si ji snadno zapamatujeme, místo toho definujeme třídy přímo v JavaScript Je to něco trochu těžkopádnějšího a to nám může trvat déle, než se očekávalo.
PožadavkyK dokončení tohoto kurzu musíme mít funkční instalaci CoffeeScript, potřebujeme také oprávnění k zápisu souborů a spouštění CoffeeScript na počítači, kde provádíme tutoriál. Potřebujeme textový editor, abychom mohli napsat kód, který se chystáme provést, abychom měli v konzole něco vytrvalého a ne všechno.
Třída není nic jiného než jméno a některé vlastnosti, které definují její chování, na základě tohoto konceptu můžeme definovat třídu CoffeeScript jak následuje:

 třída Student

To je vše, co musíme udělat, jednoduchým způsobem, ve kterém jsme již vybudovali první třídu CoffeeScriptCo se nyní stane, pokud chceme zahrnout vlastnost, abychom ji mohli používat, protože jednoduše vytvoříme instanci a přidáme tuto vlastnost, podívejme se:

 student = nový Student () student.name = "Carolina"

Nyní se podívejme, jak na následujícím obrázku jako CoffeeScript transformovat celý náš kód na JavaScript při kompilaci si pamatujme příkaz, který by byl káva -c název souboru.káva:

Potom si všimneme, jak syntaxe JavaScript čistý je mnohem rozsáhlejší a složitější než tři řádky kódu, ve kterých jsme pracovali CoffeeScript, to je síla tohoto jazyka, který nám umožňuje skutečně se věnovat naší aplikaci.
Jedna z věcí, které se v Objektově orientované programování je přidat metody do tříd, protože ty nám kromě vlastností poskytnou představu o tom, co náš objekt může nebo nemůže dělat, například pokud budeme pokračovat v Studentská třída Můžeme pro něj vytvořit metodu, ve které její objekt vyjadřuje zprávu, podívejme se, jak toho dosáhnout:

 třída Student hovoří: -> console.log "Hello World!"

Pokud pak vytvoříme objekt stejné třídy, můžeme již použít stejnou metodu. Například:

 student = new Studentstudent.talk ()

Tím zajistíme, že naši metodu lze použít mnohokrát, pokud vytvoříme několik instancí, což dává našemu kódu jednu z charakteristik orientace objektu, která je opětovné použití. Nyní předefinujeme náš kód tak, aby přijímal argumenty, díky čemuž dokážeme mnohem více než jednoduchý tisk pomocí konzoly, podívejme se:

 třída Studentský rozhovor: (jméno) -> console.log "Ahoj # {jméno}!" student = nový Studentstudent.talk ("Carolina")

Podívejme se, jak se to všechno překládá do kódu JavaScript když sestavujeme:

Něco důležitého, co můžeme udělat při konstrukci objektů odvozených z tříd, je udržovat jejich hodnotu během jejich životnosti v naší aplikaci, pomocí čehož můžeme vytvářet komponenty, které mají přístup k jejich vlastnostem prostřednictvím metod, a tak je používat v různých částech naší aplikace.
Aby bylo možné manipulovat s vlastností uvnitř CoffeeScript musíme jen použít @ operátor následuje název vlastnosti k použití, kterou lze zakódovat následovně:

 třída Student mluví: () -> console.log „Ahoj # {@ name}!“ student = nový student () student.name = „Carolina“ student. speak ()

Podívejme se, jak to vypadá při spuštění přímo v konzole:

Jakmile to bude hotové, podívejme se, jak náš kompilovaný kód vypadá JavaScript čistý:

Rozdíl v množství kódu je pozoruhodný a pouze provést něco tak jednoduchého, jako je definování třídy metodou, pak ji vytvořit instanci a zavolat vytvořenou metodu.
Existují případy, kdy nás definice naší třídy vede k vytváření metod, které je třeba volat v rámci jiných, aby se dosáhlo méně opakujícího se a funkčnějšího programování, podívejme se, jak to můžeme udělat pomocí následujícího kódu napsaného v CoffeeScript.

 třída Student hovoří: () -> console.log "Dobrý den, jmenuji se: # {@ name}!" @knowAge () knowAge: () -> console.log "Můj věk je: # {@ age}" student = nový student () student.name = "Vanessa" student.age = “23” student.talk ()

Podívejme se, jak v konzole můžeme vidět výsledek spuštění předchozího kódu:

Doposud jsme definovali vlastnosti objektu po jeho inicializaci, i když je to životaschopná praxe, když musíme vytvářet objekty s mnoha vlastnostmi, může to být obtížné udržovat.
Nejlepší v případech, kdy musíme pracovat s mnoha objekty a mnoha vlastnostmi, je umět využít sílu staviteléS nimi můžeme dát život našemu objektu přímo, aniž bychom museli „ručně“ definovat různé vlastnosti. Chcete -li definovat konstruktor, použijte strukturu podobnou následující:

 třída Studentský konstruktor: (jméno, věk) -> @jméno = jméno @věk = věk hovoří: () -> console.log "Ahoj, jmenuji se: # { @jméno}!" @saberEdad () saberEdad: () -> console.log "Můj věk je: # {@ věk}"

Pokud se podíváme na definici třídy, konstruktor není nic jiného než metoda, zajímavé je, že když je volána stavitel již CoffeeScript ví, že je to speciální metoda pro naši třídu, a bude s ní tak zacházet, proto když se chystáme vytvořit instance naší třídy, nemusíme ji výslovně nazývat. Podívejme se na příklad, jak můžeme nyní definovat naše objekty:

 student = nový student ("Carolina", "26") student.speaking ()

Vidíme, že jsme vlastnost definovat nemuseli název ani majetek stáří, jednoduše předáme hodnoty konstruktoru v pořadí, v jakém je definujeme v naší třídě, a to za nás udělá zbytek práce. Tento příklad je samozřejmě velmi zjednodušující, ale představme si, že musíme vytvořit instanci stovek objektů s hodnotami, které pocházejí ze zdroje vytrvalosti, jako je databáze.
Podívejme se na následujícím obrázku, jak vypadá náš nový kód, jakmile je zkompilován a přeložen do JavaScript čistý:

V tomto případě to vidíme JavaScript nepoužívá klíčové slovo stavitel při konstrukci metody, kterou definujeme v CoffeeScriptV tomto okamžiku začneme příměji vidět rozdíl mezi jazyky, kromě toho, co jsme vyřešili asi ve 12 nebo 13 řádcích kódu, v JavaScript stát se více než 20 řádků, něco, co je třeba vzít v úvahu při vytváření velkých aplikací.
Jednou z výhod práce s objektově orientovaným programováním je, že to umíme dědictví tříd, to znamená možnost vytvářet nové třídy a využívat funkce tříd rodiče"S tímto snížíme počet prvků, které musíme vytvořit od začátku, protože při dědění vezmeme všechny metody a vlastnosti nadřazené třídy, v podřízené třídě nebo nové třídě musíme definovat pouze metody a vlastnosti, které jsou pro něj exkluzivní.
Možná pro ty, kteří jsou v programování nováčkem, je tento koncept trochu matoucí nebo složitý, nicméně při pohledu na následující příklad nám bude jistě trochu jasnější, čeho můžeme dosáhnout.

 třída Osoba, kterou je třeba vědět Věk: () -> console.log "Můj věk je: # {@ age}" třída Student rozšiřuje osobu, aby mluvila: () -> console.log "Ahoj # {@ jméno}!" student = nový Student () student.age = "30" student.name = "Jon" student.knowAge ()

Při analýze vidíme, jak máme třídu Osoba a tenhle má metodu knowAge () pomocí kterého při vytváření třídy pomocí konzoly tiskneme věk instance Student řekneme mu, že dědí po Osoba takže naše nová třída již implicitně tuto metodu má knowAge () i když to není ve třídě definováno.
Podívejme se na následujícím obrázku, jak vypadá náš nový kód, jakmile je zkompilován a přeložen do JavaScript čistý:

Pak můžeme vidět, že náš kód JavaScript je poměrně složité pro definování dědičnosti, ale při použití CoffeeScript jeho optimalizace je extrémně vysoká. Pokud vidíme nástroj, představme si velmi složité třídy jako součásti aplikace, které nám v našich nových třídách mohou poskytnout více funkcí, aniž bychom museli psát více než konkrétní kód, který skutečně potřebujeme.
Tím jsme tento tutoriál dokončili, protože vidíme svět tříd CoffeeScript Není to tak složité, jak se na první pohled zdálo, vše spočívá v znalosti základů a filozofie objektově orientovaného programování. Můžeme zajistit, že použití CoffeeScript jako jazyk činí složitost používání tříd v JavaScript značně klesá, protože jeho syntaxe je mnohem blíže jazykům jako Krajta nebo Rubín dělají to mnohem elegantnější a méně matoucí při čtení vyvinutého kódu.Líbil se vám tento návod a pomohl mu?Autora můžete odměnit stisknutím tohoto tlačítka, čímž mu dáte kladný bod