[Powered by Google Translate] [Seminář] [Javascript kostry: Proč a jak] [Kevin Schmid] [Harvard University] [To je CS50.] [CS50.TV] 

Ahoj, všichni. Vítejte na rozhraní JavaScript semináře. Jmenuji se Kevin, a dnes budu mluvit o rámcích JavaScript, a cílem tohoto semináře je, aby vám na, řekněme, zvládnout konkrétní rámec samo o sobě ale aby vám širokou úvod do několika rámců a ukázat, proč bychom chtěli použít rámec. 

Než to udělám, budu poskytnout trochu pozadí v JavaScriptu, a pak budeme to tam. Chystáme se začít tím, že provádění to-do seznamu. Tady je náš seznam úkolů, pro dnešek. Je to docela legrační. Musíme zavést seznamu úkolů v JavaScriptu. To je to, co to bude vypadat, tak to je náš první cíl. Nebudeme používat rámec k tomu, že. Jedeme do kódu JavaScriptu a získat seznam úkolů do práce. Pak budeme zlepšovat design bez použití rámce. Budeme diskutovat různé věci můžeme dělat jen s JavaScriptu sám aby se náš seznam úkolů trochu více dobře navržené. Pak budeme házet v některých jQuery, a pak se budeme dívat na stejně to-do seznamu, právě se provádějí v různých rámcích, a budeme diskutovat  klady a zápory podél cesty. 

Začněme provádění, které to-do seznamu. Řekněme, že máme dostat tuto HTML. Budu dělat to o něco menší. Jak vidíte, mám malou hlavičku, která říká, že todo a malá krabička, kde bych mohl zadat popis a todo a pak nová položka tlačítko, tak se pojďme zkusit zadat nové todo do tohoto seznamu. Dejte JavaScript rámců seminář, a já jsem se trefit novou položku. Mám tuto výstrahu JavaScript, který říká, implementovat mě. Máme k jeho provedení. Pojďme se podívat na kód pro toto, jak HTML a JavaScript. Tady je náš HTML. Jak můžete vidět tady, tady je náš malý Todos záhlaví. To bylo odvážné, co nahoře, a pak máme vstupní pole s zástupný symbol, a pak je tu určitá vlastnost tohoto tlačítka volání této funkce addTodo. Chce někdo hádat, co to je při klepnutí znamenat? [Student slyšet odpověď] Dobrý je na kliknutí je něco jako události, jako kliknutí myší je prostě událost, a co děláme se budeme vázání událost kliknutí na toto tlačítko k provedení této funkce. AddTodo to je událostí pro kliknutí na toto tlačítko. 

Jak můžete vidět, když jsem klepněte na tlačítko nové položky Při klepnutí událost dostane padáka, a tato funkce volána. Podívejme se na funkce. Jak vidíte, tady je můj kód v jazyce JavaScript doposud. Co mám na vrcholu je globální datová struktura pro mé to-do seznamu. Vypadá to, že pole. Je to jen prázdné pole. A pak mám addTodo funkci, která jsme viděli dříve, a jediný řádek kódu je tu upozornění. Upozorňuje implementovat mě, a pak mám dva úkoly na ruce. Musím se přidat todo této globální datové struktury, a pak chci upozornit na to-do seznamu. Nic moc chuť ještě ne, ale JavaScript můžete být obeznámeni s, tak jsem jít pomalu a přezkoumat základy JavaScriptu tímto způsobem. 

