1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminaar] [JavaScript raamwerke: Hoekom en Hoe]

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

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

4
00:00:06,960 --> 00:00:10,630
>> Hi, almal. Welkom by die JavaScript raamwerke seminaar.

5
00:00:10,630 --> 00:00:14,910
My naam is Kevin, en vandag ek gaan om te praat oor JavaScript raamwerke,

6
00:00:14,910 --> 00:00:20,400
en die doel van hierdie seminaar is nie om jou te kry om te sê, 'n bepaalde raamwerk per se knie

7
00:00:20,400 --> 00:00:23,810
maar om te gee jou 'n breë inleiding tot 'n paar van die raamwerke

8
00:00:23,810 --> 00:00:27,150
en wys waarom ons ooit sal wil hê om 'n raamwerk te gebruik.

9
00:00:27,150 --> 00:00:31,060
>> Voordat ek dit doen, sal ek 'n bietjie agtergrond in JavaScript,

10
00:00:31,060 --> 00:00:33,750
en dan sal ons dit van daar af.

11
00:00:33,750 --> 00:00:36,270
Ons gaan om te begin met die implementering van 'n to-do list.

12
00:00:36,270 --> 00:00:39,330
Hier is ons taak lys vir vandag.

13
00:00:39,330 --> 00:00:41,990
Dit is soort van snaaks. Ons het 'n to-do list in JavaScript te implementeer.

14
00:00:41,990 --> 00:00:45,110
Dit is wat dit gaan lyk, so dit is ons eerste doelwit.

15
00:00:45,110 --> 00:00:47,160
Ons gaan nie 'n raamwerk te gebruik om dit te doen.

16
00:00:47,160 --> 00:00:51,930
Ons gaan om te kode JavaScript en kry die te-doen-lys te werk.

17
00:00:51,930 --> 00:00:54,370
Dan gaan ons die ontwerp te verbeter sonder die gebruik van 'n raamwerk.

18
00:00:54,370 --> 00:00:57,190
Ons gaan die verskillende dinge wat ons kan doen met net JavaScript alleen te bespreek

19
00:00:57,190 --> 00:01:00,650
ons te maak lys te-doen 'n bietjie meer goed ontwerp.

20
00:01:00,650 --> 00:01:02,490
Toe het ons gaan om te gooi in 'n paar jQuery,

21
00:01:02,490 --> 00:01:05,030
en dan gaan ons kyk na die dieselfde lys te-doen,

22
00:01:05,030 --> 00:01:07,170
net geïmplementeer word in verskillende raamwerke, en ons sal bespreek

23
00:01:07,170 --> 00:01:09,280
 die voor-en nadele langs die pad.

24
00:01:09,280 --> 00:01:12,040
>> Kom ons begin met die implementering daardie lys te-doen.

25
00:01:12,040 --> 00:01:14,270
Kom ons sê dat ons hierdie HTML is gegee.

26
00:01:14,270 --> 00:01:16,620
Ek gaan om te maak dit 'n bietjie kleiner.

27
00:01:16,620 --> 00:01:19,300
Soos jy kan sien, ek het 'n bietjie kop wat sê Todo

28
00:01:19,300 --> 00:01:21,740
en 'n bietjie box waar ek kan 'n beskrywing van 'n taak gee

29
00:01:21,740 --> 00:01:26,990
en dan 'n nuwe item knoppie, so laat ons probeer om 'n nuwe taak te tree by die lys.

30
00:01:26,990 --> 00:01:31,000
Gee 'n JavaScript raamwerke seminaar,

31
00:01:31,000 --> 00:01:33,090
en ek is nuwe item te tref.

32
00:01:33,090 --> 00:01:35,730
Ek kry hierdie JavaScript waarskuwing wat sê implementeer me.

33
00:01:35,730 --> 00:01:37,560
Ons het dit te implementeer.

34
00:01:37,560 --> 00:01:41,490
Kom ons kyk na die kode vir hierdie, beide die HTML en JavaScript.

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

36
00:01:43,260 --> 00:01:45,500
Soos jy hier kan sien, hier is ons klein Todos kop.

37
00:01:45,500 --> 00:01:47,620
Dit was dat dapper ding op die top,

38
00:01:47,620 --> 00:01:50,690
en dan het ons die insette boks met die plekhouer,

39
00:01:50,690 --> 00:01:59,460
en dan is daar 'n sekere eienskap van hierdie knoppie wat noem hierdie funksie Addtodo.

40
00:01:59,460 --> 00:02:05,460
Het enige iemand wil hê om te raai wat dit op die kliek is wat dui op?

41
00:02:05,460 --> 00:02:07,390
[Studente onhoorbaar reaksie]

42
00:02:07,390 --> 00:02:09,289
Goed, die op kliek is soort van soos 'n gebeurtenis,

43
00:02:09,289 --> 00:02:12,120
soos op die muis is net 'n gebeurtenis, en wat ons doen

44
00:02:12,120 --> 00:02:16,890
is ons vasmaak die geval van te kliek hierdie knoppie daardie funksie uit te voer.

45
00:02:16,890 --> 00:02:21,700
Addtodo is hierdie gebeurtenis hanteerder vir die druk dat die knoppie.

46
00:02:21,700 --> 00:02:25,010
>> Soos jy kan sien, wanneer ek op die nuwe item knoppie

47
00:02:25,010 --> 00:02:29,940
die op kliek gebeurtenis kry afgedank, en hierdie funksie kry genoem.

48
00:02:29,940 --> 00:02:33,170
Kom ons kyk na funksie.

49
00:02:33,170 --> 00:02:36,260
Soos jy kan sien, hier is my JavaScript-kode so ver.

50
00:02:36,260 --> 00:02:41,280
Wat ek het op die top is 'n globale data struktuur vir my te-doen-lys.

51
00:02:41,280 --> 00:02:44,060
Dit lyk soos 'n skikking. Dit is net 'n leë skikking.

52
00:02:44,060 --> 00:02:47,100
En dan het ek die Addtodo funksie wat ons vroeër gesien het,

53
00:02:47,100 --> 00:02:50,740
en die enigste reël van die kode in daar is hierdie waarskuwing.

54
00:02:50,740 --> 00:02:55,730
Dit waarskuwings implementeer my, en dan het ek 2 take op hande.

55
00:02:55,730 --> 00:02:58,790
Ek het die taak te voeg by dat die globale data struktuur,

56
00:02:58,790 --> 00:03:01,860
en dan het ek wil trek uit die te-doen-lys.

57
00:03:01,860 --> 00:03:06,360
Niks fancy ook net nog nie, maar JavaScript jy dalk nie vertroud met,

58
00:03:06,360 --> 00:03:12,370
so ek gaan om te gaan stadig en die beginsels van JavaScript op dié manier hersien.

59
00:03:12,370 --> 00:03:15,490
>> Kom ons gee dit 'n skoot.

60
00:03:15,490 --> 00:03:21,130
Kom ons sê die gebruiker iets in hierdie boks.

