1 00:00:00,000 --> 00:00:02,000 [Powered by Google Translate] [Seminar] [Javascript Ogrodja: zakaj in kako?] 2 00:00:02,000 --> 00:00:04,000 [Kevin Schmid] [Harvard University] 3 00:00:04,000 --> 00:00:06,960 [To je CS50.] [CS50.TV] 4 00:00:06,960 --> 00:00:10,630 >> Pozdravljeni vsi. Dobrodošli na okvirov seminarja JavaScript. 5 00:00:10,630 --> 00:00:14,910 Moje ime je Kevin, danes bom govoril o okvirov JavaScript, 6 00:00:14,910 --> 00:00:20,400 in cilj tega seminarja je, da ne boste dobili, recimo, mojster poseben okvir po sebi 7 00:00:20,400 --> 00:00:23,810 ampak, da vam širok uvod v nekaj okvirov 8 00:00:23,810 --> 00:00:27,150 in pokazati, zakaj bi si kdaj želeli uporabiti okvir. 9 00:00:27,150 --> 00:00:31,060 >> Preden naredim to, bom zagotovila malo ozadja v JavaScript, 10 00:00:31,060 --> 00:00:33,750 in potem ga bomo od tam. 11 00:00:33,750 --> 00:00:36,270 Bomo začeli z izvajanjem seznam opravkov. 12 00:00:36,270 --> 00:00:39,330 Tukaj je naš seznam opravil za danes. 13 00:00:39,330 --> 00:00:41,990 To je smešno. Moramo izvajati seznam opravil v JavaScriptu. 14 00:00:41,990 --> 00:00:45,110 To je tisto, kar se dogaja, da izgleda kot, da je naš prvi cilj. 15 00:00:45,110 --> 00:00:47,160 Ne bomo uporabljati okvir za to. 16 00:00:47,160 --> 00:00:51,930 Bomo kode JavaScript in dobili seznam opravil delo. 17 00:00:51,930 --> 00:00:54,370 Potem se bomo za izboljšanje načrtovanja, brez uporabe okvira. 18 00:00:54,370 --> 00:00:57,190 Bomo razpravljali o različnih stvari, ki jih lahko delamo le samo z JavaScript 19 00:00:57,190 --> 00:01:00,650 da bi naše opravil malo bolj dobro oblikovana seznam. 20 00:01:00,650 --> 00:01:02,490 Potem bomo vrgli v nekaterih jQuery, 21 00:01:02,490 --> 00:01:05,030 in potem bomo pogled na isti seznam opravil, 22 00:01:05,030 --> 00:01:07,170 pravkar poteka v različnih okvirih, in bomo razpravljali 23 00:01:07,170 --> 00:01:09,280  prednosti in slabosti na poti. 24 00:01:09,280 --> 00:01:12,040 >> Začnimo izvajanje, da seznam opravil. 25 00:01:12,040 --> 00:01:14,270 Recimo, da smo glede na to HTML. 26 00:01:14,270 --> 00:01:16,620 Jaz bom, da bo to malo manjši. 27 00:01:16,620 --> 00:01:19,300 Kot lahko vidite, imam malo glavo, ki pravi Todo 28 00:01:19,300 --> 00:01:21,740 in malo okno, kjer lahko vnesete opis za Todo 29 00:01:21,740 --> 00:01:26,990 in potem nov gumb element, tako da poskusimo vnesti nov todo na tem seznamu. 30 00:01:26,990 --> 00:01:31,000 Daj JavaScript okvire seminar, 31 00:01:31,000 --> 00:01:33,090 in sem se udaril nov element. 32 00:01:33,090 --> 00:01:35,730 Sem dobil to opozorilo JavaScript, ki pravi, da izvajanje me. 33 00:01:35,730 --> 00:01:37,560 Imava za njeno izvajanje. 34 00:01:37,560 --> 00:01:41,490 Poglejmo kodo za to, tako HTML in JavaScript. 35 00:01:41,490 --> 00:01:43,260 Tukaj je naš HTML. 36 00:01:43,260 --> 00:01:45,500 Kot lahko vidite tukaj, tukaj je naš mali Todos glava. 37 00:01:45,500 --> 00:01:47,620 Da je bila ta drzna stvar na vrhu, 38 00:01:47,620 --> 00:01:50,690 in potem imamo vnosno polje z ogrado, 39 00:01:50,690 --> 00:01:59,460 in potem je določena lastnost tega gumba, ki zahteva te funkcije addTodo. 40 00:01:59,460 --> 00:02:05,460 Ali kdo želi ugibati, kaj je na klik, ki pomeni? 41 00:02:05,460 --> 00:02:07,390 [Student neslišen odziv] 42 00:02:07,390 --> 00:02:09,289 Dobro je na klik, je nekaj podobnega dogodka, 43 00:02:09,289 --> 00:02:12,120 kot klikom na miško je samo dogodek, in kaj delamo 44 00:02:12,120 --> 00:02:16,890 se bomo vezanje dogodek klikom na ta gumb za izvršitev te funkcije. 45 00:02:16,890 --> 00:02:21,700 AddTodo je ta dogodek trener za klikom na ta gumb. 46 00:02:21,700 --> 00:02:25,010 >> Kot lahko vidite, ko kliknete gumb za nov element 47 00:02:25,010 --> 00:02:29,940 Dogodek na klik dobi odpustili, in ta funkcija gets klical. 48 00:02:29,940 --> 00:02:33,170 Oglejmo si funkcijo. 49 00:02:33,170 --> 00:02:36,260 Kot lahko vidite, tu je moja koda Javascript doslej. 50 00:02:36,260 --> 00:02:41,280 Kaj imam na vrhu je globalna struktura podatkov za moj seznam opravil. 51 00:02:41,280 --> 00:02:44,060 Izgleda matrike. To je samo prazna polja. 52 00:02:44,060 --> 00:02:47,100 In potem imam addTodo funkcijo, da smo videli že prej, 53 00:02:47,100 --> 00:02:50,740 in samo vrstico kode tam je to opozorilo. 54 00:02:50,740 --> 00:02:55,730 Opozori izvajati me, in potem imam 2 naloge pri roki. 55 00:02:55,730 --> 00:02:58,790 Moram dodati todo tej globalni strukturi podatkov, 56 00:02:58,790 --> 00:03:01,860 in potem hočem potegnili seznam opravkov. 57 00:03:01,860 --> 00:03:06,360 Nič mi samo še, ampak Javascript ste morda seznanjeni s tem, 58 00:03:06,360 --> 00:03:12,370 tako da sem šel počasi in pregledati temelje JavaScript v tej smeri. 59 00:03:12,370 --> 00:03:15,490 >> Dajmo to strel. 60 00:03:15,490 --> 00:03:21,130 Recimo, da uporabnik vnese nekaj v tem polju. 61 00:03:21,130 --> 00:03:23,360 Pravkar sem tipkal nekaj tukaj, besedila. 62 00:03:23,360 --> 00:03:27,620 Kako razvrstim dostopa, da besedilo z JavaScript? 63 00:03:27,620 --> 00:03:32,500 Ne pozabite, da je JavaScript, ena od njenih temeljnih značilnosti je, da nam daje 64 00:03:32,500 --> 00:03:34,670 Ta programski dostop do DOM. 65 00:03:34,670 --> 00:03:40,670 To nam omogoča dostop do elemente in njihove lastnosti tega dejanskega HTML. 66 00:03:40,670 --> 00:03:43,430 Tako bomo to storili s Bare Bones JavaScript 67 00:03:43,430 --> 00:03:51,360 je lahko dejansko uporabite funkcijo v JavaScriptu imenovano getElementByID. 68 00:03:51,360 --> 00:03:55,140 Želim, da shranite besedilo, ki je tam vnesli v neki spremenljivki, 69 00:03:55,140 --> 00:03:58,350 tako bom rekel novo spremenljivko z imenom new_todo, 70 00:03:58,350 --> 00:04:01,980 in bom, da bi dobili ta element. 71 00:04:01,980 --> 00:04:06,330 To je funkcija,. GetElementByID. 72 00:04:06,330 --> 00:04:11,580 In zdaj sem že element z ID, tako da moram ID tega polja z besedilom, 73 00:04:11,580 --> 00:04:15,860 tako da sem mu dala ID new_todo_description. 74 00:04:15,860 --> 00:04:18,399 Tako bom dobil element. 75 00:04:18,399 --> 00:04:23,880 To je moj argument, da to funkcijo, da določi, kateri ID dobiti. 76 00:04:23,880 --> 00:04:28,110 Tako, da je element HTML, in ima lastnosti. 77 00:04:28,110 --> 00:04:30,650 Videli ste jih. Oni so atributi. 78 00:04:30,650 --> 00:04:37,090 Atribut besedilnega elementa, ki shranjuje vhodne uporabnika, se imenuje vrednost. 79 00:04:37,090 --> 00:04:40,860 Rešil sem vrednost tega polja z besedilom zdaj v to spremenljivko imenovano new_todo. 80 00:04:40,860 --> 00:04:45,040 Zdaj imam programski dostop do te spremenljivke, ki je nekako kul 81 00:04:45,040 --> 00:04:49,200 ker zdaj, kaj lahko storim, je, da sem lahko dodate na svoj seznam opravil. 82 00:04:49,200 --> 00:04:52,870 >> Tako bomo to naredili v JavaScript-in ne skrbite, če niste seznanjeni s tem, 83 00:04:52,870 --> 00:04:57,010 ampak le, da bo skozi to je todos.push 84 00:04:57,010 --> 00:05:00,130 ker to je ime moje globalne podatkovne strukture tu gor, 85 00:05:00,130 --> 00:05:04,450 in bom za potiskanje new_todo. 86 00:05:04,450 --> 00:05:09,120 To je super, ker sedaj sem ga dodal k moji JavaScript 87 00:05:09,120 --> 00:05:11,280 predstavitev, da seznam opravil. 88 00:05:11,280 --> 00:05:15,170 Toda zdaj, kako ga dobim nazaj v HTML? 89 00:05:15,170 --> 00:05:18,560 Moram najti način, da nekako ga potisnite nazaj. 90 00:05:18,560 --> 00:05:21,830 Z drugimi besedami, nekako sem morala pripraviti to. 91 00:05:21,830 --> 00:05:26,060 Kaj bomo storiti je, da gremo, da pripravi seznama opravil. 92 00:05:26,060 --> 00:05:29,270 Moram posodobiti druge HTML na tej strani, 93 00:05:29,270 --> 00:05:32,040 in kot vidite, sem zapustil to majhno posodo tukaj 94 00:05:32,040 --> 00:05:36,840 Ta delilnik strani, katere številka je todos, 95 00:05:36,840 --> 00:05:40,870 in bom dal seznama opravil tam. 96 00:05:40,870 --> 00:05:47,240 Najprej bom to jasno, ker pravijo, da je bil star seznam opravkov tam. 97 00:05:47,240 --> 00:05:49,560 Dobivam ta element po ID enkrat, 98 00:05:49,560 --> 00:05:54,530 in sem dostop do notranjega HTML tega elementa, 99 00:05:54,530 --> 00:05:58,010 in bom jasno, da. 100 00:05:58,010 --> 00:06:05,510 Če bi se to kodo, kot je, bi videli prazen nič tam, 101 00:06:05,510 --> 00:06:10,410 in zdaj želim, da začnete česar mojega novega seznama opravil. 102 00:06:10,410 --> 00:06:12,870 Jaz sem v bistvu dogaja, da bi izbrisala svoj seznama opravil. 103 00:06:12,870 --> 00:06:18,180 >> Sedaj notranja HTML znotraj tega todos div je popolnoma jasno, 104 00:06:18,180 --> 00:06:20,060 in zdaj moram začeti dodal moj seznam. 105 00:06:20,060 --> 00:06:23,890 Prva stvar, ki jo želite dodati nazaj je neurejen seznam tag, 106 00:06:23,890 --> 00:06:33,890 kar v bistvu pomeni, da je to začetek neurejen seznam. 107 00:06:33,890 --> 00:06:39,770 Zdaj za vsak element v mojem todos paleto želim natisniti znotraj te HTML. 108 00:06:39,770 --> 00:06:43,710 Rad bi ga dodajte na dnu tega seznama. 109 00:06:43,710 --> 00:06:49,040 Tako kot v C-ju, sem lahko uporabite za zanke, in bom začel na začetku mojega seznama 110 00:06:49,040 --> 00:06:54,140 pri elementu 0 in bom šel vse do dolžine seznama. 111 00:06:54,140 --> 00:07:01,100 Mi lahko dejansko dobili dolžino array v JavaScriptu z dolžino premoženja. 112 00:07:01,100 --> 00:07:03,420 V bistvu bom naredil nekaj zelo podobnega v notranjosti tukaj 113 00:07:03,420 --> 00:07:05,600 natisniti ta element. 114 00:07:05,600 --> 00:07:12,970 Sem spet lahko dostopate do todos div, notranja HTML lastnost, da, 115 00:07:12,970 --> 00:07:17,560 in bom dodati to novo postavko seznama, in to se dogaja, da je obkrožen z 116 00:07:17,560 --> 00:07:25,390 to li tag, in bom za združevanje z operaterjem +, 117 00:07:25,390 --> 00:07:28,040 in da je i-ti element mojega todos matrike, 118 00:07:28,040 --> 00:07:32,380 in potem bom zaprl to oznako. 119 00:07:32,380 --> 00:07:36,240 Zdaj za vsak element bomo dodali nov vnos v seznamu. 120 00:07:36,240 --> 00:07:48,700 In potem vse res morate storiti, je zapreti to oznako. 121 00:07:48,700 --> 00:07:52,820 Moram zapreti, da neurejen seznam tag. 122 00:07:52,820 --> 00:07:55,490 >> Ali boste dobili občutek, kako, da deluje? 123 00:07:55,490 --> 00:07:57,700 To odpre celoten seznam. 124 00:07:57,700 --> 00:08:01,080 Ta dodaja posamezne elemente iz seznama todos na seznam 125 00:08:01,080 --> 00:08:05,470 in potem zapre celoten seznam, in to je moj addTodo funkcijo. 126 00:08:05,470 --> 00:08:09,590 Sem v bistvu najprej dobili todo iz polja z besedilom. 127 00:08:09,590 --> 00:08:18,950 Dodam, da na Todos niz, potem pa sem ponovno postale seznama opravil. 128 00:08:18,950 --> 00:08:21,520 Sedaj lahko dodate elemente na mojem seznamu. 129 00:08:21,520 --> 00:08:24,620 To je nekako razburljivo, saj je v le nekaj vrstic kode 130 00:08:24,620 --> 00:08:28,240 smo v bistvu naredili seznama opravil, kjer lahko dodate elemente. 131 00:08:28,240 --> 00:08:30,050 Super. 132 00:08:30,050 --> 00:08:34,480 To je nekakšen uvod v osnovne JavaScript. 133 00:08:34,480 --> 00:08:36,179 Ne skrbite preveč o skladnji za zdaj, 134 00:08:36,179 --> 00:08:38,130 ampak mislim o tem konceptualno. 135 00:08:38,130 --> 00:08:40,539 Imeli smo nekaj HTML. 136 00:08:40,539 --> 00:08:45,310 Imeli smo besedilno polje na strani, ki v bistvu dovoli uporabnikom, za vnos, opravila postavka dodati. 137 00:08:45,310 --> 00:08:49,210 In potem smo JavaScript puščati, da todo iz te polje z besedilom. 138 00:08:49,210 --> 00:08:52,830 Shranjeni smo to, kar je znotraj polja JavaScript bistvu kot 139 00:08:52,830 --> 00:08:56,010 Naša programska zastopanje, da seznam opravil, 140 00:08:56,010 --> 00:08:59,060 in potem smo ga natisne. 141 00:08:59,060 --> 00:09:02,690 To je todos.js. 142 00:09:02,690 --> 00:09:07,620 >> To je nekako kul, ampak kako bomo to še trajalo? 143 00:09:07,620 --> 00:09:11,350 Torej, kot lahko vidite, to ni tako popoln seznam opravkov. 144 00:09:11,350 --> 00:09:15,100 Na primer, ne morem označiti katere od teh stvari so nepopolni, 145 00:09:15,100 --> 00:09:19,920 všeč, če bi želel reprioritize predmete ali brisanje elementov. 146 00:09:19,920 --> 00:09:23,150 To je v redu, vendar pa lahko traja še naprej. 147 00:09:23,150 --> 00:09:29,280 Ne bom govoril preveč o dodajanju dodatnih funkcij, 148 00:09:29,280 --> 00:09:32,800 lahko pa smo se, da še naprej. 149 00:09:32,800 --> 00:09:35,970 Spregovorimo o dodajanju še eno funkcijo, da ta seznam opravil, 150 00:09:35,970 --> 00:09:40,370 ki se dogaja, da se ni mogoče preveriti posameznika opravil element 151 00:09:40,370 --> 00:09:44,780 in se je prečrtati, tako da v bistvu rekel da sem to storil. 152 00:09:44,780 --> 00:09:50,240 Oglejmo si nekaj kode, da bi lahko izvedla to. 153 00:09:50,240 --> 00:09:52,740 Obvestilo, kaj sem naredil na vrhu je sem dodal 154 00:09:52,740 --> 00:09:57,620 Nova globalna matrika se imenuje popolna. 155 00:09:57,620 --> 00:10:02,890 Jaz sem v bistvu s tem, da shranite ali predmete na seznam opravil 156 00:10:02,890 --> 00:10:06,560 popolni ali ne. 157 00:10:06,560 --> 00:10:08,470 To je eden od načinov, da to storijo. 158 00:10:08,470 --> 00:10:13,750 Če gledam na izvajanje tega sklepa, prikaz, 159 00:10:13,750 --> 00:10:21,120 v bistvu, če vpišem todo in sem pritisnite ta gumb za preklop 160 00:10:21,120 --> 00:10:25,040 prečka ven, zato je vsaka točka na seznamu je bodisi popolna 161 00:10:25,040 --> 00:10:31,050 ali nepopolno stanje, in sem z drugo vrsto, da predstavlja to. 162 00:10:31,050 --> 00:10:33,730 >> V bistvu za vsako Todo v tej todos matriki 163 00:10:33,730 --> 00:10:37,110 tam je postavka v popolni niz, ki v bistvu kaže 164 00:10:37,110 --> 00:10:39,060 ali je popolna ali ne. 165 00:10:39,060 --> 00:10:41,640 Sem imel, da bi precej malenkostne spremembe tega kodeksa, 166 00:10:41,640 --> 00:10:44,470 tako da tukaj je naša addTodo funkcija. 167 00:10:44,470 --> 00:10:48,530 Obvestilo, da tu sem ga potiska na paleto, 168 00:10:48,530 --> 00:10:51,300 in potem sem pritiskom na 0, da to popolno paleto, 169 00:10:51,300 --> 00:10:57,090 v bistvu vzporedno s tem novim nedokončano pritiskom reči 170 00:10:57,090 --> 00:11:00,430 Jaz sem dodal to postavko, in to je povezano s to vrednostjo, 171 00:11:00,430 --> 00:11:02,810 kar pomeni, da je nepopolna. 172 00:11:02,810 --> 00:11:04,970 In potem sem redrawing seznam opravkov. 173 00:11:04,970 --> 00:11:09,220 Sedaj opazil sem dodal to drawTodoList funkcijo. 174 00:11:09,220 --> 00:11:11,760 To traja veliko kode smo imeli prej, 175 00:11:11,760 --> 00:11:15,320 v bistvu vzame ven polje in nato sestavi nov seznam opravil. 176 00:11:15,320 --> 00:11:19,620 Ampak obvestilo, da je v notranjosti ta zanka delamo malo več zdaj. 177 00:11:19,620 --> 00:11:25,000 Mi smo v bistvu preverjanje, ali element, ki ustreza i Todo tukaj 178 00:11:25,000 --> 00:11:30,220 je popolna, in smo obnaša drugače v teh 2 okoliščinah. 179 00:11:30,220 --> 00:11:32,790 Če je končan, bomo dodali ta del oznako, 180 00:11:32,790 --> 00:11:35,360 ki je v bistvu način lahko dobite to stavko, s pomočjo učinka 181 00:11:35,360 --> 00:11:38,190 prečrtajo s seznama opravil, če je popolna, 182 00:11:38,190 --> 00:11:42,200 in če je ne, ne bova tudi. 183 00:11:42,200 --> 00:11:45,030 In tako nekako skrbi, da 184 00:11:45,030 --> 00:11:49,140 >> in to je eden od načinov za doseganje tega. 185 00:11:49,140 --> 00:11:53,420 In potem opazili, ko uporabnik klikne eno od teh 186 00:11:53,420 --> 00:11:56,780 smo preklopite stanje dokončanja tega. 187 00:11:56,780 --> 00:12:02,170 Ko uporabnik klikne, se bomo obrnili, ali je bila ta zaključena ali ne, 188 00:12:02,170 --> 00:12:04,540 in potem ga bomo izvlečete. 189 00:12:04,540 --> 00:12:06,190 Ta vrsta del. 190 00:12:06,190 --> 00:12:09,860 Imamo te funkcije, ki opravljajo svoje naloge, 191 00:12:09,860 --> 00:12:11,730 in to je v redu. 192 00:12:11,730 --> 00:12:14,110 Je še kaj, kar lahko storimo bolje o tem, čeprav? 193 00:12:14,110 --> 00:12:18,700 Opazili smo te 2 globalnih nize. 194 00:12:18,700 --> 00:12:23,550 Če je to C, in smo imeli 2 nize, da je vrsta zastopana 195 00:12:23,550 --> 00:12:25,800 Podatki, ki so nekako povezani na nek način 196 00:12:25,800 --> 00:12:30,140 Kaj bi lahko uporabite v C združiti ti 2 polja 197 00:12:30,140 --> 00:12:35,420 v nekaj, kar povzema obe informaciji? 198 00:12:35,420 --> 00:12:37,600 Kdorkoli želite, da bi predlog? 199 00:12:37,600 --> 00:12:39,450 [Student neslišen odziv] 200 00:12:39,450 --> 00:12:42,340 >> Točno, tako da bi lahko uporabili nekakšen struct, 201 00:12:42,340 --> 00:12:44,960 in če pomislim nazaj, recimo, pset 3, 202 00:12:44,960 --> 00:12:47,350 ne pozabite, smo imeli zbirko, nato pa smo imeli, ali je beseda 203 00:12:47,350 --> 00:12:50,230 je bil v slovarju, in vse te informacije je dal skupaj 204 00:12:50,230 --> 00:12:52,420 znotraj nekaterih podatkov strukture. 205 00:12:52,420 --> 00:12:56,390 Ena stvar, ki sem lahko narediš s tem kodeksom, da se jim teh 2 različne nize 206 00:12:56,390 --> 00:13:01,760 za podobne dele informacij, da jih lahko združite v objektu JavaScript. 207 00:13:01,760 --> 00:13:07,150 Oglejmo pogled na to. 208 00:13:07,150 --> 00:13:11,740 Opazil sem le eno vrsto na vrhu zdaj 209 00:13:11,740 --> 00:13:17,650 in kaj sem naredil, je, in to je šele JavaScript sintaksa za nekakšen 210 00:13:17,650 --> 00:13:21,350 ustvarjanje dobesedni prevod predmeta, 211 00:13:21,350 --> 00:13:24,670 in opazil, obstajajo 2 lastnosti, tako da imamo todo, 212 00:13:24,670 --> 00:13:29,660 in to je ohraniti, skupaj s tem, ali je popolna ali nepopolna. 213 00:13:29,660 --> 00:13:31,000 To je zelo podoben kode. 214 00:13:31,000 --> 00:13:35,310 Mi smo z uporabo predmetov JavaScript. 215 00:13:35,310 --> 00:13:38,600 Ta vrsta izboljšuje stvari. 216 00:13:38,600 --> 00:13:43,850 Tako kot sedaj, so vsi ti polja informacij, povezanih z obdržati skupaj. 217 00:13:43,850 --> 00:13:46,410 Ko gremo, da ga natisnete, lahko dostopate do polja. 218 00:13:46,410 --> 00:13:49,060 >> Opazili, kako delamo todos [i]. Popolna 219 00:13:49,060 --> 00:13:52,880 Namesto preverjanje popolno paleto ločeno 220 00:13:52,880 --> 00:13:56,560 in opazil, kadar želimo, da bi dobili, opravila niz smo dobili, opravila nepremičnine 221 00:13:56,560 --> 00:13:58,750 te Todo, tako da to nekako smiselno, saj 222 00:13:58,750 --> 00:14:01,660 Vsak element ima te bistvene lastnosti o njej. 223 00:14:01,660 --> 00:14:05,650 Ima todo in ima ali je popolna ali ne. 224 00:14:05,650 --> 00:14:11,540 Ne preveč sprememb ni funkcionalno, samo dodal nekaj več kode. 225 00:14:11,540 --> 00:14:13,430 To je napredek na nekaterih področjih, kajne? 226 00:14:13,430 --> 00:14:16,030 Mislim, vključeno ven oblikovanje bit. 227 00:14:16,030 --> 00:14:20,350 Zdaj imamo predmete v bistvu zajame te podatke. 228 00:14:20,350 --> 00:14:27,130 Je še kaj, kar lahko storimo od tod v smislu JavaScript? 229 00:14:27,130 --> 00:14:31,810 Všeč mi je obvestilo, da je ta oznaka tukaj 230 00:14:31,810 --> 00:14:34,760 za pridobivanje notranjo HTML div 231 00:14:34,760 --> 00:14:40,520 je malo, mislim, dolgo. 232 00:14:40,520 --> 00:14:45,100 Tam je document.getElementById ("todos"). InnerHTML. 233 00:14:45,100 --> 00:14:48,400 Ena stvar, kar lahko storimo, da bo ta številka poglej malo prijaznejši 234 00:14:48,400 --> 00:14:51,450 da mi ne bi bilo treba ohraniti pomikanjem levo in desno, naprej in nazaj, 235 00:14:51,450 --> 00:14:58,480 je, da sem lahko uporabite knjižnico kot jQuery. 236 00:14:58,480 --> 00:15:02,710 >> Poglejmo Seminar 2, 237 00:15:02,710 --> 00:15:05,880 in to je isto kodo, vendar je narejena s jQuery. 238 00:15:05,880 --> 00:15:08,790 Morda ne boste preveč seznanjeni s jQuery, 239 00:15:08,790 --> 00:15:11,510 ampak samo vem, da je jQuery neke vrste knjižnico za JavaScript 240 00:15:11,510 --> 00:15:15,910 da je lažje narediti stvari, kot so dostop do posameznih elementov DOM. 241 00:15:15,910 --> 00:15:21,280 Tukaj namesto da bi rekel document.getElementById ("todos"). InnerHTML 242 00:15:21,280 --> 00:15:25,210 Lahko uporabite veliko čistejši način jQuery, 243 00:15:25,210 --> 00:15:28,490 , ki je samo za uporabo selektorjev. 244 00:15:28,490 --> 00:15:31,300 Kot lahko vidite, ta številka pa dobili malo čistejši, 245 00:15:31,300 --> 00:15:35,770 zelo podobno funkcionalno, ampak to je ideja. 246 00:15:35,770 --> 00:15:37,980 Videli smo nekaj stvari tako daleč, 247 00:15:37,980 --> 00:15:42,010 Tako smo začeli s samo surovo izvajanjem JavaScript. 248 00:15:42,010 --> 00:15:45,370 Dodali smo nove funkcije in pokazala, kako bomo lahko izboljšali z 249 00:15:45,370 --> 00:15:49,090 samo tisto, kar imamo v JavaScript. 250 00:15:49,090 --> 00:15:53,300 >> Ali kdo vidi težave s to obliko? 251 00:15:53,300 --> 00:16:01,090 Namreč, mislim, ali ni nujno, da težave, ampak recimo, 252 00:16:01,090 --> 00:16:04,830 nismo bili delaš projekt za seznam opravil, jutri smo se odločili, 253 00:16:04,830 --> 00:16:10,320 smo želeli, da bi nakupovalni seznam ali projekt nakupovalnega seznama. 254 00:16:10,320 --> 00:16:14,150 Veliko teh lastnosti so zelo podobne. 255 00:16:14,150 --> 00:16:19,080 Veliko stvari, ki jih želijo priti ven iz JavaScriptu so zelo pogoste, 256 00:16:19,080 --> 00:16:23,820 in to poudarja potrebo po nekakšni način 257 00:16:23,820 --> 00:16:25,670 bi to lažje narediti. 258 00:16:25,670 --> 00:16:30,400 Sem moral zgraditi vse te HTML dostop, vse to dostop DOM, 259 00:16:30,400 --> 00:16:35,530 kot bom predstavljajo seznam opravil s tem modelom. 260 00:16:35,530 --> 00:16:39,130 In opazil sem odgovoren, kot razvijalec JavaScript 261 00:16:39,130 --> 00:16:42,890 za vodenje HTML in JavaScript, ki ga imam v sinhronizacijo. 262 00:16:42,890 --> 00:16:48,040 Nič ne naredi avtomatsko, da je zastopanje Javascript 263 00:16:48,040 --> 00:16:51,590 ali to-do seznam dobili izrinili v HTML. 264 00:16:51,590 --> 00:16:54,000 Nič ne uveljavlja, da razen mene. 265 00:16:54,000 --> 00:16:56,880 Morala sem napisati žrebom opravil funkcijo seznama. 266 00:16:56,880 --> 00:17:01,650 In da ne sme biti, mislim, da je smiselno, da se ne da, 267 00:17:01,650 --> 00:17:03,670 vendar pa je lahko včasih dolgočasno. 268 00:17:03,670 --> 00:17:08,190 Če imate večji projekt, da bi bilo težko. 269 00:17:08,190 --> 00:17:10,720 >> Okviri, eden od namenov okvirih 270 00:17:10,720 --> 00:17:14,060 je poenostaviti ta proces in stvari faktorja iz 271 00:17:14,060 --> 00:17:16,950 ti common-Mislim, da bi lahko rekli, načrtovalski vzorci 272 00:17:16,950 --> 00:17:20,700 da ljudje na splošno imajo nekakšen način predstavljanja podatkov, 273 00:17:20,700 --> 00:17:25,599 ali da je seznam prijateljev, ali da je zemljevid podatki 274 00:17:25,599 --> 00:17:27,280 ali kaj podobnega, ali seznam opravkov. 275 00:17:27,280 --> 00:17:30,660 Nekateri imajo običajno način predstavlja podatke, 276 00:17:30,660 --> 00:17:33,650 in so na splošno treba hraniti, da so informacije nekako v sinhronizacijo 277 00:17:33,650 --> 00:17:36,520 med tem, kar uporabnik vidi v nekakšni namenom, 278 00:17:36,520 --> 00:17:39,850 gledano v smislu, kot modela pogled krmilnik, ki ga videli v predavanju 279 00:17:39,850 --> 00:17:45,400 nato pa vzorec, ki je v tem primeru je to polje Javascript. 280 00:17:45,400 --> 00:17:49,020 Okviri nam način za rešitev tega problema. 281 00:17:49,020 --> 00:17:53,080 Zdaj pa si oglejte na izvajanje tega seznam opravil 282 00:17:53,080 --> 00:18:02,360 v okviru ti angularjs. 283 00:18:02,360 --> 00:18:04,650 To je to. Obvestilo se prilega na diapozitivu. 284 00:18:04,650 --> 00:18:07,330 Nimam se pomaknite na levo in desno. 285 00:18:07,330 --> 00:18:10,460 To verjetno ni dober razlog, da priporočam uporabo okvira, 286 00:18:10,460 --> 00:18:20,120 ampak obvestilo sem kdaj dostop do posameznih elementov HTML tukaj? 287 00:18:20,120 --> 00:18:22,400 Si bom v DOM? 288 00:18:22,400 --> 00:18:26,120 Ali vidite kakšno document.getElementById ali kaj podobnega? 289 00:18:26,120 --> 00:18:29,870 Ne, to je več. 290 00:18:29,870 --> 00:18:35,590 >> Kotna nam pomaga ohraniti DOM in našo zastopanost JavaScript nečesa 291 00:18:35,590 --> 00:18:40,430 nekako v sinhronizacijo, tako da, če to ni v spisu js, 292 00:18:40,430 --> 00:18:46,790 če ni način za načrtno pridobivanje vse te vsebine HTML 293 00:18:46,790 --> 00:18:51,800 Iz JavaScript kako smo vodenje tega v sinhronizaciji? 294 00:18:51,800 --> 00:18:58,160 Če to ni v spisu. Js, je dobil biti v HTML, kajne? 295 00:18:58,160 --> 00:19:01,910 To je nova različica datoteke HTML, 296 00:19:01,910 --> 00:19:04,660 in opazili smo dodali veliko tukaj. 297 00:19:04,660 --> 00:19:11,110 Obvestilo tam te nove lastnosti, ki pravijo ng klik in ng-repeat. 298 00:19:11,110 --> 00:19:15,650 Pristop kotnih k reševanju tega problema s težavami pri načrtovanju 299 00:19:15,650 --> 00:19:19,130 je v bistvu narediti HTML veliko močnejši. 300 00:19:19,130 --> 00:19:24,420 Kotna je način, ki vam bo omogočila HTML nekoliko bolj izrazite. 301 00:19:24,420 --> 00:19:30,520 Na primer, lahko rečem, da bom kravato ali veže to polje z besedilom 302 00:19:30,520 --> 00:19:35,080 spremenljivki v mojem Kotna kode JavaScript. 303 00:19:35,080 --> 00:19:37,030 Ta ng model ne samo to. 304 00:19:37,030 --> 00:19:41,550 , Ki v bistvu pravi, da je element znotraj to polje z besedilom, 305 00:19:41,550 --> 00:19:45,000 samo povezati, da s spremenljivo new_todo_description 306 00:19:45,000 --> 00:19:47,870 znotraj kode JavaScript. 307 00:19:47,870 --> 00:19:51,600 To je zelo močna, ker nimam izrecno iti 308 00:19:51,600 --> 00:19:53,310 DOM bi dobili te informacije. 309 00:19:53,310 --> 00:19:56,250 Nimam za povedati document.getElementById. 310 00:19:56,250 --> 00:19:58,750 Nimam uporabljati jQueries kot DOM dostopa. 311 00:19:58,750 --> 00:20:03,280 Lahko jo povezal s spremenljivko, nato pa, ko sem spremeniti, da spremenljivka 312 00:20:03,280 --> 00:20:07,400 v JavaScriptu je to vodi v sinhronizacijo z HTML, 313 00:20:07,400 --> 00:20:11,640 tako da poenostavlja postopek bi morali iti naprej in nazaj med dvema. 314 00:20:11,640 --> 00:20:18,260 Ali je to smiselno? 315 00:20:18,260 --> 00:20:22,060 >> In opazil ni HTML kodo za dostop. 316 00:20:22,060 --> 00:20:27,760 Pravkar smo HTML bolj močna, 317 00:20:27,760 --> 00:20:32,070 in zdaj, na primer, lahko naredimo stvari, kot je ta, 318 00:20:32,070 --> 00:20:38,610 všeč, ko boste kliknili na to, pokličite to funkcijo v okviru todos.js, 319 00:20:38,610 --> 00:20:43,410 in bi lahko storili prej, vendar obstajajo tudi druge stvari, kot je ta ng modela, 320 00:20:43,410 --> 00:20:47,020 in opazil to NG-ponovitev. 321 00:20:47,020 --> 00:20:51,520 Kaj misliš, da to počne? 322 00:20:51,520 --> 00:20:54,390 Tukaj je naš neurejen seznam od prej. 323 00:20:54,390 --> 00:20:56,470 Imamo ul oznake, 324 00:20:56,470 --> 00:21:03,710 vendar sem kdaj česar ta seznam notranjost JavaScript kodo? 325 00:21:03,710 --> 00:21:09,280 Ne bom nikoli izrecno zaradi česar ta seznam. 326 00:21:09,280 --> 00:21:11,580 Kako to deluje? 327 00:21:11,580 --> 00:21:16,410 No, pot kotno dosega to je to se imenuje repetitor. 328 00:21:16,410 --> 00:21:22,760 V bistvu je to pravi, da želim natisniti HTML 329 00:21:22,760 --> 00:21:26,240 za vsako nedokončano notranjosti mojega todos matrike. 330 00:21:26,240 --> 00:21:31,850 Znotraj todos.jr je todos matrika tukaj, 331 00:21:31,850 --> 00:21:37,910 in to bo povedal Kotna šel skozi ta polja, in za vsak element vidite 332 00:21:37,910 --> 00:21:41,390 Želim si, da natisnete to HTML. 333 00:21:41,390 --> 00:21:44,620 To je nekako super, ker sem lahko samo to 334 00:21:44,620 --> 00:21:47,760 ne da bi morali pisati v zanko, 335 00:21:47,760 --> 00:21:52,250 , ki za to-do seznam, ki je bil le 30 vrstic kode 336 00:21:52,250 --> 00:21:54,700 morda ni najbolj koristna stvar, 337 00:21:54,700 --> 00:22:01,240 vendar, če imate velik projekt, bi to lahko dobite zelo priročno. 338 00:22:01,240 --> 00:22:06,100 >> To je ena rešitev tega problema, ki HTML močnejši, 339 00:22:06,100 --> 00:22:10,820 in ki nam omogoča ohraniti JavaScript in HTML v sinhronizacijo. 340 00:22:10,820 --> 00:22:13,220 Obstajajo tudi druge možne načine za rešitev tega problema, 341 00:22:13,220 --> 00:22:15,320 in ne vsak okvir počne. 342 00:22:15,320 --> 00:22:17,720 Ni vsak okvir deluje v tej smeri. 343 00:22:17,720 --> 00:22:19,490 Nekateri okviri imajo različne pristope, 344 00:22:19,490 --> 00:22:23,310 in morda boste ugotovili, da ste uživali v kodiranje v enem okviru več kot drugi. 345 00:22:23,310 --> 00:22:26,160 Oglejmo si še en. 346 00:22:26,160 --> 00:22:30,060 To je to-do seznam kodirani v okviru imenuje hrbtenica. 347 00:22:30,060 --> 00:22:33,250 Jaz grem skozi to hitro. 348 00:22:33,250 --> 00:22:38,300 Začel bom s HTML, preden gremo tja. 349 00:22:38,300 --> 00:22:40,290 Eno sekundo. 350 00:22:40,290 --> 00:22:43,950 Začenši s HTML, kot ste opazili, naša HTML je zelo podoben 351 00:22:43,950 --> 00:22:50,000 s tem, kar je bilo prej, tako da ne preveč novega na tej fronti. 352 00:22:50,000 --> 00:22:55,410 Toda naš js pila je malo drugačna. 353 00:22:55,410 --> 00:23:00,360 Hrbtenico vrsta ima to idejo, ali temelji na ideji 354 00:23:00,360 --> 00:23:04,750 da je veliko tega, kar počnemo z, recimo, naši projekti JavaScript 355 00:23:04,750 --> 00:23:09,110 je razmišljati o modelih in zbirkah teh modelov. 356 00:23:09,110 --> 00:23:12,510 To bi lahko, na primer, fotografije in zbirke fotografij, 357 00:23:12,510 --> 00:23:16,230 ali ideja prijatelja in zbirk prijateljev. 358 00:23:16,230 --> 00:23:20,700 In velikokrat, ko smo programiranju aplikacij JavaScript 359 00:23:20,700 --> 00:23:25,340 bomo nekako predstavlja zamisel o zbirko prijateljev 360 00:23:25,340 --> 00:23:29,500 nekako v JavaScript in hrbtenica nam daje ta sloj 361 00:23:29,500 --> 00:23:33,040 na vrhu JavaScript je obstoječimi nizi in predmetov 362 00:23:33,040 --> 00:23:38,300 narediti bolj zmogljive stvari, s tem lažje. 363 00:23:38,300 --> 00:23:41,870 >> Tukaj sem opredelila to-do modela, 364 00:23:41,870 --> 00:23:44,630 in vam ni treba skrbeti preveč o skladnji, 365 00:23:44,630 --> 00:23:48,730 ampak obvestilo, da tisto, kar je ena izmed lastnosti tega? 366 00:23:48,730 --> 00:23:53,190 To je privzeto polje. 367 00:23:53,190 --> 00:23:56,640 Hrbtenica mi omogoča, da že določajo off kij 368 00:23:56,640 --> 00:24:00,190 vsako novo opravilo, da ustvarim se dogaja, da imajo te privzete. 369 00:24:00,190 --> 00:24:04,100 Zdaj lahko prilagodite to, ampak da lahko določite privzete 370 00:24:04,100 --> 00:24:07,220 Lepo je, in to je nekako prikladno, ker to ni nekaj, kar je podobno 371 00:24:07,220 --> 00:24:10,430 neločljivo povezana JavaScript, zdaj pa nimam izrecno 372 00:24:10,430 --> 00:24:12,430 pravijo, da so todos nepopolna. 373 00:24:12,430 --> 00:24:19,190 Lahko rečem, pravico off kij, todos se bodo označene kot nepopolne. 374 00:24:19,190 --> 00:24:21,300 Obvestilo potem kaj je to? 375 00:24:21,300 --> 00:24:25,520 Sedaj imam seznama opravil, in to je zbirka. 376 00:24:25,520 --> 00:24:30,960 Obvestilo polje, povezano s tem pravi model, todo. 377 00:24:30,960 --> 00:24:33,390 To je moj način povedati, da hrbtenica 378 00:24:33,390 --> 00:24:37,350 Bom lahko razmišljal o zbiranju teh posameznih todos. 379 00:24:37,350 --> 00:24:42,140 To je v bistvu struktura model za mojega programa. 380 00:24:42,140 --> 00:24:44,980 Tukaj imam to idejo zbiranja, 381 00:24:44,980 --> 00:24:48,960 in v bistvu predmeti iz te zbirke so vsi bo ta todos, 382 00:24:48,960 --> 00:24:51,910 in da je zelo naravno v tem smislu 383 00:24:51,910 --> 00:24:59,890 ker imam todos, in jih imam v zbirki. 384 00:24:59,890 --> 00:25:02,940 >> Oglejmo si malo več o tem. 385 00:25:02,940 --> 00:25:05,900 Tukaj je pogled hrbtenica. 386 00:25:05,900 --> 00:25:08,890 Druga stvar, ki hrbtenica pravi, da 387 00:25:08,890 --> 00:25:14,660 Veliko modelov, ki razmišljate o tem, ali celo zbirk 388 00:25:14,660 --> 00:25:19,150 se bomo morali na nek način se prikaže. 389 00:25:19,150 --> 00:25:21,900 Moramo nuditi, da seznam opravil, 390 00:25:21,900 --> 00:25:25,460 in ne bi bilo lepo, če smo lahko za vsak model 391 00:25:25,460 --> 00:25:28,390 ali povezati z vsakim modelom ta pogled 392 00:25:28,390 --> 00:25:34,020 , ki nam omogoča, da mislim, da povežete dve skupaj? 393 00:25:34,020 --> 00:25:38,320 Ker je, preden smo morali uporabiti za zanke, ki bi potekal prek 394 00:25:38,320 --> 00:25:41,130 vsak todo na našem seznamu, nato pa ga natisnete tukaj 395 00:25:41,130 --> 00:25:44,650 bomo lahko v bistvu ga povezati s tem modelom. 396 00:25:44,650 --> 00:25:47,550 To je opravil pregled. 397 00:25:47,550 --> 00:25:50,550 To je povezano z nedokončano smo ugotovili že prej. 398 00:25:50,550 --> 00:25:54,940 Zdaj je vsaka todo predstavljivega ali renderable 399 00:25:54,940 --> 00:25:56,960 s to opravil. 400 00:25:56,960 --> 00:25:59,440 Obvestilo nekaterih področjih. 401 00:25:59,440 --> 00:26:05,880 Kaj misliš, da je to ime oznake je ime oznake: li? 402 00:26:05,880 --> 00:26:09,790 Zapomni si od prej, ko smo želeli, da postane v todo 403 00:26:09,790 --> 00:26:16,700 mi bi morali izrecno seznaniti naše todos s tem li oznako. 404 00:26:16,700 --> 00:26:21,080 Zdaj smo si rekel, da če je to todo se dogaja, da živi 405 00:26:21,080 --> 00:26:25,250 se bo v notranjosti je li oznako. 406 00:26:25,250 --> 00:26:31,440 In zdaj smo tudi povezujejo dogodke z našimi todos. 407 00:26:31,440 --> 00:26:34,320 >> Vsak todo ima tale dogodek. 408 00:26:34,320 --> 00:26:38,480 Če kliknete precej gumb za preklop, da je tisto, kar sem rekel je, 409 00:26:38,480 --> 00:26:43,080 potem v bistvu označite todo kot nasprotje tega, kar je bilo prej 410 00:26:43,080 --> 00:26:45,890 in nato ponovno postane uporaba. 411 00:26:45,890 --> 00:26:47,810 To je nekako podobno kodo poprej. 412 00:26:47,810 --> 00:26:50,730 Se spomniš, ko smo ga označi kot bodisi nasproti ali- 413 00:26:50,730 --> 00:26:52,410 potem pa jo ponovno opravljene. 414 00:26:52,410 --> 00:26:57,750 Opazil zdaj ta dogodek, ki se uporablja, da je nekaj, kar je v HTML. 415 00:26:57,750 --> 00:26:59,640 To je sedel tam. 416 00:26:59,640 --> 00:27:01,410 Gumb je imela na klik. 417 00:27:01,410 --> 00:27:05,310 Ko boste kliknili na gumb, pa nekako počne stvari, 418 00:27:05,310 --> 00:27:07,210 ustanovi, ki se todo nepopolna. 419 00:27:07,210 --> 00:27:11,180 Tukaj smo povezani, da je dogodek, da kliknete gumb za preklop 420 00:27:11,180 --> 00:27:15,830 in vzvratno ali je to vklopite ali izklopite s tem stališčem. 421 00:27:15,830 --> 00:27:20,480 >> To je lep način za vzpostavitev tega dogodka, tako da je zelo tesno vezani 422 00:27:20,480 --> 00:27:26,980 s tem namenom, in tako opazili tole več. 423 00:27:26,980 --> 00:27:31,050 Imam ta način upodabljanja, in mi ne bi bilo treba iti skozi podrobnosti. 424 00:27:31,050 --> 00:27:33,650 To je nekako podoben temu, kar smo imeli prej, 425 00:27:33,650 --> 00:27:36,070 Opazil nisem zanka skozi karkoli. 426 00:27:36,070 --> 00:27:40,700 Jaz ne tiska, da ul oznako, ki je nekako rekel bom, da natisnete vse elemente. 427 00:27:40,700 --> 00:27:46,610 Jaz zagotavljajo funkcionalnost za opravljanje tole opravil elementa. 428 00:27:46,610 --> 00:27:49,400 To je zelo močan koncept, ker v bistvu 429 00:27:49,400 --> 00:27:53,600 naš seznam opravil je sestavljen iz vseh teh todos, in če bomo v bistvu lahko določite 430 00:27:53,600 --> 00:27:56,890 pot, da postane eden od tistih, todos 431 00:27:56,890 --> 00:28:04,230 potem lahko imamo močno hrbtenico per se onemogočijo vse todos 432 00:28:04,230 --> 00:28:07,760 s klicem metode ometa na posameznih todos. 433 00:28:07,760 --> 00:28:14,180 To je koncept, ki je koristno tukaj. 434 00:28:14,180 --> 00:28:18,160 Zdaj je dobro vprašanje vprašati, kako se ta vloga skupaj? 435 00:28:18,160 --> 00:28:21,200 Ker imamo možnost, da postane ena todo, 436 00:28:21,200 --> 00:28:23,860 ampak kako smo dobili idejo o več todos? 437 00:28:23,860 --> 00:28:25,100 >> Oglejmo pogled na to. 438 00:28:25,100 --> 00:28:27,100 To je zadnji del. 439 00:28:27,100 --> 00:28:29,740 Opazili smo, opravila ogled seznama tukaj 440 00:28:29,740 --> 00:28:34,440 in opazil je tudi pogled. 441 00:28:34,440 --> 00:28:36,970 In iti čez nekaj stvari, 442 00:28:36,970 --> 00:28:45,280 ta metoda Inicializacija se bo imenovala, ko smo prvič ustvarili ta seznam opravil. 443 00:28:45,280 --> 00:28:52,630 Kot lahko vidite, to je kot ustvarjanje seznama opravil in ga povežete s tem stališčem. 444 00:28:52,630 --> 00:28:57,860 In potem sem dodal funkcije, tukaj, tako da v bistvu, ko boste dodali element- 445 00:28:57,860 --> 00:29:01,440 To je podobno addItem metodo smo videli pred- 446 00:29:01,440 --> 00:29:07,430 Grem ustvariti nov todo predmet, in opazil sem dejansko kliče 447 00:29:07,430 --> 00:29:13,080 Ta nova metoda todo, tako da je to predvideno s hrbtenico 448 00:29:13,080 --> 00:29:16,010 in sem lahko preide v mojih lastnosti tukaj. 449 00:29:16,010 --> 00:29:23,710 In zdaj bo vsak todo, da sem ustvarili z to dobil to funkcionalnost, ki smo videli prej. 450 00:29:23,710 --> 00:29:28,140 Obvestilo sem počistiti polje z besedilom pred-majhen detajl- 451 00:29:28,140 --> 00:29:32,900 in potem sem dodal to zbirko. 452 00:29:32,900 --> 00:29:37,630 >> To je skoraj se zdi čudno, ker prej smo imeli narediti, da todos.push, 453 00:29:37,630 --> 00:29:43,310 in potem smo naredili, in to lahko zdi bolj zapletena za ta projekt, 454 00:29:43,310 --> 00:29:46,980 in morda boste ugotovili, da je hrbtenica ali celo kotnih ali kateri koli drug okvir 455 00:29:46,980 --> 00:29:50,790 ne ustreza vašim posebnim projektom, vendar mislim, da je pomembno, da razmišljajo o 456 00:29:50,790 --> 00:29:54,100 kaj to pomeni v večjem obsegu za večje projekte, 457 00:29:54,100 --> 00:29:56,610 ker če bi imeli večji projekt, kjer smo se predstavlja 458 00:29:56,610 --> 00:30:00,860 nekateri res zapleteno zbiranje, nekaj globljega kot samo to-do seznam, 459 00:30:00,860 --> 00:30:04,490 recimo seznam ali kaj podobnega, da prijatelji, bi to lahko prišel prav 460 00:30:04,490 --> 00:30:09,620 saj ne moremo organizirati našo kodo v zelo priročen način, 461 00:30:09,620 --> 00:30:12,550 na način, da bi bilo lažje za nekoga drugega 462 00:30:12,550 --> 00:30:16,820 , ki je želel, da poberem projekta za nadgradnjo. 463 00:30:16,820 --> 00:30:21,450 Vidite lahko, da to zagotavlja veliko strukture. 464 00:30:21,450 --> 00:30:26,580 In potem kličem postane na tem addItem. 465 00:30:26,580 --> 00:30:31,050 Opravijo, kot lahko vidite, in ne boste imeli, da bi razumela to popolno sintakso, 466 00:30:31,050 --> 00:30:37,790 ampak v bistvu za vsak model se dogaja, da pokličete posamične metode upodabljanja. 467 00:30:37,790 --> 00:30:41,500 To je nekako, če ta prihaja. 468 00:30:41,500 --> 00:30:44,140 Reciva, določajo, kako naj postanejo posamezne todos, 469 00:30:44,140 --> 00:30:47,310 nato pa jih zlepili v celoti. 470 00:30:47,310 --> 00:30:49,810 Toda to določa način odvzema 471 00:30:49,810 --> 00:30:55,470 ker sem lahko spremenite način sem odloči, da se posamezne todos, 472 00:30:55,470 --> 00:30:57,940 in mi ne bi bilo treba spremeniti katerega od tega kodeksa. 473 00:30:57,940 --> 00:31:00,700 To je nekako kul. 474 00:31:00,700 --> 00:31:08,540 >> Ima kdo kakšna vprašanja o okvirih JavaScript? 475 00:31:08,540 --> 00:31:14,310 [Student neslišno vprašanje] 476 00:31:14,310 --> 00:31:16,050 Oh, seveda, to je veliko vprašanje. 477 00:31:16,050 --> 00:31:19,080 Vprašanje je bilo, kako sem tudi okvire? 478 00:31:19,080 --> 00:31:22,970 Večina okviri JavaScript so v bistvu samo js datoteke 479 00:31:22,970 --> 00:31:25,740 da lahko vključite na vrh kodo. 480 00:31:25,740 --> 00:31:29,830 Obvestilo v glavi del mojega HTML imam vse te skriptne oznake, 481 00:31:29,830 --> 00:31:34,250 in končno script tag je koda, ki smo jih napisali. 482 00:31:34,250 --> 00:31:38,820 In potem so okvirni kode 3 so le tako tags skript. 483 00:31:38,820 --> 00:31:42,110 Jaz sem jih tudi od tega, kar se imenuje CDN, 484 00:31:42,110 --> 00:31:46,200 , ki mi omogoča, da je od nekoga drugega na tej točki 485 00:31:46,200 --> 00:31:57,930 ampak vsak okvir je to, lahko precej našli vsebine 486 00:31:57,930 --> 00:32:03,540 za določeno knjižnico JavaScript voljo na nekaterih CDN ali kaj podobnega, 487 00:32:03,540 --> 00:32:05,570 in potem si lahko tudi ta scenarij oznake. 488 00:32:05,570 --> 00:32:07,600 Ali je to smiselno? 489 00:32:07,600 --> 00:32:09,500 Kul. 490 00:32:09,500 --> 00:32:11,730 >> Tisti, ki so 2 različni pristopi. 491 00:32:11,730 --> 00:32:14,640 Tisti, ki niso samo pristopi k reševanju tega problema. 492 00:32:14,640 --> 00:32:17,080 Obstaja veliko različnih stvari, ki jih 493 00:32:17,080 --> 00:32:19,490 kdo bi lahko naredil, in obstaja veliko okviri tam. 494 00:32:19,490 --> 00:32:23,300 Oglato in hrbtenica ne povedo vsega. 495 00:32:23,300 --> 00:32:26,370 Srečno pri končnih projektov, in najlepša hvala. 496 00:32:31,960 --> 00:32:35,000 [CS50.TV]