1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminář] [Javascript kostry: Proč a jak]

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
>> Ahoj, všichni. Vítejte na rozhraní JavaScript semináře.

5
00:00:10,630 --> 00:00:14,910
Jmenuji se Kevin, a dnes budu mluvit o rámcích JavaScript,

6
00:00:14,910 --> 00:00:20,400
a cílem tohoto semináře je, aby vám na, řekněme, zvládnout konkrétní rámec samo o sobě

7
00:00:20,400 --> 00:00:23,810
ale aby vám širokou úvod do několika rámců

8
00:00:23,810 --> 00:00:27,150
a ukázat, proč bychom chtěli použít rámec.

9
00:00:27,150 --> 00:00:31,060
>> Než to udělám, budu poskytnout trochu pozadí v JavaScriptu,

10
00:00:31,060 --> 00:00:33,750
a pak budeme to tam.

11
00:00:33,750 --> 00:00:36,270
Chystáme se začít tím, že provádění to-do seznamu.

12
00:00:36,270 --> 00:00:39,330
Tady je náš seznam úkolů, pro dnešek.

13
00:00:39,330 --> 00:00:41,990
Je to docela legrační. Musíme zavést seznamu úkolů v JavaScriptu.

14
00:00:41,990 --> 00:00:45,110
To je to, co to bude vypadat, tak to je náš první cíl.

15
00:00:45,110 --> 00:00:47,160
Nebudeme používat rámec k tomu, že.

16
00:00:47,160 --> 00:00:51,930
Jedeme do kódu JavaScriptu a získat seznam úkolů do práce.

17
00:00:51,930 --> 00:00:54,370
Pak budeme zlepšovat design bez použití rámce.

18
00:00:54,370 --> 00:00:57,190
Budeme diskutovat různé věci můžeme dělat jen s JavaScriptu sám

19
00:00:57,190 --> 00:01:00,650
aby se náš seznam úkolů trochu více dobře navržené.

20
00:01:00,650 --> 00:01:02,490
Pak budeme házet v některých jQuery,

21
00:01:02,490 --> 00:01:05,030
a pak se budeme dívat na stejně to-do seznamu,

22
00:01:05,030 --> 00:01:07,170
právě se provádějí v různých rámcích, a budeme diskutovat

23
00:01:07,170 --> 00:01:09,280
 klady a zápory podél cesty.

24
00:01:09,280 --> 00:01:12,040
>> Začněme provádění, které to-do seznamu.

25
00:01:12,040 --> 00:01:14,270
Řekněme, že máme dostat tuto HTML.

26
00:01:14,270 --> 00:01:16,620
Budu dělat to o něco menší.

27
00:01:16,620 --> 00:01:19,300
Jak vidíte, mám malou hlavičku, která říká, že todo

28
00:01:19,300 --> 00:01:21,740
a malá krabička, kde bych mohl zadat popis a todo

29
00:01:21,740 --> 00:01:26,990
a pak nová položka tlačítko, tak se pojďme zkusit zadat nové todo do tohoto seznamu.

30
00:01:26,990 --> 00:01:31,000
Dejte JavaScript rámců seminář,

31
00:01:31,000 --> 00:01:33,090
a já jsem se trefit novou položku.

32
00:01:33,090 --> 00:01:35,730
Mám tuto výstrahu JavaScript, který říká, implementovat mě.

33
00:01:35,730 --> 00:01:37,560
Máme k jeho provedení.

34
00:01:37,560 --> 00:01:41,490
Pojďme se podívat na kód pro toto, jak HTML a JavaScript.

35
00:01:41,490 --> 00:01:43,260
Tady je náš HTML.

36
00:01:43,260 --> 00:01:45,500
Jak můžete vidět tady, tady je náš malý Todos záhlaví.

37
00:01:45,500 --> 00:01:47,620
To bylo odvážné, co nahoře,

38
00:01:47,620 --> 00:01:50,690
a pak máme vstupní pole s zástupný symbol,

39
00:01:50,690 --> 00:01:59,460
a pak je tu určitá vlastnost tohoto tlačítka volání této funkce addTodo.

40
00:01:59,460 --> 00:02:05,460
Chce někdo hádat, co to je při klepnutí znamenat?

41
00:02:05,460 --> 00:02:07,390
[Student slyšet odpověď]

42
00:02:07,390 --> 00:02:09,289
Dobrý je na kliknutí je něco jako události,

43
00:02:09,289 --> 00:02:12,120
jako kliknutí myší je prostě událost, a co děláme

44
00:02:12,120 --> 00:02:16,890
se budeme vázání událost kliknutí na toto tlačítko k provedení této funkce.

45
00:02:16,890 --> 00:02:21,700
AddTodo to je událostí pro kliknutí na toto tlačítko.

46
00:02:21,700 --> 00:02:25,010
>> Jak můžete vidět, když jsem klepněte na tlačítko nové položky

47
00:02:25,010 --> 00:02:29,940
Při klepnutí událost dostane padáka, a tato funkce volána.

48
00:02:29,940 --> 00:02:33,170
Podívejme se na funkce.

49
00:02:33,170 --> 00:02:36,260
Jak vidíte, tady je můj kód v jazyce JavaScript doposud.

50
00:02:36,260 --> 00:02:41,280
Co mám na vrcholu je globální datová struktura pro mé to-do seznamu.

51
00:02:41,280 --> 00:02:44,060
Vypadá to, že pole. Je to jen prázdné pole.

52
00:02:44,060 --> 00:02:47,100
A pak mám addTodo funkci, která jsme viděli dříve,

53
00:02:47,100 --> 00:02:50,740
a jediný řádek kódu je tu upozornění.

54
00:02:50,740 --> 00:02:55,730
Upozorňuje implementovat mě, a pak mám dva úkoly na ruce.

55
00:02:55,730 --> 00:02:58,790
Musím se přidat todo této globální datové struktury,

56
00:02:58,790 --> 00:03:01,860
a pak chci upozornit na to-do seznamu.

57
00:03:01,860 --> 00:03:06,360
Nic moc chuť ještě ne, ale JavaScript můžete být obeznámeni s,

58
00:03:06,360 --> 00:03:12,370
tak jsem jít pomalu a přezkoumat základy JavaScriptu tímto způsobem.

59
00:03:12,370 --> 00:03:15,490
>> Dejme to výstřel.

60
00:03:15,490 --> 00:03:21,130
Řekněme, že uživatel zadá něco do tohoto boxu.

61
00:03:21,130 --> 00:03:23,360
Jen jsem napsal něco tady, textu.

62
00:03:23,360 --> 00:03:27,620
Jak třídit přístup tohoto textu pomocí JavaScriptu?

63
00:03:27,620 --> 00:03:32,500
Nezapomeňte, že JavaScript je jedním z jejích základních rysů je, že nám dává

64
00:03:32,500 --> 00:03:34,670
Tento programový přístup k DOM.

