[Powered by Google Translate] [Seminārs] [Javascript torņi: Kāpēc un kā] [Kevin Schmid] [Harvard University] [Tas ir CS50.] [CS50.TV] 

Hi, visiem. Laipni lūgti JavaScript sistēmas seminārā. Mans vārds ir Kevin, un šodien es esmu gatavojas runāt par JavaScript sistēmas, un šī semināra mērķis nav iegūt jums, teiksim, apgūt kādu konkrētu sistēmu per se bet, lai dotu jums plašu ievadu pāris ietvaros un pierādīt, kāpēc mēs varētu kādreiz vēlaties, lai izmantotu sistēmu. 

Pirms es to izdarītu, es jums sniegt nelielu fona JavaScript, un tad mēs ņemt to no turienes. Mēs esam gatavojas sākt, ieviešot to-do sarakstu. Lūk, mūsu uzdevumu sarakstu, lai šodien. Tas ir sava veida smieklīgi. Mums ir jāīsteno to-do sarakstu JavaScript. Tas ir tas, ko tā gatavojas izskatās, tāpēc tas ir mūsu pirmais mērķis. Mēs neesam gatavojas izmantot sistēmu, lai to izdarītu. Mēs ejam, lai kodu JavaScript un saņemt to-do sarakstu, lai strādātu. Tad mēs ejam, lai uzlabotu dizainu, neizmantojot sistēmu. Mēs ejam, lai apspriestu dažādas lietas, ko mēs varam darīt tikai ar JavaScript vien lai padarītu mūsu to-do sarakstu nedaudz vairāk labi izstrādāta. Tad mēs ejam, lai iemest kādu jQuery, un tad mēs ejam apskatīt pats to-do sarakstu, tikai jāīsteno dažādās sistēmās, un mēs apspriestu  plusi un mīnusi gar ceļu. 

Sāksim īstenot, kas to-do sarakstu. Teiksim, mēs, ņemot vērā šo HTML. Es esmu gatavojas darīt to nedaudz mazāks. Kā jūs varat redzēt, man ir maz galveni, kas saka Todo un mazā kastīte, kur es varu ievadīt aprakstu par uzdevumu sarakstā un tad jauns punkts poga, tāpēc pieņemsim mēģināt ievadīt jaunu todo šim sarakstam. Dodiet JavaScript sistēmas semināru, un es esmu, lai sasniegtu jaunu objektu. Man šo JavaScript brīdinājumu, ka saka īstenot mani. Mēs esam ieguvuši, lai to īstenotu. Pieņemsim pārbaudīt kodu par šo, gan HTML un JavaScript. Lūk, mūsu HTML. Kā jūs varat redzēt šeit, šeit ir mūsu mazā Todos galvenes. Tas bija tas, ka treknrakstā lieta augšpusē, un tad mums ir ievades lodziņu ar vietturī un tad tur ir dažas atribūts šo pogu, kas aicina šo funkciju addTodo. Vai kāds vēlas, lai uzminēt, kas tas par klikšķi tiek nozīmētu? [Studentu dzirdams atbilde] Labi, par klikšķi ir veida, piemēram, notikumu, piemēram, uzklikšķinot uz peles ir tikai notikums, un ko mēs darām ir, mēs esam sasaistīšana notikumu noklikšķinot uz šīs pogas, lai izpildītu šo funkciju. AddTodo tas ir notikumu apdarinātājs noklikšķinot uz šīs pogas. 

Kā jūs varat redzēt, kad es noklikšķiniet uz jaunās posteni pogu par klikšķi notikums izpaužas karsētie, un šī funkcija izpaužas sauc. Apskatīsim funkciju. Kā jūs varat redzēt, šeit ir mana JavaScript kods līdz šim. Kas man ir augšā, ir globāla datu struktūra par manu to-do sarakstu. Izskatās masīva. Tā ir tikai tukša masīvs. Un tad man ir addTodo funkcija, ko mēs redzējām agrāk, un vienīgajā rindā kodu ir šis brīdinājums. Tā brīdina īstenot mani, un tad man ir 2 uzdevumi pie rokas. Man ir pievienot todo globālajai datu struktūra, un tad es gribu izņemt to-do sarakstu. Nekas pārāk fancy tikai vēl, bet aktivizētam jums var būt svešs ar, tāpēc es esmu gatavojas iet lēni un pārskatīt pamatus JavaScript šādā veidā. 

