[Powered by Google Translate] [Seminár] [Javascript kostry: Prečo a ako] [Kevin Schmid] [Harvard University] [To je CS50.] [CS50.TV] 

Ahoj, všetci. Vitajte na rozhraní JavaScript semináre. Volám sa Kevin, a dnes budem hovoriť o frameworks JavaScript, a cieľom tohto seminára je, aby vám na, povedzme, zvládnuť konkrétny rámec samo o sebe ale aby vám širokú úvod do niekoľkých rámcov a ukázať, prečo by sme chceli použiť rámec. 

Ako to urobím, budem poskytnúť trochu pozadia v JavaScripte, a potom budeme to tam. Chystáme sa začať tým, že vykonávanie to-do zoznamu. Tu je náš zoznam úloh, pre dnešok. Je to celkom smiešne. Musíme zaviesť do zoznamu úloh v JavaScripte. To je to, čo to bude vyzerať, tak to je náš prvý cieľ. Nebudeme používať rámec na to, že. Ideme do kódu JavaScriptu a získať zoznam úloh do práce. Potom budeme zlepšovať dizajn bez použitia rámca. Budeme diskutovať rôzne veci môžeme robiť len s JavaScriptu sám aby sa náš zoznam úloh trochu viac dobre navrhnuté. Potom budeme hádzať v niektorých jQuery, a potom sa budeme pozerať na ten istý zoznam úloh, práve sa vykonávajú v rôznych rámcoch, a budeme diskutovať  klady a zápory pozdĺž cesty. 

Začnime vykonávania, ktoré to-do zoznamu. Povedzme, že máme dostať túto HTML. Budem robiť to o niečo menšie. Ako vidíte, mám malú hlavičku, ktorá hovorí, že todo a malá krabička, kde by som mohol zadať popis a todo a potom nová položka tlačidlo, tak sa poďme skúsiť zadať nové todo do tohto zoznamu. Dajte JavaScript rámcov seminár, a ja som sa trafiť novú položku. Mám túto výstrahu JavaScript, ktorý hovorí, implementovať ma. Máme na jeho vykonanie. Poďme sa pozrieť na kód pre toto, ako HTML a JavaScript. Tu je náš HTML. Ako môžete vidieť tu, tu je náš malý Todos hlavičky. To bolo odvážne, čo hore, a potom máme vstupné pole s zástupný symbol, a potom je tu určitá vlastnosť tohto tlačidla volanie tejto funkcie addTodo. Chce niekto hádať, čo to je pri kliknutí znamenať? [Študent počuť odpoveď] Dobrý je na kliknutie je niečo ako udalosti, ako kliknutie myšou je proste udalosť, a čo robíme sa budeme viazanie udalosť kliknutí na toto tlačidlo na vykonanie tejto funkcie. AddTodo to je udalosťou pre kliknutí na toto tlačidlo. 

Ako môžete vidieť, keď som kliknite na tlačidlo nové položky Pri kliknutí udalosť dostane padáka, a táto funkcia volaná. Pozrime sa na funkcie. Ako vidíte, tu je môj kód v jazyku JavaScript doteraz. Čo mám na vrchole je globálna dátová štruktúra pre mojej to-do zoznamu. Vyzerá to, že pole. Je to len prázdne pole. A potom mám addTodo funkciu, ktorá sme videli skôr, a jediný riadok kódu je tu upozornenie. Upozorňuje implementovať ma, a potom mám dve úlohy na ruky. Musím sa pridať todo do tejto globálnej dátovej štruktúry, a potom chcem upozorniť na to-do zoznamu. Nič moc chuť ešte nie, ale JavaScript môžete byť oboznámení s, tak som ísť pomaly a preskúmať základy JavaScriptu týmto spôsobom. 