Dejme to výstřel. Řekněme, že uživatel zadá něco do tohoto boxu. Jen jsem napsal něco tady, textu. Jak třídit přístup tohoto textu pomocí JavaScriptu? Nezapomeňte, že JavaScript je jedním z jejích základních rysů je, že nám dává Tento programový přístup k DOM. To nám umožňuje přístup k prvkům a jejich vlastnosti tohoto skutečného HTML. Způsob, jakým to děláme se holé kosti JavaScript je, že můžete skutečně použít funkci v JavaScriptu s názvem getElementByID. Chci ukládat text, který je napsaný, že v nějaké proměnné, tak jsem chtěl říct, novou proměnnou s názvem new_todo, a budu se dostat, že prvek. Jedná se o funkci,. GetElementByID. A teď začínám prvek podle ID, takže musím ID tohoto textového pole, tak jsem mu poskytla ID new_todo_description. Takhle budu mít prvek. To je můj argument této funkce, určit, které číslo se dostat. A tak to je prvek v HTML, a to má vlastnosti. Viděl jsi ty. Jsou to atributy. Atributem textového prvku, který ukládá vstup uživatele se nazývá hodnota. Zachránil jsem hodnotu tohoto textového pole se do této proměnné s názvem new_todo. Teď mám programový přístup k této proměnné, což je docela fajn protože teď, co můžu udělat je, že jsem jej přidat do svého to-do seznamu. 

Způsob, jakým se to v JavaScriptu a nebojte se, pokud jste obeznámeni s tím, ale jen tak přes to je todos.push protože to je jméno mého globální datové struktury tady, a budu tlačit new_todo. To je skvělé, protože teď jsem se přidal k mému JavaScript zastoupení, které to-do seznamu. Ale teď, jak se dostanu zpět do HTML? Musím najít způsob, jak třídit push zpět. Jinými slovy, nějak jsem se k tomu tohle. Co budeme dělat, je budeme čerpat seznamu úkolů. Musím aktualizovat ostatním HTML na této stránce, a jak můžete vidět, nechal jsem tuhle malou nádobu zde Tento oddělovač stránky, jejichž ID je todos, a já jdu dát seznamu úkolů tam. Nejprve jdu vyčistit to, protože říkají, že byl starý seznam úkolů tam. Začínám tento prvek podle ID znovu, a já jsem přístup k vnitřní HTML tohoto prvku, a budu jasně najevo, že. Když jsme opustili tento kód jako je, měli bychom vidět prázdnou Nic tam není, a teď chci začít vykreslování můj nový seznamu úkolů. Já jsem v podstatě chystá zničit mé seznamu úkolů. 

Nyní vnitřní HTML uvnitř tohoto Todos div je zcela jasné, a teď musím začít přidávat mého seznamu. První věc, kterou chci přidat zpět je neuspořádané seznam tag, což v podstatě znamená, že se jedná o začátek výčtu. Nyní pro každý prvek v mém Todos poli chci ji vytisknout v té HTML. Chci se připojit ji na konci tohoto seznamu. Stejně jako v C, mohu použít pro smyčce, a já jdu začít na začátku mého seznamu na prvek 0, a já jdu celou cestu k délce seznamu. Můžeme skutečně získat délku pole v JavaScriptu pomocí vlastnost length. V podstatě budu dělat něco velmi podobného uvnitř zde vytisknout tento prvek. Mohu znovu otevřít todos div, vnitřní HTML vlastnost, že, a já jdu přidat na tuto novou položku seznamu, a že se to být obklopen Tento tag li, a budu spojovat s operátor + a to je i-tý prvek mého Todos pole, a pak budu uzavřít tuto značku. Nyní pro každý prvek přidáme novou položku seznamu. A pak vše, co opravdu potřebujete udělat, je uzavřít tuto značku. Potřebuju jen uzavřít, že neuspořádané seznam tag. 

Myslíte si, získat pocit, pro jak to funguje? Tím se otevře celý seznam. To přidává jednotlivé prvky ze seznamu Úkoly na seznamu, a pak to zavře celý seznam, a tohle je moje addTodo funkce. Já v podstatě začíná tím, že se todo od textového pole. Dodávám, že do Todos pole, a pak jsem se znovu vykreslení seznamu úkolů. Nyní mohu přidávat položky do seznamu. To je docela vzrušující, protože v několika málo řádků kódu jsme v podstatě udělali to-do seznamu, kde můžeme přidat položky. Great. Je to něco jako základní úvod do JavaScriptu. Nebojte se příliš mnoho o syntaxi pro tuto chvíli, ale o tom přemýšlet koncepčně. Měli jsme nějaké HTML. Měli jsme textové pole na stránce, která v podstatě umožnil uživatelům vstupu to-do položky a přidejte. A pak jsme si JavaScript, aby přinesla, že todo od tohoto textového pole. Jsme, že uložené uvnitř pole JavaScript, který je v podstatě podobný naše programové zastoupení, které to-do seznamu, a pak jsme vytiskli. Toto je todos.js. 