65
00:03:34,670 --> 00:03:40,670
To nám umožňuje přístup k prvkům a jejich vlastnosti tohoto skutečného HTML.

66
00:03:40,670 --> 00:03:43,430
Způsob, jakým to děláme se holé kosti JavaScript

67
00:03:43,430 --> 00:03:51,360
je, že můžete skutečně použít funkci v JavaScriptu s názvem getElementByID.

68
00:03:51,360 --> 00:03:55,140
Chci ukládat text, který je napsaný, že v nějaké proměnné,

69
00:03:55,140 --> 00:03:58,350
tak jsem chtěl říct, novou proměnnou s názvem new_todo,

70
00:03:58,350 --> 00:04:01,980
a budu se dostat, že prvek.

71
00:04:01,980 --> 00:04:06,330
Jedná se o funkci,. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
A teď začínám prvek podle ID, takže musím ID tohoto textového pole,

73
00:04:11,580 --> 00:04:15,860
tak jsem mu poskytla ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Takhle budu mít prvek.

75
00:04:18,399 --> 00:04:23,880
To je můj argument této funkce, určit, které číslo se dostat.

76
00:04:23,880 --> 00:04:28,110
A tak to je prvek v HTML, a to má vlastnosti.

77
00:04:28,110 --> 00:04:30,650
Viděl jsi ty. Jsou to atributy.

78
00:04:30,650 --> 00:04:37,090
Atributem textového prvku, který ukládá vstup uživatele se nazývá hodnota.

79
00:04:37,090 --> 00:04:40,860
Zachránil jsem hodnotu tohoto textového pole se do této proměnné s názvem new_todo.

80
00:04:40,860 --> 00:04:45,040
Teď mám programový přístup k této proměnné, což je docela fajn

81
00:04:45,040 --> 00:04:49,200
protože teď, co můžu udělat je, že jsem jej přidat do svého to-do seznamu.

82
00:04:49,200 --> 00:04:52,870
>> Způsob, jakým se to v JavaScriptu a nebojte se, pokud jste obeznámeni s tím,

83
00:04:52,870 --> 00:04:57,010
ale jen tak přes to je todos.push

84
00:04:57,010 --> 00:05:00,130
protože to je jméno mého globální datové struktury tady,

85
00:05:00,130 --> 00:05:04,450
a budu tlačit new_todo.

86
00:05:04,450 --> 00:05:09,120
To je skvělé, protože teď jsem se přidal k mému JavaScript

87
00:05:09,120 --> 00:05:11,280
zastoupení, které to-do seznamu.

88
00:05:11,280 --> 00:05:15,170
Ale teď, jak se dostanu zpět do HTML?

89
00:05:15,170 --> 00:05:18,560
Musím najít způsob, jak třídit push zpět.

90
00:05:18,560 --> 00:05:21,830
Jinými slovy, nějak jsem se k tomu tohle.

91
00:05:21,830 --> 00:05:26,060
Co budeme dělat, je budeme čerpat seznamu úkolů.

92
00:05:26,060 --> 00:05:29,270
Musím aktualizovat ostatním HTML na této stránce,

93
00:05:29,270 --> 00:05:32,040
a jak můžete vidět, nechal jsem tuhle malou nádobu zde

94
00:05:32,040 --> 00:05:36,840
Tento oddělovač stránky, jejichž ID je todos,

95
00:05:36,840 --> 00:05:40,870
a já jdu dát seznamu úkolů tam.

96
00:05:40,870 --> 00:05:47,240
Nejprve jdu vyčistit to, protože říkají, že byl starý seznam úkolů tam.

97
00:05:47,240 --> 00:05:49,560
Začínám tento prvek podle ID znovu,

98
00:05:49,560 --> 00:05:54,530
a já jsem přístup k vnitřní HTML tohoto prvku,

99
00:05:54,530 --> 00:05:58,010
a budu jasně najevo, že.

100
00:05:58,010 --> 00:06:05,510
Když jsme opustili tento kód jako je, měli bychom vidět prázdnou Nic tam není,

101
00:06:05,510 --> 00:06:10,410
a teď chci začít vykreslování můj nový seznamu úkolů.

102
00:06:10,410 --> 00:06:12,870
Já jsem v podstatě chystá zničit mé seznamu úkolů.

103
00:06:12,870 --> 00:06:18,180
>> Nyní vnitřní HTML uvnitř tohoto Todos div je zcela jasné,

104
00:06:18,180 --> 00:06:20,060
a teď musím začít přidávat mého seznamu.

105
00:06:20,060 --> 00:06:23,890
První věc, kterou chci přidat zpět je neuspořádané seznam tag,

106
00:06:23,890 --> 00:06:33,890
což v podstatě znamená, že se jedná o začátek výčtu.

107
00:06:33,890 --> 00:06:39,770
Nyní pro každý prvek v mém Todos poli chci ji vytisknout v té HTML.

108
00:06:39,770 --> 00:06:43,710
Chci se připojit ji na konci tohoto seznamu.

109
00:06:43,710 --> 00:06:49,040
Stejně jako v C, mohu použít pro smyčce, a já jdu začít na začátku mého seznamu

110
00:06:49,040 --> 00:06:54,140
na prvek 0, a já jdu celou cestu k délce seznamu.

111
00:06:54,140 --> 00:07:01,100
Můžeme skutečně získat délku pole v JavaScriptu pomocí vlastnost length.

112
00:07:01,100 --> 00:07:03,420
V podstatě budu dělat něco velmi podobného uvnitř zde

113
00:07:03,420 --> 00:07:05,600
vytisknout tento prvek.

114
00:07:05,600 --> 00:07:12,970
Mohu znovu otevřít todos div, vnitřní HTML vlastnost, že,

115
00:07:12,970 --> 00:07:17,560
a já jdu přidat na tuto novou položku seznamu, a že se to být obklopen

116
00:07:17,560 --> 00:07:25,390
Tento tag li, a budu spojovat s operátor +

117
00:07:25,390 --> 00:07:28,040
a to je i-tý prvek mého Todos pole,

118
00:07:28,040 --> 00:07:32,380
a pak budu uzavřít tuto značku.

119
00:07:32,380 --> 00:07:36,240
Nyní pro každý prvek přidáme novou položku seznamu.

120
00:07:36,240 --> 00:07:48,700
A pak vše, co opravdu potřebujete udělat, je uzavřít tuto značku.

121
00:07:48,700 --> 00:07:52,820
Potřebuju jen uzavřít, že neuspořádané seznam tag.

122
00:07:52,820 --> 00:07:55,490
>> Myslíte si, získat pocit, pro jak to funguje?

123
00:07:55,490 --> 00:07:57,700
Tím se otevře celý seznam.

124
00:07:57,700 --> 00:08:01,080
To přidává jednotlivé prvky ze seznamu Úkoly na seznamu,