Dajme to výstrel. Povedzme, že používateľ zadá niečo do tohto boxu. Len som napísal niečo tu, textu. Ako triediť prístup tohto textu pomocou JavaScriptu? Nezabudnite, že JavaScript je jedným z jej základných čŕt je, že nám dáva Tento programový prístup k DOM. To nám umožňuje prístup k prvkom a ich vlastnosti tohto skutočného HTML. Spôsob, akým to robíme sa holé kosti JavaScript je, že môžete skutočne použiť funkciu v JavaScriptu s názvom getElementByID. Chcem ukladať text, ktorý je napísaný, že v nejakej premennej, tak som chcel povedať, novú premennú s názvom new_todo, a budem sa dostať, že prvok. Jedná sa o funkciu,. GetElementByID. A teraz začínam prvok podľa ID, takže musím ID tohto textového poľa, tak som mu poskytla ID new_todo_description. Takto budem mať prvok. To je môj argument tejto funkcie, určiť, ktoré číslo sa dostať. A tak to je prvok v HTML, a to má vlastnosti. Videl si ty. Sú to atribúty. Atribútom textového prvku, ktorý ukladá vstup užívateľa sa nazýva hodnota. Zachránil som hodnotu tohto textového poľa sa do tejto premennej s názvom new_todo. Teraz mám programový prístup k tejto premennej, čo je celkom fajn pretože teraz, čo môžem urobiť je, že som ho pridať do svojho to-do zoznamu. 

Spôsob, akým sa to v JavaScripte a nebojte sa, ak ste oboznámení s tým, ale len tak cez to je todos.push pretože to je meno môjho globálne dátové štruktúry tu, a budem tlačiť new_todo. To je skvelé, pretože teraz som sa pridal k môjmu JavaScript zastúpenie, ktoré to-do zoznamu. Ale teraz, ako sa dostanem späť do HTML? Musím nájsť spôsob, ako triediť push späť. Inými slovami, nejako som sa k tomu toto. Čo budeme robiť, je budeme čerpať zoznamu úloh. Musím aktualizovať ostatným HTML na tejto stránke, a ako môžete vidieť, nechal som túto malú nádobu tu Tento delič na stránky, ktorej ID je todos, a ja idem dať zoznamu úloh tam. Najprv idem vyčistiť to, pretože hovoria, že bol starý zoznam úloh tam. Začínam tento prvok podľa ID znova, a ja som prístup k vnútornej HTML tohto prvku, a budem jasne najavo, že. Keď sme opustili tento kód ako je, mali by sme vidieť prázdnu Nič tam nie je, a teraz chcem začať vykresľovanie môj nový zoznamu úloh. Ja som v podstate chystá zničiť mojej zoznamu úloh. 

Teraz vnútorné HTML vnútri tohto Todos div je úplne jasné, a teraz musím začať pridávať môjho zoznamu. Prvá vec, ktorú chcem pridať späť je neusporiadané zoznam tag, čo v podstate znamená, že sa jedná o začiatok výpočtu. Teraz pre každý prvok v mojom Todos poli chcem ju vytlačiť v tej HTML. Chcem sa pripojiť ju na konci tohto zoznamu. Rovnako ako v C, môžem použiť pre sláčiky, a ja idem začať na začiatku môjho zoznamu na prvok 0, a ja idem celú cestu k dĺžke zoznamu. Môžeme skutočne získať dĺžku poľa v JavaScripte pomocou vlastnosť length. V podstate budem robiť niečo veľmi podobného vnútri tu vytlačiť tento prvok. Môžem znovu otvoriť todos div, vnútorné HTML vlastnosť, že, a ja idem pridať na túto novú položku zoznamu, a že sa to byť obklopený Tento tag chcete, a budem ak zřetězit s operátor + a to je i-ty prvok môjho Todos poľa, a potom budem uzavrieť túto značku. Teraz pre každý prvok pridáme novú položku zoznamu. A potom všetko, čo naozaj potrebujete urobiť, je uzavrieť túto značku. Potrebujem len uzavrieť, že neusporiadané zoznam tag. 

Myslíte si, získať pocit, pre ako to funguje? Tým sa otvorí celý zoznam. To pridáva jednotlivé prvky zo zoznamu Úlohy na zozname, a potom to zavrie celý zoznam, a toto je moja addTodo funkcie. Ja v podstate začína tým, že sa todo od textového poľa. Dodávam, že do Todos poľa, a potom som sa znova vykreslenie zoznamu úloh. Teraz môžem pridávať položky do zoznamu. To je celkom vzrušujúce, pretože v niekoľkých málo riadkov kódu sme v podstate urobili to-do zoznamu, kde môžeme pridať položky. Výborne. Je to niečo ako základný úvod do JavaScriptu. Nebojte sa príliš veľa o syntaxi pre túto chvíľu, ale o tom premýšľať koncepčne. Mali sme nejaké HTML. Mali sme textové pole na stránke, ktorá v podstate umožnil používateľom vstupu to-do položky a pridajte. A potom sme si JavaScript, aby priniesla, že todo od tohto textového poľa. Sme, že uložené vnútri poľa JavaScript, ktorý je v podstate podobný naše programové zastúpenie, ktoré to-do zoznamu, a potom sme vytlačili. Toto je todos.js. 