To je docela v pohodě, ale jak můžeme vzít další? No, jak vidíte, není to jako úplný seznam úkolů. Například, nemohu označit některou z těchto položek jsou neúplné, jako když jsem chtěl reprioritize položky nebo odstranit položky. To je v pořádku, ale teď můžeme vzít další. Nebudu mluvit příliš o přidání dalších funkcí, ale mohli bychom vzít další. Pojďme se bavit o přidání dalšího funkci to-do seznamu, který bude schopen zjistit individuální úkoly položky a mít to škrtnout, takže v podstatě jsem, že jsem to udělal. Pojďme se podívat na nějaký kód, který může dosáhnout. Všimněte si, co jsem udělal v horní části je, že jsem přidal nové globální pole s názvem kompletní. Já jsem v podstatě pomocí tohoto ukládat, zda položky na seznamu úkolů jsou úplné, nebo ne. To je jeden způsob, jak to udělat. Když se podívám na provádění tohoto nařízení, displej, v podstatě, pokud zadám todo a já stiskněte toto přepínací tlačítko to prochází ven, tak každá položka v tomto seznamu je buď kompletní nebo neúplné stát, a já jsem s použitím jiného pole reprezentovat to. 

V podstatě pro každý todo Úkoly v tomto poli tam je položka v kompletní škále, která v podstatě ukazuje, zda se nejedná o kompletní. Jsem musel udělat dost minimální změny tohoto kódu, takže tady je naše addTodo funkce. Všimněte si, že zde tlačím ho na pole, a pak jsem tlačí 0 tomuto kompletní pole, v podstatě souběžně s tím nové podněty todo říci Přidám tuto položku, a to ve spojení s touto hodnotou, což znamená, že je to neúplné. A pak jsem překreslování seznamu úkolů. Nyní si všimněte, jsem přidal tento drawTodoList funkci. To vyžaduje spoustu kódu, který jsme měli předtím, v podstatě vyčistí políčko a pak vypracuje nový seznam úkolů. Ale zjistíte, že uvnitř to pro smyčky děláme trochu víc teď. Jsme v podstatě kontrolovat, zda je položka, která odpovídá té todo zde je kompletní a my chová jinak v těchto 2 případech. Pokud je to kompletní, my přidáváme tuto značku del, což je v podstatě způsob, jak se můžete dostat, že přeškrtnutí účinku škrtnutím to-do seznamu, pokud je to kompletní, a pokud tomu tak není, nejsme jeho zařazení. A tak, že druh se stará o to, 

a to je jeden způsob, jak toho dosáhnout. A pak se pozná, že uživatel klikne na jednu z těchto jsme přepínat stav dokončení to. Když uživatel klikne, budeme zvrátit, zda to bylo dokončeno, nebo ne, a pak se to překreslí. Tento druh prací. Máme tyto funkce, které provádějí své úkoly, a je to v pořádku. Je něco, co bychom mohli dělat lépe o tom, i když? Všimněte si, máme tyto dva globální pole. Pokud to bylo C, a měli jsme dvě pole, která druh představovaly data, která byla jakýmsi nějakým způsobem souvisí Co bychom použít v C kombinovat tyto dvě pole do něčeho, co zapouzdřuje oba kusy informací? Chce někdo něco navrhnout? [Student slyšet odpověď] 

Přesně tak, takže jsme mohli použít nějaký struct, a pokud si vzpomenu, řekněme, Pset 3, zapamatovat jsme měli slovník, a pak jsme museli zda slovo byl ve slovníku a všechny byly tyto informace dát dohromady v některých datové struktury. Jedna věc, kterou mohu udělat s tímto kódem, abychom se vyhnuli těmto dvě různé pole pro podobné kousky informací je mohu zkombinovat do objektu JavaScript. Pojďme se na to podívat. Povšimněte si, že jen jednu řadu na vrcholu nyní a to, co jsem udělal, je a to je jen JavaScript syntaxe pro druh vytváří doslovnou verzi objektu, a všimněte si, tam jsou dvě vlastnosti, takže máme todo, a to drží pohromadě s tím, jestli je to kompletní nebo nekompletní. To je velmi podobný kód. Jsme pomocí jazyka JavaScript. Tento druh věcí zlepší. Stejně jako nyní, jsou všechny tyto obory související informace pohromadě. Když jdeme ji vytisknout, můžeme přistupovat pole. 