Let 's dod tas shot. Pieņemsim, ka lietotājs ievada kaut ko šajā ailē. Es tikko ierakstījāt kaut ko šeit, teksta. Kā es varu šķirot piekļuves ka teksta caur JavaScript? Atcerieties, ka JavaScript, viens no tās galvenajiem iezīmes ir, ka tas dod mums Šī programmēšanas piekļuvi DOM. Tas ļauj mums piekļūt elementi un to īpašības šī faktiskā HTML. Veids, kā mēs darīt, ka ar kailām kauli JavaScript ir, mēs faktiski var izmantot javascript funkciju sauc getElementByID. Es gribu, lai saglabātu tekstu, kas ir drukāti tur kādu mainīgo, tāpēc es esmu gatavojas teikt jaunu mainīgo sauc new_todo, un es esmu gatavojas saņemt šo elementu. Tas ir funkcija,. GetElementByID. Un tagad es saņemu elementu pēc ID, tāpēc man ir nepieciešams ID šī teksta lodziņā, tāpēc es esmu devis tai ID new_todo_description. Tas ir, kā es esmu gatavojas saņemt elements. Tas ir mans arguments, lai šo funkciju, lai norādītu kuru ID, lai saņemtu. Un tā, ka ir elements HTML, un tas ir īpašības. Jūs esat redzējuši tos. Viņi atribūti. No teksta elementu, kas saglabā lietotāja ievadi atribūta sauc vērtību. Es saglabāti vērtība, tekstlodziņā tagad šajā mainīgā sauc new_todo. Tagad man ir programmatisku piekļuvi šo rādītāju, kas ir veida atdzist jo tagad to, ko es varu darīt, ir es varu pievienot to uz manu to-do sarakstu. 

Veids, kā mēs varētu izdarīt JavaScript un neuztraucieties, ja jums nav pazīstami ar to, bet tikai iet caur to ir todos.push jo tas ir nosaukums mana pasaules datu struktūra šeit, un es esmu gatavojas virzīt new_todo. Tas ir liels, jo tagad man ir pievienoti to manu JavaScript pārstāvība, kas to-do sarakstu. Bet tagad, kā es varu saņemt to atpakaļ uz HTML? Man ir jāatrod veids, lai kārtotu ar push to atpakaļ. Citiem vārdiem sakot, es veida ir izdarīt to. Ko mēs gatavojamies darīt, ir, mēs ejam, lai pievērstu to-do sarakstu. Man vajag, lai atjauninātu citu HTML šajā lapā, un, kā jūs varat redzēt, es esmu atstājis šo mazo konteineru šeit, šis dalītājs no lapas, kuras ID ir todos, un es esmu gatavojas nodot to-do sarakstu tur. Vispirms es esmu gatavojas, lai nodzēstu to ārā, jo, teiksim, tur bija vecs to-do sarakstu tur. Es saņemu šo elementu pēc ID atkal, un es esmu piekļūstot iekšējo HTML šī elementa, un es esmu gatavojas skaidrs, ka. Ja mēs atstājām šo kodu, kā ir, mēs gribētu redzēt tukšu neko tur, un tagad es gribu sākt padarot savu jauno to-do sarakstu. Es esmu būtībā gatavojas noslaucīt manu to-do sarakstu. 

Tagad iekšējais HTML iekšpusē šī TODOS div ir pilnīgi skaidrs, un tagad man ir nepieciešams, lai sāktu pievienot manu sarakstu. Pirmā lieta, ko es vēlos, lai pievienotu atpakaļ ir Nekārtots saraksts tag, kas būtībā nozīmē, ka tas ir sākums no Nekārtots saraksts. Tagad par katru elementu manā TODOS masīvā Es vēlos izdrukāt iekšpusē šo HTML. Es vēlos pievienot to uz uz apakšā šo sarakstu. Tāpat kā C, es varu izmantot, lai cilpas, un es esmu gatavojas sākt sākumā manu sarakstu ar 0 elements, un es esmu, kas iet visu ceļu uz garumu saraksta. Mēs faktiski var iegūt garumu pretendentu JavaScript masīvu, izmantojot garuma īpašumu. Būtībā es esmu gatavojas darīt, kaut kas ļoti līdzīgs iekšā šeit izdrukāt šo elementu. Es atkal varat piekļūt TODOS DIV, iekšējais HTML īpašumu no tā, un es esmu gatavojas, lai pievienotu par šo jauno saraksta elementa, un kas notiek, lai būtu ieskauj tas li tagu, un es esmu gatavojas saķēdēt ar + operatoru, un tas ir i-tais elements mana TODOS masīvs, un tad es esmu gatavojas, lai aizvērtu šo tagu. Tagad par katru elementu mēs pievienotu jaunu saraksta ierakstu. Un tad viss, kas mums tiešām ir nepieciešams darīt, ir aizvērt šo frāzi. Man vienkārši vajag aizvērt, ka Nekārtots sarakstu tag. 

