1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [JavaScript Frameworks: waarom en hoe?]

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

3
00:00:04,000 --> 00:00:06,960
[Dit is CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hallo, allemaal. Welkom op de webbrowser Frameworks seminar.

5
00:00:10,630 --> 00:00:14,910
Mijn naam is Kevin, en vandaag ga ik het hebben over JavaScript-frameworks,

6
00:00:14,910 --> 00:00:20,400
en het doel van dit seminar is niet om u te zeggen, meester een bepaald raamwerk per se

7
00:00:20,400 --> 00:00:23,810
maar om u een brede introductie te geven aan een paar kaders

8
00:00:23,810 --> 00:00:27,150
en laten zien waarom we ooit zouden willen een kader te gebruiken.

9
00:00:27,150 --> 00:00:31,060
>> Voordat ik dat doe, zal ik zorgen voor een beetje achtergrond in JavaScript,

10
00:00:31,060 --> 00:00:33,750
en dan zullen we het vanaf daar.

11
00:00:33,750 --> 00:00:36,270
We gaan beginnen met de implementatie van een to-do lijst.

12
00:00:36,270 --> 00:00:39,330
Hier is onze lijst taak voor vandaag.

13
00:00:39,330 --> 00:00:41,990
Het is wel grappig. We moeten een to-do lijst in JavaScript te implementeren.

14
00:00:41,990 --> 00:00:45,110
Dit is wat het gaat uitzien, dus dat is ons eerste doel.

15
00:00:45,110 --> 00:00:47,160
We gaan niet om een ​​kader te gebruiken om dat te doen.

16
00:00:47,160 --> 00:00:51,930
We gaan naar code JavaScript en krijgen de to-do lijst te werken.

17
00:00:51,930 --> 00:00:54,370
Dan gaan we naar het ontwerp te verbeteren zonder gebruik van een raamwerk.

18
00:00:54,370 --> 00:00:57,190
We gaan naar de verschillende dingen die we kunnen doen met slechts JavaScript alleen bespreken

19
00:00:57,190 --> 00:01:00,650
om onze make to-do lijst een beetje meer goed ontworpen.

20
00:01:00,650 --> 00:01:02,490
Dan gaan we gooien in een aantal jQuery,

21
00:01:02,490 --> 00:01:05,030
en dan gaan we kijken naar hetzelfde to-do lijst,

22
00:01:05,030 --> 00:01:07,170
net geïmplementeerd in verschillende kaders, en we zullen bespreken

23
00:01:07,170 --> 00:01:09,280
 de voor-en nadelen langs de weg.

24
00:01:09,280 --> 00:01:12,040
>> Laten we beginnen met de uitvoering die to-do lijst.

25
00:01:12,040 --> 00:01:14,270
Laten we zeggen dat we gaven deze HTML.

26
00:01:14,270 --> 00:01:16,620
Ik ga het een beetje kleiner te maken.

27
00:01:16,620 --> 00:01:19,300
Zoals je kunt zien, heb ik een beetje header die Todo zegt

28
00:01:19,300 --> 00:01:21,740
en een klein doosje waar ik een beschrijving van een todo kunt invoeren

29
00:01:21,740 --> 00:01:26,990
en vervolgens een nieuwe knop punt, dus laten we proberen om een ​​nieuwe todo invoeren om deze lijst.

30
00:01:26,990 --> 00:01:31,000
Geef een JavaScript-frameworks seminar,

31
00:01:31,000 --> 00:01:33,090
en ik ben naar nieuw item te raken.

32
00:01:33,090 --> 00:01:35,730
Ik krijg deze JavaScript waarschuwing die zegt implementeren me.

33
00:01:35,730 --> 00:01:37,560
We hebben om het te implementeren.

34
00:01:37,560 --> 00:01:41,490
Laten we eens kijken op de code voor dit, zowel de HTML en JavaScript.

35
00:01:41,490 --> 00:01:43,260
Hier is onze HTML.

36
00:01:43,260 --> 00:01:45,500
Zoals je hier kunt zien, is hier onze kleine Todos header.

37
00:01:45,500 --> 00:01:47,620
Dat was dat vet ding aan de top,

38
00:01:47,620 --> 00:01:50,690
en dan hebben we het invoerveld met de tijdelijke aanduiding,

39
00:01:50,690 --> 00:01:59,460
en dan is er een bepaalde eigenschap van deze toets aan dat deze functie addtodo noemt.

40
00:01:59,460 --> 00:02:05,460
Heeft iemand willen raden wat dat op klik wordt betekenende?

41
00:02:05,460 --> 00:02:07,390
[Student onverstaanbaar antwoord]

42
00:02:07,390 --> 00:02:09,289
Goed, het op click is een beetje als een gebeurtenis,

43
00:02:09,289 --> 00:02:12,120
net als met de muis is gewoon een evenement, en wat we doen

44
00:02:12,120 --> 00:02:16,890
is wij binden de gebeurtenis van het klikken op deze knop om die functie uit te voeren.

45
00:02:16,890 --> 00:02:21,700
Addtodo is dit event handler voor het klikken op die knop.

46
00:02:21,700 --> 00:02:25,010
>> Zoals je kunt zien, wanneer ik klik op de nieuwe knop artikel

47
00:02:25,010 --> 00:02:29,940
de op gebeurtenis click wordt ontslagen, en deze functie wordt aangeroepen.

48
00:02:29,940 --> 00:02:33,170
Laten we eens kijken naar de functie.

49
00:02:33,170 --> 00:02:36,260
Zoals je kunt zien, hier is mijn JavaScript-code tot nu toe.

50
00:02:36,260 --> 00:02:41,280
Wat heb ik aan de top is een wereldwijde datastructuur voor mijn to-do lijst.

51
00:02:41,280 --> 00:02:44,060
Het ziet eruit als een array. Het is gewoon een lege array.

52
00:02:44,060 --> 00:02:47,100
En dan heb ik het addtodo functie die we eerder zagen,

53
00:02:47,100 --> 00:02:50,740
en de enige regel code is er deze waarschuwing.

54
00:02:50,740 --> 00:02:55,730
Het waarschuwt implementeren mij, en dan heb ik 2 taken bij de hand.

55
00:02:55,730 --> 00:02:58,790
Ik moet de todo toe te voegen aan dat de wereldwijde data structuur,

56
00:02:58,790 --> 00:03:01,860
en dan wil ik te trekken uit de to-do lijst.

57
00:03:01,860 --> 00:03:06,360
Niets te fancy gewoon nog niet, maar JavaScript kunt u niet vertrouwd zijn met,

58
00:03:06,360 --> 00:03:12,370
dus ik ga te langzaam gaan en bekijk de fundamenten van JavaScript op die manier.

59
00:03:12,370 --> 00:03:15,490
>> Laten we geven deze een schot.

60
00:03:15,490 --> 00:03:21,130
Laten we zeggen dat de gebruiker iets in dit veld betreedt.

61
00:03:21,130 --> 00:03:23,360
Ik heb gewoon iets in hier, tekst getypt.

62
00:03:23,360 --> 00:03:27,620
Hoe krijg ik soort van toegang die tekst via JavaScript?

63
00:03:27,620 --> 00:03:32,500
Onthoud dat JavaScript, een van de fundamentele kenmerken ervan is dat het ons geeft

64
00:03:32,500 --> 00:03:34,670
deze programmatische toegang tot de DOM.

65
00:03:34,670 --> 00:03:40,670
Het stelt ons in staat om toegang te krijgen tot elementen en hun eigenschappen van deze eigenlijke HTML.

66
00:03:40,670 --> 00:03:43,430
De manier waarop we dat doen met kale botten JavaScript

67
00:03:43,430 --> 00:03:51,360
is kunnen we eigenlijk een functie in JavaScript genaamd getElementById gebruiken.

68
00:03:51,360 --> 00:03:55,140
Ik wil de tekst die er in sommige variabele is getypt slaan,

69
00:03:55,140 --> 00:03:58,350
dus ik ga zeggen een nieuwe variabele genaamd new_todo,

70
00:03:58,350 --> 00:04:01,980
en ik ga dat element te krijgen.

71
00:04:01,980 --> 00:04:06,330
Dit is een functie. GetElementById.

72
00:04:06,330 --> 00:04:11,580
En nu ben ik steeds een element van ID, dus ik moet de ID van dat tekstvak,

73
00:04:11,580 --> 00:04:15,860
dus ik heb het gezien de ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Dat is hoe ik ga een element te krijgen.

75
00:04:18,399 --> 00:04:23,880
Dat is mijn argument om deze functie aan te geven welke ID te krijgen.

76
00:04:23,880 --> 00:04:28,110
En dat is dus een element in HTML, en heeft eigenschappen.

77
00:04:28,110 --> 00:04:30,650
Je hebt gezien deze. Ze zijn attributen.

78
00:04:30,650 --> 00:04:37,090
Het kenmerk van het tekstelement dat invoer van de gebruiker opslaat heet waarde.

79
00:04:37,090 --> 00:04:40,860
Ik redde de waarde van dat tekstvak nu in deze variabele genaamd new_todo.

80
00:04:40,860 --> 00:04:45,040
Nu heb ik programmatische toegang tot deze variabele, dat is wel cool

81
00:04:45,040 --> 00:04:49,200
want nu wat ik kan doen is dat ik het kan toevoegen aan mijn to-do lijst.

82
00:04:49,200 --> 00:04:52,870
>> De manier waarop we zouden dit doen in JavaScript-en maak je niet als je niet bekend mee bent,

83
00:04:52,870 --> 00:04:57,010
maar gewoon door het todos.push

84
00:04:57,010 --> 00:05:00,130
want dat is de naam van mijn globale datastructuur hier,

85
00:05:00,130 --> 00:05:04,450
en ik ga new_todo duwen.

86
00:05:04,450 --> 00:05:09,120
Dit is geweldig, want nu heb ik het toegevoegd aan mijn webbrowser

87
00:05:09,120 --> 00:05:11,280
vertegenwoordiging van die to-do lijst.

88
00:05:11,280 --> 00:05:15,170
Maar nu hoe krijg ik het terug naar de HTML?

89
00:05:15,170 --> 00:05:18,560
Ik moet een manier vinden om een ​​soort van duw hem terug te vinden.

90
00:05:18,560 --> 00:05:21,830
Met andere woorden, I soort moet deze tekenen.

91
00:05:21,830 --> 00:05:26,060
Wat we gaan doen is gaan we de to-do lijst te trekken.

92
00:05:26,060 --> 00:05:29,270
Ik moet aan andere HTML werken op die pagina,

93
00:05:29,270 --> 00:05:32,040
en zoals je kunt zien, heb ik deze kleine container hier linksaf,

94
00:05:32,040 --> 00:05:36,840
Deze verdeler van de pagina waarvan de ID is todos,

95
00:05:36,840 --> 00:05:40,870
en ik ga naar de takenlijst daar te zetten.

96
00:05:40,870 --> 00:05:47,240
Eerst ga ik het duidelijk uit omdat, zeggen, er was een oude takenlijst daar.

97
00:05:47,240 --> 00:05:49,560
Ik krijg dat element door ID weer,

98
00:05:49,560 --> 00:05:54,530
en ik ben de toegang tot de innerlijke HTML van dat element,

99
00:05:54,530 --> 00:05:58,010
en ik ga duidelijk dat.

100
00:05:58,010 --> 00:06:05,510
Als we vertrokken deze code zo is, zouden we een blanco daar niets te zien,

101
00:06:05,510 --> 00:06:10,410
en nu wil ik beginnen renderen mijn nieuwe to-do lijst.

102
00:06:10,410 --> 00:06:12,870
Ik ben in principe gaat om het afschaffen van mijn to-do lijst.

103
00:06:12,870 --> 00:06:18,180
>> Nu de binnenste HTML binnenkant van dat todos div is volledig helder,

104
00:06:18,180 --> 00:06:20,060
en nu moet ik beginnen met het toevoegen van mijn lijst.

105
00:06:20,060 --> 00:06:23,890
Het eerste wat ik wil terug toe te voegen is de ongeordende lijst-tag,

106
00:06:23,890 --> 00:06:33,890
die in feite geeft aan dat dit het begin is van een ongeordende lijst.

107
00:06:33,890 --> 00:06:39,770
Nu voor elk element in mijn todos scala ik wil het uitprinten binnenkant van dat HTML.

108
00:06:39,770 --> 00:06:43,710
Ik wil het toevoegen aan de onderkant van deze lijst.

109
00:06:43,710 --> 00:06:49,040
Net als in C, kan ik gebruik maken van een lus, en ik ga om te beginnen bij het begin van mijn lijst

110
00:06:49,040 --> 00:06:54,140
bij element 0, en ik ga helemaal naar de lengte van de lijst gaan.

111
00:06:54,140 --> 00:07:01,100
We kunnen eigenlijk de lengte van een array in JavaScript met de eigenschap length.

112
00:07:01,100 --> 00:07:03,420
In principe ga ik iets vergelijkbaars doen binnenkant van hier

113
00:07:03,420 --> 00:07:05,600
om uit te printen dat element.

114
00:07:05,600 --> 00:07:12,970
Ik kan weer toegang krijgen tot de todos div, de binnenste HTML eigenschap van dat,

115
00:07:12,970 --> 00:07:17,560
en ik ga te voegen op dit nieuwe item in de lijst, en dat gaat worden omringd door

116
00:07:17,560 --> 00:07:25,390
deze li-tag, en ik ga samenvoegen met de operator +,

117
00:07:25,390 --> 00:07:28,040
en dat is de ide element van mijn todos array,

118
00:07:28,040 --> 00:07:32,380
en dan ga ik naar die tag te sluiten.

119
00:07:32,380 --> 00:07:36,240
Nu voor elk element zullen we een nieuw item in de lijst toe te voegen.

120
00:07:36,240 --> 00:07:48,700
En dan alles wat we echt moeten doen is af te sluiten die tag.

121
00:07:48,700 --> 00:07:52,820
Ik moet alleen af ​​te sluiten die lijst tag ongeordend.

122
00:07:52,820 --> 00:07:55,490
>> Heb je een gevoel voor hoe dat werkt te krijgen?

123
00:07:55,490 --> 00:07:57,700
Dit opent de hele lijst.

124
00:07:57,700 --> 00:08:01,080
Dit voegt de afzonderlijke elementen uit de todos lijst aan de lijst,

125
00:08:01,080 --> 00:08:05,470
en dan dat de hele lijst gesloten, en dit is mijn addtodo functie.

126
00:08:05,470 --> 00:08:09,590
Ik in principe beginnen met het verkrijgen van de todo van het tekstvak.

127
00:08:09,590 --> 00:08:18,950
Ik voeg dat toe aan de todos array, en dan moet ik opnieuw maken de to-do lijst.

128
00:08:18,950 --> 00:08:21,520
Nu kan ik items toevoegen aan mijn lijst.

129
00:08:21,520 --> 00:08:24,620
Dit is een soort van spannend want in slechts een paar regels code

130
00:08:24,620 --> 00:08:28,240
we hebben in principe gemaakt van een to-do lijst waar we items kunnen toevoegen.

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

132
00:08:30,050 --> 00:08:34,480
Dat is een soort van een basiscursus JavaScript.

133
00:08:34,480 --> 00:08:36,179
Niet te veel zorgen te maken over de syntaxis voor nu,

134
00:08:36,179 --> 00:08:38,130
maar na te denken over dit conceptueel.

135
00:08:38,130 --> 00:08:40,539
We hadden een aantal HTML.

136
00:08:40,539 --> 00:08:45,310
We hadden een tekstvak op de pagina dat in principe toegestaan ​​gebruikers om input een taakitem te voegen.

137
00:08:45,310 --> 00:08:49,210
En dan gebruikten we JavaScript om dat todo halen uit dat tekstvak.

138
00:08:49,210 --> 00:08:52,830
We opgeslagen dat in een JavaScript-array, die in feite als

139
00:08:52,830 --> 00:08:56,010
onze programmatische representatie van die to-do lijst,

140
00:08:56,010 --> 00:08:59,060
en vervolgens afgedrukt we het uit.

141
00:08:59,060 --> 00:09:02,690
Dit is todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Dit is wel cool, maar hoe kunnen we dit verder gaan?

143
00:09:07,620 --> 00:09:11,350
Nou, zoals je kunt zien, is dit niet als een volledige takenlijst.

144
00:09:11,350 --> 00:09:15,100
Bijvoorbeeld, kan ik niet markeren een van deze items als een onvolledige,

145
00:09:15,100 --> 00:09:19,920
graag als ik wilde de items Herinrichten of items te verwijderen.

146
00:09:19,920 --> 00:09:23,150
Dat is oke, maar kunnen we dit verder gaan.

147
00:09:23,150 --> 00:09:29,280
Ik ga niet te veel praten over het toevoegen van extra functies,

148
00:09:29,280 --> 00:09:32,800
maar we konden dat verder brengen.

149
00:09:32,800 --> 00:09:35,970
Laten we praten over het toevoegen van een extra functie om deze to-do lijst,

150
00:09:35,970 --> 00:09:40,370
die zal worden in staat om een ​​individu te-doen post te controleren

151
00:09:40,370 --> 00:09:44,780
en hebben het te worden doorgehaald, dus eigenlijk te zeggen ik heb dit gedaan.

152
00:09:44,780 --> 00:09:50,240
Laten we eens kijken naar enkele code die zou kunnen volbrengen.

153
00:09:50,240 --> 00:09:52,740
Let op wat ik heb gedaan op de top is die ik heb toegevoegd

154
00:09:52,740 --> 00:09:57,620
een nieuwe globale array genaamd compleet.

155
00:09:57,620 --> 00:10:02,890
Ik ben in principe met behulp van deze op te slaan of de items op de to-do list

156
00:10:02,890 --> 00:10:06,560
compleet of niet.

157
00:10:06,560 --> 00:10:08,470
Dit is een manier om dit te doen.

158
00:10:08,470 --> 00:10:13,750
Als ik kijk naar de uitvoering van deze, het scherm,

159
00:10:13,750 --> 00:10:21,120
eigenlijk als ik een todo en ik druk op deze schakelknop

160
00:10:21,120 --> 00:10:25,040
het kruist, dus elk item op deze lijst heeft ofwel een volledige

161
00:10:25,040 --> 00:10:31,050
of onvolledige staat, en ik ben met behulp van een andere array te vertegenwoordigen dat.

162
00:10:31,050 --> 00:10:33,730
>> In principe voor elke todo in die todos matrix

163
00:10:33,730 --> 00:10:37,110
er is een item in de volledige array die eigenlijk aangeeft

164
00:10:37,110 --> 00:10:39,060
of die volledig is of niet.

165
00:10:39,060 --> 00:10:41,640
Ik moest vrij minimale wijzigingen aan te brengen in deze code,

166
00:10:41,640 --> 00:10:44,470
dus hier is onze addtodo functie.

167
00:10:44,470 --> 00:10:48,530
Merk op dat hier ben ik het op de array te duwen,

168
00:10:48,530 --> 00:10:51,300
en dan ben ik het duwen van een 0 naar die volledige array,

169
00:10:51,300 --> 00:10:57,090
in principe parallel met die nieuwe todo push te zeggen

170
00:10:57,090 --> 00:11:00,430
Ik voeg dit artikel, en het is gekoppeld aan deze waarde,

171
00:11:00,430 --> 00:11:02,810
wat betekent dat het onvolledig.

172
00:11:02,810 --> 00:11:04,970
En dan ben ik opnieuw tekenen van de to-do lijst.

173
00:11:04,970 --> 00:11:09,220
Nu, merk ik heb dit drawTodoList functie toegevoegd.

174
00:11:09,220 --> 00:11:11,760
Dit neemt een groot deel van de code die we hadden eerder,

175
00:11:11,760 --> 00:11:15,320
principe ruimt de doos en trekt vervolgens de nieuwe to-do lijst.

176
00:11:15,320 --> 00:11:19,620
, Maar merkt dat de binnenkant van deze for-lus we een beetje meer nu doet.

177
00:11:19,620 --> 00:11:25,000
We zijn eigenlijk te controleren of het item dat overeenkomt met de i-todo hier

178
00:11:25,000 --> 00:11:30,220
is voltooid, en we zijn verschillend gedragen in deze 2 omstandigheden.

179
00:11:30,220 --> 00:11:32,790
Als het voltooid is, voegen we deze del tag,

180
00:11:32,790 --> 00:11:35,360
die in feite is de manier waarop je kunt die staking krijgen door middel van effect

181
00:11:35,360 --> 00:11:38,190
doorhaling van de to-do lijst als het voltooid is,

182
00:11:38,190 --> 00:11:42,200
en als het niet, we zijn niet met inbegrip van het.

183
00:11:42,200 --> 00:11:45,030
En zo dat soort zorgt dat,

184
00:11:45,030 --> 00:11:49,140
>> en dat is een manier om dit te bereiken.

185
00:11:49,140 --> 00:11:53,420
En dan merken wanneer de gebruiker een van deze klikt

186
00:11:53,420 --> 00:11:56,780
We schakelen de voltooiing status van het.

187
00:11:56,780 --> 00:12:02,170
Wanneer de gebruiker klikt, zullen we omkeren of het nu dan niet is voltooid,

188
00:12:02,170 --> 00:12:04,540
en dan zullen we opnieuw te tekenen het.

189
00:12:04,540 --> 00:12:06,190
Dit soort van werken.

190
00:12:06,190 --> 00:12:09,860
We hebben deze functies die hun eigen taken uit te voeren,

191
00:12:09,860 --> 00:12:11,730
en dat is oke.

192
00:12:11,730 --> 00:12:14,110
Is er iets wat we beter kunnen doen over dit, hoewel?

193
00:12:14,110 --> 00:12:18,700
Merken hebben we deze 2 globale arrays.

194
00:12:18,700 --> 00:12:23,550
Als dit was C, en we hadden 2 arrays dat soort vertegenwoordigde

195
00:12:23,550 --> 00:12:25,800
gegevens dat soort gerelateerd was op een bepaalde manier

196
00:12:25,800 --> 00:12:30,140
wat zouden we gebruiken in C om deze 2 velden combineren

197
00:12:30,140 --> 00:12:35,420
in iets dat beide stukken informatie kapselt?

198
00:12:35,420 --> 00:12:37,600
Wil er iemand een suggestie doen?

199
00:12:37,600 --> 00:12:39,450
[Student onverstaanbaar antwoord]

200
00:12:39,450 --> 00:12:42,340
>> Precies, dus we konden een soort van structuur te gebruiken,

201
00:12:42,340 --> 00:12:44,960
en als je terugdenkt aan, zeg, PSET 3,

202
00:12:44,960 --> 00:12:47,350
herinner me dat we hadden woordenboek, en toen moesten we of het woord

203
00:12:47,350 --> 00:12:50,230
was in het woordenboek, en al die informatie werd samengesteld

204
00:12:50,230 --> 00:12:52,420
binnenkant van bepaalde datastructuur.

205
00:12:52,420 --> 00:12:56,390
Een ding dat ik kan doen met deze code om te voorkomen dat deze 2 verschillende arrays

206
00:12:56,390 --> 00:13:01,760
voor soortgelijke stukjes informatie is kan ik deze combineren in een JavaScript-object.

207
00:13:01,760 --> 00:13:07,150
Laten we eens een kijkje nemen op die.

208
00:13:07,150 --> 00:13:11,740
Let op, ik heb slechts een matrix aan de top nu

209
00:13:11,740 --> 00:13:17,650
en wat ik heb gedaan is-en dit is slechts de JavaScript syntax voor soort

210
00:13:17,650 --> 00:13:21,350
creating een letterlijke versie van een object,

211
00:13:21,350 --> 00:13:24,670
en merken dat er 2 woningen, dus we hebben de todo,

212
00:13:24,670 --> 00:13:29,660
en het is samen met de vraag of het volledig of onvolledig bewaard.

213
00:13:29,660 --> 00:13:31,000
Dit is zeer vergelijkbaar code.

214
00:13:31,000 --> 00:13:35,310
We zijn met behulp van de JavaScript-objecten.

215
00:13:35,310 --> 00:13:38,600
Dit soort dingen verbetert.

216
00:13:38,600 --> 00:13:43,850
Zoals nu, zijn al deze terreinen van verwante informatie bij elkaar gehouden.

217
00:13:43,850 --> 00:13:46,410
Wanneer gaan we uit te printen, kunnen we toegang krijgen tot de velden.

218
00:13:46,410 --> 00:13:49,060
>> Merk op hoe we todos [i] doen. Compleet

219
00:13:49,060 --> 00:13:52,880
plaats van afzonderlijk controleren van de volledige array,

220
00:13:52,880 --> 00:13:56,560
en merken wanneer we willen de to-do reeks krijgen we de woning aan-doen krijgen

221
00:13:56,560 --> 00:13:58,750
van die todo, dus dit soort is logisch, want

222
00:13:58,750 --> 00:14:01,660
elk item heeft deze intrinsieke eigenschappen over.

223
00:14:01,660 --> 00:14:05,650
Het heeft een todo, en het heeft of het compleet of niet.

224
00:14:05,650 --> 00:14:11,540
Niet te veel veranderingen zijn er functioneel, maar voegde wat meer aan de code.

225
00:14:11,540 --> 00:14:13,430
Dit is een verbetering op sommige fronten, toch?

226
00:14:13,430 --> 00:14:16,030
Ik bedoel, we meegenomen uit het ontwerp een beetje.

227
00:14:16,030 --> 00:14:20,350
Nu hebben we objecten in principe kapselen deze gegevens.

228
00:14:20,350 --> 00:14:27,130
Is er iets meer we kunnen doen vanaf hier in termen van JavaScript?

229
00:14:27,130 --> 00:14:31,810
Willen merken dat deze code hier

230
00:14:31,810 --> 00:14:34,760
voor het verkrijgen van de innerlijke HTML van een div

231
00:14:34,760 --> 00:14:40,520
is een beetje, denk ik, lang.

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

233
00:14:45,100 --> 00:14:48,400
Een ding dat we kunnen doen om deze code ziet er een beetje vriendelijker

234
00:14:48,400 --> 00:14:51,450
dus ik zou niet hoeven te scrollen naar links en rechts te houden, heen en weer,

235
00:14:51,450 --> 00:14:58,480
is kon ik een library zoals jQuery gebruiken.

236
00:14:58,480 --> 00:15:02,710
>> Laten we eens kijken op Seminar 2,

237
00:15:02,710 --> 00:15:05,880
en dit is dezelfde code, maar het is gedaan met jQuery.

238
00:15:05,880 --> 00:15:08,790
Je mag niet te vertrouwd met jQuery,

239
00:15:08,790 --> 00:15:11,510
maar weet gewoon dat jQuery is een soort van een bibliotheek voor JavaScript

240
00:15:11,510 --> 00:15:15,910
dat maakt het gemakkelijker om zaken als toegang afzonderlijke elementen van de DOM te doen.

241
00:15:15,910 --> 00:15:21,280
Hier in plaats van te zeggen document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Ik kan het veel schonere manier te gebruiken in jQuery,

243
00:15:25,210 --> 00:15:28,490
dat is gewoon te selectors gebruiken.

244
00:15:28,490 --> 00:15:31,300
Zoals je kunt zien, deze code heb een beetje schoner,

245
00:15:31,300 --> 00:15:35,770
zeer vergelijkbaar functioneel, maar dat is het idee.

246
00:15:35,770 --> 00:15:37,980
We tot nu toe gezien een paar dingen,

247
00:15:37,980 --> 00:15:42,010
dus we begonnen met alleen rauwe implementatie webbrowser.

248
00:15:42,010 --> 00:15:45,370
We nieuwe functies toegevoegd en liet zien hoe we het kunnen verbeteren met

249
00:15:45,370 --> 00:15:49,090
net wat we hebben in JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Heeft iemand zie geen problemen met dit ontwerp?

251
00:15:53,300 --> 00:16:01,090
Namelijk, ik denk dat-al dan niet per se problemen, maar laten we zeggen

252
00:16:01,090 --> 00:16:04,830
we waren niet bezig met een to-do lijst-project, en morgen hebben we besloten

253
00:16:04,830 --> 00:16:10,320
we wilden een boodschappenlijstje of een boodschappenlijstje project te maken.

254
00:16:10,320 --> 00:16:14,150
Veel van deze functies zijn zeer vergelijkbaar.

255
00:16:14,150 --> 00:16:19,080
Veel van de dingen die we willen om eruit te komen van de webbrowser zijn zeer vaak,

256
00:16:19,080 --> 00:16:23,820
en dat onderstreept de noodzaak van een soort manier van

257
00:16:23,820 --> 00:16:25,670
waardoor deze gemakkelijker te doen zijn.

258
00:16:25,670 --> 00:16:30,400
Ik moest opbouwen dit alles HTML toegang, dit alles DOM toegang,

259
00:16:30,400 --> 00:16:35,530
alsof ik ga naar de to-do lijst te vertegenwoordigen met dit model.

260
00:16:35,530 --> 00:16:39,130
En let op ik ben verantwoordelijk als de JavaScript-ontwikkelaar

261
00:16:39,130 --> 00:16:42,890
voor het houden van de HTML en JavaScript die ik heb in sync.

262
00:16:42,890 --> 00:16:48,040
Niets automatisch gemaakt dat JavaScript vertegenwoordiging

263
00:16:48,040 --> 00:16:51,590
of de to-do lijst krijgen geduwd naar HTML.

264
00:16:51,590 --> 00:16:54,000
Niets afgedwongen dat, behalve voor mij.

265
00:16:54,000 --> 00:16:56,880
Ik moest de loting takenlijst functie te schrijven.

266
00:16:56,880 --> 00:17:01,650
En dat kan niet, ik bedoel, het is redelijk om dat te doen,

267
00:17:01,650 --> 00:17:03,670
maar het kan soms vervelend.

268
00:17:03,670 --> 00:17:08,190
Als u een groter project, dat moeilijk kan zijn.

269
00:17:08,190 --> 00:17:10,720
>> Kaders, een van de doelen van de kaders

270
00:17:10,720 --> 00:17:14,060
is om dat proces en de soort van factor vereenvoudigen out

271
00:17:14,060 --> 00:17:16,950
deze gemeenschappelijke-ik denk dat je kon zeggen-design patterns

272
00:17:16,950 --> 00:17:20,700
die mensen hebben over het algemeen een soort manier te vertegenwoordigen gegevens,

273
00:17:20,700 --> 00:17:25,599
of dat nu een lijst met vrienden, of dat nu kaartinformatie

274
00:17:25,599 --> 00:17:27,280
of iets of een to-do lijst.

275
00:17:27,280 --> 00:17:30,660
Sommige mensen hebben over het algemeen een manier van representatie van informatie,

276
00:17:30,660 --> 00:17:33,650
en ze moeten in het algemeen te houden dat informatie soort in sync

277
00:17:33,650 --> 00:17:36,520
tussen wat de gebruiker ziet in een soort gezien,

278
00:17:36,520 --> 00:17:39,850
spreken in termen van, zoals het model view controller die je zag in collegezaal,

279
00:17:39,850 --> 00:17:45,400
en vervolgens het, in dit geval is dit toestaat array.

280
00:17:45,400 --> 00:17:49,020
Kaders geven ons een manier om dat probleem op te lossen.

281
00:17:49,020 --> 00:17:53,080
Laten we nu eens een kijkje nemen op de uitvoering van deze to-do lijst

282
00:17:53,080 --> 00:18:02,360
in een kader genaamd angularjs.

283
00:18:02,360 --> 00:18:04,650
Dit is het. Merkt het past op een dia.

284
00:18:04,650 --> 00:18:07,330
Ik heb niet om naar links en rechts te scrollen.

285
00:18:07,330 --> 00:18:10,460
Dat is waarschijnlijk niet een goede reden om aan te bevelen het gebruik van een raamwerk,

286
00:18:10,460 --> 00:18:20,120
maar merken ben ik ooit toegang afzonderlijke HTML-elementen hier?

287
00:18:20,120 --> 00:18:22,400
Ben ik ooit gaan in de DOM?

288
00:18:22,400 --> 00:18:26,120
Ken je alle document.getElementById of iets dergelijks te zien?

289
00:18:26,120 --> 00:18:29,870
Nee, dat is gegaan.

290
00:18:29,870 --> 00:18:35,590
>> Hoekige helpt ons houden de DOM en onze JavaScript representatie van iets

291
00:18:35,590 --> 00:18:40,430
soort in sync, dus als het niet in het js bestand,

292
00:18:40,430 --> 00:18:46,790
als er geen manier om programmatisch krijgen om al dat HTML-inhoud

293
00:18:46,790 --> 00:18:51,800
van de JavaScript hoe houden we deze in sync?

294
00:18:51,800 --> 00:18:58,160
Als het niet in het. Js-bestand, dan moet het zijn in HTML, toch?

295
00:18:58,160 --> 00:19:01,910
Dit is de nieuwe versie van het HTML-bestand,

296
00:19:01,910 --> 00:19:04,660
en merken we hebben hier veel toegevoegd.

297
00:19:04,660 --> 00:19:11,110
Merkt dat er deze nieuwe attributen die ng-klik en ng-repeat zeggen.

298
00:19:11,110 --> 00:19:15,650
Hoekige's aanpak voor het oplossen van dit probleem van de problemen bij het ontwerp

299
00:19:15,650 --> 00:19:19,130
is om in principe te maken HTML veel krachtiger.

300
00:19:19,130 --> 00:19:24,420
Hoekige is een manier waardoor je HTML wat expressiever te maken.

301
00:19:24,420 --> 00:19:30,520
Bijvoorbeeld, kan ik zeggen dat ik ga dit tekstvak binden of te binden

302
00:19:30,520 --> 00:19:35,080
aan een variabele binnen mijn hoekige JavaScript-code.

303
00:19:35,080 --> 00:19:37,030
Dit ng-model doet precies dat.

304
00:19:37,030 --> 00:19:41,550
Dat in principe zegt dat het item binnenkant van dit tekstvak,

305
00:19:41,550 --> 00:19:45,000
gewoon associëren dat met de variabele new_todo_description

306
00:19:45,000 --> 00:19:47,870
binnen de JavaScript-code.

307
00:19:47,870 --> 00:19:51,600
Dat is erg krachtig omdat ik niet te expliciet naar

308
00:19:51,600 --> 00:19:53,310
de DOM om die informatie te krijgen.

309
00:19:53,310 --> 00:19:56,250
Ik hoef niet te document.getElementById zeggen.

310
00:19:56,250 --> 00:19:58,750
Ik hoef niet te jQueries zoals DOM toegang te gebruiken.

311
00:19:58,750 --> 00:20:03,280
Ik kan het associëren met een variabele, en toen ik dat veranderen variabele

312
00:20:03,280 --> 00:20:07,400
binnen JavaScript het wordt bewaard in sync met de HTML,

313
00:20:07,400 --> 00:20:11,640
zodat het proces met heen en weer tussen de twee vereenvoudigt.

314
00:20:11,640 --> 00:20:18,260
Is dat zinvol?

315
00:20:18,260 --> 00:20:22,060
>> En merkt dat er geen HTML toegangscode.

316
00:20:22,060 --> 00:20:27,760
We hebben net HTML krachtiger gemaakt,

317
00:20:27,760 --> 00:20:32,070
en nu, bijvoorbeeld, kunnen we dingen doen als dit,

318
00:20:32,070 --> 00:20:38,610
zoals wanneer je hierop klikt, noemen deze functie binnen de reikwijdte van todos.js,

319
00:20:38,610 --> 00:20:43,410
en we konden dat doen vóór, maar er zijn andere dingen, zoals deze ng-model,

320
00:20:43,410 --> 00:20:47,020
en merken dit ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Wat denk je dat dit doet?

322
00:20:51,520 --> 00:20:54,390
Hier is onze ongeordende lijst van voor.

323
00:20:54,390 --> 00:20:56,470
We hebben de ul-tags,

324
00:20:56,470 --> 00:21:03,710
maar ben ik ooit renderen die lijst binnenkant van de JavaScript-code?

325
00:21:03,710 --> 00:21:09,280
Ik ben niet altijd expliciet renderen die lijst.

326
00:21:09,280 --> 00:21:11,580
Hoe werkt dit?

327
00:21:11,580 --> 00:21:16,410
Nou, de manier waarop Hoekige verwezenlijkt dit is dit is een repeater genoemd.

328
00:21:16,410 --> 00:21:22,760
In principe is deze zegt dat ik wil deze HTML drukken

329
00:21:22,760 --> 00:21:26,240
voor elke todo binnenkant van mijn todos array.

330
00:21:26,240 --> 00:21:31,850
Binnenkant van todos.jr er een todos scala hier,

331
00:21:31,850 --> 00:21:37,910
en dit zal Hoekige gaan vertellen door middel van de matrix, en voor elk element zie je

332
00:21:37,910 --> 00:21:41,390
Ik wil dat je dit HTML drukken.

333
00:21:41,390 --> 00:21:44,620
Dit is een soort van geweldig want ik kan gewoon doen

334
00:21:44,620 --> 00:21:47,760
zonder een te schrijven voor lus,

335
00:21:47,760 --> 00:21:52,250
die voor een to-do lijst die was slechts 30 regels code

336
00:21:52,250 --> 00:21:54,700
kan de meest gunstige zaak zijn,

337
00:21:54,700 --> 00:22:01,240
maar als je een groot project, kan dit erg handig.

338
00:22:01,240 --> 00:22:06,100
>> Dit is een oplossing voor dit probleem, waardoor HTML krachtiger,

339
00:22:06,100 --> 00:22:10,820
en dat ons toelaat om JavaScript en HTML synchroon te houden.

340
00:22:10,820 --> 00:22:13,220
Er zijn andere manieren om dit probleem op te lossen,

341
00:22:13,220 --> 00:22:15,320
en niet elke kader doet dit.

342
00:22:15,320 --> 00:22:17,720
Niet elke kader werkt langs deze lijnen.

343
00:22:17,720 --> 00:22:19,490
Sommige kaders hebben verschillende benaderingen,

344
00:22:19,490 --> 00:22:23,310
en u kunt vinden dat u geniet van codering in een kader over de andere.

345
00:22:23,310 --> 00:22:26,160
Laten we eens kijken naar een meer.

346
00:22:26,160 --> 00:22:30,060
Dit is de to-do lijst up gecodeerd in een kader genaamd Backbone.

347
00:22:30,060 --> 00:22:33,250
Ik ga snel door dit.

348
00:22:33,250 --> 00:22:38,300
Ik zal beginnen met de HTML voordat we er heen gaan.

349
00:22:38,300 --> 00:22:40,290
Een seconde.

350
00:22:40,290 --> 00:22:43,950
Te beginnen met de HTML, zoals u merkt, onze HTML is zeer vergelijkbaar

351
00:22:43,950 --> 00:22:50,000
tot wat het vroeger was, dus niet te veel nieuwe op dat front.

352
00:22:50,000 --> 00:22:55,410
Maar onze js-bestand is een beetje anders.

353
00:22:55,410 --> 00:23:00,360
Backbone soort heeft dit idee, of bouwt voort op het idee

354
00:23:00,360 --> 00:23:04,750
dat veel van wat we doen, laten we zeggen, onze webbrowser projecten

355
00:23:04,750 --> 00:23:09,110
is na te denken over modellen en collecties van deze modellen.

356
00:23:09,110 --> 00:23:12,510
Dit kan bijvoorbeeld een foto en fotocollecties,

357
00:23:12,510 --> 00:23:16,230
of het idee van een vriend en collecties van vrienden.

358
00:23:16,230 --> 00:23:20,700
En vaak als we het programmeren van JavaScript-toepassingen

359
00:23:20,700 --> 00:23:25,340
we zullen sorteren van vertegenwoordigen het idee van een verzameling van vrienden

360
00:23:25,340 --> 00:23:29,500
een of andere manier in JavaScript en Backbone geeft ons deze laag

361
00:23:29,500 --> 00:23:33,040
op de top van JavaScript's bestaande arrays en objecten

362
00:23:33,040 --> 00:23:38,300
om meer krachtige dingen makkelijker doen met die.

363
00:23:38,300 --> 00:23:41,870
>> Hier heb ik een to-do-model gedefinieerd,

364
00:23:41,870 --> 00:23:44,630
en je hoeft niet te veel zorgen over de syntaxis,

365
00:23:44,630 --> 00:23:48,730
maar merken dat wat is een van de eigenschappen van deze?

366
00:23:48,730 --> 00:23:53,190
Het heeft een standaard veld.

367
00:23:53,190 --> 00:23:56,640
Backbone kan ik opgeven reeds uit de vleermuis

368
00:23:56,640 --> 00:24:00,190
elke nieuwe te-doen die ik maak gaat deze standaardinstellingen hebben.

369
00:24:00,190 --> 00:24:04,100
Nu kan ik dit aanpassen, maar de mogelijkheid om de standaardinstellingen te specificeren

370
00:24:04,100 --> 00:24:07,220
is mooi, en het is een soort van handige want dit is niet iets dat is net

371
00:24:07,220 --> 00:24:10,430
inherent aan JavaScript, en nu heb ik niet te expliciet

372
00:24:10,430 --> 00:24:12,430
zeggen dat de todos onvolledig.

373
00:24:12,430 --> 00:24:19,190
Ik kan zeggen dat recht uit de vleermuis dat todos zullen worden gemarkeerd als onvolledig.

374
00:24:19,190 --> 00:24:21,300
Let op wat is dit?

375
00:24:21,300 --> 00:24:25,520
Nu heb ik een to-do lijst, en dat is een verzameling.

376
00:24:25,520 --> 00:24:30,960
Let op het veld in verband met dat model todo zegt.

377
00:24:30,960 --> 00:24:33,390
Dit is mijn manier om te vertellen dat Backbone

378
00:24:33,390 --> 00:24:37,350
Ik ga te denken over een verzameling van deze individuele todos.

379
00:24:37,350 --> 00:24:42,140
Dit is eigenlijk de modelstructuur voor mijn programma.

380
00:24:42,140 --> 00:24:44,980
Hier heb ik dit idee van een verzameling,

381
00:24:44,980 --> 00:24:48,960
en eigenlijk de items in die collectie zijn allemaal gaat worden deze todos,

382
00:24:48,960 --> 00:24:51,910
en dat is heel natuurlijk in deze zin

383
00:24:51,910 --> 00:24:59,890
want ik heb wel todos, en ik heb ze in een collectie.

384
00:24:59,890 --> 00:25:02,940
>> Laten we eens kijken naar een beetje meer van dit.

385
00:25:02,940 --> 00:25:05,900
Hier is een Backbone uitzicht.

386
00:25:05,900 --> 00:25:08,890
Het andere ding dat Backbone zegt is dat

387
00:25:08,890 --> 00:25:14,660
veel van de modellen die je denkt over of zelfs verzamelingen

388
00:25:14,660 --> 00:25:19,150
gaat nodig hebben om een ​​manier worden weergegeven hebben.

389
00:25:19,150 --> 00:25:21,900
We moeten maken dat de to-do lijst,

390
00:25:21,900 --> 00:25:25,460
en zou het niet mooi zijn als we zouden kunnen bieden voor elk model

391
00:25:25,460 --> 00:25:28,390
of associëren met elk model deze visie

392
00:25:28,390 --> 00:25:34,020
die ons in staat stelt om te raden Ik sluit de twee samen?

393
00:25:34,020 --> 00:25:38,320
Terwijl voordat we moesten een gebruiken voor lus die door zou lopen

394
00:25:38,320 --> 00:25:41,130
elke todo in onze lijst en dan print het uit hier

395
00:25:41,130 --> 00:25:44,650
kunnen we in principe aansluiten bij dit model.

396
00:25:44,650 --> 00:25:47,550
Dit is een to-do-view.

397
00:25:47,550 --> 00:25:50,550
Dit wordt geassocieerd met de todo we eerder gevonden.

398
00:25:50,550 --> 00:25:54,940
Nu elke todo is toonbare of renderable

399
00:25:54,940 --> 00:25:56,960
door deze to-do view.

400
00:25:56,960 --> 00:25:59,440
Opvallen dat sommige van de velden.

401
00:25:59,440 --> 00:26:05,880
Wat denk je dat dit tagName is, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Herinneren van vroeger toen we wilden een todo maken

403
00:26:09,790 --> 00:26:16,700
we zouden moeten expliciet koppelen onze todos met deze li-tag.

404
00:26:16,700 --> 00:26:21,080
Nu we zeggen dat wanneer dit todo gaat wonen

405
00:26:21,080 --> 00:26:25,250
gaat worden binnen van een li-tag.

406
00:26:25,250 --> 00:26:31,440
En nu zijn we ook associëren evenementen met onze todos.

407
00:26:31,440 --> 00:26:34,320
>> Elke todo heeft dit evenement.

408
00:26:34,320 --> 00:26:38,480
Als je vrij veel op de schakelknop, dat is wat ik daar zeg,

409
00:26:38,480 --> 00:26:43,080
dan is in principe markeer de todo als het tegenovergestelde van wat het vroeger was

410
00:26:43,080 --> 00:26:45,890
en vervolgens opnieuw maken van de applicatie.

411
00:26:45,890 --> 00:26:47,810
Dit soort gelijk aan de code voor.

412
00:26:47,810 --> 00:26:50,730
Weet je nog toen we gemerkt dat als ofwel het tegenovergestelde of-

413
00:26:50,730 --> 00:26:52,410
en dan zijn we opnieuw gerenderd het.

414
00:26:52,410 --> 00:26:57,750
Maar let nu deze gebeurtenis gebruikt om iets dat was in de HTML worden.

415
00:26:57,750 --> 00:26:59,640
Het zat daar.

416
00:26:59,640 --> 00:27:01,410
De toets had een op te klikken.

417
00:27:01,410 --> 00:27:05,310
Wanneer u klikt op de knop, het soort doet het spul aan

418
00:27:05,310 --> 00:27:07,210
opgezet dat todo onvolledig te zijn.

419
00:27:07,210 --> 00:27:11,180
Hier hebben we die gebeurtenis van het klikken op die knop toggle gekoppeld

420
00:27:11,180 --> 00:27:15,830
en het omkeren of het nu aan of uit met deze visie.

421
00:27:15,830 --> 00:27:20,480
>> Dit is een leuke manier van het opzetten van dit evenement, zodat het zeer stevig gebonden

422
00:27:20,480 --> 00:27:26,980
deze visie, en dus merken dit een meer.

423
00:27:26,980 --> 00:27:31,050
Ik heb deze render methode, en we hoeven niet te gaan door de details.

424
00:27:31,050 --> 00:27:33,650
Het is een beetje vergelijkbaar met wat we hadden eerder,

425
00:27:33,650 --> 00:27:36,070
maar merk dat ik ben niet doorlussen niets.

426
00:27:36,070 --> 00:27:40,700
Ik ben niet afdrukt dat ul-tag die is een soort van te zeggen ik ga alle elementen af ​​te drukken.

427
00:27:40,700 --> 00:27:46,610
Ik ben het verstrekken van de functionaliteit voor het renderen van deze ene taakitem.

428
00:27:46,610 --> 00:27:49,400
Dit is een zeer krachtig concept omdat het in principe

429
00:27:49,400 --> 00:27:53,600
onze to-do lijst bestaat uit al deze todos, en als we in principe kunnen specificeren

430
00:27:53,600 --> 00:27:56,890
de weg naar een van die todos maken

431
00:27:56,890 --> 00:28:04,230
dan kunnen we onze krachtige backbone per se moeten maken alle van de todos

432
00:28:04,230 --> 00:28:07,760
door te bellen naar de render methode op individuele todos.

433
00:28:07,760 --> 00:28:14,180
Dit is een concept dat is nuttig hier.

434
00:28:14,180 --> 00:28:18,160
Nu is een goede vraag is hoe wordt deze toepassing wordt in elkaar gezet?

435
00:28:18,160 --> 00:28:21,200
Want we hebben de mogelijkheid om een ​​todo maken,

436
00:28:21,200 --> 00:28:23,860
maar hoe krijgen we het idee van meervoudige todos?

437
00:28:23,860 --> 00:28:25,100
>> Laten we eens een kijkje nemen op die.

438
00:28:25,100 --> 00:28:27,100
Dit is het laatste deel.

439
00:28:27,100 --> 00:28:29,740
Merken we een to-do list view hier,

440
00:28:29,740 --> 00:28:34,440
en merken dat het ook een uitzicht.

441
00:28:34,440 --> 00:28:36,970
En te gaan over een paar dingen,

442
00:28:36,970 --> 00:28:45,280
Dit initialize methode wordt aangeroepen wanneer we voor het eerst dit aan-do lijst te maken.

443
00:28:45,280 --> 00:28:52,630
Zoals je kunt zien, het is net als het maken van de to-do lijst en associëren het met deze zienswijze.

444
00:28:52,630 --> 00:28:57,860
En toen voegde ik de functies hier dus in principe wanneer u een item toevoegen-

445
00:28:57,860 --> 00:29:01,440
Dit is vergelijkbaar met de werkwijze addItem zagen eerder

446
00:29:01,440 --> 00:29:07,430
Ik ga een nieuwe todo object te maken, en merk ik eigenlijk bellen

447
00:29:07,430 --> 00:29:13,080
Deze nieuwe todo methode, dus dit wordt verzorgd door Backbone,

448
00:29:13,080 --> 00:29:16,010
en ik kan hier passeren in mijn eigenschappen.

449
00:29:16,010 --> 00:29:23,710
En nu elke todo dat ik creëert met dit zal die functionaliteit die we eerder zagen komen.

450
00:29:23,710 --> 00:29:28,140
Let op, ik ben het opruimen van het tekstvak voordat-een klein klein detail-

451
00:29:28,140 --> 00:29:32,900
en dan ben ik het toevoegen van deze collectie.

452
00:29:32,900 --> 00:29:37,630
>> Dit lijkt bijna raar want voordat we moesten dat todos.push doen,

453
00:29:37,630 --> 00:29:43,310
en toen we klaar waren, en dit lijkt ingewikkelder voor dit specifieke project,

454
00:29:43,310 --> 00:29:46,980
en je kan dat Backbone of zelfs hoekige of enig ander kader te vinden

455
00:29:46,980 --> 00:29:50,790
niet past bij uw specifieke project, maar ik denk dat het belangrijk is om na te denken over

456
00:29:50,790 --> 00:29:54,100
wat dit betekent op grotere schaal voor grotere projecten,

457
00:29:54,100 --> 00:29:56,610
want als we hadden een groter project waar we vertegenwoordigen

458
00:29:56,610 --> 00:30:00,860
sommige echt complexe verzameling, iets dieper dan alleen maar een to-do lijst,

459
00:30:00,860 --> 00:30:04,490
laten we zeggen een lijst met vrienden of iets dergelijks, kan dit van pas komen

460
00:30:04,490 --> 00:30:09,620
want we konden onze code te organiseren in een heel handige manier,

461
00:30:09,620 --> 00:30:12,550
op een manier die het voor iemand anders zou

462
00:30:12,550 --> 00:30:16,820
die wilden halen een project te bouwen op.

463
00:30:16,820 --> 00:30:21,450
Je kunt zien dat dit biedt veel structuur.

464
00:30:21,450 --> 00:30:26,580
En toen ik bel maken op deze addItem.

465
00:30:26,580 --> 00:30:31,050
Maken, zoals je kunt zien, en je hoeft niet om deze volledige syntax te begrijpen,

466
00:30:31,050 --> 00:30:37,790
maar in principe voor elk model het gaat om de individuele render methode noemen.

467
00:30:37,790 --> 00:30:41,500
Dat is een soort waar dit vandaan komt.

468
00:30:41,500 --> 00:30:44,140
Laten we gewoon opgeven hoe de individuele todos maken,

469
00:30:44,140 --> 00:30:47,310
en laten we dan lijm ze aan elkaar als een geheel.

470
00:30:47,310 --> 00:30:49,810
Maar dit is een manier van abstractie,

471
00:30:49,810 --> 00:30:55,470
want ik kon de manier waarop ik besluit om de individuele todos maken wijzigen,

472
00:30:55,470 --> 00:30:57,940
en ik zou niet aan een van deze code te wijzigen.

473
00:30:57,940 --> 00:31:00,700
Dat is wel cool.

474
00:31:00,700 --> 00:31:08,540
>> Heeft iemand nog vragen hebben over JavaScript-frameworks?

475
00:31:08,540 --> 00:31:14,310
[Student onhoorbare vraag]

476
00:31:14,310 --> 00:31:16,050
Oh, zeker, dat is een grote vraag.

477
00:31:16,050 --> 00:31:19,080
De vraag was hoe heb ik onder meer de kaders?

478
00:31:19,080 --> 00:31:22,970
De meeste JavaScript-frameworks zijn eigenlijk gewoon js bestanden

479
00:31:22,970 --> 00:31:25,740
die u kunt opnemen op de top van je code.

480
00:31:25,740 --> 00:31:29,830
Merk op dat in het hoofd gedeelte van mijn HTML Ik heb al deze script-tags,

481
00:31:29,830 --> 00:31:34,250
en het uiteindelijke script-tag is de code die we hebben geschreven.

482
00:31:34,250 --> 00:31:38,820
En dan de 3 kader codes zijn ook script-tags.

483
00:31:38,820 --> 00:31:42,110
Ik ben ze op te nemen van wat een CDN genoemd,

484
00:31:42,110 --> 00:31:46,200
die me in staat stelt om het te krijgen van iemand anders op dit punt

485
00:31:46,200 --> 00:31:57,930
maar elke kader heeft dit-u kan de inhoud vrij veel vinden

486
00:31:57,930 --> 00:32:03,540
voor een bepaalde JavaScript-bibliotheek beschikbaar op sommige CDN of iets dergelijks,

487
00:32:03,540 --> 00:32:05,570
en dan kun je die script-tags.

488
00:32:05,570 --> 00:32:07,600
Is dat zinvol?

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

490
00:32:09,500 --> 00:32:11,730
>> Dat zijn 2 verschillende benaderingen.

491
00:32:11,730 --> 00:32:14,640
Dit zijn niet de enige benadering voor dit probleem.

492
00:32:14,640 --> 00:32:17,080
Er zijn veel verschillende dingen die

493
00:32:17,080 --> 00:32:19,490
iemand kon doen, en er zijn vele kaders die er zijn.

494
00:32:19,490 --> 00:32:23,300
Hoekig en Backbone vertellen niet het hele verhaal.

495
00:32:23,300 --> 00:32:26,370
Veel succes met je laatste projecten, en heel erg bedankt.

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