To je celkom v pohode, ale ako môžeme vziať ďalší? No, ako vidíte, nie je to ako úplný zoznam úloh. Napríklad, nemôžem označiť niektorú z týchto položiek sú neúplné, ako keď som chcel reprioritize položky alebo odstrániť položky. To je v poriadku, ale teraz môžeme zobrať ďalšie. Nebudem hovoriť príliš o pridanie ďalších funkcií, ale mohli by sme zobrať ďalšie. Poďme sa baviť o pridanie ďalšieho funkciu to-do zoznamu, ktorý bude schopný zistiť individuálne úlohy položky a mať to škrtnúť, takže v podstate som, že som to urobil. Poďme sa pozrieť na nejaký kód, ktorý môže dosiahnuť. Všimnite si, čo som urobil v hornej časti je, že som pridal nové globálne pole s názvom kompletný. Ja som v podstate pomocou tohto ukladať, či položky na zozname úloh sú úplné, alebo nie. To je jeden spôsob, ako to urobiť. Keď sa pozriem na vykonávanie tohto nariadenia, displej, v podstate, ak zadám todo a ja stlačte toto prepínacie tlačidlo to prechádza von, tak každá položka v tomto zozname je buď kompletný alebo neúplné stáť, a ja som s použitím iného poľa reprezentovať to. 

V podstate pre každý todo Úlohy v tomto poli tam je položka v kompletnej škále, ktorá v podstate ukazuje, či sa nejedná o kompletné. Som musel urobiť dosť minimálne zmeny tohto kódu, takže tu je naša addTodo funkcie. Všimnite si, že tu tlačím ho na pole, a potom som tlačí 0 tomuto kompletné pole, v podstate súbežne s tým nové podnety todo povedať Pridám túto položku, a to v spojení s touto hodnotou, čo znamená, že je to neúplné. A potom som prekresľovanie zoznamu úloh. Teraz si všimnite, som pridal tento drawTodoList funkciu. To si vyžaduje veľa kódu, ktorý sme mali predtým, v podstate vyčistí políčko a potom vypracuje nový zoznam úloh. Ale zistíte, že vo vnútri to pre slučky robíme trochu viac teraz. Sme v podstate kontrolovať, či je položka, ktorá zodpovedá tej todo tu je kompletný a my chová inak v týchto 2 prípadoch. Ak je to kompletné, my pridávame túto značku del, čo je v podstate spôsob, ako sa môžete dostať, že prečiarknutie účinku škrtnutím to-do zoznamu, ak je to kompletné, a ak tomu tak nie je, nie sme jeho zaradenie. A tak, že druh sa stará o to, 

a to je jeden spôsob, ako to dosiahnuť. A potom sa pozná, že používateľ klikne na jednu z týchto sme prepínať stav dokončenia to. Keď používateľ klikne, budeme zvrátiť, či to bolo dokončené, alebo nie, a potom sa to prekreslí. Tento druh prác. Máme tieto funkcie, ktoré vykonávajú svoje úlohy, a je to v poriadku. Je niečo, čo by sme mohli robiť lepšie o tom, aj keď? Všimnite si, máme tieto dva globálne poľa. Ak to bolo C, a mali sme dve polia, ktorá druh predstavovali dáta, ktorá bola akýmsi nejakým spôsobom súvisí Čo by sme použiť v C kombinovať tieto dve polia do niečoho, čo zapuzdruje oba kusy informácií? Chce niekto niečo navrhnúť? [Študent počuť odpoveď] 

Presne tak, takže sme mohli použiť nejaký struct, a keď si spomeniem, povedzme, pset 3, zapamätať sme mali slovník, a potom sme museli či slovo bol v slovníku a všetky boli tieto informácie dať dohromady v niektorých dátové štruktúry. Jedna vec, ktorú môžem urobiť s týmto kódom, aby sme sa vyhli týmto dve rôzne polia pre podobné kúsky informácií je môžem skombinovať do objektu JavaScript. Poďme sa na to pozrieť. Všimnite si, že len jeden rad na vrchole teraz a to, čo som urobil, je a to je len JavaScript syntaxe pre druh vytvára doslovnú verziu objektu, a všimnite si, tam sú dve vlastnosti, takže máme todo, a to drží pohromade s tým, či je to kompletné alebo nekompletné. To je veľmi podobný kód. Sme pomocou jazyka JavaScript. Tento druh vecí zlepší. Rovnako ako teraz, sú všetky tieto odbory súvisiace informácie pohromade. Keď ideme ju vytlačiť, môžeme pristupovať poľa. 