125
00:08:01,080 --> 00:08:05,470
a pak to zavře celý seznam, a tohle je moje addTodo funkce.

126
00:08:05,470 --> 00:08:09,590
Já v podstatě začíná tím, že se todo od textového pole.

127
00:08:09,590 --> 00:08:18,950
Dodávám, že do Todos pole, a pak jsem se znovu vykreslení seznamu úkolů.

128
00:08:18,950 --> 00:08:21,520
Nyní mohu přidávat položky do seznamu.

129
00:08:21,520 --> 00:08:24,620
To je docela vzrušující, protože v několika málo řádků kódu

130
00:08:24,620 --> 00:08:28,240
jsme v podstatě udělali to-do seznamu, kde můžeme přidat položky.

131
00:08:28,240 --> 00:08:30,050
Great.

132
00:08:30,050 --> 00:08:34,480
Je to něco jako základní úvod do JavaScriptu.

133
00:08:34,480 --> 00:08:36,179
Nebojte se příliš mnoho o syntaxi pro tuto chvíli,

134
00:08:36,179 --> 00:08:38,130
ale o tom přemýšlet koncepčně.

135
00:08:38,130 --> 00:08:40,539
Měli jsme nějaké HTML.

136
00:08:40,539 --> 00:08:45,310
Měli jsme textové pole na stránce, která v podstatě umožnil uživatelům vstupu to-do položky a přidejte.

137
00:08:45,310 --> 00:08:49,210
A pak jsme si JavaScript, aby přinesla, že todo od tohoto textového pole.

138
00:08:49,210 --> 00:08:52,830
Jsme, že uložené uvnitř pole JavaScript, který je v podstatě podobný

139
00:08:52,830 --> 00:08:56,010
naše programové zastoupení, které to-do seznamu,

140
00:08:56,010 --> 00:08:59,060
a pak jsme vytiskli.

141
00:08:59,060 --> 00:09:02,690
Toto je todos.js.

142
00:09:02,690 --> 00:09:07,620
>> To je docela v pohodě, ale jak můžeme vzít další?

143
00:09:07,620 --> 00:09:11,350
No, jak vidíte, není to jako úplný seznam úkolů.

144
00:09:11,350 --> 00:09:15,100
Například, nemohu označit některou z těchto položek jsou neúplné,

145
00:09:15,100 --> 00:09:19,920
jako když jsem chtěl reprioritize položky nebo odstranit položky.

146
00:09:19,920 --> 00:09:23,150
To je v pořádku, ale teď můžeme vzít další.

147
00:09:23,150 --> 00:09:29,280
Nebudu mluvit příliš o přidání dalších funkcí,

148
00:09:29,280 --> 00:09:32,800
ale mohli bychom vzít další.

149
00:09:32,800 --> 00:09:35,970
Pojďme se bavit o přidání dalšího funkci to-do seznamu,

150
00:09:35,970 --> 00:09:40,370
který bude schopen zjistit individuální úkoly položky

151
00:09:40,370 --> 00:09:44,780
a mít to škrtnout, takže v podstatě jsem, že jsem to udělal.

152
00:09:44,780 --> 00:09:50,240
Pojďme se podívat na nějaký kód, který může dosáhnout.

153
00:09:50,240 --> 00:09:52,740
Všimněte si, co jsem udělal v horní části je, že jsem přidal

154
00:09:52,740 --> 00:09:57,620
nové globální pole s názvem kompletní.

155
00:09:57,620 --> 00:10:02,890
Já jsem v podstatě pomocí tohoto ukládat, zda položky na seznamu úkolů

156
00:10:02,890 --> 00:10:06,560
jsou úplné, nebo ne.

157
00:10:06,560 --> 00:10:08,470
To je jeden způsob, jak to udělat.

158
00:10:08,470 --> 00:10:13,750
Když se podívám na provádění tohoto nařízení, displej,

159
00:10:13,750 --> 00:10:21,120
v podstatě, pokud zadám todo a já stiskněte toto přepínací tlačítko

160
00:10:21,120 --> 00:10:25,040
to prochází ven, tak každá položka v tomto seznamu je buď kompletní

161
00:10:25,040 --> 00:10:31,050
nebo neúplné stát, a já jsem s použitím jiného pole reprezentovat to.

162
00:10:31,050 --> 00:10:33,730
>> V podstatě pro každý todo Úkoly v tomto poli

163
00:10:33,730 --> 00:10:37,110
tam je položka v kompletní škále, která v podstatě ukazuje,

164
00:10:37,110 --> 00:10:39,060
zda se nejedná o kompletní.

165
00:10:39,060 --> 00:10:41,640
Jsem musel udělat dost minimální změny tohoto kódu,

166
00:10:41,640 --> 00:10:44,470
takže tady je naše addTodo funkce.

167
00:10:44,470 --> 00:10:48,530
Všimněte si, že zde tlačím ho na pole,

168
00:10:48,530 --> 00:10:51,300
a pak jsem tlačí 0 tomuto kompletní pole,

169
00:10:51,300 --> 00:10:57,090
v podstatě souběžně s tím nové podněty todo říci

170
00:10:57,090 --> 00:11:00,430
Přidám tuto položku, a to ve spojení s touto hodnotou,

171
00:11:00,430 --> 00:11:02,810
což znamená, že je to neúplné.

172
00:11:02,810 --> 00:11:04,970
A pak jsem překreslování seznamu úkolů.

173
00:11:04,970 --> 00:11:09,220
Nyní si všimněte, jsem přidal tento drawTodoList funkci.

174
00:11:09,220 --> 00:11:11,760
To vyžaduje spoustu kódu, který jsme měli předtím,

175
00:11:11,760 --> 00:11:15,320
v podstatě vyčistí políčko a pak vypracuje nový seznam úkolů.

176
00:11:15,320 --> 00:11:19,620
Ale zjistíte, že uvnitř to pro smyčky děláme trochu víc teď.

177
00:11:19,620 --> 00:11:25,000
Jsme v podstatě kontrolovat, zda je položka, která odpovídá té todo zde

178
00:11:25,000 --> 00:11:30,220
je kompletní a my chová jinak v těchto 2 případech.

179
00:11:30,220 --> 00:11:32,790
Pokud je to kompletní, my přidáváme tuto značku del,

180
00:11:32,790 --> 00:11:35,360
což je v podstatě způsob, jak se můžete dostat, že přeškrtnutí účinku

181
00:11:35,360 --> 00:11:38,190
škrtnutím to-do seznamu, pokud je to kompletní,

182
00:11:38,190 --> 00:11:42,200
a pokud tomu tak není, nejsme jeho zařazení.

183
00:11:42,200 --> 00:11:45,030
A tak, že druh se stará o to,

184
00:11:45,030 --> 00:11:49,140
>> a to je jeden způsob, jak toho dosáhnout.