Všimněte si, jak si vedeme Todos [i]. Kompletní místo označení kompletní pole samostatně, a všimněte si, když chceme dostat k tomu řetězec Dostáváme se k tomu majetku tohoto todo, takže tento druh dává smysl, protože každá položka má tyto vnitřní vlastnosti o tom. Má todo, a to, zda je to má úplné, nebo ne. Ne příliš mnoho změn tam funkčně, právě přidali nějaké další kódu. Jedná se o zlepšení na některých frontách, ne? Myslím, že jsme počítána designu trochu. Nyní máme objekty, které v podstatě zapouzdřit tato data. Je ještě něco, co bychom mohli udělat, zde jde o JavaScript? Jako upozornění, že tento kód tady pro získání vnitřní kód HTML div je trochu, myslím, dlouho. Je tu document.getElementById ("todos"). InnerHTML. Jedna věc, kterou můžeme udělat, aby se tento kód vypadat trochu přátelštější takže jsem nemusel držet posouvání vlevo a vpravo, dopředu a dozadu, je, že jsem mohl použít knihovnu jQuery jako. 

Pojďme se podívat na seminář 2, a to je stejný kód, ale to je hotové s jQuery. Ty nemusí být příliš obeznámeni s jQuery, ale jen vím, že jQuery je jakýsi knihovny JavaScriptu , který umožňuje snazší dělat věci, jako je přístup k jednotlivým prvkům v DOM. Zde místo toho řekl document.getElementById ("todos"). InnerHTML Mohu použít mnohem čistší způsob jQuery, který je jen pro použití selektorů. Jak vidíte, tento kód se dostat trochu čistší, funkčně velmi podobné, ale to je nápad. Viděli jsme pár věcí tak daleko, tak jsme začali jen s surového implementaci JavaScriptu. Přidali jsme nové funkce a ukázal, jak můžeme vylepšit ji jen to, co máme v JavaScriptu. 

Má někdo vidět žádné problémy s tímto designem? Konkrétně, myslím, nebo nemusí být nutně potíže, ale řekněme, že jsme nedělá to-do list projektu a zítra jsme se rozhodli chtěli jsme seznam potravin, nebo nákupní seznam projektu. Mnoho z těchto funkcí jsou velmi podobné. Spousta věcí, které se chtějí dostat z JavaScriptu jsou velmi časté, a to zdůrazňuje potřebu nějakého způsobu takže to snazší. Musel jsem vytvořit všechny tyto HTML přístup, všechno přístup DOM, jako budu reprezentovat To-Do List s tímto modelem. A všimněte si, že jsem zodpovědný jako tvůrce JavaScriptu pro udržení HTML a JavaScript, které mám v synchronizaci. Nic provede automaticky, že JavaScript zastoupení nebo to-do seznamu dostat vytlačeni do HTML. Nic vymáhána, že kromě mě. Musel jsem napsat losování To-Do List funkci. A to nemusí být, myslím, že je rozumné to udělat, ale to může být únavné občas. Máte-li větší projekt, který by mohl být obtížné. 