Všimnite si, ako si vedieme Todos [i]. Kompletné miesto označenie kompletné pole samostatne, a všimnite si, keď chceme dostať k tomu reťazec Dostávame sa k tomu majetku tohto todo, takže tento druh dáva zmysel, pretože každá položka má tieto vnútorné vlastnosti o tom. Má todo, a to, či je to má úplné, alebo nie. Nie príliš veľa zmien tam funkčne, práve pridali nejaké ďalšie kódu. Jedná sa o zlepšenie na niektorých frontoch, nie? Myslím, že sme počítaná dizajnu trochu. Teraz máme objekty, ktoré v podstate zapouzdřit tieto dáta. Je ešte niečo, čo by sme mohli urobiť, tu ide o JavaScript? Ako upozornenie, že tento kód tu pre získanie vnútornej kód HTML div je trochu, myslím, dlho. Je tu document.getElementById ("todos"). InnerHTML. Jedna vec, ktorú môžeme urobiť, aby sa tento kód vyzerať trochu priateľskejší takže by som mať na posúvanie vľavo a vpravo, dopredu a dozadu, je, že som mohol použiť knižnicu jQuery ako. 

Poďme sa pozrieť na seminár 2, a to je rovnaký kód, ale to je hotové s jQuery. Tie nemusia byť príliš oboznámení s jQuery, ale len viem, že jQuery je akýsi knižnice JavaScriptu , Ktorý umožňuje ľahšie robiť veci, ako je prístup k jednotlivým prvkom v DOM. Tu namiesto toho povedal document.getElementById ("todos"). InnerHTML Môžem použiť oveľa čistejšie spôsob jQuery, ktorý je len pre použitie selektorov. Ako vidíte, tento kód sa dostať trochu čistejšie, funkčne veľmi podobné, ale to je nápad. Videli sme pár vecí tak ďaleko, tak sme začali len s surového implementáciu JavaScriptu. Pridali sme nové funkcie a ukázal, ako môžeme vylepšiť ju len to, čo máme v JavaScripte. 

Má niekto vidieť žiadne problémy s týmto dizajnom? Konkrétne, myslím, alebo nemusí byť nutne ťažkosti, ale povedzme, že sme nerobí to-do list projektu a zajtra sme sa rozhodli chceli sme zoznam potravín, alebo nákupný zoznam projektu. Mnoho z týchto funkcií sú veľmi podobné. Veľa vecí, ktoré sa chcú dostať z JavaScriptu sú veľmi časté, a to zdôrazňuje potrebu nejakého spôsobu takže to ľahšie. Musel som vytvoriť všetky tieto HTML prístup, všetko prístup DOM, ako budem reprezentovať To-Do List s týmto modelom. A všimnite si, že som zodpovedný ako tvorca JavaScriptu pre udržanie HTML a JavaScript, ktoré som v synchronizácii. Nič vykoná automaticky, že JavaScript zastúpenie alebo to-do zoznamu dostať vytlačení do HTML. Nič vymáhané, že okrem mňa. Musel som napísať žrebovanie To-Do List funkciu. A to nemusí byť, myslím, že je rozumné to urobiť, ale to môže byť únavné občas. Ak máte väčší projekt, ktorý by mohol byť ťažké. 