61
00:03:21,130 --> 00:03:23,360
Ek het net getik iets in hier, teks.

62
00:03:23,360 --> 00:03:27,620
Hoe sorteer ek van toegang wat teks deur JavaScript?

63
00:03:27,620 --> 00:03:32,500
Onthou dat JavaScript, een van die fundamentele kenmerke is dat dit gee ons

64
00:03:32,500 --> 00:03:34,670
hierdie programmatiese toegang tot die DOM.

65
00:03:34,670 --> 00:03:40,670
Dit stel ons in staat elemente en hul eienskappe van hierdie werklike HTML om toegang te verkry.

66
00:03:40,670 --> 00:03:43,430
Die manier waarop ons dit doen met kaal bene JavaScript

67
00:03:43,430 --> 00:03:51,360
is ons eintlik kan gebruik om 'n funksie in JavaScript genoem getElementByID.

68
00:03:51,360 --> 00:03:55,140
Ek wil die teks wat daar getik in 'n veranderlike te slaan,

69
00:03:55,140 --> 00:03:58,350
so ek gaan 'n nuwe veranderlike genoem new_todo om te sê,

70
00:03:58,350 --> 00:04:01,980
en ek gaan dat die element te kry.

71
00:04:01,980 --> 00:04:06,330
Dit is 'n funksie. GetElementByID.

72
00:04:06,330 --> 00:04:11,580
En nou is ek kry 'n element van ID, so ek nodig het om die ID van die teks boks,

73
00:04:11,580 --> 00:04:15,860
so ek het dit gegee om die ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Dit is hoe ek gaan 'n element te kry.

75
00:04:18,399 --> 00:04:23,880
Dit is my argument na hierdie funksie, om te spesifiseer watter ID te kry.

76
00:04:23,880 --> 00:04:28,110
En so het dit is 'n element in HTML, en dit het eienskappe.

77
00:04:28,110 --> 00:04:30,650
Jy het gesien dat hierdie. Hulle is eienskappe.

78
00:04:30,650 --> 00:04:37,090
Die kenmerk van die teks element wat slaan die gebruiker se insette word genoem waarde.

79
00:04:37,090 --> 00:04:40,860
EK het die waarde van die teks boks nou in hierdie veranderlike genoem new_todo.

80
00:04:40,860 --> 00:04:45,040
Nou het ek programmatiese toegang tot hierdie veranderlike, wat is 'n soort van die koel

81
00:04:45,040 --> 00:04:49,200
want nou wat ek kan doen, is ek dit kan byvoeg by my te-doen-lys.

82
00:04:49,200 --> 00:04:52,870
>> Die manier waarop ons dit sou doen in JavaScript-en moenie bekommerd wees as jy bekend is met hierdie,

83
00:04:52,870 --> 00:04:57,010
maar net gaan deur dit todos.push

84
00:04:57,010 --> 00:05:00,130
want dit is die naam van my globale data struktuur hier,

85
00:05:00,130 --> 00:05:04,450
en ek gaan new_todo te stoot.

86
00:05:04,450 --> 00:05:09,120
Dit is groot, want nou het Ek dit saam met my JavaScript

87
00:05:09,120 --> 00:05:11,280
voorstelling van die te-doen-lys.

88
00:05:11,280 --> 00:05:15,170
Maar nou hoe kry ek dit terug na die HTML?

89
00:05:15,170 --> 00:05:18,560
Ek het 'n manier om uit te sorteer druk dit terug te kry.

90
00:05:18,560 --> 00:05:21,830
Met ander woorde, ek soort van hierdie te trek.

91
00:05:21,830 --> 00:05:26,060
Wat ons gaan doen, is ons gaan die te-doen lys te trek.

92
00:05:26,060 --> 00:05:29,270
Ek moet ander HTML te werk op die blad,

93
00:05:29,270 --> 00:05:32,040
en soos jy kan sien, het ek het hierdie klein houer hier,

94
00:05:32,040 --> 00:05:36,840
hierdie deler van die bladsy wie se ID is todos,

95
00:05:36,840 --> 00:05:40,870
en ek gaan die te-doen lys daar te vestig.

96
00:05:40,870 --> 00:05:47,240
Eerste Ek gaan om dit te duidelik uit, want, sê, was daar 'n ou te-doen lys daar.

97
00:05:47,240 --> 00:05:49,560
Ek kry daardie element deur ID weer

98
00:05:49,560 --> 00:05:54,530
en ek is die toegang tot die innerlike HTML van daardie element,

99
00:05:54,530 --> 00:05:58,010
en ek gaan dit skoon te maak.

100
00:05:58,010 --> 00:06:05,510
As ons verlaat hierdie kode soos dit is, sal ons sien 'n leë niks daar nie,

101
00:06:05,510 --> 00:06:10,410
en nou wil ek om te begin die lewering van my nuwe lys te-doen.

102
00:06:10,410 --> 00:06:12,870
Ek is basies gaan om uit te wis my te-doen-lys.

103
00:06:12,870 --> 00:06:18,180
>> Nou is die innerlike HTML binnekant van daardie Besigtig div is heeltemal duidelik nie,

104
00:06:18,180 --> 00:06:20,060
en nou het ek nodig het om te begin met die toevoeging my lys.

105
00:06:20,060 --> 00:06:23,890
Die eerste ding wat ek wil om terug te voeg is die on-geordende lys tag,

106
00:06:23,890 --> 00:06:33,890
wat dui basies dat dit is die begin van 'n geordende lys.

107
00:06:33,890 --> 00:06:39,770
Nou vir elke element in my Besigtig verskeidenheid Ek wil dit uit te druk binnekant van wat HTML.

108
00:06:39,770 --> 00:06:43,710
Ek wil dit by te voeg aan die onderkant van die lys.

109
00:06:43,710 --> 00:06:49,040
Net soos in C, ek kan gebruik om 'n lus vir die, en ek gaan om te begin by die begin van my lys

110
00:06:49,040 --> 00:06:54,140
by element 0, en ek gaan al die pad na die lengte van die lys te gaan.

111
00:06:54,140 --> 00:07:01,100
Ons kan eintlik kry die lengte van 'n skikking in JavaScript deur die lengte eiendom.

112
00:07:01,100 --> 00:07:03,420
Basies Ek gaan iets baie soortgelyks te doen binnekant van hier

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

114
00:07:05,600 --> 00:07:12,970
Ek kan weer toegang tot die Besigtig div, die innerlike HTML eiendom van daardie,

115
00:07:12,970 --> 00:07:17,560
en ek gaan om te voeg op hierdie nuwe lys-item, en wat gaan word omring deur

116
00:07:17,560 --> 00:07:25,390
hierdie li tag, en ek gaan om te koppel met die +-operateur,

117
00:07:25,390 --> 00:07:28,040
en dit is die i element van my Besigtig skikking,

118
00:07:28,040 --> 00:07:32,380
en dan gaan ek daardie merker te sluit.

119
00:07:32,380 --> 00:07:36,240
Nou vir elke element ons sal 'n nuwe lys inskrywing.