185
00:11:49,140 --> 00:11:53,420
A pak se pozná, že uživatel klikne na jednu z těchto

186
00:11:53,420 --> 00:11:56,780
jsme přepínat stav dokončení to.

187
00:11:56,780 --> 00:12:02,170
Když uživatel klikne, budeme zvrátit, zda to bylo dokončeno, nebo ne,

188
00:12:02,170 --> 00:12:04,540
a pak se to překreslí.

189
00:12:04,540 --> 00:12:06,190
Tento druh prací.

190
00:12:06,190 --> 00:12:09,860
Máme tyto funkce, které provádějí své úkoly,

191
00:12:09,860 --> 00:12:11,730
a je to v pořádku.

192
00:12:11,730 --> 00:12:14,110
Je něco, co bychom mohli dělat lépe o tom, i když?

193
00:12:14,110 --> 00:12:18,700
Všimněte si, máme tyto dva globální pole.

194
00:12:18,700 --> 00:12:23,550
Pokud to bylo C, a měli jsme dvě pole, která druh představovaly

195
00:12:23,550 --> 00:12:25,800
data, která byla jakýmsi nějakým způsobem souvisí

196
00:12:25,800 --> 00:12:30,140
Co bychom použít v C kombinovat tyto dvě pole

197
00:12:30,140 --> 00:12:35,420
do něčeho, co zapouzdřuje oba kusy informací?

198
00:12:35,420 --> 00:12:37,600
Chce někdo něco navrhnout?

199
00:12:37,600 --> 00:12:39,450
[Student slyšet odpověď]

200
00:12:39,450 --> 00:12:42,340
>> Přesně tak, takže jsme mohli použít nějaký struct,

201
00:12:42,340 --> 00:12:44,960
a pokud si vzpomenu, řekněme, Pset 3,

202
00:12:44,960 --> 00:12:47,350
zapamatovat jsme měli slovník, a pak jsme museli zda slovo

203
00:12:47,350 --> 00:12:50,230
byl ve slovníku a všechny byly tyto informace dát dohromady

204
00:12:50,230 --> 00:12:52,420
v některých datové struktury.

205
00:12:52,420 --> 00:12:56,390
Jedna věc, kterou mohu udělat s tímto kódem, abychom se vyhnuli těmto dvě různé pole

206
00:12:56,390 --> 00:13:01,760
pro podobné kousky informací je mohu zkombinovat do objektu JavaScript.

207
00:13:01,760 --> 00:13:07,150
Pojďme se na to podívat.

208
00:13:07,150 --> 00:13:11,740
Povšimněte si, že jen jednu řadu na vrcholu nyní

209
00:13:11,740 --> 00:13:17,650
a to, co jsem udělal, je a to je jen JavaScript syntaxe pro druh

210
00:13:17,650 --> 00:13:21,350
vytváří doslovnou verzi objektu,

211
00:13:21,350 --> 00:13:24,670
a všimněte si, tam jsou dvě vlastnosti, takže máme todo,

212
00:13:24,670 --> 00:13:29,660
a to drží pohromadě s tím, jestli je to kompletní nebo nekompletní.

213
00:13:29,660 --> 00:13:31,000
To je velmi podobný kód.

214
00:13:31,000 --> 00:13:35,310
Jsme pomocí jazyka JavaScript.

215
00:13:35,310 --> 00:13:38,600
Tento druh věcí zlepší.

216
00:13:38,600 --> 00:13:43,850
Stejně jako nyní, jsou všechny tyto obory související informace pohromadě.

217
00:13:43,850 --> 00:13:46,410
Když jdeme ji vytisknout, můžeme přistupovat pole.

218
00:13:46,410 --> 00:13:49,060
>> Všimněte si, jak si vedeme Todos [i]. Kompletní

219
00:13:49,060 --> 00:13:52,880
místo označení kompletní pole samostatně,

220
00:13:52,880 --> 00:13:56,560
a všimněte si, když chceme dostat k tomu řetězec Dostáváme se k tomu majetku

221
00:13:56,560 --> 00:13:58,750
tohoto todo, takže tento druh dává smysl, protože

222
00:13:58,750 --> 00:14:01,660
každá položka má tyto vnitřní vlastnosti o tom.

223
00:14:01,660 --> 00:14:05,650
Má todo, a to, zda je to má úplné, nebo ne.

224
00:14:05,650 --> 00:14:11,540
Ne příliš mnoho změn tam funkčně, právě přidali nějaké další kódu.

225
00:14:11,540 --> 00:14:13,430
Jedná se o zlepšení na některých frontách, ne?

226
00:14:13,430 --> 00:14:16,030
Myslím, že jsme počítána designu trochu.

227
00:14:16,030 --> 00:14:20,350
Nyní máme objekty, které v podstatě zapouzdřit tato data.

228
00:14:20,350 --> 00:14:27,130
Je ještě něco, co bychom mohli udělat, zde jde o JavaScript?

229
00:14:27,130 --> 00:14:31,810
Jako upozornění, že tento kód tady

230
00:14:31,810 --> 00:14:34,760
pro získání vnitřní kód HTML div

231
00:14:34,760 --> 00:14:40,520
je trochu, myslím, dlouho.