Vai jums justies par to, kā kas darbojas? Tas paver visu sarakstu. Tas piebilst atsevišķus elementus no TODOS saraksta uz sarakstu, un tad aizver visu sarakstu, un šis ir mans addTodo funkcija. Es būtībā sākt ar kļūst todo no teksta lodziņā. Jāpiebilst, ka, lai TODOS masīvs, un tad es atkal padarīt to-do sarakstu. Tagad es varu pievienot objektus, lai manā sarakstā. Tas ir sava veida aizraujoši, jo tikai dažas rindiņas kodu mēs esam būtībā veikuši to-do sarakstu, kur mēs varam pievienot objektus. Lieliski. Tas ir sava veida pamata ievadu JavaScript. Neuztraucieties pārāk daudz par sintakse tagad, bet domāju, ka par to konceptuāli. Mums bija dažas HTML. Mums bija tekstlodziņu uz lapu, kas būtībā ļāva lietotājiem, lai ievadītu to-do objektu, kas jāpievieno. Un tad mēs, ko izmanto JavaScript, lai atnest šo todo no šī teksta lodziņā. Mēs uzglabā ka iekšpusē JavaScript masīvs, kas ir pamatā, piemēram, mūsu programmatiskā pārstāvība, kas to-do sarakstu, un tad mēs izdrukāt to ārā. Tas ir todos.js. 

Tas ir veida atdzist, bet kā mēs varam izmantot šo tālāk? Nu, kā jūs varat redzēt, tas nav, piemēram, pilnīgs to-do sarakstu. Piemēram, es nevar iezīmēt jebkuru no šiem, kā nepilnīgs vienību, piemēram, ja es gribēju, lai reprioritize priekšmetus vai izdzēstu objektus. Tas ir labi, bet mēs varam veikt šo tālāk. Es neesmu gatavojas runāt pārāk daudz par pievienojot papildu funkcijas, bet mēs varētu pieņemt, ka tālāk. Parunāsim par pievienojot vēl vienu iespēju, lai to-do sarakstu, kas būs to var pārbaudīt indivīdam-do posteni un ir tā pārsvītro, tāpēc būtībā sakot, es esmu izdarījis. Apskatīsim kādu kodu, kas varētu paveikt to. Paziņojums, ko es esmu darījusi augšā ir Esmu pievienotās jaunu globālu masīvu sauc par pilnīgu. Es būtībā, izmantojot šo uzglabāt, vai attiecīgās preces uz to-do sarakstu nav pilnīga vai nav. Tas ir viens veids, kā to izdarīt. Ja es paskatos uz šīs direktīvas īstenošanu, displejs, būtībā, ja es ievadiet todo, un es nospiediet šo pārslēgšanas pogu tas šķērso veic, lai katrs šajā sarakstā priekšmets ir vai nu pilnīgs vai nepilnīgu valsts, un es esmu, izmantojot citu masīvu, lai pārstāvētu to. 

Būtībā par katru uzdevumu sarakstā šajā TODOS masīvs tur ir postenis pilnīgu masīvā, kas būtībā norāda vai tas ir pabeigts vai ne. Man bija veikt diezgan minimālas izmaiņas šajā kodeksā, tāpēc šeit ir mūsu addTodo funkcija. Ievērojiet, ka šeit es esmu spiežot to uz masīvs, un tad es esmu spiežot 0, lai šo pilnīgi masīvs, būtībā notiek paralēli ar jauno todo push teikt Es esmu pievienojot šo posteni, un tas ir saistīts ar šo vērtību, kas nozīmē, ka tā ir nepilnīga. Un tad es esmu redrawing to-do sarakstu. Tagad, ievērosiet, es esmu pievienojis šo drawTodoList funkciju. Tas aizņem daudz kodu mums bija agrāk, būtībā attīra lodziņu un pēc tam pievērš jaunu uzdevumu sarakstu. Bet paziņo, ka iekšpusē tā, lai cilpa klājas nedaudz vairāk tagad. Mēs galvenokārt pārbaudot, vai postenis atbilst kārtējam ToDo šeit ir pabeigta, un mēs esam uzvedas savādāk šiem 2 gadījumos. Ja tas ir pabeigts, mēs pievienojam šo del tagu, kas būtībā ir veids, kā jūs varat iegūt, ka streiku caur efektu svītrojot to-do sarakstu, ja tas ir pabeigts, un, ja tā nav, mēs esam ne arī to. Un tāpēc šāda veida rūpējas par to, 