120
00:07:36,240 --> 00:07:48,700
En dan is al wat ons regtig nodig het om te doen, is om af te sluit wat tag.

121
00:07:48,700 --> 00:07:52,820
Ek het net nodig om te sluit af dat die on-geordende lys tag.

122
00:07:52,820 --> 00:07:55,490
>> Kry jy 'n gevoel vir hoe dit werk?

123
00:07:55,490 --> 00:07:57,700
Dit maak die hele lys.

124
00:07:57,700 --> 00:08:01,080
Dit voeg individuele elemente van die Besigtig lys na die lys,

125
00:08:01,080 --> 00:08:05,470
en dan sluit die hele lys, en dit is my Addtodo funksie.

126
00:08:05,470 --> 00:08:09,590
Ek het basies begin deur om die taak uit die teks boks.

127
00:08:09,590 --> 00:08:18,950
Voeg ek dit by die Besigtig skikking, en dan het ek weer lewer die te-doen-lys.

128
00:08:18,950 --> 00:08:21,520
Nou kan ek voeg 'n item aan my lys.

129
00:08:21,520 --> 00:08:24,620
Dit is 'n soort van opwindend, want in net 'n paar reëls van die kode

130
00:08:24,620 --> 00:08:28,240
Ons het basies 'n lys te-doen waar ons kan voeg items.

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

132
00:08:30,050 --> 00:08:34,480
Dit is soort van 'n basiese inleiding tot JavaScript.

133
00:08:34,480 --> 00:08:36,179
Moet nie te veel bekommerd wees oor die sintaksis vir nou,

134
00:08:36,179 --> 00:08:38,130
maar dink oor hierdie konseptueel.

135
00:08:38,130 --> 00:08:40,539
Ons het 'n paar HTML.

136
00:08:40,539 --> 00:08:45,310
Ons het 'n tekskassie op die bladsy wat basies gebruikers toegelaat om insette 'n moet-doen-item by te voeg.

137
00:08:45,310 --> 00:08:49,210
En dan moet ons gebruik JavaScript van die taak te haal dat die teks boks.

138
00:08:49,210 --> 00:08:52,830
Ons gestoor wat binne-in 'n JavaScript skikking, wat basies is soos

139
00:08:52,830 --> 00:08:56,010
ons programmatiese voorstelling van die te-doen lys,

140
00:08:56,010 --> 00:08:59,060
en dan sal ons gedrukte dit 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 gaaf, maar hoe kan ons dit verder?

143
00:09:07,620 --> 00:09:11,350
Wel, as jy kan sien, is dit nie soos 'n volledige lys te-doen.

144
00:09:11,350 --> 00:09:15,100
Byvoorbeeld, kan ek nie sien enige van hierdie items as onvolledig,

145
00:09:15,100 --> 00:09:19,920
graag as ek wou die items te reprioritize of items verwyder.

146
00:09:19,920 --> 00:09:23,150
Dit is okay, maar ons kan dit verder.

147
00:09:23,150 --> 00:09:29,280
Ek gaan nie te veel om te praat oor die byvoeging van ekstra funksies,

148
00:09:29,280 --> 00:09:32,800
maar ons kon neem dat verdere.

149
00:09:32,800 --> 00:09:35,970
Kom ons praat oor die toevoeging van een meer funksie om hierdie lys te-doen,

150
00:09:35,970 --> 00:09:40,370
wat gaan word in staat is om 'n individu te-doen-item om te kyk

151
00:09:40,370 --> 00:09:44,780
en het dit gekruis word, so basies sê ek dit gedoen het.

152
00:09:44,780 --> 00:09:50,240
Kom ons kyk na die kode wat kon bereik nie.

153
00:09:50,240 --> 00:09:52,740
Let op wat ek gedoen het op die top is Ek het bygevoeg

154
00:09:52,740 --> 00:09:57,620
'n nuwe globale skikking met die naam voltooi.

155
00:09:57,620 --> 00:10:02,890
Ek is basies die gebruik van hierdie op te slaan of die items op die lys te-doen

156
00:10:02,890 --> 00:10:06,560
voltooi is of nie.

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

158
00:10:08,470 --> 00:10:13,750
As ek kyk na die implementering van hierdie, die vertoning,

159
00:10:13,750 --> 00:10:21,120
basies as ek in 'n taak en ek druk hierdie swikknoppie

160
00:10:21,120 --> 00:10:25,040
dit deur uit, so elke item op die lys het nie 'n volledige

161
00:10:25,040 --> 00:10:31,050
of onvolledige staat, en ek gebruik 'n ander skikking wat te verteenwoordig.

162
00:10:31,050 --> 00:10:33,730
>> Basies vir elke taak in daardie Besigtig verskeidenheid

163
00:10:33,730 --> 00:10:37,110
daar is 'n item in die volledige skikking wat basies dui

164
00:10:37,110 --> 00:10:39,060
of wat voltooi is of nie.

165
00:10:39,060 --> 00:10:41,640
Ek het mooi minimale veranderinge aan te bring aan hierdie kode,

166
00:10:41,640 --> 00:10:44,470
so hier is ons Addtodo funksie.

167
00:10:44,470 --> 00:10:48,530
Let daarop dat hier ek dit is besig om op die skikking,

168
00:10:48,530 --> 00:10:51,300
en dan is ek besig om 'n 0 tot dat volledige verskeidenheid,

169
00:10:51,300 --> 00:10:57,090
basies in parallel met die nuwe taak druk om te sê

170
00:10:57,090 --> 00:11:00,430
Ek is toevoeging van hierdie item, en dit tesame met die waarde,

171
00:11:00,430 --> 00:11:02,810
wat beteken dat dit is onvolledig.

172
00:11:02,810 --> 00:11:04,970
En dan is ek die herindeling van die te-doen-lys.

173
00:11:04,970 --> 00:11:09,220
Nou, sien ek hierdie drawTodoList funksie het bygevoeg.

174
00:11:09,220 --> 00:11:11,760
Dit neem 'n baie van die kode wat ons gehad het voordat,

175
00:11:11,760 --> 00:11:15,320
basies klaar uit die boks en dan trek die nuwe lys te-doen.

176
00:11:15,320 --> 00:11:19,620
Maar let op dat die binnekant van die lus vir ons 'n bietjie doen meer nou.

177
00:11:19,620 --> 00:11:25,000
Ons is basies seker te maak of die item wat ooreenstem met die i todo hier

178
00:11:25,000 --> 00:11:30,220
voltooi is, en ons is verskillend optree in hierdie 2 omstandighede.

179
00:11:30,220 --> 00:11:32,790
As dit is 'n volledige, ons voeg hierdie del tag,

180
00:11:32,790 --> 00:11:35,360
Dit is basies die manier kan jy die staking kry deur middel van krag

181
00:11:35,360 --> 00:11:38,190
kruising uit die lys te-doen as dit voltooi is,

182
00:11:38,190 --> 00:11:42,200
en as dit is nie, is ons nie soos dit.

