[Powered by Google Translate] [Seminaras] [JavaScript Karkasai: Kodėl ir kaip?] [Kevin Schmid] [Harvardo universiteto] [Tai CS50.] [CS50.TV] 

Sveiki, visi. Sveiki atvykę į "JavaScript" sistemas seminare. Mano vardas yra Kevin, ir šiandien aš ruošiuosi kalbėti apie "JavaScript" sistemas, ir šio seminaro tikslas yra ne jums, tarkim, išmokti tam tikrą pagrindą per se bet suteikti jums bendrą įvadą į sistemas pora ir parodyti, kodėl mes turėtume norėti naudotis sistema. 

Prieš tai, kad aš suteikti šiek tiek fone JavaScript ir tada mes jį iš ten. Mes ketiname pradėti įgyvendinti to-do list. Štai mūsų užduotis sąrašas šiandien. Tai tipo juokinga. Mes turime įgyvendinti iki padaryti sąrašą JavaScript. Tai, ką jis ketina atrodyti, kad tai pirmasis mūsų tikslas. Mes neketiname naudoti sistemą, kaip tai padaryti. Mes ketiname kodas JavaScript ir gauti darbų sąrašas dirbti. Tada mes ketiname pagerinti dizainą nenaudojant sistemą. Mes ketiname aptarti įvairių dalykų, mes galime padaryti tik su JavaScript vien Kad mūsų to-do sąrašą šiek tiek daugiau gerai suprojektuoti. Tada mes ketiname mesti kai JQuery, ir tada mes ketiname pažvelgti į tą patį to-do list, tiesiog įgyvendinama skirtingose ​​sistemose, ir mes aptarsime  privalumai ir trūkumai pakeliui. 

Pradėkime įgyvendinti, kad to-do list. Tarkime, mes skiriant šį HTML. Aš einu, kad tai šiek tiek mažesnis. Kaip matote, aš turiu šiek tiek antraštę, kuri sako TODO ir šiek tiek langas, kur galiu įvesti iš darbų sąraše aprašymas ir tada naujas punktas mygtukas, todėl pabandykime įvesti naują todo prie šio sąrašo. Padovanoti JavaScript sąrangas seminarą, ir aš, kad pasiektų naują elementą. Man tai "JavaScript" perspėjimo, kad sako įgyvendinti mane. Mes turime ją įgyvendinti. Leiskite patikrinti, kad šis kodeksas, tiek HTML ir "JavaScript". Štai mūsų HTML. Kaip matote čia, čia mūsų mažai Todos antraštė. Tai buvo, kad drąsus dalykas viršuje, ir tada mes turime įvedimo lauką su vietos rezervavimo ženklą, ir tada ten tikras atributas šį mygtuką, kad vadina šią funkciją addTodo. Ar kas nors nori atspėti, ką, kad paspaudimą reiškiantis? [Studentų nesigirdi atsakas] Geras, spustelėjus tarsi kaip įvykio, kaip paspaudę pele yra tik įvykis, ir ką mes darome yra mes susiejimas paspaudę šį mygtuką atlikti šią funkciją renginį. AddTodo yra šis renginys prižiūrėtojas už spustelėję mygtuką, kad. 

Kaip matote, kai aš spustelėkite naują elementą " Spustelėjus renginys bus atleistas, ir ši funkcija bus vadinamas. Pažvelkime funkcija. Kaip matote, čia mano kodas JavaScript šiol. Kas Turiu viršuje yra pasaulinė duomenų struktūra mano to-do list. Atrodo masyvo. Tai tik tuščias masyvo. Ir tada turiu addTodo funkciją, kuri mes matėme anksčiau, ir tik eilutėje kodas ten yra toks perspėjimas. Jis įspėja įgyvendinti mane, ir tada aš turiu 2 užduotis po ranka. Turiu pridėti todo to pasaulio duomenų struktūros, ir tada aš noriu atkreipti dėmesį į to-do list. Nieko pernelyg išgalvotas, tik dar, bet Javaskriptą, jums gali būti susipažinę su, todėl aš ruošiuosi eiti lėtai ir peržiūrėti JavaScript pagrindus tokiu būdu. 