un tas ir viens no veidiem, lai to paveiktu. Un tad ievērosiet, kad lietotājs noklikšķina uz vienu no šiem mēs pārslēgt pabeigšanas statusu tā. Kad lietotājs noklikšķina, mēs mainīt, vai tas ir pabeigts vai nē, un tad mēs ievilktu to. Šāda veida darbu. Mums ir šīs funkcijas, kas veic savus uzdevumus, un tas ir labi. Vai ir kaut kas, mēs varētu darīt labāk par to, lai gan? Ievērojiet, mums ir šie 2 pasaules masīvus. Ja tas bija C, un mums bija 2 masīvi šāda veida pārstāvētas dati, kas bija sava veida saistīti kaut kādā veidā Ko gan mēs izmantot C, lai apvienotu šos 2 laukus kaut ko, kas iekļauj gan informācijas daļas? Ikviens vēlas, lai ierosinājumu? [Studentu dzirdams atbilde] 

Tieši tā, lai mēs varētu izmantot kādu struktūrai, un, ja jūs domājat, ka atpakaļ uz, teiksim, 3 PSET, atceros, mums bija vārdnīcu, un tad mums bija, vai vārds bija vārdnīcā, un visa šī informācija tika salikti kopā iekšpusē dažu datu struktūras. Viena lieta, ko es varu darīt ar šo kodu, lai izvairītos no šīm 2 dažādi bloki līdzīgām informācijas daļas, ir es varu tos apvienot JavaScript objektu. Pieņemsim to apskatīt to. Paziņojums Man ir tikai viens bloks augšpusē tagad un ko es esmu darījis, ir, un tas ir tikai JavaScript sintakse veida radot burtiski versiju objektu, un paziņojums ir 2 īpašības, tāpēc mums ir todo, un tas ir tur kopā ar to, vai tā ir pilnīga vai nepilnīga. Tas ir ļoti līdzīgs kods. Mēs esam izmantojot JavaScript objekti. Šī veida uzlabo lietas. Tāpat kā tagad, visi šie saistītu informāciju lauki tiek turēti kopā. Kad mēs ejam to izdrukāt, mēs varam piekļūt laukus. 

Ievērojiet, kā klājas todos [i]. Pabeigta tā vietā, lai pārbaudītu pilnu klāstu atsevišķi, un paziņojums, kad mēs vēlamies, lai iegūtu to-do virkni mēs iegūtu to-do īpašumu Šī uzdevumu sarakstā, tāpēc šāda veida jēga, jo katram postenim ir šādas raksturīgās īpašības par to. Tā ir todo, un tas ir, vai tas ir pabeigts vai ne. Ne pārāk daudz izmaiņas tur funkcionāli, tikko pievienotās dažas vairāk, lai kodu. Tas ir uzlabojums par dažiem frontēs, vai ne? Es domāju, mēs ņemt ārā dizainu mazliet. Tagad mums ir objektus, lai būtībā rezumēju šos datus. Vai ir kaut kas vairāk, mēs varētu darīt no šejienes ziņā JavaScript? Tāpat kā paziņojums, ka šis kods tieši šeit lai iegūtu iekšējo HTML par div ir maz, es domāju, ilgi. Tur ir document.getElementById ("todos"). InnerHTML. Viena lieta, ko mēs varētu darīt, lai šis kods izskatās mazliet draudzīgāku tāpēc es nebūtu saglabāt ritinot pa kreisi un pa labi, uz priekšu un atpakaļ, ir es varētu izmantot bibliotēku, piemēram, jQuery. 

