[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]