Leiskite duoti tai kulka. Tarkime, kad vartotojas įveda kažką šį bloką. Aš ką tik įvedėte kažką čia, teksto. Kaip rūšiuoti susipažinti, kad teksto per JavaScript? Atminkite, kad "JavaScript", vienas iš jos pagrindinių funkcijų yra ta, kad ji suteikia mums tai programinis prieigą prie DOM. Jis leidžia mums pasiekti elementus ir jų savybes šio faktinio HTML. Kaip mes darome, kad su Bare Bones "JavaScript" tai mes iš tikrųjų galite naudoti "JavaScript" funkcija vadinama getElementById. Noriu išsaugoti tekstą, rašomąja ten kai kintamąjį, todėl aš ruošiuosi pasakyti kintamąjį vadinamą new_todo, ir aš ruošiuosi gauti, kad elementas. Tai funkcija,. GetElementById. O dabar gaunu elementas pagal ID, todėl man reikia tos laukelį ID, todėl aš davė jai ID new_todo_description. Štai kaip aš ruošiuosi gauti elementą. Tai mano argumentas šią funkciją, nurodyti, kurios ID gauti. Ir todėl, kad tai HTML elementas, ir jis turi savybes. Jūs matėte jų. Jie atributai. Iš teksto elementą, kuris saugo vartotojo įvesties atributas vadinamas vertė. Įrašiau tos laukelį vertę dabar į šį kintamąjį rodiklį vadinama new_todo. Dabar aš turiu programinį prieigą prie šio kintamojo, kuris yra tipo kietas nes dabar, ką aš galiu padaryti, tai galiu pridėti jį prie savo to-do list. 

Kaip mes būtų tai padaryti JavaScript ir nesijaudinkite, jei esate susipažinę su tuo, bet tiesiog išgyvena tai, todos.push nes tai mano pasaulio duomenų struktūros pavadinimas čia, ir aš ruošiuosi stumti new_todo. Tai puiku, nes dabar Aš pridėjo jį prie savo "JavaScript" atstovavimas, kad to-do sąrašą. Bet dabar kaip man gauti jį atgal į HTML? Turiu rasti būdą, tarsi stumti jį atgal. Kitaip tariant, aš tarsi turi atkreipti tai. Kas mes ketiname padaryti, tai mes ketiname daryti to-do sąrašą. Man reikia atnaujinti kitas HTML tame puslapyje, ir, kaip matote, aš paliko šį mažą konteinerį čia šis puslapis, kurio ID yra todos daliklis, ir aš ruošiuosi įdėti į darbų sąrašo ten. Pirmiausia aš ruošiuosi jį išvalyti, nes, tarkim, ten buvo senas darbų sąrašas yra. Gaunu šį elementą, ID vėl, ir aš patekti į vidinį HTML tos elemento, ir aš ruošiuosi aišku, kad. Jei mes palikome šį kodą kaip yra, mes norime matyti tuščią nieko nėra, o dabar aš noriu pradėti teikti savo naują darbų sąrašą. Aš iš esmės ketina sunaikinti savo pasirinkto darbų sąrašo. 

Dabar vidinis HTML viduje tos TODOS div yra visiškai aiškus, ir dabar man reikia pradėti pridedant savo sąrašą. Pirmas dalykas, kurį noriu pridėti atgal yra netvarkingai sąrašą tegus kuris iš esmės reiškia, kad tai yra netvarkingai sąrašą pradžia. Dabar už kiekvieną mano TODOS masyvo elemento Noriu atspausdinti jį viduje, kad HTML. Noriu pridėti ją prie šio sąrašo apačioje. Tiesiog kaip ir C, galiu naudoti už linijos, ir aš ruošiuosi pradėti ne mano sąrašo pradžioje bent elementas 0, ir aš ruošiuosi eiti visą kelią į sąrašo ilgį. Mes iš tikrųjų galite gauti, kad į JavaScript masyvo naudojant ilgis turtą ilgį. Iš esmės aš ruošiuosi padaryti kažką labai panašaus viduje čia spausdinti šį elementą. Aš vėl gali naudotis TODOS div, vidinis HTML nuosavybė, kad, ir aš norėčiau pridėti šią naują sąrašo elementą, ir tai bus apsuptas tai li tegus, ir aš ruošiuosi Jungiant su + operatorius, ir tai-osios elementas mano TODOS masyvas, ir tada aš ruošiuosi uždaryti šią žymę. Dabar už kiekvieną elementą, mes pridėti naują sąrašo įrašą. Ir tada mes tikrai reikia padaryti, tai užsidarymas, kad žyma. Aš tiesiog reikia uždaryti išjungti, kad netvarkingai sąrašą tegus. 