Let 's pārbaudīt seminārs 2, un tas ir tas pats kods, bet tas ir darīts ar jQuery. Jums var būt pārāk pazīstams ar jQuery, bet tikai zinu, ka jQuery ir sava veida bibliotēka JavaScript kas padara to vieglāk darīt lietas, piemēram, piekļuve atsevišķiem elementiem DOM. Šeit, nevis pasakot document.getElementById ("todos"). InnerHTML Es varētu izmantot daudz tīrāku ceļu jQuery, kas ir tikai, lai izmantotu selektori. Kā jūs varat redzēt, šis kods bija iegūt mazliet tīrāku, ļoti līdzīgs funkcionāli, bet tas ir ideja. Mēs esam redzējuši dažas lietas tik tālu, tāpēc mēs sākām tikai ar izejvielu JavaScript īstenošanu. Mēs pievienot jaunas funkcijas un parādīja, kā mēs varam uzlabot to ar tikai to, kas mums ir JavaScript. 

Vai kāds redzētu grūtības ar šo dizainu? Proti, es domāju, un ne vienmēr ir grūtības, bet teiksim mēs nedarām to-do sarakstu projekts, un rīt mēs nolēmām mēs vēlējāmies, lai pārtikas preču sarakstu vai iepirkšanās saraksta projektu. No šīm funkcijām daudz ir ļoti līdzīgas. No lietām, ko mēs vēlamies izkļūt no JavaScript daudz ir ļoti bieži, un tas uzsver nepieciešamību sava veida veidā padarot to vieglāk izdarīt. Man bija, lai izveidotu visu šo HTML piekļuvi, visu šo DOM piekļuvi, piemēram, es esmu gatavojas pārstāvēt to-do sarakstu ar šo modeli. Un paziņojums, es esmu atbildīgs par JavaScript attīstītājs saglabāt HTML un JavaScript, ka man ir sinhronizēti. Nekas automātiski jāparedz, ka JavaScript pārstāvība vai to-do sarakstu, iegūt uzstājām, lai HTML. Nekas izpildīts, ka, izņemot mani. Man bija rakstīt izdarīt to-do sarakstu funkcijas. Un tas nevar būt, es domāju, tas ir saprātīgi to darīt, bet tas var būt garlaicīgs reizēm. Ja jums ir lielāka projekta, kas varētu būt grūti. 

Sistēmai, kas ir viens no regulējuma mērķiem mērķis ir vienkāršot šo procesu un veida faktoru, kas šos kopīgos-Es domāju, jūs varētu teikt, dizaina modeļus ka cilvēki parasti ir sava veida veids, lai pārstāvētu datu, vai tas ir draugu sarakstā, vai tas ir kartes informācija vai kaut vai to-do sarakstu. Daži cilvēki ir parasti veids, kā pārstāvēt informāciju, un tie parasti ir nepieciešams, lai saglabātu šo informāciju veida sinhronizācijā starp to, ko lietotājs redz sava veida skatu, runājot ziņā līdzīgi modeļa skata kontrolieris, ka jūs redzēju lekciju, un pēc tam paraugs, kas šajā gadījumā ir šī JavaScript masīvs. Sistēmai dod mums veids, kā risināt šo problēmu. Tagad pieņemsim apskatīt īstenot to-do sarakstu tādā vidē sauc angularjs. Tas ir tā. Pamanāt, ka tas iekļaujas slaidā. Man nav, lai ritinātu pa kreisi un pa labi. Tas, iespējams, nav liels iemesls, lai ieteiktu, izmantojot sistēmu, bet paziņojums es jebkad piekļūt atsevišķiem HTML elementus šeit? Es esmu kādreiz nonākšana DOM? Vai jūs redzat document.getElementById vai kaut kas tamlīdzīgs? Nē, tas ir pagājis. 

Stūra palīdz mums saglabāt DOM un mūsu JavaScript pārstāvību kaut veida sinhronizēti, tādēļ, ja tas nav js failu, ja tur nav programmatiski panākt, lai visiem, ka HTML saturu veids No JavaScript kā mēs paturot to sinhronizēt? Ja tas neatrodas. Js failu, tas ir got būt HTML, vai ne? Šī ir jaunā versija HTML failu, un paziņojums, mēs esam pievienojuši daudz šeit. Paziņojums tur ir šie jaunie atribūti, kas saka ng klikšķi un ng atkārtot. Stūra pieeja, lai atrisinātu šo problēmu, grūtības, dizaina ir būtībā padarīt HTML daudz spēcīgāk. Stūra ir veids, kas ļauj jums veikt HTML nedaudz izteiksmīgāku. Piemēram, es varu teikt, ka es esmu gatavojas, lai tie vai saistīt šo teksta lodziņu mainīgā kas manā Stūra JavaScript kodu. Šis ng modelis dara tikai to. , Kas būtībā saka, ka vienība iekšpusē šo tekstlodziņā, tieši saistīt, ka ar mainīgo new_todo_description ietvaros JavaScript kodu. Tas ir ļoti spēcīgs, jo man nav skaidri doties uz DOM, lai iegūtu šo informāciju. Man nav ko teikt document.getElementById. Man nav jāizmanto jQueries piemēram DOM piekļuvi. Es varētu saistīt to ar mainīgo, un tad, kad es mainīt mainīgā ietvaros JavaScript tas tur sinhronizācijā ar HTML, tā, ka vienkāršo procesu, kam iet uz priekšu un atpakaļ starp diviem. Vai tas ir jēga? 