232
00:14:40,520 --> 00:14:45,100
Je tu document.getElementById ("todos"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Jedna věc, kterou můžeme udělat, aby se tento kód vypadat trochu přátelštější

234
00:14:48,400 --> 00:14:51,450
takže jsem nemusel držet posouvání vlevo a vpravo, dopředu a dozadu,

235
00:14:51,450 --> 00:14:58,480
je, že jsem mohl použít knihovnu jQuery jako.

236
00:14:58,480 --> 00:15:02,710
>> Pojďme se podívat na seminář 2,

237
00:15:02,710 --> 00:15:05,880
a to je stejný kód, ale to je hotové s jQuery.

238
00:15:05,880 --> 00:15:08,790
Ty nemusí být příliš obeznámeni s jQuery,

239
00:15:08,790 --> 00:15:11,510
ale jen vím, že jQuery je jakýsi knihovny JavaScriptu

240
00:15:11,510 --> 00:15:15,910
, který umožňuje snazší dělat věci, jako je přístup k jednotlivým prvkům v DOM.

241
00:15:15,910 --> 00:15:21,280
Zde místo toho řekl document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Mohu použít mnohem čistší způsob jQuery,

243
00:15:25,210 --> 00:15:28,490
který je jen pro použití selektorů.

244
00:15:28,490 --> 00:15:31,300
Jak vidíte, tento kód se dostat trochu čistší,

245
00:15:31,300 --> 00:15:35,770
funkčně velmi podobné, ale to je nápad.

246
00:15:35,770 --> 00:15:37,980
Viděli jsme pár věcí tak daleko,

247
00:15:37,980 --> 00:15:42,010
tak jsme začali jen s surového implementaci JavaScriptu.

248
00:15:42,010 --> 00:15:45,370
Přidali jsme nové funkce a ukázal, jak můžeme vylepšit ji

249
00:15:45,370 --> 00:15:49,090
jen to, co máme v JavaScriptu.

250
00:15:49,090 --> 00:15:53,300
>> Má někdo vidět žádné problémy s tímto designem?

251
00:15:53,300 --> 00:16:01,090
Konkrétně, myslím, nebo nemusí být nutně potíže, ale řekněme, že

252
00:16:01,090 --> 00:16:04,830
jsme nedělá to-do list projektu a zítra jsme se rozhodli

253
00:16:04,830 --> 00:16:10,320
chtěli jsme seznam potravin, nebo nákupní seznam projektu.

254
00:16:10,320 --> 00:16:14,150
Mnoho z těchto funkcí jsou velmi podobné.

255
00:16:14,150 --> 00:16:19,080
Spousta věcí, které se chtějí dostat z JavaScriptu jsou velmi časté,

256
00:16:19,080 --> 00:16:23,820
a to zdůrazňuje potřebu nějakého způsobu

257
00:16:23,820 --> 00:16:25,670
takže to snazší.

258
00:16:25,670 --> 00:16:30,400
Musel jsem vytvořit všechny tyto HTML přístup, všechno přístup DOM,

259
00:16:30,400 --> 00:16:35,530
jako budu reprezentovat To-Do List s tímto modelem.

260
00:16:35,530 --> 00:16:39,130
A všimněte si, že jsem zodpovědný jako tvůrce JavaScriptu

261
00:16:39,130 --> 00:16:42,890
pro udržení HTML a JavaScript, které mám v synchronizaci.

262
00:16:42,890 --> 00:16:48,040
Nic provede automaticky, že JavaScript zastoupení

263
00:16:48,040 --> 00:16:51,590
nebo to-do seznamu dostat vytlačeni do HTML.

264
00:16:51,590 --> 00:16:54,000
Nic vymáhána, že kromě mě.

265
00:16:54,000 --> 00:16:56,880
Musel jsem napsat losování To-Do List funkci.

266
00:16:56,880 --> 00:17:01,650
A to nemusí být, myslím, že je rozumné to udělat,

267
00:17:01,650 --> 00:17:03,670
ale to může být únavné občas.

268
00:17:03,670 --> 00:17:08,190
Máte-li větší projekt, který by mohl být obtížné.

269
00:17:08,190 --> 00:17:10,720
>> Rámců, jeden z účelů rámců

270
00:17:10,720 --> 00:17:14,060
je zjednodušit tento proces a třídit faktoru se

271
00:17:14,060 --> 00:17:16,950
Tyto společné-myslím, že by se dalo říct, návrhové vzory

272
00:17:16,950 --> 00:17:20,700
že lidé obecně mají nějaký způsob, jak reprezentovat data

273
00:17:20,700 --> 00:17:25,599
ať už je to seznam přátel, ať už je to mapové podklady

274
00:17:25,599 --> 00:17:27,280
nebo něco, nebo to-do seznamu.

275
00:17:27,280 --> 00:17:30,660
Někteří lidé mají obecně způsob reprezentace informací,

276
00:17:30,660 --> 00:17:33,650
a obecně je třeba, aby tyto informace nějak v synchronizaci

277
00:17:33,650 --> 00:17:36,520
mezi tím, co uživatel vidí v nějakém pohledu,

278
00:17:36,520 --> 00:17:39,850
mluvení ve smyslu, jako regulátoru modelu názor, že jste viděli v přednášce,

279
00:17:39,850 --> 00:17:45,400
a pak model, který je v tomto případě je toto pole JavaScript.

280
00:17:45,400 --> 00:17:49,020
Rámce nám způsob, jak vyřešit tento problém.

281
00:17:49,020 --> 00:17:53,080
Nyní se pojďme podívat na provádění to-do seznamu

282
00:17:53,080 --> 00:18:02,360
v rámci tzv. angularjs.

283
00:18:02,360 --> 00:18:04,650
To je ono. Všimněte si, že se vejde na snímku.

284
00:18:04,650 --> 00:18:07,330
Nemám posouvat doleva a doprava.

285
00:18:07,330 --> 00:18:10,460
To asi není velký důvod doporučujeme používat rámce,

286
00:18:10,460 --> 00:18:20,120
ale uvědomte si, jsem vůbec přístup jednotlivých prvků HTML tady?

287
00:18:20,120 --> 00:18:22,400
Mám někdy jít do DOM?

288
00:18:22,400 --> 00:18:26,120
Vidíte nějakou document.getElementById nebo něco takového?

289
00:18:26,120 --> 00:18:29,870
Ne, to je pryč.

290
00:18:29,870 --> 00:18:35,590
>> Úhlová nám pomáhá udržet DOM a JavaScript naše zastoupení něčeho

291
00:18:35,590 --> 00:18:40,430
druh v synchronizaci, takže pokud to není v souboru JS,

292
00:18:40,430 --> 00:18:46,790
pokud neexistuje žádný způsob, jak programově všem, že obsah HTML

293
00:18:46,790 --> 00:18:51,800
od JavaScriptu, jak jsme to udržet v synchronizaci?

294
00:18:51,800 --> 00:18:58,160
Pokud to není v. Js soubor, musí to být v HTML, ne?

295
00:18:58,160 --> 00:19:01,910
Toto je nová verze HTML souboru,

296
00:19:01,910 --> 00:19:04,660
a všimněte si, přidali jsme spoustu zde.

297
00:19:04,660 --> 00:19:11,110
Všimněte si, že je tyto nové atributy, které říkají ng tlačítkem myši a NG-repeat.

298
00:19:11,110 --> 00:19:15,650
Úhlová přístup k řešení tohoto problému obtíže při návrhu

299
00:19:15,650 --> 00:19:19,130
je v podstatě dělat HTML mnohem silnější.

300
00:19:19,130 --> 00:19:24,420
Úhlová je způsob, který umožňuje, aby HTML poněkud výraznější.

301
00:19:24,420 --> 00:19:30,520
Například, mohu říci, že budu svázat nebo vázat tohoto textového pole

302
00:19:30,520 --> 00:19:35,080
proměnné v mém úhlové kódu JavaScript.

303
00:19:35,080 --> 00:19:37,030
Tento NG-model, dělá jen to.

304
00:19:37,030 --> 00:19:41,550
To v podstatě říká, že bod uvnitř tohoto textového pole,

305
00:19:41,550 --> 00:19:45,000
jen spojit, že s proměnnou new_todo_description

306
00:19:45,000 --> 00:19:47,870
v kódu JavaScript.

307
00:19:47,870 --> 00:19:51,600
To je velmi silný, protože nemám explicitně jít

308
00:19:51,600 --> 00:19:53,310
DOM tuto informaci získat.

309
00:19:53,310 --> 00:19:56,250
Nemám říct document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Nemám použít jQueries jako přístup DOM.

311
00:19:58,750 --> 00:20:03,280
Mohu spojit s proměnnou, a pak, když jsem se to změnit proměnnou

312
00:20:03,280 --> 00:20:07,400
v JavaScriptu je to stále v synchronizaci s HTML,

313
00:20:07,400 --> 00:20:11,640
takže zjednodušuje proces museli jít tam a zpět mezi dvěma.

314
00:20:11,640 --> 00:20:18,260
Dává to smysl?

315
00:20:18,260 --> 00:20:22,060
>> A zjistíte, že to není HTML přístupový kód.

316
00:20:22,060 --> 00:20:27,760
Jsme právě udělal HTML silnější,

317
00:20:27,760 --> 00:20:32,070
a nyní, například, můžeme dělat věci, jako je tento,

318
00:20:32,070 --> 00:20:38,610
jako když kliknete na to, volat tuto funkci v rámci todos.js,

319
00:20:38,610 --> 00:20:43,410
a mohli bychom to dělat dřív, ale existují i ​​jiné věci, jako je tento ng-model,

320
00:20:43,410 --> 00:20:47,020
a všimněte si tento NG-opakování.

321
00:20:47,020 --> 00:20:51,520
Co si myslíte, že to dělá?

322
00:20:51,520 --> 00:20:54,390
Tady je náš neuspořádané seznam před rokem.

323
00:20:54,390 --> 00:20:56,470
Máme ul značek

324
00:20:56,470 --> 00:21:03,710
ale jsem stále činí tento seznam uvnitř kód JavaScript?

325
00:21:03,710 --> 00:21:09,280
Nebudu nikdy výslovně vykreslování tohoto seznamu.

326
00:21:09,280 --> 00:21:11,580
Jak to funguje?

327
00:21:11,580 --> 00:21:16,410
No, jak Úhlová Dosahuje toho je to se nazývá zesilovač.

328
00:21:16,410 --> 00:21:22,760
V podstatě to říká, že chci vytisknout HTML

329
00:21:22,760 --> 00:21:26,240
pro každou vnitřní todo mého Todos pole.

330
00:21:26,240 --> 00:21:31,850
Uvnitř todos.jr je todos pole tady,

331
00:21:31,850 --> 00:21:37,910
a to vám řekne úhlové tím projít pole a pro každý prvek se zobrazí

332
00:21:37,910 --> 00:21:41,390
Chci vytisknout tento HTML.

333
00:21:41,390 --> 00:21:44,620
To je docela úžasné, protože jsem si jen udělat

334
00:21:44,620 --> 00:21:47,760
aniž byste museli psát pro smyčce,

335
00:21:47,760 --> 00:21:52,250
které pro to-do seznamu, který byl jen 30 řádků kódu

336
00:21:52,250 --> 00:21:54,700
nemusí být nejpřínosnější věcí,

337
00:21:54,700 --> 00:22:01,240
ale pokud máte velký projekt, mohlo by to mít velmi pohodlné.

338
00:22:01,240 --> 00:22:06,100
>> To je jedním z řešení tohoto problému, takže HTML silnější,

339
00:22:06,100 --> 00:22:10,820
a to nám umožňuje udržet JavaScript a HTML v synchronizaci.

340
00:22:10,820 --> 00:22:13,220
Existují i ​​jiné možnosti, jak vyřešit tento problém,

341
00:22:13,220 --> 00:22:15,320
a ne každý rámec dělá.

342
00:22:15,320 --> 00:22:17,720
Ne každý rámec funguje podél těchto linek.

343
00:22:17,720 --> 00:22:19,490
Některé rámce mají různé přístupy,

344
00:22:19,490 --> 00:22:23,310
a možná zjistíte, že vás baví kódování do jednoho rámce nad druhou.

345
00:22:23,310 --> 00:22:26,160
Pojďme se podívat na jeden.

346
00:22:26,160 --> 00:22:30,060
Toto je seznam úkolů kódovány v rámci tzv. páteřní.

347
00:22:30,060 --> 00:22:33,250
Chystám se jít přes to rychle.

348
00:22:33,250 --> 00:22:38,300
Začnu s HTML, než půjdeme tam.

349
00:22:38,300 --> 00:22:40,290
Jedna sekunda.

350
00:22:40,290 --> 00:22:43,950
Počínaje HTML, jak jste si všimli, náš HTML je velmi podobný

351
00:22:43,950 --> 00:22:50,000
na to, co bylo předtím, takže nic moc nového na tomto poli.

352
00:22:50,000 --> 00:22:55,410
Ale naše JS soubor je trochu jiný.

353
00:22:55,410 --> 00:23:00,360
Páteřní druh má tuto myšlenku, nebo postaven na myšlence,

354
00:23:00,360 --> 00:23:04,750
že mnoho z toho, co děláme, řekněme, naše JavaScript projekty

355
00:23:04,750 --> 00:23:09,110
je přemýšlet o tom, modely a sbírky těchto modelů.

356
00:23:09,110 --> 00:23:12,510
To by mohlo být, například fotografie a sbírky fotografií,

357
00:23:12,510 --> 00:23:16,230
nebo myšlenka přítele a sbírek přátel.

358
00:23:16,230 --> 00:23:20,700
A často, když jsme programování aplikací JavaScript

359
00:23:20,700 --> 00:23:25,340
budeme nějak reprezentovat myšlenku mít sbírku přátel

360
00:23:25,340 --> 00:23:29,500
nějak v JavaScriptu a páteř nám ​​dává tuto vrstvu

361
00:23:29,500 --> 00:23:33,040
v horní části stávajících polí Javascript je a objektů

362
00:23:33,040 --> 00:23:38,300
dělat silnější věci s tím snadněji.

363
00:23:38,300 --> 00:23:41,870
>> Tady jsem definovala-do modelu,

364
00:23:41,870 --> 00:23:44,630
a nemusíte příliš starat o syntaxi,

365
00:23:44,630 --> 00:23:48,730
ale zjistíte, že to, co je jedna z vlastností tohoto?

366
00:23:48,730 --> 00:23:53,190
Má výchozí pole.

367
00:23:53,190 --> 00:23:56,640
Páteřní mi umožňuje specifikovat již bat

368
00:23:56,640 --> 00:24:00,190
každý nový úkol, který jsem vytvořit bude mít tato nastavení.

369
00:24:00,190 --> 00:24:04,100
Nyní mohu přizpůsobit, ale musí mít možnost stanovit výchozí

370
00:24:04,100 --> 00:24:07,220
je hezké, a je to docela pohodlné, protože to není něco, co je jako

371
00:24:07,220 --> 00:24:10,430
vlastní JavaScript, a teď nemám explicitně

372
00:24:10,430 --> 00:24:12,430
říkají, že todos jsou neúplné.

373
00:24:12,430 --> 00:24:19,190
Mohu říci hned bat, že todos se bude označen jako nekompletní.

374
00:24:19,190 --> 00:24:21,300
Všimněte si, pak to, co je to?

375
00:24:21,300 --> 00:24:25,520
Teď mám to-do seznamu, a to je kolekce.

376
00:24:25,520 --> 00:24:30,960
Všimněte si, že pole spojené s modelem, který říká, todo.

377
00:24:30,960 --> 00:24:33,390
To je můj způsob, jak říct, že páteř

378
00:24:33,390 --> 00:24:37,350
Budu myslet na kolekci těchto jednotlivých todos.

379
00:24:37,350 --> 00:24:42,140
To je v podstatě struktura modelu pro můj program.

380
00:24:42,140 --> 00:24:44,980
Tady mám tuto myšlenku o sbírky,

381
00:24:44,980 --> 00:24:48,960
av podstatě položky v něm obsažené jsou sbírky bude tato todos,

382
00:24:48,960 --> 00:24:51,910
a to je velmi přirozený v tomto smyslu

383
00:24:51,910 --> 00:24:59,890
protože mám Todos, a mám je ve sbírce.

384
00:24:59,890 --> 00:25:02,940
>> Pojďme se podívat na trochu více o tom.

385
00:25:02,940 --> 00:25:05,900
Zde je páteřní pohled.

386
00:25:05,900 --> 00:25:08,890
Další věc, která říká, že páteř

387
00:25:08,890 --> 00:25:14,660
spousta modelů, které jste přemýšleli o tom, nebo dokonce sbírky

388
00:25:14,660 --> 00:25:19,150
budou muset mít nějaký způsob, jak jsou zobrazeny.

389
00:25:19,150 --> 00:25:21,900
Musíme k tomu, že to-do seznamu,

390
00:25:21,900 --> 00:25:25,460
a nebylo by hezké, kdybychom mohli poskytnout pro každý model

391
00:25:25,460 --> 00:25:28,390
nebo spojovat s každým modelem tento názor

392
00:25:28,390 --> 00:25:34,020
který nám umožňuje Myslím, že připojit dva spolu?

393
00:25:34,020 --> 00:25:38,320
Zatímco dříve jsme museli použít pro smyčku, která by protéká

394
00:25:38,320 --> 00:25:41,130
každý todo v našem seznamu a pak vytisknout zde

395
00:25:41,130 --> 00:25:44,650
lze v podstatě připojit s tímto modelem.

396
00:25:44,650 --> 00:25:47,550
To je to-do view.

397
00:25:47,550 --> 00:25:50,550
Toto je spojeno s todo jsme našli dříve.

398
00:25:50,550 --> 00:25:54,940
Nyní každý todo je zobrazitelný nebo renderable

399
00:25:54,940 --> 00:25:56,960
tímto zobrazení úkolů.

400
00:25:56,960 --> 00:25:59,440
Všimněte si některé z oblastí.

401
00:25:59,440 --> 00:26:05,880
Co si myslíte, že to je tagName, tagName: Li?

402
00:26:05,880 --> 00:26:09,790
Nezapomeňte před rokem, když jsme chtěli vydat todo

403
00:26:09,790 --> 00:26:16,700
budeme muset explicitně spárovat naše Todos s tímto tagem li.

404
00:26:16,700 --> 00:26:21,080
Teď říkáme, že pokud to todo bude žít

405
00:26:21,080 --> 00:26:25,250
bude uvnitř tagu li.

406
00:26:25,250 --> 00:26:31,440
A teď jsme také sdružující události s našimi todos.

407
00:26:31,440 --> 00:26:34,320
>> Každý todo má tuto jednu událost.

408
00:26:34,320 --> 00:26:38,480
Pokud kliknete skoro přepínací tlačítko, to je to, co říkám tam,

409
00:26:38,480 --> 00:26:43,080
pak v podstatě označit todo jako opak toho, co bylo předtím, než

410
00:26:43,080 --> 00:26:45,890
a pak znovu zpracovala danou aplikaci.

411
00:26:45,890 --> 00:26:47,810
To je tak trochu podobný kódu před.

412
00:26:47,810 --> 00:26:50,730
Pamatuješ, jak jsme ji označil buď jako opak or-

413
00:26:50,730 --> 00:26:52,410
a pak jsme se znovu udělala z ní.

414
00:26:52,410 --> 00:26:57,750
Povšimněme si ale nyní tuto událost býval něco, co bylo v HTML.

415
00:26:57,750 --> 00:26:59,640
Je tam seděl.

416
00:26:59,640 --> 00:27:01,410
Tlačítko měl na kliknutí.

417
00:27:01,410 --> 00:27:05,310
Po klepnutí na tlačítko, docela to dělá soub. K

418
00:27:05,310 --> 00:27:07,210
nastavit, že todo být neúplné.

419
00:27:07,210 --> 00:27:11,180
Zde jsme spojeno, že událost kliknutí, že přepínací tlačítko

420
00:27:11,180 --> 00:27:15,830
a couvání ať už je to zapnout nebo vypnout s tímto názorem.

421
00:27:15,830 --> 00:27:20,480
>> To je hezký způsob zřízení tuto událost tak, že je to velmi těsně pojí

422
00:27:20,480 --> 00:27:26,980
Z tohoto pohledu, a tak zjistíte tohle víc.

423
00:27:26,980 --> 00:27:31,050
Mám metodu Render, a my nemusíme procházet detaily.

424
00:27:31,050 --> 00:27:33,650
Je to trochu podobné tomu, co jsme měli předtím,

425
00:27:33,650 --> 00:27:36,070
nevšimnout Nejsem průchozí cokoliv.

426
00:27:36,070 --> 00:27:40,700
Nejsem tisku, že ul. tag, který je jakýmsi říkat budu tisknout všechny prvky.

427
00:27:40,700 --> 00:27:46,610
Já poskytuje funkce pro vykreslování tohle to-do položky.

428
00:27:46,610 --> 00:27:49,400
Jedná se o velmi silný pojem, protože v podstatě

429
00:27:49,400 --> 00:27:53,600
náš seznam úkolů se skládá ze všech těchto todos, a pokud je možné v podstatě určit,

430
00:27:53,600 --> 00:27:56,890
způsob, jak k tomu, aby jeden z těchto todos

431
00:27:56,890 --> 00:28:04,230
pak můžeme mít naši silnou páteř per se činí všechny todos

432
00:28:04,230 --> 00:28:07,760
voláním metody render o jednotlivých todos.

433
00:28:07,760 --> 00:28:14,180
To je pojem, který je zde velmi užitečná.

434
00:28:14,180 --> 00:28:18,160
Nyní je dobrá otázka se zeptat, jak je tato aplikace jsou dohromady?

435
00:28:18,160 --> 00:28:21,200
Protože máme schopnost vyjádřit jednu todo,

436
00:28:21,200 --> 00:28:23,860
ale jak jsme se získat představu o více todos?

437
00:28:23,860 --> 00:28:25,100
>> Pojďme se na to podívat.

438
00:28:25,100 --> 00:28:27,100
Toto je poslední díl.

439
00:28:27,100 --> 00:28:29,740
Všimněte si, že máme to-do seznamu názor zde

440
00:28:29,740 --> 00:28:34,440
a všimněte si, že je to také názor.

441
00:28:34,440 --> 00:28:36,970
A jít na pár věcí,

442
00:28:36,970 --> 00:28:45,280
Metoda initialize to bude volána, když jsme se poprvé vytvořit tento seznam úkolů.

443
00:28:45,280 --> 00:28:52,630
Jak vidíte, je to jako vytváření seznamu úkolů a asociovat to s tímto názorem.

444
00:28:52,630 --> 00:28:57,860
A pak jsem přidal funkci, takže zde v podstatě, když přidáte položku,

445
00:28:57,860 --> 00:29:01,440
je to podobné jako metodu AddItem jsme viděli před-

446
00:29:01,440 --> 00:29:07,430
Chystám se vytvořit nový objekt todo, a všimněte si, jsem vlastně volání

447
00:29:07,430 --> 00:29:13,080
Tato nová metoda todo, takže je zajištěna páteřní,

448
00:29:13,080 --> 00:29:16,010
a mohu předat své vlastnosti zde.

449
00:29:16,010 --> 00:29:23,710
A teď každý todo, že jsem vytvoříte pomocí to bude mít, že funkce, které jsme viděli předtím.

450
00:29:23,710 --> 00:29:28,140
Povšimněte si, že jsem vyklízet textové pole před-malý malý detail-

451
00:29:28,140 --> 00:29:32,900
a pak jsem dodal této kolekce.

452
00:29:32,900 --> 00:29:37,630
>> To skoro vypadá trochu divné, protože předtím jsme prostě museli udělat, že todos.push,

453
00:29:37,630 --> 00:29:43,310
a pak jsme skončili, a to může zdát složitější pro tento konkrétní projekt,

454
00:29:43,310 --> 00:29:46,980
a můžete zjistit, že páteř nebo dokonce úhlové nebo jakýkoli jiný rámec

455
00:29:46,980 --> 00:29:50,790
nebude vyhovovat vašemu konkrétní projekt, ale myslím, že je důležité přemýšlet o tom,

456
00:29:50,790 --> 00:29:54,100
co to znamená ve větším měřítku pro větší projekty,

457
00:29:54,100 --> 00:29:56,610
protože pokud bychom měli větší projekt, kde jsme byli představující

458
00:29:56,610 --> 00:30:00,860
některé opravdu komplexní sběr, něco hlubšího než jen to-do seznamu,

459
00:30:00,860 --> 00:30:04,490
řekněme seznamu přátel nebo něco podobného, ​​že by to mohlo přijít vhod

460
00:30:04,490 --> 00:30:09,620
protože bychom mohli zorganizovat náš kód do opravdu pohodlné,

461
00:30:09,620 --> 00:30:12,550
takovým způsobem, který by bylo jednodušší pro někoho jiného

462
00:30:12,550 --> 00:30:16,820
kdo chtěl vyzvednout projekt stavět.

463
00:30:16,820 --> 00:30:21,450
Můžete vidět, že to poskytuje spoustu struktury.

464
00:30:21,450 --> 00:30:26,580
A pak volám činí na tomto addItem.

465
00:30:26,580 --> 00:30:31,050
Render, jak vidíte, a vy nemusíte chápat tuto plnou syntaxi,

466
00:30:31,050 --> 00:30:37,790
ale v podstatě pro každý model to bude volat jednotlivé metody render.

467
00:30:37,790 --> 00:30:41,500
Je to druh, kde to přichází.

468
00:30:41,500 --> 00:30:44,140
Řekněme, určit, jak k tomu, aby jednotlivé Todos,

469
00:30:44,140 --> 00:30:47,310
a pak pojďme lepidlo je dohromady jako celek.

470
00:30:47,310 --> 00:30:49,810
Ale to poskytuje způsob, abstrakce,

471
00:30:49,810 --> 00:30:55,470
protože jsem mohl změnit způsob, jakým jsem se rozhodl k tomu, aby jednotlivé Todos,

472
00:30:55,470 --> 00:30:57,940
a já bych neměl změnit libovolné tohoto kódu.

473
00:30:57,940 --> 00:31:00,700
To je docela v pohodě.

474
00:31:00,700 --> 00:31:08,540
>> Má někdo nějaké otázky ohledně rámců JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Student neslyšitelný otázka]