Rámců, jeden z účelů rámců je zjednodušit tento proces a třídit faktoru se Tyto společné-myslím, že by se dalo říct, návrhové vzory že lidé obecně mají nějaký způsob, jak reprezentovat data ať už je to seznam přátel, ať už je to mapové podklady nebo něco, nebo to-do seznamu. Někteří lidé mají obecně způsob reprezentace informací, a obecně je třeba, aby tyto informace nějak v synchronizaci mezi tím, co uživatel vidí v nějakém pohledu, mluvení ve smyslu, jako regulátoru modelu názor, že jste viděli v přednášce, a pak model, který je v tomto případě je toto pole JavaScript. Rámce nám způsob, jak vyřešit tento problém. Nyní se pojďme podívat na provádění to-do seznamu v rámci tzv. angularjs. To je ono. Všimněte si, že se vejde na snímku. Nemám posouvat doleva a doprava. To asi není velký důvod doporučujeme používat rámce, ale uvědomte si, jsem vůbec přístup jednotlivých prvků HTML tady? Mám někdy jít do DOM? Vidíte nějakou document.getElementById nebo něco takového? Ne, to je pryč. 

Úhlová nám pomáhá udržet DOM a JavaScript naše zastoupení něčeho druh v synchronizaci, takže pokud to není v souboru JS, pokud neexistuje žádný způsob, jak programově všem, že obsah HTML od JavaScriptu, jak jsme to udržet v synchronizaci? Pokud to není v. Js soubor, musí to být v HTML, ne? Toto je nová verze HTML souboru, a všimněte si, přidali jsme spoustu zde. Všimněte si, že je tyto nové atributy, které říkají ng tlačítkem myši a NG-repeat. Úhlová přístup k řešení tohoto problému obtíže při návrhu je v podstatě dělat HTML mnohem silnější. Úhlová je způsob, který umožňuje, aby HTML poněkud výraznější. Například, mohu říci, že budu svázat nebo vázat tohoto textového pole proměnné v mém úhlové kódu JavaScript. Tento NG-model, dělá jen to. To v podstatě říká, že bod uvnitř tohoto textového pole, jen spojit, že s proměnnou new_todo_description v kódu JavaScript. To je velmi silný, protože nemám explicitně jít DOM tuto informaci získat. Nemám říct document.getElementById. Nemám použít jQueries jako přístup DOM. Mohu spojit s proměnnou, a pak, když jsem se to změnit proměnnou v JavaScriptu je to stále v synchronizaci s HTML, takže zjednodušuje proces museli jít tam a zpět mezi dvěma. Dává to smysl? 

A zjistíte, že to není HTML přístupový kód. Jsme právě udělal HTML silnější, a nyní, například, můžeme dělat věci, jako je tento, jako když kliknete na to, volat tuto funkci v rámci todos.js, a mohli bychom to dělat dřív, ale existují i ​​jiné věci, jako je tento ng-model, a všimněte si tento NG-opakování. Co si myslíte, že to dělá? Tady je náš neuspořádané seznam před rokem. Máme ul značek ale jsem stále činí tento seznam uvnitř kód JavaScript? Nebudu nikdy výslovně vykreslování tohoto seznamu. Jak to funguje? No, jak Úhlová Dosahuje toho je to se nazývá zesilovač. V podstatě to říká, že chci vytisknout HTML pro každou vnitřní todo mého Todos pole. Uvnitř todos.jr je todos pole tady, a to vám řekne úhlové tím projít pole a pro každý prvek se zobrazí Chci vytisknout tento HTML. To je docela úžasné, protože jsem si jen udělat aniž byste museli psát pro smyčce, které pro to-do seznamu, který byl jen 30 řádků kódu nemusí být nejpřínosnější věcí, ale pokud máte velký projekt, mohlo by to mít velmi pohodlné. 

To je jedním z řešení tohoto problému, takže HTML silnější, a to nám umožňuje udržet JavaScript a HTML v synchronizaci. Existují i ​​jiné možnosti, jak vyřešit tento problém, a ne každý rámec dělá. Ne každý rámec funguje podél těchto linek. Některé rámce mají různé přístupy, a možná zjistíte, že vás baví kódování do jednoho rámce nad druhou. Pojďme se podívat na jeden. Toto je seznam úkolů kódovány v rámci tzv. páteřní. Chystám se jít přes to rychle. Začnu s HTML, než půjdeme tam. Jedna sekunda. Počínaje HTML, jak jste si všimli, náš HTML je velmi podobný na to, co bylo předtím, takže nic moc nového na tomto poli. Ale naše JS soubor je trochu jiný. Páteřní druh má tuto myšlenku, nebo postaven na myšlence, že mnoho z toho, co děláme, řekněme, naše JavaScript projekty je přemýšlet o tom, modely a sbírky těchto modelů. To by mohlo být, například fotografie a sbírky fotografií, nebo myšlenka přítele a sbírek přátel. A často, když jsme programování aplikací JavaScript budeme nějak reprezentovat myšlenku mít sbírku přátel nějak v JavaScriptu a páteř nám ​​dává tuto vrstvu v horní části stávajících polí Javascript je a objektů dělat silnější věci s tím snadněji. 