Un paziņojums nav HTML piekļuves kodu. Mēs esam tikko veikts HTML jaudīgāki, un tagad, piemēram, mēs varam darīt lietas, piemēram, tas, piemēram, kad jūs noklikšķiniet uz to, zvanīt šo funkciju ietvaros todos.js, un mēs varētu darīt, ka pirms, bet ir arī citas lietas, piemēram, šo ng-modeli, un paziņojums šo NG-atkārtot. Ko jūs domājat, ka tas dara? Lūk, mūsu Nekārtots sarakstu, no pirms tam. Mums ir LU tagus, bet es kādreiz padarot šo sarakstu iekšpusē JavaScript kodu? Es neesmu nekad skaidri padarot šo sarakstu. Kā tas darbojas? Nu, kā Stūra accomplishes tas ir, to sauc atkārtotājs. Būtībā tas saka, ka es vēlos, lai izdrukāt šo HTML par katru todo iekšpusē manu TODOS masīva. Iekšpusē todos.jr ir todos masīvs tieši šeit, un tas pateiks Stūra iet caur šo masīvu, un par katru elementu jūs redzat Es gribu, lai jūs izdrukāt šo HTML. Tas ir sava veida laba, jo es varu tikai darīt bez uzrakstīt uz cilpas, kas par to-do sarakstu, kas bija tikai 30 koda rindiņas nedrīkst būt daudz izdevīgāk lieta, bet, ja jums ir liels projekts, tas var kļūt ļoti ērti. 

Tas ir viens risinājums, lai šo problēmu, padarot HTML jaudīgākas, un kas ļauj mums saglabāt JavaScript un HTML sinhronizēti. Ir arī citi iespējamie veidi, kā atrisināt šo problēmu, un ne katrs sistēmu tas. Ne katrs sistēma darbojas šajā virzienā. Dažas sistēmas ir dažādas pieejas, un jūs varat atrast, ka jums patīk kodēšanas vienā sistēmā pār otru. Apskatīsim vēl vienu. Tas ir to-do sarakstu kodēti izveidots ietvaros sauc par mugurkaulu. Es esmu gatavojas iet caur šo ātri. Es sāktu ar HTML, pirms mēs ejam tur. Vienu sekundi. Sākot ar HTML, kā jūs ievērosiet, mūsu HTML ir ļoti līdzīgs , kāda tā bija agrāk, tāpēc ne pārāk daudz jauna par šo priekšā. Bet mūsu js fails ir nedaudz atšķirīgs. Mugurkauls veida ir šī ideja, vai ir balstīts uz ideju tas, ko mēs darām ar daudz, teiksim, mūsu JavaScript projekti ir jādomā par modeļiem un kolekcijām šiem modeļiem. Tas varētu būt, piemēram, foto un kolekcijas fotogrāfijas, vai ideja drauga un kolekcijas draugiem. Un, nereti, kad mēs esam Programmēšana JavaScript programmas mēs sava veida atspoguļo ideju par kolekciju draugu kaut JavaScript, un mugurkauls dod mums šo slāni uz augšu JavaScript pastāvošiem masīviem un objektiem darīt jaudīgākas lietas, ar to vieglāk. 