476
00:31:14,310 --> 00:31:16,050
Jistě, to je velká otázka.

477
00:31:16,050 --> 00:31:19,080
Otázkou bylo, jak jsem obsahovat rámců?

478
00:31:19,080 --> 00:31:22,970
Většina JavaScript rámce jsou v podstatě jen js

479
00:31:22,970 --> 00:31:25,740
že můžete zahrnout na začátek kódu.

480
00:31:25,740 --> 00:31:29,830
Všimněte si, v hlavové části mého HTML mám všechny tyto tagy skriptu,

481
00:31:29,830 --> 00:31:34,250
a konečný skript tag je kód, který jsme napsal.

482
00:31:34,250 --> 00:31:38,820
A pak 3 rámcové kódy jsou jen také značky skriptu.

483
00:31:38,820 --> 00:31:42,110
Jsem včetně jim, co se nazývá CDN,

484
00:31:42,110 --> 00:31:46,200
, který mi umožňuje dostat od někoho jiného v tomto bodě

485
00:31:46,200 --> 00:31:57,930
ale každý rámec má to, můžete do velké míry najít obsah

486
00:31:57,930 --> 00:32:03,540
pro konkrétní knihovnu JavaScriptu k dispozici u některých CDN nebo něco takového,

487
00:32:03,540 --> 00:32:05,570
a pak můžete zahrnout tyto tagy skriptu.

488
00:32:05,570 --> 00:32:07,600
Dává to smysl?

489
00:32:07,600 --> 00:32:09,500
Skvělý.

490
00:32:09,500 --> 00:32:11,730
>> To jsou dva různé přístupy.

491
00:32:11,730 --> 00:32:14,640
Ti, kteří nejsou jedinými přístupy k řešení tohoto problému.

492
00:32:14,640 --> 00:32:17,080
Existuje mnoho různých věcí, které

493
00:32:17,080 --> 00:32:19,490
někdo může udělat, a tam je mnoho rámců venku.

494
00:32:19,490 --> 00:32:23,300
Úhlové a páteř neříkají celou pravdu.

495
00:32:23,300 --> 00:32:26,370
Hodně štěstí s vaším závěrečných prací, a moc děkuji.

496
00:32:31,960 --> 00:32:35,000
[CS50.TV]