Tady jsem definovala-do modelu, a nemusíte příliš starat o syntaxi, ale zjistíte, že to, co je jedna z vlastností tohoto? Má výchozí pole. Páteřní mi umožňuje specifikovat již bat každý nový úkol, který jsem vytvořit bude mít tato nastavení. Nyní mohu přizpůsobit, ale musí mít možnost stanovit výchozí je hezké, a je to docela pohodlné, protože to není něco, co je jako vlastní JavaScript, a teď nemám explicitně říkají, že todos jsou neúplné. Mohu říci hned bat, že todos se bude označen jako nekompletní. Všimněte si, pak to, co je to? Teď mám to-do seznamu, a to je kolekce. Všimněte si, že pole spojené s modelem, který říká, todo. To je můj způsob, jak říct, že páteř Budu myslet na kolekci těchto jednotlivých todos. To je v podstatě struktura modelu pro můj program. Tady mám tuto myšlenku o sbírky, av podstatě položky v něm obsažené jsou sbírky bude tato todos, a to je velmi přirozený v tomto smyslu protože mám Todos, a mám je ve sbírce. 

Pojďme se podívat na trochu více o tom. Zde je páteřní pohled. Další věc, která říká, že páteř spousta modelů, které jste přemýšleli o tom, nebo dokonce sbírky budou muset mít nějaký způsob, jak jsou zobrazeny. Musíme k tomu, že to-do seznamu, a nebylo by hezké, kdybychom mohli poskytnout pro každý model nebo spojovat s každým modelem tento názor který nám umožňuje Myslím, že připojit dva spolu? Zatímco dříve jsme museli použít pro smyčku, která by protéká každý todo v našem seznamu a pak vytisknout zde lze v podstatě připojit s tímto modelem. To je to-do view. Toto je spojeno s todo jsme našli dříve. Nyní každý todo je zobrazitelný nebo renderable tímto zobrazení úkolů. Všimněte si některé z oblastí. Co si myslíte, že to je tagName, tagName: Li? Nezapomeňte před rokem, když jsme chtěli vydat todo budeme muset explicitně spárovat naše Todos s tímto tagem li. Teď říkáme, že pokud to todo bude žít bude uvnitř tagu li. A teď jsme také sdružující události s našimi todos. 

Každý todo má tuto jednu událost. Pokud kliknete skoro přepínací tlačítko, to je to, co říkám tam, pak v podstatě označit todo jako opak toho, co bylo předtím, než a pak znovu zpracovala danou aplikaci. To je tak trochu podobný kódu před. Pamatuješ, jak jsme ji označil buď jako opak or- a pak jsme se znovu udělala z ní. Povšimněme si ale nyní tuto událost býval něco, co bylo v HTML. Je tam seděl. Tlačítko měl na kliknutí. Po klepnutí na tlačítko, docela to dělá soub. K nastavit, že todo být neúplné. Zde jsme spojeno, že událost kliknutí, že přepínací tlačítko a couvání ať už je to zapnout nebo vypnout s tímto názorem. 

To je hezký způsob zřízení tuto událost tak, že je to velmi těsně pojí Z tohoto pohledu, a tak zjistíte tohle víc. Mám metodu Render, a my nemusíme procházet detaily. Je to trochu podobné tomu, co jsme měli předtím, nevšimnout Nejsem průchozí cokoliv. Nejsem tisku, že ul. tag, který je jakýmsi říkat budu tisknout všechny prvky. Já poskytuje funkce pro vykreslování tohle to-do položky. Jedná se o velmi silný pojem, protože v podstatě náš seznam úkolů se skládá ze všech těchto todos, a pokud je možné v podstatě určit, způsob, jak k tomu, aby jeden z těchto todos pak můžeme mít naši silnou páteř per se činí všechny todos voláním metody render o jednotlivých todos. To je pojem, který je zde velmi užitečná. Nyní je dobrá otázka se zeptat, jak je tato aplikace jsou dohromady? Protože máme schopnost vyjádřit jednu todo, ale jak jsme se získat představu o více todos? 