183
00:11:42,200 --> 00:11:45,030
En so dat die soort van sorg dat

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

185
00:11:49,140 --> 00:11:53,420
En dan sien wanneer die gebruiker een van hierdie

186
00:11:53,420 --> 00:11:56,780
Ons skakel die voltooiing status van dit.

187
00:11:56,780 --> 00:12:02,170
Wanneer die gebruiker, sal ons keer of dit voltooi is of nie,

188
00:12:02,170 --> 00:12:04,540
en dan sal ons dit teken.

189
00:12:04,540 --> 00:12:06,190
Hierdie soort van werk.

190
00:12:06,190 --> 00:12:09,860
Ons het hierdie funksies uit te voer wat hul eie take,

191
00:12:09,860 --> 00:12:11,730
en dit is okay.

192
00:12:11,730 --> 00:12:14,110
Is daar enigiets wat ons kan beter doen oor hierdie, al is?

193
00:12:14,110 --> 00:12:18,700
Kennisgewing ons hierdie 2 globale skikkings.

194
00:12:18,700 --> 00:12:23,550
As dit was C, en ons moes 2 skikkings daardie soort verteenwoordig

195
00:12:23,550 --> 00:12:25,800
data wat soort van die verband in een of ander manier

196
00:12:25,800 --> 00:12:30,140
Wat sou ons gebruik in C hierdie 2 velde te kombineer

197
00:12:30,140 --> 00:12:35,420
in iets wat omvat twee stukke van inligting?

198
00:12:35,420 --> 00:12:37,600
Enigiemand wat wil 'n voorstel te maak?

199
00:12:37,600 --> 00:12:39,450
[Studente onhoorbaar reaksie]

200
00:12:39,450 --> 00:12:42,340
>> Presies, so ons kan gebruik om 'n soort van struct,

201
00:12:42,340 --> 00:12:44,960
en as jy dink terug aan, sê, pset 3,

202
00:12:44,960 --> 00:12:47,350
onthou ons moes woordeboek, en dan het ons die vraag of die woord

203
00:12:47,350 --> 00:12:50,230
was in die woordeboek, en al die inligting is saamgestel

204
00:12:50,230 --> 00:12:52,420
binnekant van 'n data struktuur.

205
00:12:52,420 --> 00:12:56,390
Een ding wat ek kan doen met hierdie kode om te verhoed dat hierdie 2 verskillende skikkings

206
00:12:56,390 --> 00:13:01,760
vir soortgelyke stukke van die inligting is Ek hulle kan kombineer in 'n JavaScript voorwerp.

207
00:13:01,760 --> 00:13:07,150
Kom ons neem 'n blik op dit.

208
00:13:07,150 --> 00:13:11,740
Let Ek het net een opgestel by die top nou

209
00:13:11,740 --> 00:13:17,650
en wat ek gedoen het, is-en dit is net die JavaScript syntax vir die soort

210
00:13:17,650 --> 00:13:21,350
die skep van 'n letterlike weergawe van 'n voorwerp,

211
00:13:21,350 --> 00:13:24,670
en sien daar is 2 eienskappe, so ons het die taak,

212
00:13:24,670 --> 00:13:29,660
en dit is gehou saam met die vraag of dit volledig of onvolledig.

213
00:13:29,660 --> 00:13:31,000
Dit is baie soortgelyk kode.

214
00:13:31,000 --> 00:13:35,310
Ons gebruik die JavaScript voorwerpe.

215
00:13:35,310 --> 00:13:38,600
Hierdie soort van dinge verbeter.

216
00:13:38,600 --> 00:13:43,850
Soos nou, is al hierdie velde van verwante inligting bymekaar gehou.

217
00:13:43,850 --> 00:13:46,410
Wanneer ons gaan dit om uit te druk, kan ons toegang tot die velde.

218
00:13:46,410 --> 00:13:49,060
>> Let op hoe ons Besigtig [i] doen. Volledige

219
00:13:49,060 --> 00:13:52,880
in plaas van die beheer van die volledige reeks afsonderlik,

220
00:13:52,880 --> 00:13:56,560
en sien wanneer ons wil die te-doen-string is ons om die te-doen-eiendom te kry

221
00:13:56,560 --> 00:13:58,750
van die taak, sodat hierdie soort van sin maak, want

222
00:13:58,750 --> 00:14:01,660
elke item het hierdie intrinsieke eienskappe daaroor.

223
00:14:01,660 --> 00:14:05,650
Dit het 'n taak, en dit het of dit voltooi is of nie.

224
00:14:05,650 --> 00:14:11,540
Nie te veel veranderinge daar funksioneel, net bygevoeg nog 'n paar van die kode.

225
00:14:11,540 --> 00:14:13,430
Dit is 'n verbetering op sommige gebiede, reg?

226
00:14:13,430 --> 00:14:16,030
Ek bedoel, ons faktor uit die ontwerp van 'n bietjie.

227
00:14:16,030 --> 00:14:20,350
Nou het ons voorwerpe basies te omsluit hierdie data.

228
00:14:20,350 --> 00:14:27,130
Is daar enigiets meer wat ons kan doen van hier af in terme van JavaScript?

229
00:14:27,130 --> 00:14:31,810
Graag kennis dat hierdie kode hier

230
00:14:31,810 --> 00:14:34,760
vir die kry van die binneste HTML van 'n div

231
00:14:34,760 --> 00:14:40,520
is 'n bietjie, dink ek, lank.

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

233
00:14:45,100 --> 00:14:48,400
Een ding wat ons kan doen om hierdie kode kyk 'n bietjie vriendeliker

234
00:14:48,400 --> 00:14:51,450
so ek wil nie hê om te hou blaai links en regs, heen en weer,

235
00:14:51,450 --> 00:14:58,480
is ek kon 'n biblioteek soos jQuery gebruik.

236
00:14:58,480 --> 00:15:02,710
>> Kom ons kyk na Seminaar 2,

237
00:15:02,710 --> 00:15:05,880
en dit is dieselfde kode, maar dit is gedoen met jQuery.

238
00:15:05,880 --> 00:15:08,790
Jy kan nie te vertroud is met jQuery,

239
00:15:08,790 --> 00:15:11,510
maar net weet dat jQuery is 'n soort van 'n biblioteek vir JavaScript

240
00:15:11,510 --> 00:15:15,910
wat maak dit makliker om dinge soos toegang individuele elemente van die DOM te doen.