Ar gaunate už kaip tai veikia jaustis? Tai atveria visą sąrašą. Tai prideda atskirų elementų, iš TODOS sąrašo į sąrašą, ir tada, kad uždaro visą sąrašą, ir tai yra mano addTodo funkcija. Aš iš esmės pradėti gauti nuo teksto laukelyje todo. Aš pridurčiau, kad į Todos masyvą, ir tada aš vėl tampa to-do sąrašą. Dabar galiu pridėti elementus į savo sąrašą. Tai rūšies įdomus, nes tik keletą eilučių kodo mes iš esmės padarė į darbų sąrašą, kur mes galime pridėti naujus elementus. Didysis. Tai savotiškas įvadą JavaScript. Negalima nerimauti per daug apie tai, dabar sintaksė, bet manau apie tai konceptualiai. Mes turėjome šiek tiek HTML. Mes turėjome teksto lauką puslapyje, kad iš esmės leidžia vartotojams įvestį formos elemento pridėti. Ir tada mes naudojome JavaScript, kad galėtumėte atnešti, kad todo iš šio teksto lauką. Mes saugomi, kad viduje JavaScript masyvas, kuris iš esmės yra kaip mūsų programinis atstovavimas, kad to-do list, ir tada mes atspausdintas jį. Tai todos.js. 

Tai tipo kietas, bet kaip mes galime pasinaudoti šia toliau? Na, kaip matote, tai nėra kaip visiškas to-do sąrašą. Pavyzdžiui, aš negaliu pažymėti bet kurį iš šių, kaip neišsami daiktų, pavyzdžiui, jei aš norėjau reprioritize elementus arba ištrinti elementus. Tai yra gerai, bet mes galime pasinaudoti šia toliau. Nesiruošiu kalbėti per daug apie pridedant papildomų funkcijų, bet mes galime imtis, kad toliau. Pakalbėkime apie pridedant dar vieną funkciją, tai to-do list, kuri bus kad galėtų patikrinti asmenį to-do elementą ir jis turi būti užbraukta, todėl iš esmės sakydamas aš padariau tai. Pažvelkime į tam tikrą kodą, kad galėtų pasiekti, kad. Pranešimas ką aš padariau viršuje yra aš pridėjo Nauja pasaulinė masyve baigtas. Aš iš esmės naudojant šią laikyti, ar dėl to-do list elementai yra išsami, ar ne. Tai vienas iš būdų tai padaryti. Jei aš pažvelgti į šios direktyvos įgyvendinimą, ekranas, Iš esmės, jei aš įvesti todo ir aš paspauskite šį perjungimo mygtuką jis kerta, ir todėl kiekvienas šio sąrašo elementas turi arba visiškai ar neišsamius valstybė, ir aš naudoju kitą masyvo patvirtinate, kad. 

Iš esmės kiekvienam toje TODOS masyvo darbų sąraše ten elementas visiškai matrica, iš esmės rodo ar tai yra išsami, ar ne. Turėjau padaryti gana nedidelius pokyčius šiuo kodeksu, todėl čia mūsų addTodo funkcija. Atkreipkite dėmesį, kad čia aš stumti jį į masyvą, ir tada aš stumti 0 to visiškai masyvas, iš esmės kartu su tos naujosios todo paspaudimu pasakyti Aš pridėti šį elementą, ir tai kartu su šiuo dydžiu, tai reiškia, kad jis yra neužbaigtas. Ir tada aš atvaizdavimo to-do list. Dabar, atkreipkite dėmesį, aš pridėjo šį drawTodoList funkciją. Tai užtrunka daug kodo mes turėjome prieš daug, iš esmės išvalo langelį ir tada atkreipia naują darbų sąrašą. Bet pastebėsite, kad viduje tai už linijos mes darome tiek daugiau dabar. Mes iš esmės patikrinti, ar prekės atitinka ajai TODO čia yra baigtas, ir mes elgiasi skirtingai šių 2 aplinkybėmis. Jei jis baigtas, mes įtraukiame šį del tegus kuris iš esmės yra būdas galite gauti, kad streiką per poveikio nubraukiant to-do sąrašą, jei jis baigtas, ir, jei taip nėra, mes ne įtraukiant jį. Ir todėl, kad šios rūšies rūpinasi, kad 