Rámcov, jeden z účelov rámcov je zjednodušiť tento proces a triediť faktora sa Tieto spoločné-myslím, že by sa dalo povedať, návrhové vzory že ľudia všeobecne majú nejaký spôsob, ako reprezentovať dáta či už je to zoznam priateľov, či už je to mapové podklady alebo niečo, alebo to-do zoznamu. Niektorí ľudia majú všeobecne spôsob reprezentácie informácií, a všeobecne je potrebné, aby tieto informácie nejako v synchronizácii medzi tým, čo používateľ vidí v nejakom pohľade, rozprávanie v zmysle, ako regulátora modelu názor, že ste videli v prednáške, a potom model, ktorý je v tomto prípade je toto pole JavaScript. Rámce nám spôsob, ako vyriešiť tento problém. Teraz sa poďme pozrieť na vykonávanie to-do zoznamu v rámci tzv angularjs. To je ono. Všimnite si, že sa zmestí na snímke. Nemám posúvať doľava a doprava. To asi nie je veľký dôvod odporúčame používať rámca, ale uvedomte si, som vôbec prístup jednotlivých prvkov HTML tu? Mám niekedy ísť do DOM? Vidíte nejakú document.getElementById alebo niečo také? Nie, to je preč. 

Uhlová nám pomáha udržať DOM a JavaScript naše zastúpenie niečoho druh v synchronizáciu, takže ak to nie je v súbore JS, ak neexistuje žiadny spôsob, ako programovo všetkým, že obsah HTML od JavaScriptu, ako sme to udržať v synchronizáciu? Ak to nie je v. Js súbor, musí to byť v HTML, nie? Toto je nová verzia HTML súboru, a všimnite si, pridali sme veľa tu. Všimnite si, že je tieto nové atribúty, ktoré hovoria ng tlačidlom myši a NG-repeat. Uhlová prístup k riešeniu tohto problému ťažkosti pri návrhu je v podstate robiť HTML oveľa silnejší. Uhlová je spôsob, ktorý umožňuje, aby HTML trochu výraznejšie. Napríklad, môžem povedať, že budem zviazať alebo viazať tohto textového poľa premenné v mojom uhlovej kóde JavaScript. Tento NG-model, robí len to. To v podstate hovorí, že bod vnútri tohto textového poľa, len spojiť, že s premennou new_todo_description v kóde JavaScript. To je veľmi silný, pretože nemám explicitne ísť DOM túto informáciu získať. Nemám povedať document.getElementById. Nemám použiť jQueries ako prístup DOM. Môžem spojiť s premennou, a potom, keď som sa to zmeniť premennú v JavaScripte je to stále v synchronizáciu s HTML, takže zjednodušuje proces museli ísť tam a späť medzi dvoma. Dáva to zmysel? 

A zistíte, že to nie je HTML prístupový kód. Sme práve urobil HTML silnejší, a teraz, napríklad, môžeme robiť veci, ako je tento, ako keď kliknete na to, volať túto funkciu v rámci todos.js, a mohli by sme to robiť skôr, ale existujú aj iné veci, ako je tento ng-model, a všimnite si tento NG-opakovanie. Čo si myslíte, že to robí? Tu je náš neusporiadané zoznam pred rokom. Máme ul značiek ale som stále robí tento zoznam vnútri kód JavaScript? Nebudem nikdy výslovne vykresľovanie tohto zoznamu. Ako to funguje? No, ako Uhlová Dosahuje to je to sa nazýva zosilňovač. V podstate to hovorí, že chcem vytlačiť HTML pre každú vnútornú todo môjho Todos poľa. Vnútri todos.jr je todos pole tu, a to vám povie uhlové tým prejsť polia a pre každý prvok sa zobrazí Chcem vytlačiť tento HTML. To je docela úžasné, pretože som si len urobiť bez toho aby ste museli písať na slučke, ktoré pre to-do zoznamu, ktorý bol len 30 riadkov kódu nemusí byť najvýhodnejší vec, ale ak máte veľký projekt, mohlo by to mať veľmi pohodlné. 

To je jedným z riešení tohto problému, takže HTML silnejší, a to nám umožňuje udržať JavaScript a HTML v synchronizácii. Existujú aj iné možnosti, ako vyriešiť tento problém, a nie každý rámec robí. Nie každý rámec funguje pozdĺž týchto liniek. Niektoré rámce majú rôzne prístupy, a možno zistíte, že vás baví kódovanie do jedného rámca nad druhou. Poďme sa pozrieť na jeden. Toto je zoznam úloh kódované v rámci tzv chrbticu. Chystám sa ísť cez to rýchlo. Začnem s HTML, než pôjdeme tam. Jedna sekunda. Počnúc HTML, ako ste si všimli, náš HTML je veľmi podobný na to, čo bolo predtým, takže nič moc nové na tomto poli. Ale naša JS súbor je trochu iný. Chrbticovej druh má túto myšlienku, alebo postavený na myšlienke, že veľa z toho, čo robíme, povedzme, naše JavaScript projekty je premýšľať o tom, modely a zbierky týchto modelov. To by mohlo byť, napríklad fotografie a zbierky fotografií, alebo myšlienka priateľa a zbierok priateľov. A často, keď sme programovanie aplikácií JavaScript budeme nejako reprezentovať myšlienku mať zbierku priateľov nejako v JavaScripte a chrbticu nám dáva túto vrstvu v hornej časti existujúcich polí Javascript je a objektov robiť silnejší veci s tým ľahšie. 