Šeit es esmu noteikti to-do modeli, un jums nav jāuztraucas pārāk daudz par sintaksi, , bet paziņo, ka tas, kas ir viens no šīs īpašības? Tā ir noklusējuma lauku. Mugurkauls man ļauj noteikt jau pie nūja jebkura jauna to-do, ka es varu izveidot nāksies šos noklusējumus. Tagad es varu pielāgot, taču to var norādīt noklusējuma ir jauka, un tas ir sava veida ērti, jo tas nav kaut kas ir, piemēram, raksturīga JavaScript, un tagad man nav skaidri saka, ka todos ir nepilnīgi. Es varu teikt, tiesības pie nūja, ka todos gribam būt atzīmēts kā nepilnīgu. Paziņojums, tad kas tas ir? Tagad man ir to-do sarakstu, un tas ir kolekcija. Paziņojums lauku saistīts ar to, saka modelis Todo. Tas ir mans veids, kā stāsta mugurkaulu, kas Es esmu gatavojas domāt par kolekciju šo atsevišķo todos. Tas ir būtībā modeļa struktūras, manā programmā. Šeit man ir šī ideja kolekcijas, un būtībā tos priekšmetus, kuri šajā kolekcijā ir viss būs šie todos, un kas ir ļoti dabisks šajā nozīmē jo man ir todos, un man ir tos kolekcijā. 

Apskatīsim nedaudz vairāk par to. Šeit ir mugurkauls skats. Otra lieta, ka mugurkauls saka, ir tas, ka daudz modeļiem, kas jūs domājat par vai pat kolekcijas būs nepieciešams, lai būtu kaut kādā veidā tiek parādīts. Mums ir nepieciešams, lai padarītu ka to-do sarakstu, un tas nebūtu jauki, ja mēs varētu nodrošināt katram modelim vai saistīt ar katru modeli, šo viedokli , kas ļauj mums, lai es domāju, savienotu abus kopā? Tā kā pirms mums bija jāizmanto, lai cilpa, kas darbotos caur katrs mūsu sarakstā todo, un pēc tam to izdrukāt šeit mēs varam būtībā savienot to ar šo modeli. Tas ir, lai-do view. Tas ir saistīts ar ToDo mēs konstatējām agrāk. Tagad katrs todo tiek Displeja vai renderable Ar šo uzdevumu skatu. Paziņojums dažas no jomām. Ko jūs domājat, ka tas tagName ir, tagName: li? Atcerēties no pirms, kad mēs vēlējāmies, lai padarītu par todo mums būtu skaidri pārī mūsu todos ar šo li tagu. Tagad mēs esam sakot, ka, ja tas todo gatavojas dzīvot būs iekšā no li tag. Un tagad mēs esam arī asociējot notikumiem ar mūsu todos. 

Katram todo ir šo vienu notikumu. Ja noklikšķināt diezgan daudz pārslēgšanas poga, ka tas, ko es saku, ka, tad būtībā atzīmējiet todo kā pretstatu, kas tas bija pirms un tad atkal padarīt pieteikumu. Tas ir veida līdzīga kodu pirms. Atceros, kad mēs atzīmējām kā nu pretī, vai- un tad mēs atkal padarīti to. , Bet paziņojums, tagad šo notikumu izmanto, lai būtu kaut kas bija HTML. Tā sēdēja tur. Poga bija par klikšķi. Kad jūs noklikšķiniet uz pogas, tas veida dara stuff izveide, todo būt nepilnīga. Šeit mēs esam saistīti, ka notikums noklikšķinot uz šo pārslēgšanas pogas un atpakaļgaitā, vai tas ir ieslēgts vai izslēgts šim viedoklim. 

Tas ir jauks veids, kā izveidot šo notikumu tā, ka tas ir ļoti cieši saistīta ar šo viedokli, un tāpēc paziņojums šo vienu vairāk. Man ir šī apmetuma metodi, un mums nav iet caur detaļām. Tas ir sava veida līdzīgs tam, ko mums bija pirms tam, , bet paziņojums, es neesmu looping, izmantojot neko. Es neesmu drukāšanu, ka ul tagu, kas ir sava veida sakot, es esmu gatavojas, lai izdrukātu visus elementus. Es esmu sniedzot funkcionalitāti, lai padarītu šo vienu uzdevumu objektu. Tas ir ļoti spēcīgs koncepciju, jo būtībā mūsu to-do saraksts sastāv no visiem šiem Todos, un, ja mēs varam būtībā norādīt veids, kā padarīt vienu no šiem todos tad mēs varam būt mūsu spēcīgs mugurkauls per se izslēdz jebkādu no todos zvanot apmetuma metodi atsevišķiem todos. Tas ir jēdziens, kas ir noderīgs šeit. Tagad labs jautājums uzdot ir, kā ir šis pieteikums tiek likts kopā? Tāpēc, ka mums ir iespēja, lai padarītu vienu todo, bet kā mēs iegūtu priekšstatu par vairāku todos? 

