1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminarium] [JavaScript-ramverk: Varför och hur]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Harvard University]

3
00:00:04,000 --> 00:00:06,960
[Detta är CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hej, allihopa. Välkommen till JavaScript Frameworks seminariet.

5
00:00:10,630 --> 00:00:14,910
Mitt namn är Kevin, och idag ska jag tala om JavaScript-ramverk,

6
00:00:14,910 --> 00:00:20,400
och målet med detta seminarium är inte att få dig till, säg, behärska en viss ram i sig

7
00:00:20,400 --> 00:00:23,810
men för att ge dig en bred introduktion till ett par ramar

8
00:00:23,810 --> 00:00:27,150
och visa varför vi någonsin skulle vilja använda en ram.

9
00:00:27,150 --> 00:00:31,060
>> Innan jag gör det ska jag ge en liten bakgrund i JavaScript,

10
00:00:31,060 --> 00:00:33,750
och sedan ska vi ta det därifrån.

11
00:00:33,750 --> 00:00:36,270
Vi kommer att börja med att genomföra en att göra-lista.

12
00:00:36,270 --> 00:00:39,330
Här är vår uppgift lista för idag.

13
00:00:39,330 --> 00:00:41,990
Det är ganska roligt. Vi måste genomföra en att göra-lista i JavaScript.

14
00:00:41,990 --> 00:00:45,110
Detta är vad det kommer att se ut, så det är vårt första mål.

15
00:00:45,110 --> 00:00:47,160
Vi kommer inte att använda en ram för att göra det.

16
00:00:47,160 --> 00:00:51,930
Vi kommer att koda JavaScript och få till-göra-lista att arbeta.

17
00:00:51,930 --> 00:00:54,370
Sen ska vi förbättra designen utan att använda en ram.

18
00:00:54,370 --> 00:00:57,190
Vi kommer att diskutera olika saker vi kan göra med bara JavaScript ensam

19
00:00:57,190 --> 00:01:00,650
att göra vår att göra-lista lite mer väl utformade.

20
00:01:00,650 --> 00:01:02,490
Sen ska vi kasta i vissa jQuery,

21
00:01:02,490 --> 00:01:05,030
och sedan ska vi titta på samma att göra-lista,

22
00:01:05,030 --> 00:01:07,170
bara genomföras i olika ramverk, och vi kommer att diskutera

23
00:01:07,170 --> 00:01:09,280
 för-och nackdelar på vägen.

24
00:01:09,280 --> 00:01:12,040
>> Låt oss börja genomföra som att göra-lista.

25
00:01:12,040 --> 00:01:14,270
Låt oss säga att vi gett denna HTML.

26
00:01:14,270 --> 00:01:16,620
Jag kommer att göra detta till en lite mindre.

27
00:01:16,620 --> 00:01:19,300
Som ni kan se, har jag en liten rubrik som säger Todo

28
00:01:19,300 --> 00:01:21,740
och en liten låda där jag kan skriva in en beskrivning av en todo

29
00:01:21,740 --> 00:01:26,990
och sedan en ny punkt-knapp, så låt oss försöka att skriva in en ny todo till denna lista.

30
00:01:26,990 --> 00:01:31,000
Ge ett JavaScript ramverk seminarium,

31
00:01:31,000 --> 00:01:33,090
och jag är för att träffa nya objekt.

32
00:01:33,090 --> 00:01:35,730
Jag får detta JavaScript varning som säger genomför mig.

33
00:01:35,730 --> 00:01:37,560
Vi har fått för att genomföra det.

34
00:01:37,560 --> 00:01:41,490
Låt oss ta en titt på koden för detta, både HTML och JavaScript.

35
00:01:41,490 --> 00:01:43,260
Här är vår HTML.

36
00:01:43,260 --> 00:01:45,500
Som ni kan se här, är här vår lilla Todos header.

37
00:01:45,500 --> 00:01:47,620
Det var att fet sak i toppen,

38
00:01:47,620 --> 00:01:50,690
och sedan har vi inmatningsrutan med platshållare,

39
00:01:50,690 --> 00:01:59,460
och sedan finns det en viss egenskap hos denna knapp som anropar denna funktion addTodo.

40
00:01:59,460 --> 00:02:05,460
Önskar någon att gissa vad som på klick betyda?

41
00:02:05,460 --> 00:02:07,390
[Student ohörbart svar]

42
00:02:07,390 --> 00:02:09,289
Bra, är det på klick ungefär som en händelse,

43
00:02:09,289 --> 00:02:12,120
som att klicka med musen är bara en händelse, och vad vi gör

44
00:02:12,120 --> 00:02:16,890
är vi knyta händelsen att klicka på denna knapp för att utföra denna funktion.

45
00:02:16,890 --> 00:02:21,700
AddTodo är denna händelsehanterare för att klicka på den knappen.

46
00:02:21,700 --> 00:02:25,010
>> Som ni kan se, när jag klickar på knappen Nytt objekt

47
00:02:25,010 --> 00:02:29,940
den på klickhändelsen får sparken, och denna funktion anropas.

48
00:02:29,940 --> 00:02:33,170
Låt oss titta på funktion.

49
00:02:33,170 --> 00:02:36,260
Som ni kan se, här är min JavaScript-kod hittills.

50
00:02:36,260 --> 00:02:41,280
Vad jag har på toppen är en global datastruktur för min att göra-lista.

51
00:02:41,280 --> 00:02:44,060
Det ser ut som en array. Det är bara en tom array.

52
00:02:44,060 --> 00:02:47,100
Och så har jag addTodo funktion som vi såg tidigare,

53
00:02:47,100 --> 00:02:50,740
och den enda rad kod i det här varningen.

54
00:02:50,740 --> 00:02:55,730
Det varnar genomföra mig, och då har jag 2 uppgifter till hands.

55
00:02:55,730 --> 00:02:58,790
Jag måste lägga till todo till att global datastruktur,

56
00:02:58,790 --> 00:03:01,860
och då vill jag dra ut att göra-lista.

57
00:03:01,860 --> 00:03:06,360
Inget alltför fint ännu, men Javascript du kan vara obekant med,

58
00:03:06,360 --> 00:03:12,370
så jag kommer att gå långsamt och granska grunderna i JavaScript på det sättet.

59
00:03:12,370 --> 00:03:15,490
>> Låt oss ge det ett skott.

60
00:03:15,490 --> 00:03:21,130
Låt oss säga att användaren skriver in något i den här rutan.

61
00:03:21,130 --> 00:03:23,360
Jag skrev bara något i här, text.

62
00:03:23,360 --> 00:03:27,620
Hur sorterar jag tillträde som text via JavaScript?

63
00:03:27,620 --> 00:03:32,500
Kom ihåg att JavaScript är ett av dess grundläggande funktioner som det ger oss

64
00:03:32,500 --> 00:03:34,670
detta programmatisk åtkomst till DOM.

65
00:03:34,670 --> 00:03:40,670
Det ger oss möjlighet att komma åt element och deras egenskaper av denna faktiska HTML.

66
00:03:40,670 --> 00:03:43,430
Det sätt vi gör det med nakna ben JavaScript

67
00:03:43,430 --> 00:03:51,360
är att vi faktiskt kan använda en funktion i JavaScript kallas getElementById.

68
00:03:51,360 --> 00:03:55,140
Jag vill lagra text som har skrivit det i någon variabel,

69
00:03:55,140 --> 00:03:58,350
så jag kommer att säga en ny variabel som heter new_todo,

70
00:03:58,350 --> 00:04:01,980
och jag kommer att få det elementet.

71
00:04:01,980 --> 00:04:06,330
Detta är en funktion. GetElementById.

72
00:04:06,330 --> 00:04:11,580
Och nu får jag ett element med ID, så jag behöver ID för den textruta,

73
00:04:11,580 --> 00:04:15,860
så jag har gett det ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Det är hur jag ska få ett element.

75
00:04:18,399 --> 00:04:23,880
Det är mitt argument till denna funktion, för att ange vilka ID för att få.

76
00:04:23,880 --> 00:04:28,110
Och så det är ett element i HTML, och det har egenskaper.

77
00:04:28,110 --> 00:04:30,650
Du har sett dem. De är attribut.

78
00:04:30,650 --> 00:04:37,090
Attributet av textelement som lagrar användarens input kallas värde.

79
00:04:37,090 --> 00:04:40,860
Jag sparade värdet av denna textruta nu i denna variabel kallas new_todo.

80
00:04:40,860 --> 00:04:45,040
Nu har jag programmatisk åtkomst till denna variabel är vilken typ av kyla

81
00:04:45,040 --> 00:04:49,200
för nu vad jag kan göra är att jag kan lägga det till min att göra-lista.

82
00:04:49,200 --> 00:04:52,870
>> Det sätt vi skulle göra detta i JavaScript-och oroa dig inte om du är obekant med detta,

83
00:04:52,870 --> 00:04:57,010
men bara att gå igenom det är todos.push

84
00:04:57,010 --> 00:05:00,130
eftersom det är namnet på min global datastruktur upp här,

85
00:05:00,130 --> 00:05:04,450
och jag kommer att driva new_todo.

86
00:05:04,450 --> 00:05:09,120
Detta är bra eftersom nu har jag lagt den till min JavaScript

87
00:05:09,120 --> 00:05:11,280
representation av det att göra-lista.

88
00:05:11,280 --> 00:05:15,170
Men nu hur får jag tillbaka den till HTML?

89
00:05:15,170 --> 00:05:18,560
Jag måste hitta ett sätt att sortera om den skjuts upp.

90
00:05:18,560 --> 00:05:21,830
Med andra ord, jag har typ av att dra denna.

91
00:05:21,830 --> 00:05:26,060
Vad vi ska göra är att vi kommer att dra till-göra-lista.

92
00:05:26,060 --> 00:05:29,270
Jag behöver uppdatera andra HTML på denna sida,

93
00:05:29,270 --> 00:05:32,040
och som ni kan se, har jag lämnat denna lilla container här,

94
00:05:32,040 --> 00:05:36,840
denna delare av sidan vars ID är todos,

95
00:05:36,840 --> 00:05:40,870
och jag kommer att sätta till-göra-lista där.

96
00:05:40,870 --> 00:05:47,240
Först ska jag rensa ut det eftersom, säger, det var en gammal att göra-lista där.

97
00:05:47,240 --> 00:05:49,560
Jag får det elementet med ID igen,

98
00:05:49,560 --> 00:05:54,530
och jag åt den inre HTML för det elementet,

99
00:05:54,530 --> 00:05:58,010
och jag kommer att klara det.

100
00:05:58,010 --> 00:06:05,510
Om vi ​​lämnade denna kod som är, skulle vi se en tom ingenting där,

101
00:06:05,510 --> 00:06:10,410
och nu vill jag börja göra min nya att göra-lista.

102
00:06:10,410 --> 00:06:12,870
Jag i princip gå att utplåna min att göra-lista.

103
00:06:12,870 --> 00:06:18,180
>> Nu det inre HTML insidan av att todos div är helt klar,

104
00:06:18,180 --> 00:06:20,060
och nu måste jag börja lägga min lista.

105
00:06:20,060 --> 00:06:23,890
Det första jag vill lägga tillbaka är oordnad lista taggen,

106
00:06:23,890 --> 00:06:33,890
vilket betecknar i grunden att detta är början på en oordnad lista.

107
00:06:33,890 --> 00:06:39,770
Nu för varje element i mina todos array jag vill skriva ut inuti denna HTML.

108
00:06:39,770 --> 00:06:43,710
Jag vill lägga det på botten av denna lista.

109
00:06:43,710 --> 00:06:49,040
Precis som i C, kan jag använda en for-slinga, och jag kommer att starta i början av min lista

110
00:06:49,040 --> 00:06:54,140
vid elementet 0, och jag kommer att gå hela vägen till längden på listan.

111
00:06:54,140 --> 00:07:01,100
Vi kan faktiskt få längden på en array i JavaScript med egenskapen length.

112
00:07:01,100 --> 00:07:03,420
I grunden ska jag göra något liknande inne i här

113
00:07:03,420 --> 00:07:05,600
att skriva ut det elementet.

114
00:07:05,600 --> 00:07:12,970
Jag kan återigen komma åt todos div, den inre HTML egenskap för det,

115
00:07:12,970 --> 00:07:17,560
och jag kommer att lägga till den här nya listobjekt, och det kommer att vara omgiven av

116
00:07:17,560 --> 00:07:25,390
denna li-taggen, och jag kommer att sammanfoga med + operatör,

117
00:07:25,390 --> 00:07:28,040
och det är den i: te elementet i mitt todos array,

118
00:07:28,040 --> 00:07:32,380
och sedan kommer jag att avsluta den taggen.

119
00:07:32,380 --> 00:07:36,240
Nu för varje element vi ska lägga till en ny post i listan.

120
00:07:36,240 --> 00:07:48,700
Och så allt vi egentligen behöver göra är att stänga den taggen.

121
00:07:48,700 --> 00:07:52,820
Jag behöver bara stänga det oordnad lista taggen.

122
00:07:52,820 --> 00:07:55,490
>> Får du en känsla för hur det fungerar?

123
00:07:55,490 --> 00:07:57,700
Detta öppnar hela listan.

124
00:07:57,700 --> 00:08:01,080
Detta lägger enskilda element från todos listan till listan,

125
00:08:01,080 --> 00:08:05,470
och då stänger hela listan, och detta är min addTodo funktion.

126
00:08:05,470 --> 00:08:09,590
Jag börjar i grunden genom att få todo från textrutan.

127
00:08:09,590 --> 00:08:18,950
Jag vill tillägga att den todos arrayen, och då jag åter göra att göra-lista.

128
00:08:18,950 --> 00:08:21,520
Nu kan jag lägga till produkter i min lista.

129
00:08:21,520 --> 00:08:24,620
Det är lite spännande eftersom bara några få rader kod

130
00:08:24,620 --> 00:08:28,240
Vi har i princip gjort en att-göra-lista där vi kan lägga till objekt.

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

132
00:08:30,050 --> 00:08:34,480
Det är lite av en grundläggande introduktion till JavaScript.

133
00:08:34,480 --> 00:08:36,179
Oroa dig inte för mycket om syntaxen för nu,

134
00:08:36,179 --> 00:08:38,130
men tycker om detta konceptuellt.

135
00:08:38,130 --> 00:08:40,539
Vi hade några HTML.

136
00:08:40,539 --> 00:08:45,310
Vi hade en textruta på sidan som i princip tillät användare att mata in en Att göra-uppgift för att lägga till.

137
00:08:45,310 --> 00:08:49,210
Och då vi använde JavaScript för att hämta den todo från denna textruta.

138
00:08:49,210 --> 00:08:52,830
Vi lagras det i en JavaScript array, vilket är i princip som

139
00:08:52,830 --> 00:08:56,010
vår programmatiska representation av det att göra-lista,

140
00:08:56,010 --> 00:08:59,060
och då vi skrivit ut.

141
00:08:59,060 --> 00:09:02,690
Detta är todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Det är ganska häftigt, men hur kan vi gå vidare med detta?

143
00:09:07,620 --> 00:09:11,350
Tja, som ni kan se, är det inte som en komplett att göra-lista.

144
00:09:11,350 --> 00:09:15,100
Till exempel kan jag inte markera någon av dessa poster som ofullständig,

145
00:09:15,100 --> 00:09:19,920
som om jag ville omprioritera objekt eller ta bort objekt.

146
00:09:19,920 --> 00:09:23,150
Det är okej, men vi kan gå vidare med detta.

147
00:09:23,150 --> 00:09:29,280
Jag tänker inte prata för mycket om att lägga till extra funktioner,

148
00:09:29,280 --> 00:09:32,800
men vi kunde ta det längre.

149
00:09:32,800 --> 00:09:35,970
Låt oss tala om att lägga till ytterligare en funktion för att detta att göra-lista,

150
00:09:35,970 --> 00:09:40,370
som kommer att kunna kontrollera en individ att göra-uppgift

151
00:09:40,370 --> 00:09:44,780
och har att det överstruket, så i princip säga att jag har gjort detta.

152
00:09:44,780 --> 00:09:50,240
Låt oss titta på några kod som skulle kunna utföra det.

153
00:09:50,240 --> 00:09:52,740
Lägg märke till vad jag har gjort i toppen är jag har lagt

154
00:09:52,740 --> 00:09:57,620
en ny global array kallas komplett.

155
00:09:57,620 --> 00:10:02,890
Jag princip använder denna för att lagra huruvida punkterna på att-göra-lista

156
00:10:02,890 --> 00:10:06,560
är kompletta eller inte.

157
00:10:06,560 --> 00:10:08,470
Detta är ett sätt att göra detta.

158
00:10:08,470 --> 00:10:13,750
Om jag ser på genomförandet av detta, i displayen,

159
00:10:13,750 --> 00:10:21,120
i grunden om jag anger en todo och jag trycker här växlingsknapp

160
00:10:21,120 --> 00:10:25,040
den passerar ut, så varje punkt på denna lista har antingen ett komplett

161
00:10:25,040 --> 00:10:31,050
eller ofullständiga, och jag använder en annan array för att representera det.

162
00:10:31,050 --> 00:10:33,730
>> I grunden för varje todo i att todos array

163
00:10:33,730 --> 00:10:37,110
det finns ett objekt i komplett utbud som i grunden visar

164
00:10:37,110 --> 00:10:39,060
oavsett om det är komplett eller inte.

165
00:10:39,060 --> 00:10:41,640
Jag har haft att göra ganska minimala ändringar till denna kod,

166
00:10:41,640 --> 00:10:44,470
så här är vårt addTodo funktion.

167
00:10:44,470 --> 00:10:48,530
Lägg märke till att här jag skjuta det på arrayen,

168
00:10:48,530 --> 00:10:51,300
och då jag driver en 0 till att fullständig array,

169
00:10:51,300 --> 00:10:57,090
i princip parallellt med att nya todo push för att säga

170
00:10:57,090 --> 00:11:00,430
Jag lägger denna punkt, och det är kopplat till detta värde,

171
00:11:00,430 --> 00:11:02,810
vilket innebär att det är ofullständig.

172
00:11:02,810 --> 00:11:04,970
Och sen ska jag rita att göra-lista.

173
00:11:04,970 --> 00:11:09,220
Nu märker jag lagt denna drawTodoList funktion.

174
00:11:09,220 --> 00:11:11,760
Det tar en hel del av koden som vi hade tidigare,

175
00:11:11,760 --> 00:11:15,320
princip rensar ut lådan och sedan drar den nya att göra-lista.

176
00:11:15,320 --> 00:11:19,620
Men märker att insidan av detta för slinga vi gör lite mer nu.

177
00:11:19,620 --> 00:11:25,000
Vi är i princip kontrollera om posten som motsvarar den i: te todo här

178
00:11:25,000 --> 00:11:30,220
är klar, och vi beter annorlunda i dessa två fall.

179
00:11:30,220 --> 00:11:32,790
Om det är komplett, vi lägger denna del tagg,

180
00:11:32,790 --> 00:11:35,360
vilket är i stort sett hur du kan få det genomslag effekt

181
00:11:35,360 --> 00:11:38,190
stryks att göra-lista om det är komplett,

182
00:11:38,190 --> 00:11:42,200
och om det inte, vi även inte det.

183
00:11:42,200 --> 00:11:45,030
Och så den typen av tar hand om det,

184
00:11:45,030 --> 00:11:49,140
>> och det är ett sätt att åstadkomma detta.

185
00:11:49,140 --> 00:11:53,420
Och sedan märker när användaren klickar på en av dessa

186
00:11:53,420 --> 00:11:56,780
vi växla färdigställande status det.

187
00:11:56,780 --> 00:12:02,170
När användaren klickar på, kommer vi vända om det har slutförts eller inte,

188
00:12:02,170 --> 00:12:04,540
och sedan ska vi rita om den.

189
00:12:04,540 --> 00:12:06,190
Denna typ av arbeten.

190
00:12:06,190 --> 00:12:09,860
Vi har dessa funktioner som utför sina egna uppgifter,

191
00:12:09,860 --> 00:12:11,730
och det är okej.

192
00:12:11,730 --> 00:12:14,110
Finns det något vi kan göra bättre om det här, men?

193
00:12:14,110 --> 00:12:18,700
Lägg märke till att vi har dessa två globala arrayer.

194
00:12:18,700 --> 00:12:23,550
Om detta var C, och vi hade 2 arrayer den sortens representerade

195
00:12:23,550 --> 00:12:25,800
uppgifter som var typ av anknytning på något sätt

196
00:12:25,800 --> 00:12:30,140
vad skulle vi använder i C för att kombinera dessa två områden

197
00:12:30,140 --> 00:12:35,420
till något som kapslar in båda bitar av information?

198
00:12:35,420 --> 00:12:37,600
Någon vill göra ett förslag?

199
00:12:37,600 --> 00:12:39,450
[Student ohörbart svar]

200
00:12:39,450 --> 00:12:42,340
>> Exakt, så vi kunde använda någon form av struct,

201
00:12:42,340 --> 00:12:44,960
och om du tänker tillbaka till, säg, pset 3,

202
00:12:44,960 --> 00:12:47,350
minns att vi hade ordbok, och då hade vi huruvida ordet

203
00:12:47,350 --> 00:12:50,230
var i ordlistan, och all denna information togs fram

204
00:12:50,230 --> 00:12:52,420
insidan av något datastruktur.

205
00:12:52,420 --> 00:12:56,390
En sak jag kan göra med den här koden för att undvika att dessa två olika matriser

206
00:12:56,390 --> 00:13:01,760
för liknande bitar av information är jag kan kombinera dem till ett JavaScript-objekt.

207
00:13:01,760 --> 00:13:07,150
Låt oss ta en titt på det.

208
00:13:07,150 --> 00:13:11,740
Meddelande Jag har bara en uppsättning på toppen nu

209
00:13:11,740 --> 00:13:17,650
och vad jag har gjort är-och det här är bara JavaScript syntax för slags

210
00:13:17,650 --> 00:13:21,350
skapa en bokstavlig version av ett objekt,

211
00:13:21,350 --> 00:13:24,670
och märker att det finns två fastigheter, så vi har todo,

212
00:13:24,670 --> 00:13:29,660
och den hålls ihop med om det är fullständigt eller ofullständigt.

213
00:13:29,660 --> 00:13:31,000
Detta är mycket liknande kod.

214
00:13:31,000 --> 00:13:35,310
Vi använder JavaScript-objekt.

215
00:13:35,310 --> 00:13:38,600
Denna typ av förbättrar saker.

216
00:13:38,600 --> 00:13:43,850
Precis nu, är alla dessa områden av information hålls samman.

217
00:13:43,850 --> 00:13:46,410
När vi går att skriva ut det, kan vi komma åt fälten.

218
00:13:46,410 --> 00:13:49,060
>> Lägg märke till hur vi gör todos [i]. Komplett

219
00:13:49,060 --> 00:13:52,880
istället för att kontrollera hela arrayen separat,

220
00:13:52,880 --> 00:13:56,560
och märker när vi vill få den att göra-sträng vi får att göra-fastighet

221
00:13:56,560 --> 00:13:58,750
av denna todo, så denna typ av vettigt eftersom

222
00:13:58,750 --> 00:14:01,660
varje objekt har dessa inneboende egenskaper om det.

223
00:14:01,660 --> 00:14:05,650
Den har en todo, och den har om det är fullständig eller ej.

224
00:14:05,650 --> 00:14:11,540
Inte alltför många förändringar det funktionellt, bara lagt lite mer till koden.

225
00:14:11,540 --> 00:14:13,430
Detta är en förbättring på vissa fronter, rätt?

226
00:14:13,430 --> 00:14:16,030
Jag menar, vi räknade ut designen lite.

227
00:14:16,030 --> 00:14:20,350
Nu har vi invänder mot i princip kapsla dessa data.

228
00:14:20,350 --> 00:14:27,130
Finns det något mer vi kan göra härifrån i termer av JavaScript?

229
00:14:27,130 --> 00:14:31,810
Liksom märker att denna kod här

230
00:14:31,810 --> 00:14:34,760
för att få den inre HTML i en div

231
00:14:34,760 --> 00:14:40,520
är en liten, antar jag, länge.

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

233
00:14:45,100 --> 00:14:48,400
En sak vi kan göra för att göra den här koden ser lite vänligare

234
00:14:48,400 --> 00:14:51,450
så jag inte skulle behöva fortsätta rulla åt vänster och höger, fram och tillbaka,

235
00:14:51,450 --> 00:14:58,480
är jag kunde använda ett bibliotek som jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Låt oss kolla in Seminarium 2,

237
00:15:02,710 --> 00:15:05,880
och det är samma kod, men det är gjort med jQuery.

238
00:15:05,880 --> 00:15:08,790
Du kanske inte vara alltför bekant med jQuery,

239
00:15:08,790 --> 00:15:11,510
men vet bara att jQuery är en slags bibliotek för Javascript

240
00:15:11,510 --> 00:15:15,910
som gör det lättare att göra saker som element åt enskilda i DOM.

241
00:15:15,910 --> 00:15:21,280
Här istället för att säga document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Jag kan använda mycket renare sätt jQuery,

243
00:15:25,210 --> 00:15:28,490
vilket är bara att använda väljarna.

244
00:15:28,490 --> 00:15:31,300
Som ni kan se, har den här koden får en lite renare,

245
00:15:31,300 --> 00:15:35,770
mycket liknande funktionellt, men det är tanken.

246
00:15:35,770 --> 00:15:37,980
Vi har sett ett par saker hittills,

247
00:15:37,980 --> 00:15:42,010
så vi började med bara rå JavaScript genomförande.

248
00:15:42,010 --> 00:15:45,370
Vi lagt till nya funktioner och visade hur vi kan förbättra den med

249
00:15:45,370 --> 00:15:49,090
precis vad vi har i JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Ser någon några svårigheter med detta motiv?

251
00:15:53,300 --> 00:16:01,090
Nämligen, gissa-eller jag inte nödvändigtvis svårigheter men låt oss säga

252
00:16:01,090 --> 00:16:04,830
vi inte gör en att göra-lista projektet, och i morgon vi beslutade

253
00:16:04,830 --> 00:16:10,320
Vi ville göra en inköpslista eller en inköpslista projekt.

254
00:16:10,320 --> 00:16:14,150
Många av dessa funktioner är mycket lika.

255
00:16:14,150 --> 00:16:19,080
En hel del av de saker vi vill få ut av JavaScript är mycket vanliga,

256
00:16:19,080 --> 00:16:23,820
och detta understryker behovet av någon slags form av

257
00:16:23,820 --> 00:16:25,670
vilket gör det lättare att göra.

258
00:16:25,670 --> 00:16:30,400
Jag var tvungen att bygga upp allt detta HTML tillträde, allt detta DOM-access,

259
00:16:30,400 --> 00:16:35,530
som jag kommer att representera att göra-lista med denna modell.

260
00:16:35,530 --> 00:16:39,130
Och märker jag ansvarig eftersom JavaScript utvecklare

261
00:16:39,130 --> 00:16:42,890
för att hålla HTML och JavaScript som jag har i synk.

262
00:16:42,890 --> 00:16:48,040
Ingenting blir automatiskt att JavaScript representation

263
00:16:48,040 --> 00:16:51,590
eller att göra-lista få skjuts ut till HTML.

264
00:16:51,590 --> 00:16:54,000
Ingenting verkställas som förutom mig.

265
00:16:54,000 --> 00:16:56,880
Jag var tvungen att skriva dragningen att göra-lista funktionen.

266
00:16:56,880 --> 00:17:01,650
Och det kanske inte, jag menar, det är rimligt att göra det,

267
00:17:01,650 --> 00:17:03,670
men det kan vara jobbigt ibland.

268
00:17:03,670 --> 00:17:08,190
Om du har ett större projekt, kan det vara svårt.

269
00:17:08,190 --> 00:17:10,720
>> Ramar, ett av syftena med ramar

270
00:17:10,720 --> 00:17:14,060
är att förenkla denna process och typ av faktor ut

271
00:17:14,060 --> 00:17:16,950
dessa gemensamma-Jag antar att man kan säga-designmönster

272
00:17:16,950 --> 00:17:20,700
att människor i allmänhet har något slags sätt att representera data

273
00:17:20,700 --> 00:17:25,599
oavsett om det är en vänlista, oavsett om det är kartinformation

274
00:17:25,599 --> 00:17:27,280
eller något eller en att göra-lista.

275
00:17:27,280 --> 00:17:30,660
Vissa människor har i allmänhet ett sätt att återge information,

276
00:17:30,660 --> 00:17:33,650
och de behöver i allmänhet att hålla informationen slags synkroniserad

277
00:17:33,650 --> 00:17:36,520
mellan vad användaren ser i någon form av uppfattning,

278
00:17:36,520 --> 00:17:39,850
tala i termer av likhet med Model View Controller som du såg i föreläsningen,

279
00:17:39,850 --> 00:17:45,400
och sedan den modell, som i detta fall är denna JavaScript array.

280
00:17:45,400 --> 00:17:49,020
Ramverk ger oss ett sätt att lösa det problemet.

281
00:17:49,020 --> 00:17:53,080
Låt oss nu ta en titt på genomförandet av detta att göra-lista

282
00:17:53,080 --> 00:18:02,360
i ett ramverk kallat angularjs.

283
00:18:02,360 --> 00:18:04,650
Detta är det. Märker det passar på en bild.

284
00:18:04,650 --> 00:18:07,330
Jag behöver inte rulla åt vänster och höger.

285
00:18:07,330 --> 00:18:10,460
Det är förmodligen inte en stor anledning att rekommendera att använda en ram,

286
00:18:10,460 --> 00:18:20,120
men märker jag åt någonsin enskilda HTML-element här?

287
00:18:20,120 --> 00:18:22,400
Kommer jag någonsin in i DOM?

288
00:18:22,400 --> 00:18:26,120
Ser du någon document.getElementById eller nåt sånt?

289
00:18:26,120 --> 00:18:29,870
Nej, det är borta.

290
00:18:29,870 --> 00:18:35,590
>> Kantiga hjälper oss att hålla DOM och vår JavaScript representation av något

291
00:18:35,590 --> 00:18:40,430
typ av i synk, så om det inte är i js-filen,

292
00:18:40,430 --> 00:18:46,790
om det finns något sätt att programmatiskt komma till allt som HTML-innehåll

293
00:18:46,790 --> 00:18:51,800
från JavaScript hur ska vi hålla detta i synk?

294
00:18:51,800 --> 00:18:58,160
Om det inte är i den. Js-filen, det har fått vara i HTML, eller hur?

295
00:18:58,160 --> 00:19:01,910
Detta är den nya versionen av HTML-filen,

296
00:19:01,910 --> 00:19:04,660
och märker att vi har lagt till en hel del här.

297
00:19:04,660 --> 00:19:11,110
Lägg märke till att det finns dessa nya attribut som säger ng-klick och ng-repeat.

298
00:19:11,110 --> 00:19:15,650
Kantiga s metod för att lösa detta problem med svårigheter i utformningen

299
00:19:15,650 --> 00:19:19,130
är att i princip göra HTML mycket mer kraftfull.

300
00:19:19,130 --> 00:19:24,420
Kantiga är ett sätt att låta dig göra HTML något mer uttrycksfull.

301
00:19:24,420 --> 00:19:30,520
Till exempel kan jag säga att jag kommer att knyta eller binda denna textruta

302
00:19:30,520 --> 00:19:35,080
till en variabel i min Kantiga JavaScript-kod.

303
00:19:35,080 --> 00:19:37,030
Denna ng-modellen gör just det.

304
00:19:37,030 --> 00:19:41,550
Som i princip säger att posten insidan av denna textruta,

305
00:19:41,550 --> 00:19:45,000
bara förknippar den med den rörliga new_todo_description

306
00:19:45,000 --> 00:19:47,870
inom JavaScript-kod.

307
00:19:47,870 --> 00:19:51,600
Det är mycket kraftfullt eftersom jag inte behöver uttryckligen gå till

308
00:19:51,600 --> 00:19:53,310
DOM för att få denna information.

309
00:19:53,310 --> 00:19:56,250
Jag behöver inte säga document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Jag behöver inte använda jQueries som DOM-access.

311
00:19:58,750 --> 00:20:03,280
Jag kan associera det med en variabel, och sedan när jag ändrar den variabeln

312
00:20:03,280 --> 00:20:07,400
inom JavaScript den hålls i synk med HTML,

313
00:20:07,400 --> 00:20:11,640
så som förenklar processen för att behöva gå fram och tillbaka mellan de två.

314
00:20:11,640 --> 00:20:18,260
Låter det vettigt?

315
00:20:18,260 --> 00:20:22,060
>> Och märker det finns ingen HTML kod.

316
00:20:22,060 --> 00:20:27,760
Vi har precis gjort HTML mer kraftfull,

317
00:20:27,760 --> 00:20:32,070
och nu, till exempel, kan vi göra saker som detta,

318
00:20:32,070 --> 00:20:38,610
gillar när du klickar på den här, kalla denna funktion inom ramen för todos.js,

319
00:20:38,610 --> 00:20:43,410
och vi kunde göra det innan, men det finns andra saker, som den här ng-modellen,

320
00:20:43,410 --> 00:20:47,020
och märker detta ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Vad tror du det betyder?

322
00:20:51,520 --> 00:20:54,390
Här är vår oordnad lista från tidigare.

323
00:20:54,390 --> 00:20:56,470
Vi har de ul-taggar,

324
00:20:56,470 --> 00:21:03,710
men jag gör någonsin att lista insidan av JavaScript-kod?

325
00:21:03,710 --> 00:21:09,280
Jag aldrig uttryckligen gör den listan.

326
00:21:09,280 --> 00:21:11,580
Hur fungerar det här?

327
00:21:11,580 --> 00:21:16,410
Tja, åstadkommer vägen Kantiga detta är detta kallas en repeater.

328
00:21:16,410 --> 00:21:22,760
I grund och botten detta säger att jag vill skriva ut den här HTML

329
00:21:22,760 --> 00:21:26,240
för varje todo insidan av min todos array.

330
00:21:26,240 --> 00:21:31,850
Inuti todos.jr finns en todos array just här,

331
00:21:31,850 --> 00:21:37,910
och detta kommer att berätta Kantiga gå igenom den arrayen, och för varje element du ser

332
00:21:37,910 --> 00:21:41,390
Jag vill att du ska skriva ut HTML.

333
00:21:41,390 --> 00:21:44,620
Detta är typ av awesome eftersom jag bara kan göra detta

334
00:21:44,620 --> 00:21:47,760
utan att behöva skriva en for-loop,

335
00:21:47,760 --> 00:21:52,250
som för en att göra-lista som var endast 30 rader kod

336
00:21:52,250 --> 00:21:54,700
kanske inte den mest fördelaktiga sak,

337
00:21:54,700 --> 00:22:01,240
men om du har ett stort projekt, kan detta få mycket bekvämt.

338
00:22:01,240 --> 00:22:06,100
>> Detta är en lösning på detta problem, vilket gör HTML mer kraftfull,

339
00:22:06,100 --> 00:22:10,820
och som tillåter oss att hålla JavaScript och HTML i synk.

340
00:22:10,820 --> 00:22:13,220
Det finns andra möjliga sätt att lösa detta problem,

341
00:22:13,220 --> 00:22:15,320
och inte varje ram gör detta.

342
00:22:15,320 --> 00:22:17,720
Inte varje ram fungerar längs dessa linjer.

343
00:22:17,720 --> 00:22:19,490
Vissa ramar har olika infallsvinklar,

344
00:22:19,490 --> 00:22:23,310
och du kanske upptäcker att du gillar att kodning i en ram över den andra.

345
00:22:23,310 --> 00:22:26,160
Låt oss titta på en mer.

346
00:22:26,160 --> 00:22:30,060
Detta är att göra-lista kodad i ett ramverk kallat Backbone.

347
00:22:30,060 --> 00:22:33,250
Jag ska gå igenom det här snabbt.

348
00:22:33,250 --> 00:22:38,300
Jag ska börja med HTML innan vi åker dit.

349
00:22:38,300 --> 00:22:40,290
En sekund.

350
00:22:40,290 --> 00:22:43,950
Från och med den HTML, som du märker, är vår HTML mycket lik

351
00:22:43,950 --> 00:22:50,000
till vad det var innan, så inte alltför mycket nytt på den fronten.

352
00:22:50,000 --> 00:22:55,410
Men vår js-filen är lite annorlunda.

353
00:22:55,410 --> 00:23:00,360
Backbone slags har denna idé, eller bygger på idén

354
00:23:00,360 --> 00:23:04,750
att mycket av det vi gör med, säg, vår JavaScript-projekt

355
00:23:04,750 --> 00:23:09,110
är att tänka på modeller och samlingar av dessa modeller.

356
00:23:09,110 --> 00:23:12,510
Detta kan vara, till exempel, ett foto och samlingar av bilder,

357
00:23:12,510 --> 00:23:16,230
eller idén om en vän och samlingar av vänner.

358
00:23:16,230 --> 00:23:20,700
Och ofta när vi programmerar JavaScript-program

359
00:23:20,700 --> 00:23:25,340
Vi reder av representerar tanken på att ha en samling av vänner

360
00:23:25,340 --> 00:23:29,500
något sätt i JavaScript, ger och Backbone oss detta skikt

361
00:23:29,500 --> 00:23:33,040
på toppen av JavaScript befintliga arrayer och objekt

362
00:23:33,040 --> 00:23:38,300
att göra mer kraftfulla saker med det lättare.

363
00:23:38,300 --> 00:23:41,870
>> Här har jag definierat en att göra-modellen,

364
00:23:41,870 --> 00:23:44,630
och du behöver inte oroa sig alltför mycket om syntaxen,

365
00:23:44,630 --> 00:23:48,730
men märker att det är en av de egenskaper detta?

366
00:23:48,730 --> 00:23:53,190
Den har en standard fält.

367
00:23:53,190 --> 00:23:56,640
Backbone tillåter mig att specificera redan utanför bat

368
00:23:56,640 --> 00:24:00,190
någon ny att göra att jag skapar kommer att ha dessa standardvärden.

369
00:24:00,190 --> 00:24:04,100
Nu jag kan skräddarsy detta, men att kunna specificera de förvalda

370
00:24:04,100 --> 00:24:07,220
är trevligt, och det är ganska bekvämt eftersom detta inte är något som är som

371
00:24:07,220 --> 00:24:10,430
inneboende i JavaScript, och nu jag behöver inte explicit

372
00:24:10,430 --> 00:24:12,430
säga att de todos är ofullständiga.

373
00:24:12,430 --> 00:24:19,190
Jag kan säga just off the bat att todos kommer att markeras som ofullständig.

374
00:24:19,190 --> 00:24:21,300
Lägg märke till vad är då detta?

375
00:24:21,300 --> 00:24:25,520
Nu har jag en att göra-lista, och det är en samling.

376
00:24:25,520 --> 00:24:30,960
Lägg märke till det område i samband med det, säger modellen todo.

377
00:24:30,960 --> 00:24:33,390
Detta är mitt sätt att tala om Backbone som

378
00:24:33,390 --> 00:24:37,350
Jag kommer att tänka på en samling av dessa individuella todos.

379
00:24:37,350 --> 00:24:42,140
Detta är i grunden den modell för mitt program.

380
00:24:42,140 --> 00:24:44,980
Här har jag den här idén om en samling,

381
00:24:44,980 --> 00:24:48,960
och i princip de artiklar som ingår i denna samling är alla kommer att vara dessa todos,

382
00:24:48,960 --> 00:24:51,910
och det är mycket naturligt i denna mening

383
00:24:51,910 --> 00:24:59,890
eftersom jag har Todos, och jag har dem i en samling.

384
00:24:59,890 --> 00:25:02,940
>> Låt oss titta på lite mer om detta.

385
00:25:02,940 --> 00:25:05,900
Här är en Backbone vy.

386
00:25:05,900 --> 00:25:08,890
Den andra saken som Backbone säger är att

387
00:25:08,890 --> 00:25:14,660
en hel del av de modeller som du funderar på eller ens samlingar

388
00:25:14,660 --> 00:25:19,150
kommer att behöva ha något sätt att visas.

389
00:25:19,150 --> 00:25:21,900
Vi måste göra det för att-göra-lista,

390
00:25:21,900 --> 00:25:25,460
och skulle det inte vara trevligt om vi kunde erbjuda för varje modell

391
00:25:25,460 --> 00:25:28,390
eller umgås med varje modell denna uppfattning

392
00:25:28,390 --> 00:25:34,020
som tillåter oss att antar jag ansluta två tillsammans?

393
00:25:34,020 --> 00:25:38,320
Medan innan vi var tvungna att använda en for-loop som skulle gå igenom

394
00:25:38,320 --> 00:25:41,130
varje todo i vår lista och sedan skriva ut den här

395
00:25:41,130 --> 00:25:44,650
Vi kan i princip ansluta den med denna modell.

396
00:25:44,650 --> 00:25:47,550
Detta är en att göra-vy.

397
00:25:47,550 --> 00:25:50,550
Detta är förenat med att göra-vi funnit tidigare.

398
00:25:50,550 --> 00:25:54,940
Nu varje todo är visningsbart eller renderable

399
00:25:54,940 --> 00:25:56,960
med detta att göra-vy.

400
00:25:56,960 --> 00:25:59,440
Märka något av fälten.

401
00:25:59,440 --> 00:26:05,880
Vad tror du att detta tagnamn är, tagname: li?

402
00:26:05,880 --> 00:26:09,790
Minns från tidigare när vi ville göra en todo

403
00:26:09,790 --> 00:26:16,700
vi skulle behöva explicit ihop våra todos med denna li-taggen.

404
00:26:16,700 --> 00:26:21,080
Nu vi säger att när denna todo kommer att leva

405
00:26:21,080 --> 00:26:25,250
kommer att vara inne i en li-taggen.

406
00:26:25,250 --> 00:26:31,440
Och nu är vi också associera händelser med våra todos.

407
00:26:31,440 --> 00:26:34,320
>> Varje todo har denna händelse.

408
00:26:34,320 --> 00:26:38,480
Om du klickar på ganska mycket hävarmsknappen, det är vad jag säger det,

409
00:26:38,480 --> 00:26:43,080
då i princip markera todo som motsatsen till vad den var innan

410
00:26:43,080 --> 00:26:45,890
och sedan åter medför att ansökan.

411
00:26:45,890 --> 00:26:47,810
Detta är typ av liknar koden innan.

412
00:26:47,810 --> 00:26:50,730
Kommer du ihåg när vi märkt det som antingen motsatta eller-

413
00:26:50,730 --> 00:26:52,410
och då vi åter gjort det.

414
00:26:52,410 --> 00:26:57,750
Men märker nu denna händelse brukade vara något som var i HTML.

415
00:26:57,750 --> 00:26:59,640
Den satt där.

416
00:26:59,640 --> 00:27:01,410
Knappen hade en på klick.

417
00:27:01,410 --> 00:27:05,310
När du klickar på knappen, det slags gör grejer till

418
00:27:05,310 --> 00:27:07,210
inrättas som todo vara ofullständig.

419
00:27:07,210 --> 00:27:11,180
Här har vi associerat denna händelse för att klicka som växlingsknapp

420
00:27:11,180 --> 00:27:15,830
och vända om det är på eller av med denna uppfattning.

421
00:27:15,830 --> 00:27:20,480
>> Detta är ett trevligt sätt att sätta upp denna händelse så att det är mycket hårt bundna

422
00:27:20,480 --> 00:27:26,980
till denna uppfattning, och så märker detta mer.

423
00:27:26,980 --> 00:27:31,050
Jag har här framför metod, och vi behöver inte gå igenom detaljerna.

424
00:27:31,050 --> 00:27:33,650
Det är lite liknar det vi hade tidigare,

425
00:27:33,650 --> 00:27:36,070
men märker jag inte loopa igenom någonting.

426
00:27:36,070 --> 00:27:40,700
Jag tänker inte skriva att ul tagg som är typ att säga jag ska skriva ut alla element.

427
00:27:40,700 --> 00:27:46,610
Jag ger funktionalitet för att göra detta en Att göra-uppgift.

428
00:27:46,610 --> 00:27:49,400
Detta är ett mycket kraftfullt koncept eftersom i princip

429
00:27:49,400 --> 00:27:53,600
vår att göra-lista består av alla dessa todos, och om vi kan i princip ange

430
00:27:53,600 --> 00:27:56,890
vägen för att göra en av dessa todos

431
00:27:56,890 --> 00:28:04,230
då kan vi ha våra kraftfulla backbone i sig göra alla de todos

432
00:28:04,230 --> 00:28:07,760
genom att anropa render metoden på enskilda todos.

433
00:28:07,760 --> 00:28:14,180
Detta är ett koncept som är användbart här.

434
00:28:14,180 --> 00:28:18,160
Nu en bra fråga att ställa är hur detta program sätts ihop?

435
00:28:18,160 --> 00:28:21,200
Eftersom vi har möjlighet att göra en todo,

436
00:28:21,200 --> 00:28:23,860
men hur får vi idén om flera todos?

437
00:28:23,860 --> 00:28:25,100
>> Låt oss ta en titt på det.

438
00:28:25,100 --> 00:28:27,100
Detta är den sista delen.

439
00:28:27,100 --> 00:28:29,740
Kallelse har vi en att göra-lista vy här,

440
00:28:29,740 --> 00:28:34,440
och märker att det är också en tanke.

441
00:28:34,440 --> 00:28:36,970
Och att gå över ett par saker,

442
00:28:36,970 --> 00:28:45,280
denna initialize metod kommer att kallas när vi först skapa denna att göra-lista.

443
00:28:45,280 --> 00:28:52,630
Som ni ser, det är som att skapa att-göra-listan och associera den med den här vyn.

444
00:28:52,630 --> 00:28:57,860
Och sedan jag lagt funktionerna här så i princip när du lägger till en post-

445
00:28:57,860 --> 00:29:01,440
detta liknar addItem metod som vi såg före-

446
00:29:01,440 --> 00:29:07,430
Jag ska skapa en ny todo objekt, och märker jag faktiskt ringer

447
00:29:07,430 --> 00:29:13,080
denna nya todo metod, så detta tillhandahålls av ryggraden,

448
00:29:13,080 --> 00:29:16,010
och jag kan passera i mina fastigheter här.

449
00:29:16,010 --> 00:29:23,710
Och nu varje todo som jag skapar med detta kommer att få den funktionalitet som vi såg tidigare.

450
00:29:23,710 --> 00:29:28,140
Märker jag rensa ut textrutan innan-en liten liten detalj-

451
00:29:28,140 --> 00:29:32,900
och sen ska jag lägga den här samlingen.

452
00:29:32,900 --> 00:29:37,630
>> Det verkar nästan konstigt eftersom innan vi just haft att göra det todos.push,

453
00:29:37,630 --> 00:29:43,310
och sedan vi hade gjort, och detta kan verka mer komplicerat för detta specifika projekt,

454
00:29:43,310 --> 00:29:46,980
och du kanske upptäcker att Backbone eller ens Kantiga eller någon annan ram

455
00:29:46,980 --> 00:29:50,790
passar inte just ditt projekt, men jag tror det är viktigt att tänka på

456
00:29:50,790 --> 00:29:54,100
vad detta innebär på en större skala för större projekt,

457
00:29:54,100 --> 00:29:56,610
eftersom om vi hade ett större projekt där vi representerar

458
00:29:56,610 --> 00:30:00,860
några riktigt komplex samling, något djupare än bara en att-göra-lista,

459
00:30:00,860 --> 00:30:04,490
låt oss säga en vänner lista eller något liknande, kan detta komma till hands

460
00:30:04,490 --> 00:30:09,620
eftersom vi skulle kunna organisera vår kod i ett riktigt bekvämt sätt,

461
00:30:09,620 --> 00:30:12,550
på ett sätt som skulle göra det lättare för någon annan

462
00:30:12,550 --> 00:30:16,820
som ville plocka upp ett projekt för att bygga vidare på.

463
00:30:16,820 --> 00:30:21,450
Du kan se att detta ger en hel del struktur.

464
00:30:21,450 --> 00:30:26,580
Och då jag ringer framföra på denna addItem.

465
00:30:26,580 --> 00:30:31,050
Render, som ni kan se, och du behöver inte förstå detta fullt syntax,

466
00:30:31,050 --> 00:30:37,790
men i grunden för varje modell det kommer att kalla den enskilde render metoden.

467
00:30:37,790 --> 00:30:41,500
Det blir liksom var detta kommer ifrån.

468
00:30:41,500 --> 00:30:44,140
Låt oss bara ange hur att göra de individuella todos,

469
00:30:44,140 --> 00:30:47,310
och sedan ska vi limma ihop dem som en helhet.

470
00:30:47,310 --> 00:30:49,810
Men detta är ett sätt av abstraktion,

471
00:30:49,810 --> 00:30:55,470
eftersom jag kunde ändra hur jag väljer att göra de individuella todos,

472
00:30:55,470 --> 00:30:57,940
och jag skulle inte behöva ändra någon av denna kod.

473
00:30:57,940 --> 00:31:00,700
Det är ganska coolt.

474
00:31:00,700 --> 00:31:08,540
>> Har någon några frågor om JavaScript-ramverk?

475
00:31:08,540 --> 00:31:14,310
[Student ohörbart fråga]

476
00:31:14,310 --> 00:31:16,050
Visst, det är en bra fråga.

477
00:31:16,050 --> 00:31:19,080
Frågan var hur jag inkluderar de ramar?

478
00:31:19,080 --> 00:31:22,970
De flesta JavaScript-ramverk finns i princip bara JS-filer

479
00:31:22,970 --> 00:31:25,740
som du kan inkludera på toppen av din kod.

480
00:31:25,740 --> 00:31:29,830
Tillkännagivande i huvudet delen av min HTML jag har alla dessa skripttaggarna,

481
00:31:29,830 --> 00:31:34,250
och den slutliga skripttagg är den kod som vi har skrivit.

482
00:31:34,250 --> 00:31:38,820
Och sedan de 3 ramarna koderna är bara också script-taggar.

483
00:31:38,820 --> 00:31:42,110
Jag inklusive dem från vad som kallas ett CDN,

484
00:31:42,110 --> 00:31:46,200
vilket gör att jag kan få det från någon annan på denna punkt

485
00:31:46,200 --> 00:31:57,930
men varje ram har här-du kan ganska mycket hitta innehållet

486
00:31:57,930 --> 00:32:03,540
för en viss JavaScript-bibliotek som finns på vissa CDN eller något liknande,

487
00:32:03,540 --> 00:32:05,570
och sedan kan du inkludera dessa skripttaggarna.

488
00:32:05,570 --> 00:32:07,600
Låter det vettigt?

489
00:32:07,600 --> 00:32:09,500
Cool.

490
00:32:09,500 --> 00:32:11,730
>> De är två olika metoder.

491
00:32:11,730 --> 00:32:14,640
De är inte de enda strategier för att lösa detta problem.

492
00:32:14,640 --> 00:32:17,080
Det finns många olika saker som

493
00:32:17,080 --> 00:32:19,490
någon kan göra, och det finns många ramar där ute.

494
00:32:19,490 --> 00:32:23,300
Kantiga och Backbone inte berätta hela historien.

495
00:32:23,300 --> 00:32:26,370
Lycka till med din slutliga projekt, och tack så mycket.

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