Tu som definovala-do modelu, a nemusíte príliš starať o syntax, ale zistíte, že to, čo je jedna z vlastností tohto? Má predvolené polia. Chrbticovej mi umožňuje špecifikovať už bat každý nový úlohu, ktorý som vytvoriť bude mať tieto nastavenia. Teraz môžem prispôsobiť, ale musí mať možnosť stanoviť východiskovú je pekné, a je to celkom pohodlné, pretože to nie je niečo, čo je ako vlastný JavaScript, a teraz nemám explicitne hovoria, že todos sú neúplné. Môžem povedať hneď bat, že todos sa bude označený ako nekompletná. Všimnite si, potom to, čo je to? Teraz mám to-do zoznamu, a to je kolekcia. Všimnite si, že pole spojené s modelom, ktorý hovorí, todo. To je môj spôsob, ako povedať, že chrbtica Budem myslieť na kolekciu týchto jednotlivých todos. To je v podstate štruktúra modelu pre môj program. Tu mám túto myšlienku o zbierky, av podstate položky v ňom obsiahnuté sú kolekcie bude táto todos, a to je veľmi prirodzený v tomto zmysle pretože mám Todos, a mám ich v zbierke. 

Poďme sa pozrieť na trochu viac o tom. Tu je chrbticovej pohľad. Ďalšia vec, ktorá hovorí, že chrbtica veľa modelov, ktoré ste premýšľali o tom, alebo dokonca zbierky budú musieť mať nejaký spôsob, ako sú zobrazené. Musíme k tomu, že to-do zoznamu, a nebolo by pekné, keby sme mohli poskytnúť pre každý model alebo spájať s každým modelom tento názor ktorý nám umožňuje Myslím, že pripojiť dvaja spolu? Kým predtým sme museli použiť pre slučku, ktorá by preteká každý todo v našom zozname a potom vytlačiť tu možno v podstate pripojiť s týmto modelom. To je to-do view. Toto je spojené s todo sme našli skôr. Teraz každý todo je zobraziteľný alebo renderable týmto zobrazenie úloh. Všimnite si niektoré z oblastí. Čo si myslíte, že to je tagName, tagName: Li? Nezabudnite pred rokom, keď sme chceli vydať todo budeme musieť explicitne spárovať naše Todos s týmto tagom chcete. Teraz hovoríme, že ak to todo bude žiť bude vnútri tagu chcete. A teraz sme tiež združujúca udalosti s našimi todos. 

Každý todo má túto jednu udalosť. Pokiaľ kliknete skoro prepínacie tlačidlo, to je to, čo hovorím tam, potom v podstate označiť the todo ako opak toho, čo bolo predtým, než a potom znovu spracovala danú aplikáciu. To je tak trochu podobný kódu pred. Pamätáš, ako sme ju označil buď ako opak or- a potom sme sa znova urobila z nej. Všimnime si ale teraz túto udalosť býval niečo, čo bolo v HTML. Je tam sedel. Tlačidlo mal na kliknutie. Po kliknutí na tlačidlo, celkom to robí veci, aby nastaviť, že todo byť neúplné. Tu sme spojené, že udalosť kliknutia, že prepínacie tlačidlo a cúvanie či už je to zapnúť alebo vypnúť s týmto názorom. 

To je pekný spôsob zriadenia túto udalosť tak, že je to veľmi pevne viazané Z tohto pohľadu, a tak zistíte tohle viac. Mám metódu Render, a my nemusíme prechádzať detaily. Je to trochu podobné tomu, čo sme mali predtým, nevšimnúť Nie som priechodná čokoľvek. Nie som tlače, že ul tag, ktorý je akýmsi hovoriť budem tlačiť všetky prvky. Ja poskytuje funkcie pre vykresľovanie toto to-do položky. Jedná sa o veľmi silný pojem, pretože v podstate náš zoznam úloh sa skladá zo všetkých týchto todos, a ak je možné v podstate určiť, spôsob, ako k tomu, aby jeden z týchto todos potom môžeme mať našu silnú chrbticu per sa robia všetky todos volaním metódy render o jednotlivých todos. To je pojem, ktorý je tu veľmi užitočná. Teraz je dobrá otázka sa opýtať, ako je táto aplikácia sú dohromady? Pretože máme schopnosť vyjadriť jednu todo, ale ako sme sa získať predstavu o viac todos? 