Pieņemsim to apskatīt to. Šī ir pēdējā daļa. Paziņojums mums ir to-do sarakstu skats šeit, un pamanāt, ka tas ir arī viedoklis. Un, lai iet vairāk nekā pāris lietas, šī inicializēt metode tiks izsaukta, kad mēs pirmo reizi izveidot šo to-do sarakstu. Kā jūs varat redzēt, tas ir tāpat kā radīt to-do sarakstu un saista to ar šo skatu. Un tad es pievieno funkcijas šeit, lai būtībā, kad jūs pievienojiet objektu- Tas ir līdzīgs addItem metodi, mēs redzējām pirms- Es esmu gatavojas izveidot jaunu todo objektu, un paziņojums, es esmu faktiski aicinot šī jaunā Todo metode, tāpēc tas tiek nodrošināts ar mugurkaulu, un es varu nodot manā īpašības šeit. Un tagad katrs todo, ka es izveidoju izmantojot šo saņemsiet, ka funkcijas, kuras mēs redzējām pirms tam. Paziņojums Es esmu klīringa no tekstlodziņa pirms-maza sīkumiem- un tad es esmu pievienojot šo kolekciju. 

Tas gandrīz šķiet dīvaini, jo pirms mēs tikko bija to darīt todos.push, un tad mēs tika veikti, un tas var izrādīties daudz sarežģītāka par šo konkrēto projektu, un jūs varat atrast, ka mugurkaulu vai pat Stūra vai jebkuru citu struktūru neapmierina jūsu konkrēto projektu, bet es domāju, ka tas ir svarīgi domāt par ko tas nozīmē plašākā mērogā lielākiem projektiem, jo, ja mums bija lielāks projekts, kur mūs pārstāv daži patiešām sarežģītu vākšanu, kaut kas dziļāks nekā tikai to-do sarakstu, teiksim kādu draugu sarakstu vai kaut kas tamlīdzīgs, tas varētu nonākt parocīgs tāpēc, ka mēs varētu organizēt savu kodu patiesi ērtā veidā, tādā veidā, kas padara to vieglāk, lai kāds cits kurš gribēja uzņemt projektu, lai izveidotu pēc. Jūs varat redzēt, ka tas sniedz daudz struktūru. Un tad es esmu aicinot padarīt šo addItem. Padarīt, kā jūs varat redzēt, un jums nav saprast šo pilnu sintaksi, bet būtībā par katru modeli, tas notiek, lai izsauktu individuālo apmetuma metodi. Tas ir sava veida, ja tas nāk no. Pieņemsim tikai norādīt, kā padarīt atsevišķas todos, un tad pieņemsim līme tos kopā kopumā. Bet tas ir veids, kā abstrakcijas, tāpēc, ka es varētu mainīt veidu, kā es izlemt, lai padarītu atsevišķas todos, , un es nebūtu jāmaina kāds no šo kodu. Tas ir veida atdzist. 

Vai kāds ir kādi jautājumi par JavaScript sistēmas? [Studentu dzirdams jautājums] Ak, protams, tas ir liels jautājums. Jautājums bija, kā bija man ietver pamatprincipus? Lielākā daļa JavaScript ietvari ir būtībā tikai js failus ka jūs varat iekļaut augšpusē jūsu kodu. Paziņojums par galvas daļu no mana HTML man ir visas šīs skriptu tagus, un galīgais skripts tag ir kods, kas mēs esam rakstiski. Un tad 3 pamatnosacījumi kodi ir tieši tā arī skriptu tagus. Es esmu arī viņus no tā, ko sauc CDN, kas ļauj man, lai saņemtu to no kāds cits šajā brīdī bet katram sistēma ir tas, jūs varat diezgan daudz atrast saturu par īpašu JavaScript bibliotēkas pieejama par dažiem CDN vai kaut kas tamlīdzīgs, un tad jūs varat iekļaut šo skriptu tagus. Vai tas ir jēga? Atdzist. 

Tie ir 2 dažādas pieejas. Tie ir ne tikai pieejas šīs problēmas risināšanai. Ir daudz dažādas lietas, ka kāds varētu darīt, un ir daudzas sistēmas, kas tur. Stūraina un mugurkauls nav pateikt visu stāstu. Good luck ar savu gala projektiem, un liels paldies. [CS50.TV]