Pojďme se na to podívat. Toto je poslední díl. Všimněte si, že máme to-do seznamu názor zde a všimněte si, že je to také názor. A jít na pár věcí, Metoda initialize to bude volána, když jsme se poprvé vytvořit tento seznam úkolů. Jak vidíte, je to jako vytváření seznamu úkolů a asociovat to s tímto názorem. A pak jsem přidal funkci, takže zde v podstatě, když přidáte položku, je to podobné jako metodu AddItem jsme viděli před- Chystám se vytvořit nový objekt todo, a všimněte si, jsem vlastně volání Tato nová metoda todo, takže je zajištěna páteřní, a mohu předat své vlastnosti zde. A teď každý todo, že jsem vytvoříte pomocí to bude mít, že funkce, které jsme viděli předtím. Povšimněte si, že jsem vyklízet textové pole před-malý malý detail- a pak jsem dodal této kolekce. 

To skoro vypadá trochu divné, protože předtím jsme prostě museli udělat, že todos.push, a pak jsme skončili, a to může zdát složitější pro tento konkrétní projekt, a můžete zjistit, že páteř nebo dokonce úhlové nebo jakýkoli jiný rámec nebude vyhovovat vašemu konkrétní projekt, ale myslím, že je důležité přemýšlet o tom, co to znamená ve větším měřítku pro větší projekty, protože pokud bychom měli větší projekt, kde jsme byli představující některé opravdu komplexní sběr, něco hlubšího než jen to-do seznamu, řekněme seznamu přátel nebo něco podobného, ​​že by to mohlo přijít vhod protože bychom mohli zorganizovat náš kód do opravdu pohodlné, takovým způsobem, který by bylo jednodušší pro někoho jiného kdo chtěl vyzvednout projekt stavět. Můžete vidět, že to poskytuje spoustu struktury. A pak volám činí na tomto addItem. Render, jak vidíte, a vy nemusíte chápat tuto plnou syntaxi, ale v podstatě pro každý model to bude volat jednotlivé metody render. Je to druh, kde to přichází. Řekněme, určit, jak k tomu, aby jednotlivé Todos, a pak pojďme lepidlo je dohromady jako celek. Ale to poskytuje způsob, abstrakce, protože jsem mohl změnit způsob, jakým jsem se rozhodl k tomu, aby jednotlivé Todos, a já bych neměl změnit libovolné tohoto kódu. To je docela v pohodě. 

Má někdo nějaké otázky ohledně rámců JavaScript? [Student neslyšitelný otázka] Jistě, to je velká otázka. Otázkou bylo, jak jsem obsahovat rámců? Většina JavaScript rámce jsou v podstatě jen js že můžete zahrnout na začátek kódu. Všimněte si, v hlavové části mého HTML mám všechny tyto tagy skriptu, a konečný skript tag je kód, který jsme napsal. A pak 3 rámcové kódy jsou jen také značky skriptu. Jsem včetně jim, co se nazývá CDN, , který mi umožňuje dostat od někoho jiného v tomto bodě ale každý rámec má to, můžete do velké míry najít obsah pro konkrétní knihovnu JavaScriptu k dispozici u některých CDN nebo něco takového, a pak můžete zahrnout tyto tagy skriptu. Dává to smysl? Skvělý. 

To jsou dva různé přístupy. Ti, kteří nejsou jedinými přístupy k řešení tohoto problému. Existuje mnoho různých věcí, které někdo může udělat, a tam je mnoho rámců venku. Úhlové a páteř neříkají celou pravdu. Hodně štěstí s vaším závěrečných prací, a moc děkuji. [CS50.TV]