Poďme sa na to pozrieť. Toto je posledný diel. Všimnite si, že máme to-do zoznamu názor tu a všimnite si, že je to tiež názor. A ísť na pár vecí, Metóda initialize to bude volaná, keď sme sa prvýkrát vytvoriť tento zoznam úloh. Ako vidíte, je to ako vytváranie zoznamu úloh a asociovať to s týmto názorom. A potom som pridal funkciu, takže tu v podstate, keď pridáte položku, je to podobné ako metódu Addit sme videli pred- Chystám sa vytvoriť nový objekt todo, a všimnite si, som vlastne volanie Táto nová metóda todo, takže je zaistená chrbticovej, a môžem odovzdať svoje vlastnosti tu. A teraz každý todo, že som vytvoríte pomocou to bude mať, že funkcie, ktoré sme videli predtým. Všimnite si, že som vyklízet textové pole pred-malý malý detail- a potom som dodal tejto kolekcie. 

To skoro vyzerá trochu divné, pretože predtým sme jednoducho museli urobiť, že todos.push, a potom sme skončili, a to môže zdať zložitejšie pre tento konkrétny projekt, a môžete zistiť, že chrbtica alebo dokonca uhlové alebo akýkoľvek iný rámec nebude vyhovovať vášmu konkrétny projekt, ale myslím, že je dôležité premýšľať o tom, čo to znamená vo väčšom meradle pre väčšie projekty, pretože ak by sme mali väčší projekt, kde sme boli predstavujúce niektoré naozaj komplexný zber, niečo hlbšieho než len to-do zoznamu, povedzme zoznamu priateľov alebo niečo podobné, že by to mohlo prísť vhod pretože by sme mohli zorganizovať náš kód do naozaj pohodlnej, takým spôsobom, ktorý by bolo jednoduchšie pre niekoho iného kto chcel vyzdvihnúť projekt stavať. Môžete vidieť, že to poskytuje veľa štruktúry. A potom volám činí na tomto Addit. Render, ako vidíte, a vy nemusíte chápať túto plnú syntax, ale v podstate pre každý model to bude volať jednotlivé metódy render. Je to druh, kde to prichádza. Povedzme, určiť, ako k tomu, aby jednotlivé Todos, a potom poďme lepidlo je dohromady ako celok. Ale to poskytuje spôsob, abstrakcie, pretože som mohol zmeniť spôsob, akým som sa rozhodol k tomu, aby jednotlivé Todos, a ja by som nemal zmeniť ľubovoľné tohto kódu. To je celkom v pohode. 

Má niekto nejaké otázky ohľadne rámcov JavaScript? [Študent nepočuteľný otázka] Iste, to je veľká otázka. Otázkou bolo, ako som obsahovať rámcov? Väčšina JavaScript rámce sú v podstate len js že môžete zahrnúť na začiatok kódu. Všimnite si, v hlavovej časti môjho HTML mám všetky tieto tagy skriptu, a konečný skript tag je kód, ktorý sme napísal. A potom 3 rámcovej kódy sú len tiež značky skriptu. Som vrátane im, čo sa nazýva CDN, , Ktorý mi umožňuje dostať od niekoho iného v tomto bode ale každý rámec má to, môžete do veľkej miery nájsť obsah pre konkrétnu knižnicu JavaScriptu k dispozícii u niektorých CDN alebo niečo také, a potom môžete zahrnúť tieto tagy skriptu. Dáva to zmysel? Skvelý. 

To sú dva rôzne prístupy. Tí, ktorí nie sú jedinými prístupy k riešeniu tohto problému. Existuje mnoho rôznych vecí, ktoré niekto môže urobiť, a tam je veľa rámcov vonku. Uhlové a chrbtica nehovoria celú pravdu. Veľa šťastia s vaším záverečných prác, a moc ďakujem. [CS50.TV]