ir kad vienas iš būdų tam pasiekti. Ir tada pastebėsite, kai vartotojas paspaudžia vieną iš šių mes perjungti užbaigimo statusą jį. Kai vartotojas paspaudžia, mes pakeisti, ar jis buvo baigtas, ar ne, ir tada mes perbraižyti jį. Šis darbų natūra. Mes turime šias funkcijas, kad jie galėtų atlikti savo užduotis, ir tai yra gerai. Ar yra kas nors, mes galime padaryti geriau apie tai, nors? Pranešimas turime šiuos 2 pasaulinius masyvus. Jei tai buvo C, o mes turėjome 2 masyvus, kad šios rūšies atstovaujama duomenys, kurie buvo tarsi susiję tam tikru būdu ką mes naudojame C sujungti šiuos 2 laukus į kažką, apimantis tiek informacijos vienetų? Kiekvienas nori pateikti pasiūlymą? [Studentų nesigirdi atsakas] 

Būtent, kad galėtume naudotis kai struct natūra, ir jei manote, atgal į, tarkim, pset 3 prisiminti mes turėjome žodyną, ir tada mes turėjo, ar žodis buvo žodyną, ir visa ši informacija buvo sudėti viduje kai duomenų struktūra. Vienas dalykas, aš galiu daryti su šiuo kodu, kad išvengti šių 2 skirtingus masyvus panašių gabalų informacijos galiu juos sujungti į JavaScript objektas. Leiskite pažvelgti, kad išvaizdą. Pranešimas turiu tik viena matrica viršuje dabar ir ką aš padariau, tai ir tai tik Javaskriptą sintaksė tarsi sukurti pažodžiui versiją objektas, ir duombazėje yra pateikti 2 savybės, todėl mes turime todo, ir ji laikomi kartu su tuo, ar tai sukomplektuota arba nesukomplektuota. Tai yra labai panašus kodas. Mes naudojant JavaScript objektus. Tai pagerina dalykų natūra. Kaip ir dabar, visos šios susijusios informacijos laukai yra laikomi kartu. Kai mes einame į jį atspausdinti, mes galime prieiti prie laukus. 

