1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [Javascript Frameworks: Hvorfor og hvordan]

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

3
00:00:04,000 --> 00:00:06,960
[Dette er CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hei, alle sammen. Velkommen til JavaScript Frameworks seminar.

5
00:00:10,630 --> 00:00:14,910
Mitt navn er Kevin, og i dag skal jeg snakke om JavaScript-rammeverk,

6
00:00:14,910 --> 00:00:20,400
og målet med dette seminaret er ikke å få deg til, si, mestre en bestemt ramme per se

7
00:00:20,400 --> 00:00:23,810
men å gi deg en bred innføring i et par rammer

8
00:00:23,810 --> 00:00:27,150
og vise hvorfor vi ville ønske å bruke et rammeverk.

9
00:00:27,150 --> 00:00:31,060
>> Før jeg gjør det, vil jeg gi litt bakgrunn i JavaScript,

10
00:00:31,060 --> 00:00:33,750
og så får vi ta det derfra.

11
00:00:33,750 --> 00:00:36,270
Vi kommer til å starte med å gjennomføre en to-do liste.

12
00:00:36,270 --> 00:00:39,330
Her er vår oppgave liste for i dag.

13
00:00:39,330 --> 00:00:41,990
Det er litt morsomt. Vi må gjennomføre en to-do liste i JavaScript.

14
00:00:41,990 --> 00:00:45,110
Dette er hva det kommer til å se ut, så det er vår første målet.

15
00:00:45,110 --> 00:00:47,160
Vi kommer ikke til å bruke et rammeverk for å gjøre det.

16
00:00:47,160 --> 00:00:51,930
Vi kommer til å kode JavaScript og få to-do liste for å fungere.

17
00:00:51,930 --> 00:00:54,370
Så vi kommer til å forbedre design uten å bruke et rammeverk.

18
00:00:54,370 --> 00:00:57,190
Vi kommer til å diskutere ulike ting vi kan gjøre med akkurat JavaScript alene

19
00:00:57,190 --> 00:01:00,650
å gjøre vår liste over gjøremål litt mer godt utformet.

20
00:01:00,650 --> 00:01:02,490
Så vi kommer til å kaste i noen jQuery,

21
00:01:02,490 --> 00:01:05,030
og da skal vi se på det samme to-do liste,

22
00:01:05,030 --> 00:01:07,170
bare implementert i ulike rammer, og vi vil diskutere

23
00:01:07,170 --> 00:01:09,280
 fordeler og ulemper underveis.

24
00:01:09,280 --> 00:01:12,040
>> La oss begynne å implementere at to-do liste.

25
00:01:12,040 --> 00:01:14,270
La oss si at vi fikk denne HTML.

26
00:01:14,270 --> 00:01:16,620
Jeg kommer til å gjøre dette til en litt mindre.

27
00:01:16,620 --> 00:01:19,300
Som du ser, har jeg en liten header som sier Todo

28
00:01:19,300 --> 00:01:21,740
og en liten boks hvor jeg kan skrive inn en beskrivelse av en todo

29
00:01:21,740 --> 00:01:26,990
og deretter et nytt element knapp, så la oss prøve å angi en ny todo til denne listen.

30
00:01:26,990 --> 00:01:31,000
Gi en JavaScript rammeverk seminar,

31
00:01:31,000 --> 00:01:33,090
og jeg er å treffe nytt element.

32
00:01:33,090 --> 00:01:35,730
Jeg får denne JavaScript advarsel som sier implementere meg.

33
00:01:35,730 --> 00:01:37,560
Vi er nødt til å gjennomføre det.

34
00:01:37,560 --> 00:01:41,490
La oss sjekke ut koden for dette, både HTML og JavaScript.

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

36
00:01:43,260 --> 00:01:45,500
Som du kan se her, her er vår lille Todos spissen.

37
00:01:45,500 --> 00:01:47,620
Det var at fet ting på toppen,

38
00:01:47,620 --> 00:01:50,690
og så har vi boksen med plassholder,

39
00:01:50,690 --> 00:01:59,460
og så er det en viss egenskap av denne knappen som kaller denne funksjonen addTodo.

40
00:01:59,460 --> 00:02:05,460
Vil noen å gjette hva som på klikk er betegner?

41
00:02:05,460 --> 00:02:07,390
[Student hørbar respons]

42
00:02:07,390 --> 00:02:09,289
Bra, er det på klikk liksom som en hendelse,

43
00:02:09,289 --> 00:02:12,120
som å klikke på musen er bare en hendelse, og hva vi gjør

44
00:02:12,120 --> 00:02:16,890
er vi knytte Ved å klikke på denne knappen for å utføre denne funksjonen.

45
00:02:16,890 --> 00:02:21,700
AddTodo er denne hendelsen behandleren for å klikke på den knappen.

46
00:02:21,700 --> 00:02:25,010
>> Som du ser, når jeg klikker det nye elementet knappen

47
00:02:25,010 --> 00:02:29,940
den på klikkhendelsen får sparken, og denne funksjonen blir kalt.

48
00:02:29,940 --> 00:02:33,170
La oss se på funksjonen.

49
00:02:33,170 --> 00:02:36,260
Som du kan se, her er min JavaScript-kode så langt.

50
00:02:36,260 --> 00:02:41,280
Hva jeg har på toppen er en global datastruktur for min to-do liste.

51
00:02:41,280 --> 00:02:44,060
Det ser ut som en matrise. Det er bare en tom array.

52
00:02:44,060 --> 00:02:47,100
Og så har jeg addTodo funksjon som vi så tidligere,

53
00:02:47,100 --> 00:02:50,740
og den eneste linje med kode i det er dette varselet.

54
00:02:50,740 --> 00:02:55,730
Det varsler implementere meg, og da har jeg to oppgavene.

55
00:02:55,730 --> 00:02:58,790
Jeg må legge til todo til at den globale data struktur,

56
00:02:58,790 --> 00:03:01,860
og da vil jeg trekke ut to-do liste.

57
00:03:01,860 --> 00:03:06,360
Ingenting fancy ennå, men JavaScript du kan bli kjent med,

58
00:03:06,360 --> 00:03:12,370
så jeg kommer til å gå sakte og gjennomgå det grunnleggende av JavaScript i den måten.

59
00:03:12,370 --> 00:03:15,490
>> La oss gi dette en sjanse.

60
00:03:15,490 --> 00:03:21,130
La oss si at brukeren skriver inn noe i denne boksen.

61
00:03:21,130 --> 00:03:23,360
Jeg bare skrev noe her, teksten.

62
00:03:23,360 --> 00:03:27,620
Hvordan sorterer jeg tilgang som tekst via JavaScript?

63
00:03:27,620 --> 00:03:32,500
Husk at JavaScript er en av de grunnleggende funksjonene som det gir oss

64
00:03:32,500 --> 00:03:34,670
dette programmatisk tilgang til DOM.

65
00:03:34,670 --> 00:03:40,670
Det tillater oss å få tilgang til elementene og deres egenskaper i denne selve HTML.

66
00:03:40,670 --> 00:03:43,430
Måten vi gjør det med bare bones JavaScript

67
00:03:43,430 --> 00:03:51,360
er vi faktisk kan bruke en funksjon i JavaScript kalt getElementByID.

68
00:03:51,360 --> 00:03:55,140
Jeg ønsker å lagre teksten som er skrevet der i noen variable,

69
00:03:55,140 --> 00:03:58,350
så jeg kommer til å si en ny variabel kalt new_todo,

70
00:03:58,350 --> 00:04:01,980
og jeg kommer til å få det elementet.

71
00:04:01,980 --> 00:04:06,330
Dette er en funksjon. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
Og nå har jeg fått et element av ID, så jeg trenger IDen til at tekstboksen

73
00:04:11,580 --> 00:04:15,860
så jeg har gitt det den ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Det er slik jeg kommer til å få et element.

75
00:04:18,399 --> 00:04:23,880
Det er mitt argument til denne funksjonen til å angi hvilke ID for å få.

76
00:04:23,880 --> 00:04:28,110
Og så det er et element i HTML, og det har egenskaper.

77
00:04:28,110 --> 00:04:30,650
Du har sett disse. De er attributter.

78
00:04:30,650 --> 00:04:37,090
Den egenskap av teksten element som lagrer brukerens input kalles verdi.

79
00:04:37,090 --> 00:04:40,860
Jeg reddet verdien av at tekstboksen nå i denne variabelen kalt new_todo.

80
00:04:40,860 --> 00:04:45,040
Nå har jeg programmatisk tilgang til denne variabelen, som er litt kult

81
00:04:45,040 --> 00:04:49,200
fordi nå hva jeg kan gjøre er at jeg kan legge det til min to-do liste.

82
00:04:49,200 --> 00:04:52,870
>> Måten vi vil gjøre dette i JavaScript-og ikke bekymre deg hvis du ikke er kjent med dette,

83
00:04:52,870 --> 00:04:57,010
men bare gå gjennom det er todos.push

84
00:04:57,010 --> 00:05:00,130
fordi det er navnet mitt global datastruktur opp her,

85
00:05:00,130 --> 00:05:04,450
og jeg kommer til å presse new_todo.

86
00:05:04,450 --> 00:05:09,120
Dette er flott, fordi nå har jeg lagt det til JavaScript min

87
00:05:09,120 --> 00:05:11,280
representasjon av at to-do liste.

88
00:05:11,280 --> 00:05:15,170
Men nå hvordan får jeg den tilbake til HTML?

89
00:05:15,170 --> 00:05:18,560
Jeg må finne en måte å sortere av presse den tilbake.

90
00:05:18,560 --> 00:05:21,830
Med andre ord, jeg slags nødt til å trekke dette.

91
00:05:21,830 --> 00:05:26,060
Hva vi skal gjøre er at vi kommer til å trekke to-do liste.

92
00:05:26,060 --> 00:05:29,270
Jeg trenger å oppdatere andre HTML på den siden,

93
00:05:29,270 --> 00:05:32,040
og som du kan se, har jeg igjen denne lille beholderen her,

94
00:05:32,040 --> 00:05:36,840
dette skillet på siden som har IDen todos,

95
00:05:36,840 --> 00:05:40,870
og jeg kommer til å sette to-do liste der.

96
00:05:40,870 --> 00:05:47,240
Først skal jeg fjerne det fordi, si, det var en gammel to-do liste der.

97
00:05:47,240 --> 00:05:49,560
Jeg får det elementet av ID igjen,

98
00:05:49,560 --> 00:05:54,530
og jeg tilgang til det indre HTML av dette elementet,

99
00:05:54,530 --> 00:05:58,010
og jeg kommer til å klare det.

100
00:05:58,010 --> 00:06:05,510
Hvis vi forlot denne koden som er, vil vi se en tom ingenting der,

101
00:06:05,510 --> 00:06:10,410
og nå vil jeg begynne å gjengi min nye to-do liste.

102
00:06:10,410 --> 00:06:12,870
Jeg er i utgangspunktet kommer til å tørke ut min liste over gjøremål.

103
00:06:12,870 --> 00:06:18,180
>> Nå indre HTML innsiden av at todos div er helt klart,

104
00:06:18,180 --> 00:06:20,060
og nå må jeg begynne å legge min liste.

105
00:06:20,060 --> 00:06:23,890
Det første jeg ønsker å legge tilbake er sorterte liste tag,

106
00:06:23,890 --> 00:06:33,890
som betegner i utgangspunktet at dette er starten på en ikke-sorterte liste.

107
00:06:33,890 --> 00:06:39,770
Nå for hvert element i min todos rekke ønsker jeg å skrive det ut på innsiden av at HTML.

108
00:06:39,770 --> 00:06:43,710
Jeg vil føye til det videre til bunnen av denne listen.

109
00:06:43,710 --> 00:06:49,040
Akkurat som i C, kan jeg bruke en for løkke, og jeg kommer til å starte på begynnelsen av listen min

110
00:06:49,040 --> 00:06:54,140
på element 0, og jeg kommer til å gå hele veien til lengden på listen.

111
00:06:54,140 --> 00:07:01,100
Vi kan faktisk få lengden på en array i JavaScript bruke lengden eiendommen.

112
00:07:01,100 --> 00:07:03,420
I utgangspunktet skal jeg gjøre noe lignende på innsiden av her

113
00:07:03,420 --> 00:07:05,600
å skrive ut dette elementet.

114
00:07:05,600 --> 00:07:12,970
Jeg kan igjen få tilgang til todos div, den indre HTML eiendommen til det,

115
00:07:12,970 --> 00:07:17,560
og jeg kommer til å legge på dette nytt element, og det kommer til å være omgitt av

116
00:07:17,560 --> 00:07:25,390
denne li tag, og jeg kommer til å sette sammen med operatoren +,

117
00:07:25,390 --> 00:07:28,040
og det er den ed element av min todos array,

118
00:07:28,040 --> 00:07:32,380
og da jeg kommer til å lukke den koden.

119
00:07:32,380 --> 00:07:36,240
Nå for hvert element vil vi legge til en ny oppføring i listen.

120
00:07:36,240 --> 00:07:48,700
Og så alt vi virkelig trenger å gjøre er å stenge denne koden.

121
00:07:48,700 --> 00:07:52,820
Jeg trenger bare å stenge av det sorterte liste tag.

122
00:07:52,820 --> 00:07:55,490
>> Får du en følelse for hvordan det fungerer?

123
00:07:55,490 --> 00:07:57,700
Dette åpner hele listen.

124
00:07:57,700 --> 00:08:01,080
Dette legger enkeltelementer fra todos liste til liste,

125
00:08:01,080 --> 00:08:05,470
og deretter som lukker hele listen, og dette er min addTodo funksjon.

126
00:08:05,470 --> 00:08:09,590
I utgangspunktet begynne ved å få todo fra tekstboksen.

127
00:08:09,590 --> 00:08:18,950
Jeg tilføyer at til todos array, og da jeg re-gjengi to-do liste.

128
00:08:18,950 --> 00:08:21,520
Nå kan jeg legge til elementer i listen min.

129
00:08:21,520 --> 00:08:24,620
Dette er slags spennende fordi i bare noen få linjer med kode

130
00:08:24,620 --> 00:08:28,240
vi har i utgangspunktet laget en to-do liste der vi kan legge til elementer.

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

132
00:08:30,050 --> 00:08:34,480
Det er litt av en grunnleggende innføring i JavaScript.

133
00:08:34,480 --> 00:08:36,179
Ikke bekymre deg for mye om syntaksen for nå,

134
00:08:36,179 --> 00:08:38,130
men tenk om dette konseptuelt.

135
00:08:38,130 --> 00:08:40,539
Vi hadde noen HTML.

136
00:08:40,539 --> 00:08:45,310
Vi hadde en tekstboks på siden som i utgangspunktet tillot brukere å legge inn en to-do element for å legge til.

137
00:08:45,310 --> 00:08:49,210
Og da vi brukte JavaScript for å hente den todo fra at tekstboksen.

138
00:08:49,210 --> 00:08:52,830
Vi har lagret den inne i et JavaScript array, som er utgangspunktet som

139
00:08:52,830 --> 00:08:56,010
vår programmatisk representasjon av at to-do liste,

140
00:08:56,010 --> 00:08:59,060
og da vi skrev den ut.

141
00:08:59,060 --> 00:09:02,690
Dette er todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Dette er litt kult, men hvordan kan vi ta dette videre?

143
00:09:07,620 --> 00:09:11,350
Vel, som du kan se, er dette ikke som en komplett liste over gjøremål.

144
00:09:11,350 --> 00:09:15,100
For eksempel kan jeg ikke merke noen av disse elementene som ufullstendig,

145
00:09:15,100 --> 00:09:19,920
som om jeg ønsket å omprioritere elementene eller slette elementer.

146
00:09:19,920 --> 00:09:23,150
Dette er greit, men vi kan ta dette videre.

147
00:09:23,150 --> 00:09:29,280
Jeg kommer ikke til å snakke for mye om å legge til ekstra funksjoner,

148
00:09:29,280 --> 00:09:32,800
men vi kan ta det videre.

149
00:09:32,800 --> 00:09:35,970
La oss snakke om å legge enda en funksjon til denne to-do liste,

150
00:09:35,970 --> 00:09:40,370
som kommer til å være å kunne sjekke en person å-gjøre-element

151
00:09:40,370 --> 00:09:44,780
og har det krysses ut, så i utgangspunktet si at jeg har gjort dette.

152
00:09:44,780 --> 00:09:50,240
La oss se på noen kode som kan oppnå det.

153
00:09:50,240 --> 00:09:52,740
Legg merke til hva jeg har gjort på toppen er jeg har lagt

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

155
00:09:57,620 --> 00:10:02,890
Jeg er i utgangspunktet å bruke dette til å lagre hvorvidt elementene på to-do liste

156
00:10:02,890 --> 00:10:06,560
er fullstendig eller ikke.

157
00:10:06,560 --> 00:10:08,470
Dette er én måte å gjøre dette.

158
00:10:08,470 --> 00:10:13,750
Hvis jeg ser på gjennomføringen av denne, displayet,

159
00:10:13,750 --> 00:10:21,120
utgangspunktet hvis jeg legger inn en todo og jeg trykker på denne bytteknappen

160
00:10:21,120 --> 00:10:25,040
den krysser ut, så hvert element på denne listen har enten et komplett

161
00:10:25,040 --> 00:10:31,050
eller ufullstendig tilstand, og jeg bruker et annet utvalg for å representere det.

162
00:10:31,050 --> 00:10:33,730
>> Utgangspunktet for hver todo i at todos matrise

163
00:10:33,730 --> 00:10:37,110
det er et element i den komplette utvalg som i utgangspunktet indikerer

164
00:10:37,110 --> 00:10:39,060
enten det er fullført eller ikke.

165
00:10:39,060 --> 00:10:41,640
Jeg har måttet gjøre ganske minimale endringer i denne koden,

166
00:10:41,640 --> 00:10:44,470
så her er vår addTodo funksjon.

167
00:10:44,470 --> 00:10:48,530
Legg merke til at her jeg presser den på array,

168
00:10:48,530 --> 00:10:51,300
og da jeg presser en 0 til at fullstendig array,

169
00:10:51,300 --> 00:10:57,090
utgangspunktet parallelt med at nye todo push for å si

170
00:10:57,090 --> 00:11:00,430
Jeg legger dette elementet, og det er kombinert med denne verdien,

171
00:11:00,430 --> 00:11:02,810
noe som betyr at det er ufullstendig.

172
00:11:02,810 --> 00:11:04,970
Og da er jeg redrawing den to-do liste.

173
00:11:04,970 --> 00:11:09,220
Nå merker jeg har lagt dette drawTodoList funksjon.

174
00:11:09,220 --> 00:11:11,760
Dette tar mye av koden vi hadde før,

175
00:11:11,760 --> 00:11:15,320
utgangspunktet tømmer ut boksen og deretter trekker den nye to-do liste.

176
00:11:15,320 --> 00:11:19,620
Men legg merke til at innsiden av dette for loop vi gjør litt mer nå.

177
00:11:19,620 --> 00:11:25,000
Vi er i utgangspunktet sjekke om elementet tilsvarer ed todo her

178
00:11:25,000 --> 00:11:30,220
er fullført, og vi oppfører forskjellig i disse to forholdene.

179
00:11:30,220 --> 00:11:32,790
Hvis det er komplett, legger vi til denne del tag,

180
00:11:32,790 --> 00:11:35,360
som er utgangspunktet måten du kan få det streik gjennom effekt

181
00:11:35,360 --> 00:11:38,190
krysset ut to-do liste hvis det er ferdig,

182
00:11:38,190 --> 00:11:42,200
og hvis det ikke, vi er ikke inkludert det.

183
00:11:42,200 --> 00:11:45,030
Og så den slags tar seg av det,

184
00:11:45,030 --> 00:11:49,140
>> og det er en måte å oppnå dette.

185
00:11:49,140 --> 00:11:53,420
Og så legger merke til når brukeren klikker på en av disse

186
00:11:53,420 --> 00:11:56,780
vi veksle ferdigstillelse status av det.

187
00:11:56,780 --> 00:12:02,170
Når brukeren klikker, vil vi reversere om det er blitt gjennomført eller ikke,

188
00:12:02,170 --> 00:12:04,540
og så får vi tegne den.

189
00:12:04,540 --> 00:12:06,190
Denne typen arbeid.

190
00:12:06,190 --> 00:12:09,860
Vi har disse funksjonene som utfører sine egne oppgaver,

191
00:12:09,860 --> 00:12:11,730
og dette er greit.

192
00:12:11,730 --> 00:12:14,110
Er det noe vi kan gjøre bedre om dette, da?

193
00:12:14,110 --> 00:12:18,700
Legg merke til at vi har disse to globale arrays.

194
00:12:18,700 --> 00:12:23,550
Hvis dette var C, og vi hadde to arrays den slags representert

195
00:12:23,550 --> 00:12:25,800
data som ble liksom relatert på noen måte

196
00:12:25,800 --> 00:12:30,140
hva ville vi bruke i C for å kombinere disse to feltene

197
00:12:30,140 --> 00:12:35,420
til noe som omslutter begge delene informasjon?

198
00:12:35,420 --> 00:12:37,600
Noen som vil komme med et forslag?

199
00:12:37,600 --> 00:12:39,450
[Student hørbar respons]

200
00:12:39,450 --> 00:12:42,340
>> Akkurat, slik at vi kunne bruke noen form for struct,

201
00:12:42,340 --> 00:12:44,960
og hvis du tenker tilbake til, si, PSett 3,

202
00:12:44,960 --> 00:12:47,350
husker vi hadde ordbok, og da vi hadde om ordet

203
00:12:47,350 --> 00:12:50,230
var i ordboken, og all denne informasjonen ble satt sammen

204
00:12:50,230 --> 00:12:52,420
innsiden av noen datastruktur.

205
00:12:52,420 --> 00:12:56,390
En ting jeg kan gjøre med denne koden for å unngå at disse to ulike matriser

206
00:12:56,390 --> 00:13:01,760
for lignende stykker av informasjon er at jeg kan kombinere dem i en JavaScript-objekt.

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

208
00:13:07,150 --> 00:13:11,740
Merker jeg bare har ett array på toppen nå

209
00:13:11,740 --> 00:13:17,650
og hva jeg har gjort er, og dette er bare den JavaScript syntaks for slags

210
00:13:17,650 --> 00:13:21,350
skape en bokstavelig versjon av et objekt,

211
00:13:21,350 --> 00:13:24,670
og merke det er to egenskaper, så vi har todo,

212
00:13:24,670 --> 00:13:29,660
og det er holdt sammen med om det er fullstendig eller ufullstendig.

213
00:13:29,660 --> 00:13:31,000
Dette er svært lik koden.

214
00:13:31,000 --> 00:13:35,310
Vi bruker JavaScript-stedene.

215
00:13:35,310 --> 00:13:38,600
Denne typen bedrer ting.

216
00:13:38,600 --> 00:13:43,850
Som nå, er alle disse områdene relatert informasjon holdes sammen.

217
00:13:43,850 --> 00:13:46,410
Når vi går å skrive den ut, kan vi få tilgang feltene.

218
00:13:46,410 --> 00:13:49,060
>> Legg merke til hvordan vi gjør todos [i]. Komplett

219
00:13:49,060 --> 00:13:52,880
stedet for å sjekke den komplette utvalg separat,

220
00:13:52,880 --> 00:13:56,560
og legge merke til når vi ønsker å få to-do strengen vi får to-do eiendom

221
00:13:56,560 --> 00:13:58,750
av at todo, så denne typen er fornuftig fordi

222
00:13:58,750 --> 00:14:01,660
hvert element har disse iboende egenskaper om det.

223
00:14:01,660 --> 00:14:05,650
Den har en todo, og det har enten det er ferdig eller ikke.

224
00:14:05,650 --> 00:14:11,540
Ikke for mange endringer det funksjonelt, nettopp lagt litt mer til koden.

225
00:14:11,540 --> 00:14:13,430
Dette er en forbedring på noen fronter, ikke sant?

226
00:14:13,430 --> 00:14:16,030
Jeg mener, vi priset ut utformingen litt.

227
00:14:16,030 --> 00:14:20,350
Nå har vi gjenstander til utgangspunktet kapsle disse dataene.

228
00:14:20,350 --> 00:14:27,130
Er det noe mer vi kan gjøre herfra i form av JavaScript?

229
00:14:27,130 --> 00:14:31,810
Som merke til at denne koden her

230
00:14:31,810 --> 00:14:34,760
for å få den indre HTML av en div

231
00:14:34,760 --> 00:14:40,520
er en liten, antar jeg, lenge.

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

233
00:14:45,100 --> 00:14:48,400
En ting vi kan gjøre for å gjøre denne koden ser litt vennligere

234
00:14:48,400 --> 00:14:51,450
så jeg skulle slippe å holde bla til venstre og høyre, frem og tilbake,

235
00:14:51,450 --> 00:14:58,480
er jeg kunne bruke et bibliotek som jQuery.

236
00:14:58,480 --> 00:15:02,710
>> La oss sjekke ut Seminar 2,

237
00:15:02,710 --> 00:15:05,880
og dette er den samme koden, men det er gjort med jQuery.

238
00:15:05,880 --> 00:15:08,790
Du kan ikke være altfor kjent med jQuery,

239
00:15:08,790 --> 00:15:11,510
men bare vet at jQuery er liksom et bibliotek for JavaScript

240
00:15:11,510 --> 00:15:15,910
som gjør det lettere å gjøre ting som tilgang enkelte elementene i DOM.

241
00:15:15,910 --> 00:15:21,280
Her i stedet for å si document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Jeg kan bruke mye renere måte i jQuery,

243
00:15:25,210 --> 00:15:28,490
som er bare å bruke velgere.

244
00:15:28,490 --> 00:15:31,300
Som du kan se, gjorde denne koden får litt renere,

245
00:15:31,300 --> 00:15:35,770
svært like funksjonelt, men det er tanken.

246
00:15:35,770 --> 00:15:37,980
Vi har sett et par ting så langt,

247
00:15:37,980 --> 00:15:42,010
så vi startet med bare rå JavaScript gjennomføring.

248
00:15:42,010 --> 00:15:45,370
Vi har lagt til nye funksjoner og viste hvordan vi kan forbedre det med

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

250
00:15:49,090 --> 00:15:53,300
>> Ser noen noen problemer med dette motivet?

251
00:15:53,300 --> 00:16:01,090
Nemlig gjette-eller jeg ikke nødvendigvis vanskeligheter, men la oss si

252
00:16:01,090 --> 00:16:04,830
vi ikke gjør en to-do liste prosjektet, og i morgen vi besluttet

253
00:16:04,830 --> 00:16:10,320
Vi ønsket å lage en handleliste eller en handleliste prosjekt.

254
00:16:10,320 --> 00:16:14,150
Mange av disse funksjonene er svært like.

255
00:16:14,150 --> 00:16:19,080
Mange av de tingene vi ønsker å komme ut av JavaScript er svært vanlig,

256
00:16:19,080 --> 00:16:23,820
og dette understreker behovet for en slags måte

257
00:16:23,820 --> 00:16:25,670
noe som gjør det enklere å gjøre.

258
00:16:25,670 --> 00:16:30,400
Jeg måtte bygge opp alt dette HTML-tilgang, alt dette DOM tilgang,

259
00:16:30,400 --> 00:16:35,530
som jeg kommer til å representere to-do liste med denne modellen.

260
00:16:35,530 --> 00:16:39,130
Og legg merke til jeg er ansvarlig som JavaScript utvikleren

261
00:16:39,130 --> 00:16:42,890
for å holde HTML og JavaScript som jeg har i sync.

262
00:16:42,890 --> 00:16:48,040
Ingenting automatisk gjort at JavaScript representasjon

263
00:16:48,040 --> 00:16:51,590
eller to-do liste bli skjøvet ut til HTML.

264
00:16:51,590 --> 00:16:54,000
Ingenting håndheves at bortsett fra for meg.

265
00:16:54,000 --> 00:16:56,880
Jeg måtte skrive trekningen to-do liste funksjon.

266
00:16:56,880 --> 00:17:01,650
Og det kan ikke være-Jeg mener, det er rimelig å gjøre det,

267
00:17:01,650 --> 00:17:03,670
men det kan være kjedelig noen ganger.

268
00:17:03,670 --> 00:17:08,190
Hvis du har et større prosjekt, som kan være vanskelig.

269
00:17:08,190 --> 00:17:10,720
>> Rammeverk, en av hensiktene med rammer

270
00:17:10,720 --> 00:17:14,060
er å forenkle denne prosessen og liksom faktor ut

271
00:17:14,060 --> 00:17:16,950
disse felles-Jeg antar du kan si-design patterns

272
00:17:16,950 --> 00:17:20,700
at folk generelt har en slags måte å representere data,

273
00:17:20,700 --> 00:17:25,599
enten det er en venneliste, enten det er kartinformasjon

274
00:17:25,599 --> 00:17:27,280
eller noe, eller en to-do liste.

275
00:17:27,280 --> 00:17:30,660
Noen mennesker har generelt en måte å representere informasjon,

276
00:17:30,660 --> 00:17:33,650
og de vanligvis trenger for å holde denne informasjonen slags synkronisert

277
00:17:33,650 --> 00:17:36,520
mellom hva brukeren ser på en eller annen form for visning,

278
00:17:36,520 --> 00:17:39,850
snakker i form av like modellen vise kontrolleren som du så i forelesning,

279
00:17:39,850 --> 00:17:45,400
og deretter den modell, som i dette tilfellet er denne JavaScript matrise.

280
00:17:45,400 --> 00:17:49,020
Rammer gir oss en måte å løse det problemet.

281
00:17:49,020 --> 00:17:53,080
La oss nå ta en titt på gjennomføringen av denne to-do liste

282
00:17:53,080 --> 00:18:02,360
i et rammeverk som heter angularjs.

283
00:18:02,360 --> 00:18:04,650
Dette er det. Legg merke til det passer på et lysbilde.

284
00:18:04,650 --> 00:18:07,330
Jeg trenger ikke å bla til venstre og høyre.

285
00:18:07,330 --> 00:18:10,460
Det er trolig ikke en god grunn til å anbefale å bruke et rammeverk,

286
00:18:10,460 --> 00:18:20,120
men varsel jeg noen gang få tilgang enkelte HTML-elementer her?

287
00:18:20,120 --> 00:18:22,400
Jeg noensinne kommer inn i DOM?

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

289
00:18:26,120 --> 00:18:29,870
Nei, det er borte.

290
00:18:29,870 --> 00:18:35,590
>> Kantete hjelper oss å holde DOM og vår JavaScript representasjon av noe

291
00:18:35,590 --> 00:18:40,430
slags synkronisert, så hvis det ikke er i JS-fil,

292
00:18:40,430 --> 00:18:46,790
hvis det er ingen måte å programmatisk få til alt som HTML-innhold

293
00:18:46,790 --> 00:18:51,800
fra JavaScript hvordan skal vi holde dette i sync?

294
00:18:51,800 --> 00:18:58,160
Hvis det ikke er i. JS-fil, er det nødt til å være i HTML, ikke sant?

295
00:18:58,160 --> 00:19:01,910
Dette er den nye versjonen av HTML-filen,

296
00:19:01,910 --> 00:19:04,660
og legge merke til vi har lagt mye her.

297
00:19:04,660 --> 00:19:11,110
Merker det er disse nye attributter som sier ng-klikk og ng-repeat.

298
00:19:11,110 --> 00:19:15,650
Kantete tilnærming til å løse dette problemet med vanskeligheter i utforming

299
00:19:15,650 --> 00:19:19,130
er å i utgangspunktet gjøre HTML mye kraftigere.

300
00:19:19,130 --> 00:19:24,420
Kantete er en måte slik at du kan lage HTML noe mer uttrykksfulle.

301
00:19:24,420 --> 00:19:30,520
For eksempel kan jeg si at jeg kommer til å knytte eller binde denne tekstboks

302
00:19:30,520 --> 00:19:35,080
til en variabel innenfor mitt Kantet JavaScript-kode.

303
00:19:35,080 --> 00:19:37,030
Dette ng-modellen gjør nettopp det.

304
00:19:37,030 --> 00:19:41,550
Det sier i utgangspunktet at elementet inne i denne tekstboksen,

305
00:19:41,550 --> 00:19:45,000
bare forbinder det med den variable new_todo_description

306
00:19:45,000 --> 00:19:47,870
i JavaScript-kode.

307
00:19:47,870 --> 00:19:51,600
Det er svært kraftig, fordi jeg ikke trenger å eksplisitt gå til

308
00:19:51,600 --> 00:19:53,310
DOM for å få denne informasjonen.

309
00:19:53,310 --> 00:19:56,250
Jeg trenger ikke å si document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Jeg trenger ikke å bruke jQueries som DOM tilgang.

311
00:19:58,750 --> 00:20:03,280
Jeg kan assosiere det med en variabel, og deretter når jeg endrer den variabelen

312
00:20:03,280 --> 00:20:07,400
innenfor JavaScript det er holdt i sync med HTML,

313
00:20:07,400 --> 00:20:11,640
slik som forenkler prosessen med å måtte gå frem og tilbake mellom de to.

314
00:20:11,640 --> 00:20:18,260
Betyr det fornuftig?

315
00:20:18,260 --> 00:20:22,060
>> Og legg merke til er det ingen HTML tilgangskode.

316
00:20:22,060 --> 00:20:27,760
Vi har bare gjort HTML kraftigere,

317
00:20:27,760 --> 00:20:32,070
og nå, for eksempel, kan vi gjøre ting som dette,

318
00:20:32,070 --> 00:20:38,610
som når du klikker på dette, kaller denne funksjonen innenfor rammen av todos.js,

319
00:20:38,610 --> 00:20:43,410
og vi kunne gjøre det før, men det er andre ting, som dette ng-modellen,

320
00:20:43,410 --> 00:20:47,020
og legge merke til dette ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Hva tror du dette betyr?

322
00:20:51,520 --> 00:20:54,390
Her er vår sorterte liste fra før.

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

324
00:20:56,470 --> 00:21:03,710
men jeg noensinne gjengi den listen innsiden av JavaScript-kode?

325
00:21:03,710 --> 00:21:09,280
Jeg er ikke alltid eksplisitt gjengi den listen.

326
00:21:09,280 --> 00:21:11,580
Hvordan fungerer dette?

327
00:21:11,580 --> 00:21:16,410
Vel, oppnår den måten Kantet dette er dette som kalles en repeater.

328
00:21:16,410 --> 00:21:22,760
I utgangspunktet er dette sier at jeg bør skrive ut denne HTML

329
00:21:22,760 --> 00:21:26,240
for hver todo innsiden av min todos array.

330
00:21:26,240 --> 00:21:31,850
Innsiden av todos.jr det er en todos matrise akkurat her,

331
00:21:31,850 --> 00:21:37,910
og dette vil fortelle Hjørne gå gjennom denne matrisen, og for hvert element ser du

332
00:21:37,910 --> 00:21:41,390
Jeg vil du skal skrive ut denne HTML.

333
00:21:41,390 --> 00:21:44,620
Dette er ganske kult fordi jeg bare kan gjøre dette

334
00:21:44,620 --> 00:21:47,760
uten å måtte skrive en for loop,

335
00:21:47,760 --> 00:21:52,250
som for en to-do liste som var bare 30 linjer med kode

336
00:21:52,250 --> 00:21:54,700
kanskje ikke den mest fordelaktige ting,

337
00:21:54,700 --> 00:22:01,240
men hvis du har et stort prosjekt, kan dette bli veldig praktisk.

338
00:22:01,240 --> 00:22:06,100
>> Dette er en løsning på dette problemet, noe som gjør HTML kraftigere,

339
00:22:06,100 --> 00:22:10,820
og som tillater oss å holde JavaScript og HTML i sync.

340
00:22:10,820 --> 00:22:13,220
Det finnes andre mulige måter å løse dette problemet,

341
00:22:13,220 --> 00:22:15,320
og ikke hver rammeverk gjør dette.

342
00:22:15,320 --> 00:22:17,720
Ikke hver rammeverket fungerer langs disse linjene.

343
00:22:17,720 --> 00:22:19,490
Noen rammer har ulike tilnærminger,

344
00:22:19,490 --> 00:22:23,310
og du finner kanskje ut at du liker koding i en ramme over den andre.

345
00:22:23,310 --> 00:22:26,160
La oss se på en mer.

346
00:22:26,160 --> 00:22:30,060
Dette er to-do liste kodet opp i et rammeverk som heter Backbone.

347
00:22:30,060 --> 00:22:33,250
Jeg kommer til å gå gjennom dette raskt.

348
00:22:33,250 --> 00:22:38,300
Jeg skal begynne med HTML før vi drar dit.

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

350
00:22:40,290 --> 00:22:43,950
Starter med HTML, som du legger merke til, er vår HTML svært lik

351
00:22:43,950 --> 00:22:50,000
til hva det var før, så ikke så mye nytt på den fronten.

352
00:22:50,000 --> 00:22:55,410
Men vår JS-fil er litt annerledes.

353
00:22:55,410 --> 00:23:00,360
Backbone slags har denne ideen, eller bygger på ideen

354
00:23:00,360 --> 00:23:04,750
at mye av det vi gjør med for eksempel våre JavaScript-prosjekter

355
00:23:04,750 --> 00:23:09,110
er å tenke på modeller og samlinger av disse modellene.

356
00:23:09,110 --> 00:23:12,510
Dette kan for eksempel være et fotografi, og samlinger av bilder,

357
00:23:12,510 --> 00:23:16,230
eller ideen om en venn og samlinger av venner.

358
00:23:16,230 --> 00:23:20,700
Og ofte når vi programmerer JavaScript-programmer

359
00:23:20,700 --> 00:23:25,340
vi vil liksom representere ideen om å ha en samling av venner

360
00:23:25,340 --> 00:23:29,500
en eller annen måte i JavaScript, gir og Backbone oss dette laget

361
00:23:29,500 --> 00:23:33,040
på toppen av JavaScript i eksisterende arrays og objekter

362
00:23:33,040 --> 00:23:38,300
å gjøre mer kraftfulle ting med det lettere.

363
00:23:38,300 --> 00:23:41,870
>> Her har jeg definert en to-do-modellen,

364
00:23:41,870 --> 00:23:44,630
og du trenger ikke å bekymre deg for mye om syntaksen,

365
00:23:44,630 --> 00:23:48,730
men merker at det er en av egenskapene til dette?

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

367
00:23:53,190 --> 00:23:56,640
Backbone tillater meg å spesifisere allerede utenfor balltre

368
00:23:56,640 --> 00:24:00,190
noen ny to-do at jeg lager kommer til å ha disse standardene.

369
00:24:00,190 --> 00:24:04,100
Nå kan jeg tilpasse dette, men å være i stand til å angi standardverdiene

370
00:24:04,100 --> 00:24:07,220
er fin, og det er slags praktisk fordi dette er ikke noe som er som

371
00:24:07,220 --> 00:24:10,430
iboende i JavaScript, og nå har jeg ikke trenger å eksplisitt

372
00:24:10,430 --> 00:24:12,430
si at de todos er ufullstendige.

373
00:24:12,430 --> 00:24:19,190
Jeg kan si rett utenfor balltre at todos kommer til å bli merket som ufullstendig.

374
00:24:19,190 --> 00:24:21,300
Legg merke til så hva er dette?

375
00:24:21,300 --> 00:24:25,520
Nå har jeg en to-do liste, og det er en samling.

376
00:24:25,520 --> 00:24:30,960
Legg merke feltet forbundet med det, sier modell todo.

377
00:24:30,960 --> 00:24:33,390
Dette er min måte å fortelle Backbone som

378
00:24:33,390 --> 00:24:37,350
Jeg kommer til å tenke på en samling av disse individuelle todos.

379
00:24:37,350 --> 00:24:42,140
Dette er i utgangspunktet modell struktur for programmet mitt.

380
00:24:42,140 --> 00:24:44,980
Her har jeg denne ideen om en samling,

381
00:24:44,980 --> 00:24:48,960
og i utgangspunktet de elementene som inngår i denne samlingen er alle kommer til å være disse todos,

382
00:24:48,960 --> 00:24:51,910
og det er veldig naturlig i denne forstand

383
00:24:51,910 --> 00:24:59,890
fordi jeg har todos, og jeg har dem i en samling.

384
00:24:59,890 --> 00:25:02,940
>> La oss se på litt mer av dette.

385
00:25:02,940 --> 00:25:05,900
Her er en Backbone visning.

386
00:25:05,900 --> 00:25:08,890
Den andre tingen som Backbone sier er at

387
00:25:08,890 --> 00:25:14,660
mye av modellene som du tenker om eller samlinger

388
00:25:14,660 --> 00:25:19,150
kommer til å trenge å ha noen måte å bli vist.

389
00:25:19,150 --> 00:25:21,900
Vi trenger å gjengi det to-do liste,

390
00:25:21,900 --> 00:25:25,460
og ville det ikke vært fint om vi kunne gi for hver modell

391
00:25:25,460 --> 00:25:28,390
eller omgås hver modell dette synet

392
00:25:28,390 --> 00:25:34,020
som tillater oss å antar jeg koble de to sammen?

393
00:25:34,020 --> 00:25:38,320
Mens før vi måtte bruke en for løkke som ville kjøre gjennom

394
00:25:38,320 --> 00:25:41,130
hver todo i vår liste, og deretter skrive det ut her

395
00:25:41,130 --> 00:25:44,650
Vi kan i utgangspunktet koble det med denne modellen.

396
00:25:44,650 --> 00:25:47,550
Dette er en to-do visning.

397
00:25:47,550 --> 00:25:50,550
Dette er knyttet til todo vi fant tidligere.

398
00:25:50,550 --> 00:25:54,940
Nå hver todo er visbart eller renderable

399
00:25:54,940 --> 00:25:56,960
av denne to-do visning.

400
00:25:56,960 --> 00:25:59,440
Legg merke til noen av feltene.

401
00:25:59,440 --> 00:26:05,880
Hva tror du dette TagNavn er, TagNavn: li?

402
00:26:05,880 --> 00:26:09,790
Husker fra før da vi ønsket å gjengi en todo

403
00:26:09,790 --> 00:26:16,700
vi måtte eksplisitt pare våre todos med denne li tag.

404
00:26:16,700 --> 00:26:21,080
Nå sier vi at der dette todo kommer til å leve

405
00:26:21,080 --> 00:26:25,250
kommer til å være inne i en li tag.

406
00:26:25,250 --> 00:26:31,440
Og nå er vi også knytte hendelser med våre todos.

407
00:26:31,440 --> 00:26:34,320
>> Hver todo har denne ene hendelsen.

408
00:26:34,320 --> 00:26:38,480
Hvis du klikker ganske mye veksle knappen, det er det jeg sier det,

409
00:26:38,480 --> 00:26:43,080
så i utgangspunktet markere todo som det motsatte av hva det var før

410
00:26:43,080 --> 00:26:45,890
og deretter gjengi programmet.

411
00:26:45,890 --> 00:26:47,810
Dette er ganske lik koden før.

412
00:26:47,810 --> 00:26:50,730
Husker du da vi merket det som enten motsatt eller-

413
00:26:50,730 --> 00:26:52,410
og da vi re-rendret det.

414
00:26:52,410 --> 00:26:57,750
Men legg merke til nå denne hendelsen pleide å være noe som var i HTML.

415
00:26:57,750 --> 00:26:59,640
Det ble sittende der.

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

417
00:27:01,410 --> 00:27:05,310
Når du klikker på knappen, den slags gjør ting for å

418
00:27:05,310 --> 00:27:07,210
sette opp at todo å være ufullstendig.

419
00:27:07,210 --> 00:27:11,180
Her har vi tilknyttet det ved å klikke på den bytteknappen

420
00:27:11,180 --> 00:27:15,830
og reversere enten det er på eller av med denne visningen.

421
00:27:15,830 --> 00:27:20,480
>> Dette er en fin måte å sette opp denne hendelsen slik at det er svært tett bundet

422
00:27:20,480 --> 00:27:26,980
dette synet, og så legge merke til dette en mer.

423
00:27:26,980 --> 00:27:31,050
Jeg har denne render metoden, og vi trenger ikke å gå gjennom detaljene.

424
00:27:31,050 --> 00:27:33,650
Det er på en måte som ligner på det vi hadde før,

425
00:27:33,650 --> 00:27:36,070
men merker jeg ikke looping gjennom alt.

426
00:27:36,070 --> 00:27:40,700
Jeg er ikke ut som ul tag det er liksom si jeg kommer til å skrive ut alle elementene.

427
00:27:40,700 --> 00:27:46,610
Jeg gir funksjonalitet for å gjengi dette en to-do element.

428
00:27:46,610 --> 00:27:49,400
Dette er en svært kraftig konsept fordi utgangspunktet

429
00:27:49,400 --> 00:27:53,600
vår liste over gjøremål består av alle disse todos, og hvis vi kan i utgangspunktet spesifisere

430
00:27:53,600 --> 00:27:56,890
måten å gjengi en av de todos

431
00:27:56,890 --> 00:28:04,230
så kan vi ha vår kraftige ryggraden per se gjengi alle todos

432
00:28:04,230 --> 00:28:07,760
ved å ringe render metoden på de enkelte todos.

433
00:28:07,760 --> 00:28:14,180
Dette er et konsept som er nyttig her.

434
00:28:14,180 --> 00:28:18,160
Nå er et godt spørsmål å stille er hvordan er dette programmet blir satt sammen?

435
00:28:18,160 --> 00:28:21,200
Fordi vi har muligheten til å gjengi en todo,

436
00:28:21,200 --> 00:28:23,860
men hvordan får vi ideen om flere todos?

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

438
00:28:25,100 --> 00:28:27,100
Dette er den siste del.

439
00:28:27,100 --> 00:28:29,740
Legg merke til vi har en to-do liste visning her,

440
00:28:29,740 --> 00:28:34,440
og merker det er også en visning.

441
00:28:34,440 --> 00:28:36,970
Og for å gå over et par ting,

442
00:28:36,970 --> 00:28:45,280
dette initialize metoden vil bli kalt når vi først lage denne to-do liste.

443
00:28:45,280 --> 00:28:52,630
Som du kan se, er det som å lage to-do liste og assosiere det med denne visningen.

444
00:28:52,630 --> 00:28:57,860
Og da jeg lagt funksjonene her så i utgangspunktet når du legger til et element-

445
00:28:57,860 --> 00:29:01,440
Dette ligner på AddItem metoden vi så før-

446
00:29:01,440 --> 00:29:07,430
Jeg kommer til å opprette en ny todo objekt, og merker at jeg faktisk ringer

447
00:29:07,430 --> 00:29:13,080
denne nye todo metoden, så dette er levert av Backbone,

448
00:29:13,080 --> 00:29:16,010
og jeg kan passere i mine eiendommer her.

449
00:29:16,010 --> 00:29:23,710
Og nå hver todo at jeg create bruker dette vil få den funksjonaliteten som vi har sett før.

450
00:29:23,710 --> 00:29:28,140
Legg merke jeg rydde ut tekstboksen før-en liten liten detalj-

451
00:29:28,140 --> 00:29:32,900
og da jeg legger denne samlingen.

452
00:29:32,900 --> 00:29:37,630
>> Dette nesten virker rart fordi før vi bare måtte gjøre det todos.push,

453
00:29:37,630 --> 00:29:43,310
og da vi var ferdig, og dette kan virke mer komplisert for dette prosjektet,

454
00:29:43,310 --> 00:29:46,980
og du kan finne at Backbone eller kantete eller andre rammeverk

455
00:29:46,980 --> 00:29:50,790
ikke passer din bestemt prosjekt, men jeg tror det er viktig å tenke på

456
00:29:50,790 --> 00:29:54,100
hva dette betyr i større skala for større prosjekter,

457
00:29:54,100 --> 00:29:56,610
fordi hvis vi hadde et større prosjekt der vi representerer

458
00:29:56,610 --> 00:30:00,860
noen virkelig kompleks samling, noe dypere enn bare en to-do liste,

459
00:30:00,860 --> 00:30:04,490
la oss si en venneliste eller noe sånt, kan dette komme til nytte

460
00:30:04,490 --> 00:30:09,620
fordi vi kunne organisere vår kode i en veldig praktisk måte,

461
00:30:09,620 --> 00:30:12,550
på en måte som vil gjøre det lettere for noen andre

462
00:30:12,550 --> 00:30:16,820
som ønsket å plukke opp et prosjekt for å bygge videre på.

463
00:30:16,820 --> 00:30:21,450
Du kan se at dette gir mye struktur.

464
00:30:21,450 --> 00:30:26,580
Og da jeg ringer gjengi på denne AddItem.

465
00:30:26,580 --> 00:30:31,050
Gjengi, som du kan se, og du trenger ikke å forstå dette fullt syntaks,

466
00:30:31,050 --> 00:30:37,790
men i utgangspunktet for hver modell kommer det til å ringe den enkelte render metoden.

467
00:30:37,790 --> 00:30:41,500
Det er liksom hvor dette kommer fra.

468
00:30:41,500 --> 00:30:44,140
La oss bare spesifisere hvordan å gjengi de enkelte todos,

469
00:30:44,140 --> 00:30:47,310
og så la oss lim dem sammen som en helhet.

470
00:30:47,310 --> 00:30:49,810
Men dette er en måte for abstraksjon,

471
00:30:49,810 --> 00:30:55,470
fordi jeg kunne endre måten jeg velger å gjengi de enkelte todos,

472
00:30:55,470 --> 00:30:57,940
og jeg ikke ville ha til å endre noen av denne koden.

473
00:30:57,940 --> 00:31:00,700
Det er litt kult.

474
00:31:00,700 --> 00:31:08,540
>> Does noen har noen spørsmål om JavaScript-rammeverk?

475
00:31:08,540 --> 00:31:14,310
[Student uhørlig spørsmål]

476
00:31:14,310 --> 00:31:16,050
Javisst, det er et stort spørsmål.

477
00:31:16,050 --> 00:31:19,080
Spørsmålet var hvordan jeg inkluderer de rammer?

478
00:31:19,080 --> 00:31:22,970
De fleste JavaScript-rammeverk er i utgangspunktet bare JS-filer

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

480
00:31:25,740 --> 00:31:29,830
Merke i hodet delen av HTML mitt jeg har alle disse skriptkodene,

481
00:31:29,830 --> 00:31:34,250
og det endelige manuset koden er den koden som vi har skrevet.

482
00:31:34,250 --> 00:31:38,820
Og da de tre ramme-koder er bare også skriptkodene.

483
00:31:38,820 --> 00:31:42,110
Jeg er inkludert dem fra det som kalles en CDN,

484
00:31:42,110 --> 00:31:46,200
som tillater meg å få det fra noen andre på dette punktet

485
00:31:46,200 --> 00:31:57,930
men hver rammeverk har dette-kan du stort sett finne innhold

486
00:31:57,930 --> 00:32:03,540
for en bestemt JavaScript-bibliotek tilgjengelig på noen CDN eller noe sånt,

487
00:32:03,540 --> 00:32:05,570
og deretter kan du inkludere disse skriptkodene.

488
00:32:05,570 --> 00:32:07,600
Betyr det fornuftig?

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

490
00:32:09,500 --> 00:32:11,730
>> De er to ulike tilnærminger.

491
00:32:11,730 --> 00:32:14,640
De er ikke de eneste tilnærminger til å løse dette problemet.

492
00:32:14,640 --> 00:32:17,080
Det er mange forskjellige ting som

493
00:32:17,080 --> 00:32:19,490
noen kunne gjøre, og det er mange rammeverk der ute.

494
00:32:19,490 --> 00:32:23,300
Kantete og Backbone ikke fortelle hele historien.

495
00:32:23,300 --> 00:32:26,370
Lykke til med dine siste prosjekter, og tusen takk.

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