241
00:15:15,910 --> 00:15:21,280
Hier in plaas van om te sê document.getElementById ("Besigtig"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Ek kan die baie skoner manier gebruik in jQuery,

243
00:15:25,210 --> 00:15:28,490
wat net keurders te gebruik.

244
00:15:28,490 --> 00:15:31,300
Soos jy kan sien, het hierdie kode kry 'n bietjie skoner,

245
00:15:31,300 --> 00:15:35,770
baie soortgelyk funksioneel, maar dit is die idee.

246
00:15:35,770 --> 00:15:37,980
Ons het gesien hoe 'n paar van die dinge wat so ver,

247
00:15:37,980 --> 00:15:42,010
so het ons begin met net rou JavaScript implementering.

248
00:15:42,010 --> 00:15:45,370
Ons het bygevoeg nuwe funksies en gewys hoe ons dit kan verbeter met

249
00:15:45,370 --> 00:15:49,090
net dit wat ons het in JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Het enige iemand sien nie enige probleme met hierdie ontwerp?

251
00:15:53,300 --> 00:16:01,090
Naamlik, ek dink-of nie noodwendig probleme, maar kom ons sê

252
00:16:01,090 --> 00:16:04,830
ons is nie besig met 'n lys te-doen-projek, en môre het ons besluit

253
00:16:04,830 --> 00:16:10,320
Ons wou 'n inkopielys of 'n inkopielys projek te maak.

254
00:16:10,320 --> 00:16:14,150
Daar is baie van hierdie eienskappe is baie soortgelyk.

255
00:16:14,150 --> 00:16:19,080
Daar is baie van die dinge wat ons wil uit te kry van JavaScript is baie algemeen,

256
00:16:19,080 --> 00:16:23,820
en dit onderstreep die behoefte aan 'n soort van manier

257
00:16:23,820 --> 00:16:25,670
die maak van hierdie makliker om te doen.

258
00:16:25,670 --> 00:16:30,400
Ek het om op te bou al van hierdie HTML, het al hierdie DOM toegang,

259
00:16:30,400 --> 00:16:35,530
soos ek gaan die te-doen lys voor te stel met hierdie model.

260
00:16:35,530 --> 00:16:39,130
En let Ek is verantwoordelik as die JavaScript ontwikkelaar

261
00:16:39,130 --> 00:16:42,890
vir die behoud van die HTML en JavaScript dat ek in sync.

262
00:16:42,890 --> 00:16:48,040
Niks outomaties gemaak dat JavaScript verteenwoordiging

263
00:16:48,040 --> 00:16:51,590
of die te-doen lys gestoot kry om te HTML.

264
00:16:51,590 --> 00:16:54,000
Niks afgedwing dat, behalwe vir my.

265
00:16:54,000 --> 00:16:56,880
Ek moes die trekking te-doen lys funksie te skryf.

266
00:16:56,880 --> 00:17:01,650
En dit kan nie wees-Ek bedoel, is dit redelik om dit te doen,

267
00:17:01,650 --> 00:17:03,670
maar dit kan soms vervelig.

268
00:17:03,670 --> 00:17:08,190
As jy 'n groter projek, wat kan moeilik wees.

269
00:17:08,190 --> 00:17:10,720
>> Raamwerke, een van die doeleindes van raamwerke

270
00:17:10,720 --> 00:17:14,060
is dat die proses en die soort van faktor te vereenvoudig uit

271
00:17:14,060 --> 00:17:16,950
hierdie gemeenskaplike-ek dink jy kan sê-ontwerp van patrone

272
00:17:16,950 --> 00:17:20,700
dat mense oor die algemeen het 'n soort van manier is om data,

273
00:17:20,700 --> 00:17:25,599
of dit is 'n lys met vriende, of dit is die kaart inligting

274
00:17:25,599 --> 00:17:27,280
of iets of 'n to-do list.

275
00:17:27,280 --> 00:17:30,660
Sommige mense het oor die algemeen 'n manier is om inligting,

276
00:17:30,660 --> 00:17:33,650
en hulle oor die algemeen nodig het om daardie inligting soort van hou in sync

277
00:17:33,650 --> 00:17:36,520
tussen wat die gebruiker sien in 'n soort van die oog,

278
00:17:36,520 --> 00:17:39,850
praat in terme van soos die model oog kontroleerder wat jy gesien het in lesing,

279
00:17:39,850 --> 00:17:45,400
en dan die model, wat in hierdie geval is dit JavaScript skikking.

280
00:17:45,400 --> 00:17:49,020
Raamwerke gee ons 'n manier om die probleem op te los.

281
00:17:49,020 --> 00:17:53,080
Nou kom ons neem 'n blik op die implementering van hierdie te-doen lys

282
00:17:53,080 --> 00:18:02,360
in 'n raamwerk genoem angularjs.

283
00:18:02,360 --> 00:18:04,650
Dit is dit. Let daarop dat dit pas op 'n skyfie.

284
00:18:04,650 --> 00:18:07,330
Ek het nie te skuif na links en regs.

285
00:18:07,330 --> 00:18:10,460
Dit is waarskynlik nie 'n groot rede om te raai die gebruik van 'n raamwerk,

286
00:18:10,460 --> 00:18:20,120
Maar let ek ooit toegang tot individuele HTML elemente hier?

287
00:18:20,120 --> 00:18:22,400
Is ek ooit gaan in die DOM?

288
00:18:22,400 --> 00:18:26,120
Sien jy enige document.getElementById of iets soos dit?

289
00:18:26,120 --> 00:18:29,870
Nee, dis verby.

290
00:18:29,870 --> 00:18:35,590
>> Hoekige help ons om die DOM en ons JavaScript voorstelling van iets

291
00:18:35,590 --> 00:18:40,430
soort in pas nie, so as dit nie in die JS lêer,

292
00:18:40,430 --> 00:18:46,790
As daar is geen manier om programmaties om alles wat HTML inhoud

293
00:18:46,790 --> 00:18:51,800
uit die JavaScript hoe is ons hou dit in harmonie?

294
00:18:51,800 --> 00:18:58,160
As dit nie in die JS lêer., Dit het om te wees in HTML, reg?

295
00:18:58,160 --> 00:19:01,910
Dit is die nuwe weergawe van die HTML-lêer,

296
00:19:01,910 --> 00:19:04,660
en sien ons 'n baie hier het bygevoeg.

297
00:19:04,660 --> 00:19:11,110
Let daarop dat daar is hierdie nuwe eienskappe wat sê ng-kliek en ng-repeat.

298
00:19:11,110 --> 00:19:15,650
Hoekige se benadering tot die oplossing van die probleem van die probleme in die ontwerp

299
00:19:15,650 --> 00:19:19,130
is basies te maak HTML veel meer kragtig.

300
00:19:19,130 --> 00:19:24,420
Hoekig is 'n manier sodat jy om te maak HTML ietwat meer uitdrukkingsvolle.

301
00:19:24,420 --> 00:19:30,520
Byvoorbeeld, kan ek sê dat ek gaan om te bind of bind hierdie teks boks

302
00:19:30,520 --> 00:19:35,080
na 'n veranderlike binne my Hoek JavaScript-kode.

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

304
00:19:37,030 --> 00:19:41,550
Dit sê basies dat die item binnekant van hierdie teks boks,

305
00:19:41,550 --> 00:19:45,000
net assosieer wat met die veranderlike new_todo_description

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

307
00:19:47,870 --> 00:19:51,600
Dit is baie sterk, want ek het nie uitdruklik na

308
00:19:51,600 --> 00:19:53,310
die DOM dat die inligting te kry.

309
00:19:53,310 --> 00:19:56,250
Ek het nie document.getElementById te sê.

310
00:19:56,250 --> 00:19:58,750
Ek het nie jQueries soos DOM toegang te gebruik.

311
00:19:58,750 --> 00:20:03,280
Ek kan assosieer dit met 'n veranderlike, en dan wanneer ek verander veranderlike

312
00:20:03,280 --> 00:20:07,400
binne JavaScript dit gehou in harmonie met die HTML,

313
00:20:07,400 --> 00:20:11,640
sodat vergemaklik die proses van om te heen en weer tussen die twee.

314
00:20:11,640 --> 00:20:18,260
Maak dit sin?

315
00:20:18,260 --> 00:20:22,060
>> En sien daar is geen HTML-kode toegang.

316
00:20:22,060 --> 00:20:27,760
Ons het nou net gemaak HTML meer kragtige,

317
00:20:27,760 --> 00:20:32,070
en nou, byvoorbeeld, kan ons dinge doen soos hierdie,

318
00:20:32,070 --> 00:20:38,610
soos wanneer jy kliek op hierdie, noem hierdie funksie binne die bestek van todos.js,

319
00:20:38,610 --> 00:20:43,410
en ons kon dit doen voor, maar daar is ander dinge, soos hierdie ng-model,

320
00:20:43,410 --> 00:20:47,020
en let op hierdie ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Wat dink jy dit doen?

322
00:20:51,520 --> 00:20:54,390
Hier is ons geordende lys voor.

323
00:20:54,390 --> 00:20:56,470
Ons het die ul tags,

324
00:20:56,470 --> 00:21:03,710
maar ek ooit die lewering van die lys binnekant van die JavaScript-kode?

325
00:21:03,710 --> 00:21:09,280
Ek is nooit uitdruklik die lewering van daardie lys.

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

327
00:21:11,580 --> 00:21:16,410
Wel, die manier waarop Hoek accomplishes dit is dit is bekend as 'n herhaler.

328
00:21:16,410 --> 00:21:22,760
Basies dit sê wat ek wil hierdie HTML te druk

329
00:21:22,760 --> 00:21:26,240
vir elke taak binnekant van my Besigtig skikking.

330
00:21:26,240 --> 00:21:31,850
Binnekant van todos.jr daar is 'n verskeidenheid Besigtig reg hier,

331
00:21:31,850 --> 00:21:37,910
en dit sal Hoek go vertel deur daardie skikking, en vir elke element wat jy sien

332
00:21:37,910 --> 00:21:41,390
Ek wil hê dat jy hierdie HTML te druk.

333
00:21:41,390 --> 00:21:44,620
Dit is 'n soort van die awesome want ek kan net doen dit

334
00:21:44,620 --> 00:21:47,760
sonder om 'n te skryf vir die lus,

335
00:21:47,760 --> 00:21:52,250
wat vir 'n to-do list dit was net 30 reëls van die kode

336
00:21:52,250 --> 00:21:54,700
dalk nie die mees voordelige ding,

337
00:21:54,700 --> 00:22:01,240
maar as jy 'n groot projek, kan dit kry baie handig.

338
00:22:01,240 --> 00:22:06,100
>> Dit is 'n oplossing vir hierdie probleem, die maak van HTML meer kragtige,

339
00:22:06,100 --> 00:22:10,820
en wat ons toelaat om te hou JavaScript en HTML in sync.

340
00:22:10,820 --> 00:22:13,220
Daar is ander moontlike maniere om hierdie probleem op te los,

341
00:22:13,220 --> 00:22:15,320
en nie elke raamwerk doen dit.

342
00:22:15,320 --> 00:22:17,720
Nie elke raamwerk werk langs hierdie lyne.

343
00:22:17,720 --> 00:22:19,490
Sommige raamwerke het verskillende benaderings,

344
00:22:19,490 --> 00:22:23,310
en jy mag vind dat jy dit geniet kodering in een raamwerk oor die ander.

345
00:22:23,310 --> 00:22:26,160
Kom ons kyk na 'n meer.

346
00:22:26,160 --> 00:22:30,060
Dit is die te-doen lys gekodeer in 'n raamwerk genoem ruggraat.

347
00:22:30,060 --> 00:22:33,250
Ek gaan om te gaan deur middel van hierdie vinnig.

348
00:22:33,250 --> 00:22:38,300
Ek sal begin met die HTML voor ons gaan daar.

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

350
00:22:40,290 --> 00:22:43,950
Begin met die HTML, as jy sien, ons HTML is baie soortgelyk

351
00:22:43,950 --> 00:22:50,000
na wat dit was voor, so nie te veel nuwe op daardie front.

352
00:22:50,000 --> 00:22:55,410
Maar ons JS lêer is 'n bietjie anders.

353
00:22:55,410 --> 00:23:00,360
Ruggraat soort het hierdie idee, of bou voort op die idee

354
00:23:00,360 --> 00:23:04,750
dat baie van wat ons doen met, sê, ons JavaScript projekte

355
00:23:04,750 --> 00:23:09,110
is te dink oor modelle en versamelings van hierdie modelle.

356
00:23:09,110 --> 00:23:12,510
Dit kan wees, byvoorbeeld, 'n foto en versamelings van foto's,

357
00:23:12,510 --> 00:23:16,230
of die idee van 'n vriend en versamelings van vriende.

358
00:23:16,230 --> 00:23:20,700
En dikwels wanneer ons programmering JavaScript aansoeke

359
00:23:20,700 --> 00:23:25,340
Ons sal sorteer verteenwoordig die idee van 'n versameling van vriende

360
00:23:25,340 --> 00:23:29,500
een of ander manier in JavaScript, en ruggraat gee ons hierdie laag

361
00:23:29,500 --> 00:23:33,040
op die top van JavaScript se bestaande skikkings en voorwerpe

362
00:23:33,040 --> 00:23:38,300
meer kragtige dinge te doen met dat meer maklik.

363
00:23:38,300 --> 00:23:41,870
>> Hier het ek omskryf 'n to-do model,

364
00:23:41,870 --> 00:23:44,630
en jy hoef nie te veel bekommerd wees oor die sintaksis,

365
00:23:44,630 --> 00:23:48,730
Maar let op dat wat is een van die eienskappe van hierdie?

366
00:23:48,730 --> 00:23:53,190
Dit het 'n verstek.

367
00:23:53,190 --> 00:23:56,640
Ruggraat laat my toe reeds spesifiseer van die kolf af

368
00:23:56,640 --> 00:24:00,190
enige nuwe te-doen wat ek skep gaan hierdie standaard te hê.

369
00:24:00,190 --> 00:24:04,100
Nou kan ek pas nie, maar in staat is om die gebreke reg te spesifiseer

370
00:24:04,100 --> 00:24:07,220
is mooi, en dit is 'n soort van gerieflik, want dit is nie iets wat soos

371
00:24:07,220 --> 00:24:10,430
inherent in JavaScript, en nou het ek nie uitdruklik

372
00:24:10,430 --> 00:24:12,430
sê dat die Besigtig is onvolledig.

373
00:24:12,430 --> 00:24:19,190
Ek kan sê reg uit die kolf dat Besigtig gaan word gemerk as onvolledig.

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

375
00:24:21,300 --> 00:24:25,520
Nou het ek 'n lys te-doen, en dit is 'n versameling.

376
00:24:25,520 --> 00:24:30,960
Let op die veld wat verband hou met wat sê model todo.

377
00:24:30,960 --> 00:24:33,390
Dit is my manier van vertel ruggraat wat

378
00:24:33,390 --> 00:24:37,350
Ek gaan om te besin oor 'n versameling van die individuele Besigtig.

379
00:24:37,350 --> 00:24:42,140
Dit is basies die model struktuur vir my program.

380
00:24:42,140 --> 00:24:44,980
Hier het ek die idee van 'n versameling,

381
00:24:44,980 --> 00:24:48,960
en basies die items in die versameling is almal gaan wees om hierdie todos,

382
00:24:48,960 --> 00:24:51,910
en dit is baie natuurlike in hierdie sin

383
00:24:51,910 --> 00:24:59,890
want ek het todos, en ek het hulle in 'n versameling.

384
00:24:59,890 --> 00:25:02,940
>> Kom ons kyk na 'n bietjie meer van hierdie.

385
00:25:02,940 --> 00:25:05,900
Hier is 'n ruggraat oog.

386
00:25:05,900 --> 00:25:08,890
Die ander ding wat Backbone sê, is dat

387
00:25:08,890 --> 00:25:14,660
'n baie van die modelle wat jy oor of selfs versamelings dink

388
00:25:14,660 --> 00:25:19,150
gaan moet 'n manier om vertoon te hê.

389
00:25:19,150 --> 00:25:21,900
Ons moet lewer dat die lys te-doen,

390
00:25:21,900 --> 00:25:25,460
en dit sou nie lekker wees as ons kan gee vir elke model

391
00:25:25,460 --> 00:25:28,390
of assosieer met elke model hierdie siening

392
00:25:28,390 --> 00:25:34,020
wat ons toelaat om te dink ek verbind die twee saam?

393
00:25:34,020 --> 00:25:38,320
Terwyl voordat ons 'n te gebruik vir die lus wat sou loop deur

394
00:25:38,320 --> 00:25:41,130
elke taak in die lys en druk dan is dit hier

395
00:25:41,130 --> 00:25:44,650
ons kan basies verbind dit met hierdie model.

396
00:25:44,650 --> 00:25:47,550
Dit is 'n moet-doen-oog.

397
00:25:47,550 --> 00:25:50,550
Dit is wat verband hou met die taak wat ons vroeër gevind.

398
00:25:50,550 --> 00:25:54,940
Nou elke taak word weer te gee of renderable

399
00:25:54,940 --> 00:25:56,960
deur dit te doen-oog.

400
00:25:56,960 --> 00:25:59,440
Let op 'n paar van die velde.

401
00:25:59,440 --> 00:26:05,880
Wat dink jy hierdie tagName is, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Onthou voor wanneer ons wou 'n taak te verrig

403
00:26:09,790 --> 00:26:16,700
ons sal moet uitdruklik paar ons Besigtig met hierdie li tag.

404
00:26:16,700 --> 00:26:21,080
Nou kan ons sê dat waar hierdie taak gaan om te lewe

405
00:26:21,080 --> 00:26:25,250
gaan wees binnekant van 'n li tag.

406
00:26:25,250 --> 00:26:31,440
En nou is ons ook assosieer gebeure met ons Besigtig.

407
00:26:31,440 --> 00:26:34,320
>> Elke taak het hierdie een gebeurtenis.

408
00:26:34,320 --> 00:26:38,480
As jy pretty much kliek op die skakel knoppie, dit is wat ek daar gesê:

409
00:26:38,480 --> 00:26:43,080
dan basies merk die taak as die teenoorgestelde van wat dit was voor

410
00:26:43,080 --> 00:26:45,890
en dan weer maak die aansoek.

411
00:26:45,890 --> 00:26:47,810
Dit is 'n soort van soortgelyk aan die kode voor.

412
00:26:47,810 --> 00:26:50,730
Onthou wanneer ons gemerk het as óf die teenoorgestelde of-

413
00:26:50,730 --> 00:26:52,410
en dan sal ons weer gelewer het.

414
00:26:52,410 --> 00:26:57,750
Maar nou sien hierdie geleentheid gebruik om iets wat was in die HTML wees.

415
00:26:57,750 --> 00:26:59,640
Dit het daar gesit.

416
00:26:59,640 --> 00:27:01,410
Die knoppie het 'n op klik.

417
00:27:01,410 --> 00:27:05,310
Wanneer jy kliek op die knoppie, is dit nie soort van die dinge te

418
00:27:05,310 --> 00:27:07,210
opstel van die taak te wees onvolledig.

419
00:27:07,210 --> 00:27:11,180
Hier het ons geassosieer so 'n geval van te kliek wat swikknoppie

420
00:27:11,180 --> 00:27:15,830
en omkeer of dit nou op of af met hierdie siening.

421
00:27:15,830 --> 00:27:20,480
>> Dit is 'n goeie manier om van die opstel van hierdie gebeurtenis, sodat dit is baie styf gebind

422
00:27:20,480 --> 00:27:26,980
hierdie siening, en so sien hierdie een meer.

423
00:27:26,980 --> 00:27:31,050
Ek het hierdie metode lewer, en ons hoef nie te gaan deur middel van die besonderhede.

424
00:27:31,050 --> 00:27:33,650
Dit is soort van soortgelyk aan wat ons gehad het voordat,

425
00:27:33,650 --> 00:27:36,070
maar agter ek is nie herhaling deur enigiets.

426
00:27:36,070 --> 00:27:40,700
Ek is nie die druk wat ul tag dit is soort van te sê ek gaan al die elemente te druk.

427
00:27:40,700 --> 00:27:46,610
Ek is die verskaffing van die funksie vir die lewering van hierdie een te-doen-item.

428
00:27:46,610 --> 00:27:49,400
Dit is 'n baie kragtige konsep, want basies

429
00:27:49,400 --> 00:27:53,600
ons te-doen lys bestaan ​​van al hierdie todos, en as ons kan basies spesifiseer

430
00:27:53,600 --> 00:27:56,890
die manier waarop een van daardie todos te lewer

431
00:27:56,890 --> 00:28:04,230
dan kan ons ons kragtige ruggraat per se het maak al die Besigtig

432
00:28:04,230 --> 00:28:07,760
deur die roeping van die lewer metode op die individu Besigtig.

433
00:28:07,760 --> 00:28:14,180
Dit is 'n konsep wat nuttig is hier.

434
00:28:14,180 --> 00:28:18,160
Nou is 'n goeie vraag om te vra is hoe word hierdie aansoek saam te stel?

435
00:28:18,160 --> 00:28:21,200
Want ons het die vermoë om 'n taak te verrig,

436
00:28:21,200 --> 00:28:23,860
Maar hoe kry ons die idee van veelvuldige Besigtig?

437
00:28:23,860 --> 00:28:25,100
>> Kom ons neem 'n blik op dit.

438
00:28:25,100 --> 00:28:27,100
Dit is die laaste deel.

439
00:28:27,100 --> 00:28:29,740
Kennisgewing ons 'n to-do list view hier,

440
00:28:29,740 --> 00:28:34,440
en sien dit is ook 'n oog.

441
00:28:34,440 --> 00:28:36,970
En om te gaan oor 'n paar dinge,

442
00:28:36,970 --> 00:28:45,280
hierdie inisialiseer metode sal genoem word wanneer ons die eerste om dit te-doen-lys skep.

443
00:28:45,280 --> 00:28:52,630
Soos jy kan sien, is dit soos die skep van die te-doen lys en assosieer dit met hierdie siening.

444
00:28:52,630 --> 00:28:57,860
En dan het ek bygevoeg die funksies hier so basies wanneer jy voeg 'n item-

445
00:28:57,860 --> 00:29:01,440
Dit is soortgelyk aan die addItem metode wat ons gesien het voor-

446
00:29:01,440 --> 00:29:07,430
Ek gaan 'n nuwe taak voorwerp te skep, en sien ek eintlik is roeping

447
00:29:07,430 --> 00:29:13,080
hierdie nuwe taak metode, so dit is wat deur ruggraat

448
00:29:13,080 --> 00:29:16,010
en ek kan slaag in my eiendomme hier.

449
00:29:16,010 --> 00:29:23,710
En nou is elke taak wat ek hiervan Skep gebruik sal kry dat die funksies wat ons gesien het voor.

450
00:29:23,710 --> 00:29:28,140
Let Ek is die skoonmaak van uit die teks boks voor-'n klein detail-

451
00:29:28,140 --> 00:29:32,900
en dan is ek toevoeging van hierdie versameling.

452
00:29:32,900 --> 00:29:37,630
>> Dit lyk byna vreemd, want voordat ons moes net dat todos.push te doen,

453
00:29:37,630 --> 00:29:43,310
en dan is ons gedoen het, en dit mag lyk meer ingewikkeld vir hierdie spesifieke projek,

454
00:29:43,310 --> 00:29:46,980
en jy mag vind dat ruggraat of selfs Hoek of enige ander raamwerk

455
00:29:46,980 --> 00:29:50,790
nie pas by jou spesifieke projek, maar ek dink dit is belangrik om te dink oor

456
00:29:50,790 --> 00:29:54,100
wat dit beteken nie op 'n groter skaal vir groter projekte,

457
00:29:54,100 --> 00:29:56,610
want as ons 'n groter projek waar ons was verteenwoordig

458
00:29:56,610 --> 00:30:00,860
'n paar baie komplekse versameling, iets dieper as net 'n lys te-doen,

459
00:30:00,860 --> 00:30:04,490
kom ons sê 'n lys met vriende of iets soos dit is, kan dit handig te pas kom

460
00:30:04,490 --> 00:30:09,620
want ons kan ons kode te organiseer in 'n baie maklike manier,

461
00:30:09,620 --> 00:30:12,550
in 'n manier dat dit makliker sal maak vir iemand anders

462
00:30:12,550 --> 00:30:16,820
wat wou om af te haal 'n projek om op te bou.

463
00:30:16,820 --> 00:30:21,450
Jy kan sien dat dit bied 'n baie van die struktuur.

464
00:30:21,450 --> 00:30:26,580
En dan is ek 'n beroep lewer op hierdie addItem.

465
00:30:26,580 --> 00:30:31,050
Lewer, soos jy kan sien, en jy het nie hierdie volle sintaksis te begryp,

466
00:30:31,050 --> 00:30:37,790
Maar basies vir elke model dit gaan die individu lewer metode te roep.

467
00:30:37,790 --> 00:30:41,500
Dit is soort van waar dit vandaan kom.

468
00:30:41,500 --> 00:30:44,140
Laat ons net bepaal hoe die individu todos te lewer,

469
00:30:44,140 --> 00:30:47,310
en dan laat se gom hulle saam as 'n geheel.

470
00:30:47,310 --> 00:30:49,810
Maar dit bied 'n manier van onttrekking,

471
00:30:49,810 --> 00:30:55,470
want ek kon die manier waarop ek besluit om die individuele todos te lewer verander,

472
00:30:55,470 --> 00:30:57,940
en ek wil nie hê dat enige van hierdie kode te verander.

473
00:30:57,940 --> 00:31:00,700
Dit is soort van cool.

474
00:31:00,700 --> 00:31:08,540
>> Het enige iemand enige vrae oor JavaScript raamwerke?

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

476
00:31:14,310 --> 00:31:16,050
Ag, seker nie, dit is 'n groot vraag.

477
00:31:16,050 --> 00:31:19,080
Die vraag is hoe het ek sluit die raamwerke?

478
00:31:19,080 --> 00:31:22,970
Die meeste JavaScript raamwerke is basies net JS-lêers

479
00:31:22,970 --> 00:31:25,740
wat jy kan sluit by die top van die kode.

480
00:31:25,740 --> 00:31:29,830
Kennisgewing in die kop gedeelte van my HTML Ek het al hierdie script etikette,

481
00:31:29,830 --> 00:31:34,250
en die finale scripttag is die kode wat ons geskryf.

482
00:31:34,250 --> 00:31:38,820
En dan is die 3 raamwerk kodes is ook net script tags.

483
00:31:38,820 --> 00:31:42,110
Ek sluit hulle van wat genoem word 'n CDN,

484
00:31:42,110 --> 00:31:46,200
wat my in staat stel om dit te kry van iemand anders op hierdie punt

485
00:31:46,200 --> 00:31:57,930
maar elke raamwerk het dit-jy kan pretty much vind die inhoud

486
00:31:57,930 --> 00:32:03,540
vir 'n spesifieke JavaScript-biblioteek beskikbaar is op 'n paar CDN of iets soos dit,

487
00:32:03,540 --> 00:32:05,570
en dan kan jy sluit hierdie script tags.

488
00:32:05,570 --> 00:32:07,600
Maak dit sin?

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

490
00:32:09,500 --> 00:32:11,730
>> Dit is 2 verskillende benaderings.

491
00:32:11,730 --> 00:32:14,640
Dit is nie die enigste benaderings tot die oplossing van die probleem.

492
00:32:14,640 --> 00:32:17,080
Daar is baie verskillende dinge wat

493
00:32:17,080 --> 00:32:19,490
iemand kon doen nie, en daar is baie raamwerke daar buite.

494
00:32:19,490 --> 00:32:23,300
Hoekig en ruggraat vertel nie die hele storie.

495
00:32:23,300 --> 00:32:26,370
Sterkte met jou finale projekte, en baie dankie.

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