Atkreipkite dėmesį, kaip mes darome todos [i]. Pilnas vietoj patikrinti visą spektrą atskirai, ir pastebėsite, kai mes norime gauti to-do eilutę mes vis to-do turtą tos darbų sąraše, todėl šios rūšies prasmę, nes kiekvienas daiktas turi šias būdingas savybes apie tai. Ji turi todo, ir ji turi ar tai išsami, ar ne. Ne per daug pakeitimai yra funkciškai, ką tik įdėjote šiek tiek daugiau kodą. Tai kai kuriose srityse tobulinimas, tiesa? Aš turiu galvoje, mes sudauginti iš dizaino šiek tiek. Dabar mes turime objektai iš esmės apimti šiuos duomenis. Ar yra kas nors daugiau mes galime padaryti iš čia pagal JavaScript? Kaip pastebėsite, kad šis kodas čia gauti vidinį HTML iš div yra šiek tiek, manau, ilgai. Yra document.getElementById ("todos). InnerHTML. Vienas dalykas, mes galime padaryti, kad šis kodas atrodo šiek tiek draugiškesni todėl norėčiau nereikės laikyti slinkimo į kairę ir į dešinę, pirmyn ir atgal, yra galėčiau naudoti kaip jQuery biblioteką. 

Leiskite patikrinti seminarą 2, ir tai yra tas pats kodas, bet tai daroma su JQuery. Jūs negali būti per daug susipažinę su JQuery, bet tiesiog žinau, kad JQuery yra tarsi palaikanti JavaScript biblioteką kad lengviau padaryti kažką panašaus prieigos atskirų elementų DOM. Čia vietoj sakydamas document.getElementById ("todos). InnerHTML Aš galiu naudoti daug švaresnis kelią JQuery, kuris yra tiesiog naudoti selektorius. Kaip matote, šis kodas buvo gauti šiek tiek švaresnis, labai panaši funkcionaliai, bet tai idėja. Mes matėme keletą dalykų iki šiol, taip mes pradėjome tik žalio JavaScript įgyvendinimo. Mes pridėjome naujų funkcijų ir parodė, kaip mes galime jį patobulinti su ką mes turime JavaScript. 

Ar kas nors pamatyti, bet su šio projekto sunkumus? Būtent, manau, ar nebūtinai sunkumų, bet tarkim mes ne daro to-do list projektą, o rytoj mes nusprendėme mes norėjome padaryti bakalėjos sąrašą ar prekybos projektų sąrašą. Šių funkcijų daug yra labai panašūs. Iš dalykų, mes norime gauti iš JavaScript daug yra labai dažnas, o tai pabrėžia, kad reikia tam tikru būdu rūšies poreikį todėl tai lengviau padaryti. Aš turėjau sukurti visą šį HTML prieigą, visa tai DOM prieigą, kaip aš ruošiuosi atstovauti to-do list su šiuo modeliu. Ir pastebėsite, aš esu atsakingas kaip JavaScript kūrėjas išlaikyti HTML ir JavaScript, kad turiu sinchronizuoti. Nieko automatiškai, kad "JavaScript" atstovavimas ar to-do sąrašą gauti išstumtas į HTML. Nieko vykdomas, kad, išskyrus mane. Turėjau parašyti lygiosiomis to-do list funkciją. Ir tai gali būti ne-Aš turiu galvoje, tai protinga daryti, kad bet jis gali būti varginantis, kartais. Jei turite didesnį projektą, kurie gali būti sunku. 

Karkasai, viena iš sistemų tikslais yra supaprastinti šį procesą ir rūšiuoti faktorius iš Šie bendri-Manau, galima sakyti-dizaino modelius kad žmonės paprastai turi tam tikrą reprezentavimo būdus duomenis natūra, ar tai draugą sąrašas, ar tai Žemėlapis informacija arba ką nors ar to-do sąrašą. Kai kurie žmonės paprastai tai yra pateikiant informaciją taip, ir jie paprastai reikia laikyti, kad informacija tarsi sinchroniškai tarp to, ką mato vartotojas tam tikru požiūriu natūra kalbant požiūriu kaip modelio vaizdo valdiklio matėte paskaitos, ir tada modelis, kuris šiuo atveju yra tai Javaskriptą masyvo. Karkasai mums būdą, kaip išspręsti šią problemą. Dabar galime pažvelgti į šios direktyvos įgyvendinimą, to-do list į sistemą, vadinamą angularjs. Tai jis. Pastebėsite, kad jis telpa į skaidrę. Aš neturiu slinkti į kairę ir į dešinę. Tai tikriausiai nėra puiki priežastis rekomenduojame naudoti sistemą, bet atkreipkite esu aš kada nors pasiekti individual HTML elementų čia? Am aš kada nors eiti į DOM? Ar matote, bet document.getElementById ar kažkas panašaus? Ne, tai dingo. 

Kampinis padeda mums išlaikyti DOM ir JavaScript mūsų atstovavimą kažką rūšies sinchronizuoti, todėl, jei tai ne js failą, jei nėra jokių programiškai gauti visiems, kad HTML turinį būdas nuo JavaScript kaip mes išlaikyti šio sinchronizuoti? Jei tai ne. Js failą, tai turiu būti HTML, tiesa? Tai nauja versija HTML failą, ir pastebėsite, mes pridėjome daug čia. Šioje duombazėje yra šie nauji atributai, kurie sako ng paspaudimą ir ng pakartojimo. Kampinis požiūris sprendžiant šią sunkumus, dizaino problema yra iš esmės padaryti HTML daug galingesnė. Kampinis yra leisti jums padaryti HTML šiek tiek labiau išraiškingas būdas. Pavyzdžiui, aš galiu pasakyti, kad aš ruošiuosi susieti ar įpareigoti šį teksto laukelį jos viduje mano Kampinis JavaScript kintamąjį. Tai ng modelis daro tik tai. Tai iš esmės sako, kad elementas viduje šį laukelį, tiesiog susieti, kad su kintama new_todo_description per "JavaScript" kodą. Tai labai galingas, nes aš neturiu aiškiai eikite į DOM gauti šią informaciją. Aš neturiu pasakyti document.getElementById. Aš neturiu naudoti jQueries kaip DOM prieigą. Galiu susieti jį su kintamojo, ir tada, kai aš pakeisti, kad kintamasis per JavaScript jis nuolat sinchronizuoti su HTML, taip, kad supaprastina turintys eiti pirmyn ir atgal tarp dviejų procesą. Ar tai prasminga? 

Ir pastebėsite, kad tai ne HTML prieigos kodas. Mes tiesiog padarė HTML galingesni, ir dabar, pavyzdžiui, mes galime padaryti kažką panašaus į tai, patinka, kai paspausite ant to, tai vadiname funkciją pagal todos.js taikymo sritį, ir mes galime padaryti, kad anksčiau, bet yra ir kitų dalykų, pavyzdžiui, šio ng-modelio ir nepastebėsite šios ng-repeat. Ką jūs manote, kad tai daro? Štai mūsų netvarkingai sąrašas nuo anksčiau. Mes turime UL žymes bet esu aš kada nors padaryti, kad sąrašas viduje JavaScript kodo? Nesu niekada aiškiai teikti tą sąrašą. Kaip tai veikia? Na, kaip Kampinis įvykdo tai tai vadinama kartotuvas. Iš esmės tai sako, kad aš noriu spausdinti šį HTML už kiekvieną todo viduje mano TODOS masyvo. Viduje todos.jr yra todos masyvas čia, ir tai pasakys Kampinis eiti per tą masyvą, ir kiekvieno elemento matote Noriu, kad atsispausdinti šį HTML. Tai yra natūra nuostabus, nes aš galiu tik daryti nereikia rašyti už linijos, kuri yra to-do list, kad buvo tik 30 eilučių kodo gali būti labiausiai naudingas dalykas, tačiau jei jūs turite didelį projektą, tai gali gauti labai patogu. 

Tai yra vienas šios problemos sprendimas, todėl HTML galingesni, ir kuri leidžia mums išlaikyti "JavaScript" ir HTML sinchronizuoti. Yra ir kitų galimų būdų, kaip išspręsti šią problemą, ir ne kiekvienas sistema daro. Ne kiekvienas sistema veikia šia kryptimi. Kai sistemos turi skirtingus požiūrius, ir jums gali rasti, kad jums patinka kodavimo vieną sistemą per kitą. Pažvelkime į vieną. Tai darbų sąrašas koduojami gale į sistemą, vadinamą stuburą. Aš ruošiuosi eiti per tai greitai. Pradėsiu su HTML, kol mes ten. Vieną sekundę. Pradedant HTML, kaip pastebėjote, mūsų HTML yra labai panašūs kokia ji buvo anksčiau, todėl ne per daug naujo apie tą priekyje. Tačiau mūsų JS failas yra šiek tiek kitoks. Magistraliniai rūšies turi šią idėją, ar teiginys grindžiamas idėja, kad tai, ką mes darome su daug, tarkim, mūsų JavaScript projektai , tai galvoti apie modelių ir kolekcijų iš šių modelių. Tai galėtų būti, pavyzdžiui, nuotraukų ir kolekcijų nuotraukas, arba iš draugų ir kolekcijų draugų idėja. Ir dažnai, kai mes programavimo JavaScript programas mes rūšiuoti atstovauti turintys draugų rinkinio idėja kažkaip JavaScript ir stuburą suteikia mums šį sluoksnį ant Javascript esamų masyvų ir objektų padaryti daugiau galingas dalykus, kad lengviau. 

Čia aš apibrėžė to-do modelis, ir jūs neturite jaudintis per daug apie sintaksę, bet pastebėsite, kad kas vienas iš šios savybės? Ji turi numatytąjį lauką. Stuburas leidžia man nustatyti jau nuo šikšnosparnių bet kokia nauja to-do, kad aš sukurti ketina turėti šias reikšmes. Dabar galiu pritaikyti tai, bet kad galėtų nustatyti numatytuosius yra gražus, ir tai tipo patogu, nes tai nėra kažkas, kad, pavyzdžiui, būdingas JavaScript, ir dabar aš neturiu aiškiai pasakyti, kad todos yra neišsamūs. Galiu pasakyti Iškart kad todos ketinate būti pažymėtas kaip neišsami. Pranešimas tada kas tai yra? Dabar aš turiu į darbų sąrašą, ir tai kolekcija. Pranešimas lauką, susijusį su ta sako modelis todo. Tai mano būdas pasakyti pagrindinį tinklą, kad Aš einu galvoti apie šių atskirų Todos kolekciją. Tai iš esmės modelio struktūra mano programą. Čia aš turiu šią kolekciją idėją, ir iš esmės objektus, įrašytus į šį rinkinį visi bus šių todos, ir tai yra labai natūralu, šia prasme nes aš turiu todos, ir aš turiu juos rinkti. 

Pažvelkime šiek tiek daugiau apie tai. Čia yra stuburą vaizdas. Kitas dalykas, kad stuburą sako, kad iš daug modelių, kad jūs galvojate apie ar net kolekcijas ketinate reikia turėti tam tikrą rodymo būdą. Turime padaryti, kad to-do list, ir ar nebūtų malonu, jei mes galime suteikti kiekvienam modeliui arba susieti su kiekvienu modeliu, šį požiūrį , kuri leidžia mums manau sujungti du kartu? Kadangi, kol mes turėjo naudoti už linijos, kuri eina per kiekvienas mūsų sąraše todo ir tada atspausdinti jį čia mes iš esmės gali prijungti jį su šiuo modeliu. Tai to-do vaizdas. Tai susiję su darbų sąraše mes nustatėme anksčiau. Dabar kiekvienas todo yra Rodomos ar renderable pagal tai to-do vaizdą. Pastebėsite laukų. Ką jūs manote, kad tai tagName yra tagName: Li? Įsiminti iš anksčiau, kai mes norėjome padaryti yra todo mes turėtume aiškiai susieti mūsų todos su šia li žymės. Dabar mes sakydamas, kad jei tai todo ketina gyventi bus viduje yra li žymės. Ir dabar mes taip pat susieti įvykius su mūsų Todos. 

Kiekvienas TODO šį vieną renginį. Jei paspausite gana daug perjungimo mygtuką, kad tai, ką aš sakau yra, tada iš esmės pažymėti kaip tai, kas buvo anksčiau priešingą todo ir vėl teikti paraišką. Tai tipo panašus į kodą prieš. Prisiminkite, kai mes pažymėti kaip arba priešais ar- ir tada mes vėl priėmė. Tačiau pastebėti dabar šį įvykį naudojamas būti kažkas, kad buvo į HTML. Ji sėdėjo ten. Mygtukas turėjo įtakos spragtelėjimą. Kai paspausite mygtuką, kad tipo veikia stuff įsteigti, kad todo yra neišsami. Čia mes susiję, kad paspaudę šią perjungimo mygtuką renginį ir atbulinės eigos ar tai įjungti arba išjungti su šia nuomone. 

Tai puikus būdas sukurti šį įvykį, kad tai labai susaistyta šiuo požiūriu, ir todėl pastebėsite šį vieną daugiau. Turiu šį render metodą, ir mes neturime eiti per detales. Tai tipo panašus į ką mes turėjome anksčiau, bet pranešimas aš ne apsisukimo per nieko. Aš nespausdina, kad ul žyma, kad tarsi pasakyti, kad aš ruošiuosi spausdinti visus elementus. Aš teikti funkcionalumą padaryti šį vieną-do elementą. Tai labai galinga koncepcija, nes iš esmės mūsų to-do sąrašą sudaro visų šių Todos, ir jei mes iš esmės gali nurodyti būdas padaryti vieną iš šių Todos tada mes galime turėti mūsų galingas pagrindas per se teikia visą Todos paskambinę render metodą, atskirų Todos. Tai koncepcija, kuri yra naudinga čia. Dabar geras klausimas paklausti, kaip yra ši paraiška yra sujungti? Kadangi mes turime galimybę įpareigoti vieną todo, bet kaip mes gauti kelis Todos idėja? 

Leiskite pažvelgti, kad išvaizdą. Tai paskutinė dalis. Pranešimas turime to-do list nuomonę čia ir pastebėsite, kad jis taip pat vaizdas. Ir eiti per porą dalykų, tai inicijuoti metodas bus vadinamas kai mes pirmą kartą sukurti šį to-do list. Kaip matote, tai, kaip sukurti to-do sąrašą ir susieti jį su šia nuomone. Ir tada aš pridėjo funkcijas čia, kad iš esmės, kai jūs pridedate elementą- tai yra panašus į AddItem metodą mes matėme prieš- Aš ruošiuosi sukurti naują todo objektą, ir pastebėsite, aš iš tikrųjų raginama ši nauja todo metodas, taigi tai teikia stuburas, ir aš gali perduoti savo savybių čia. Ir dabar kiekvienas todo, kad galiu sukurti naudojant šią gausite tą funkciją, kad mes matėme anksčiau. Pranešimas aš kliringo iš teksto lauką prieš-mažas mažas detalė ir tada aš pridėti šį rinkinį. 

Tai beveik atrodo keista, nes kol mes tiesiog turėjo padaryti, kad todos.push, ir tada mes buvo padaryta, ir tai gali atrodyti sudėtingiau šio konkretaus projekto, ir jums gali rasti, kad pagrindinį tinklą ar net kampuotas ar kitą sistemą netinka jūsų konkretaus projekto, bet aš manau, kad tai svarbu galvoti apie ką tai reiškia platesniu mastu dėl didesnių projektų, nes jei mes turėjo didesnį projektą, kur mes buvome, atstovaujantis kai tikrai sudėtingas surinkimas, kažkas giliau nei tik to-do list, tarkim draugų sąrašą ar kažką panašaus, kad tai gali praversti nes galime organizuoti savo kodą tikrai patogus būdas, tokiu būdu, kad būtų lengviau kam nors kitam kurie norėjo pasiimti projektą statyti ant. Jūs galite pamatyti, kad tai suteikia sandarą. Ir tada aš raginama teikti šioje AddItem. Užkrauta, kaip matote, ir jūs neturite suprasti šį visą sintaksę, bet iš esmės kiekvienam modeliui jis ketina skambinti individualų render metodą. Tai tarsi, kur tai ateina iš. Tegul tik nurodyti, kaip teikti atskirus todos, ir tada tegul klijai juos kartu kaip visuma. Tačiau tai suteikia abstrakcijos būdu, nes galėjau pakeisti būdą, aš nuspręsti teikti atskirus todos, ir nebūčiau pakeisti bet kokį šio kodekso. Tai tipo kietas. 

Ar kas nors turite kokių JavaScript sistemas klausimų? [Studentų nesigirdi klausimas] O, tikrai, tai puikus klausimas. Klausimas buvo, kaip aš įtraukti sistemas? Dauguma JavaScript sistemos yra iš esmės tik js failai kad galite būti ne savo kodą viršuje. Pranešimas galvos dalį savo HTML Turiu visus šiuos scenarijus žymes ir galutinis scenarijus tegus yra kodas, kad mes raštu. Ir tada 3 pagrindų kodai yra tiesiog taip pat scenarijų žymės. Aš taip pat juos nuo to, kas vadinama CDN, kuris leidžia man jį gauti iš kažkas šiuo metu bet kiekvieną sistema turi tai-jūs galite labai daug rasti turinį tam tikros JavaScript biblioteką galima rasti kai CDN ar kažką panašaus, kad ir tada galite įtraukti šiuos scenarijus žymes. Ar tai prasminga? Cool. 

Tai yra 2 skirtingi požiūriai. Tai yra ne tik požiūris į šios problemos sprendimo. Yra daug įvairių dalykų, kad kas nors galėtų padaryti, ir yra daug sistemos ten. Kampuotas ir stuburą nepasako visą istoriją. Sėkmės su jūsų galutinis projektų, ir labai ačiū. [CS50.TV]