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
>> Hej, alle sammen. Velkommen til JavaScript Frameworks seminaret.

5
00:00:10,630 --> 00:00:14,910
Mit navn er Kevin, og i dag vil jeg tale om JavaScript rammer,

6
00:00:14,910 --> 00:00:20,400
og målet med dette seminar er ikke at få dig til at sige, beherske en bestemt ramme per se

7
00:00:20,400 --> 00:00:23,810
men for at give dig en bred introduktion til et par af rammer

8
00:00:23,810 --> 00:00:27,150
og vise, hvorfor vi nogensinde ville ønsker at bruge en ramme.

9
00:00:27,150 --> 00:00:31,060
>> Før jeg gør det, vil jeg give lidt baggrund i JavaScript,

10
00:00:31,060 --> 00:00:33,750
og så vil vi tage den derfra.

11
00:00:33,750 --> 00:00:36,270
Vi kommer til at starte ved at gennemføre en to-do liste.

12
00:00:36,270 --> 00:00:39,330
Her er vores opgaveliste for i dag.

13
00:00:39,330 --> 00:00:41,990
Det er lidt sjovt. Vi er nødt til at gennemføre en to-do liste i JavaScript.

14
00:00:41,990 --> 00:00:45,110
Dette er, hvad det kommer til at se ud, så det er vores første mål.

15
00:00:45,110 --> 00:00:47,160
Vi kommer ikke til at bruge en ramme at gøre det.

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

17
00:00:51,930 --> 00:00:54,370
Så vi kommer til at forbedre design uden at bruge en ramme.

18
00:00:54,370 --> 00:00:57,190
Vi kommer til at diskutere forskellige ting, vi kan gøre med bare JavaScript alene

19
00:00:57,190 --> 00:01:00,650
at gøre vores to-do liste lidt mere godt designet.

20
00:01:00,650 --> 00:01:02,490
Så vi kommer til at smide nogle jQuery,

21
00:01:02,490 --> 00:01:05,030
og så vi kommer til at se på den samme to-do liste,

22
00:01:05,030 --> 00:01:07,170
netop gennemført i forskellige rammer, og vi vil diskutere

23
00:01:07,170 --> 00:01:09,280
 fordele og ulemper undervejs.

24
00:01:09,280 --> 00:01:12,040
>> Lad os begynde at gennemføre, at to-do liste.

25
00:01:12,040 --> 00:01:14,270
Lad os sige, vi er givet denne HTML.

26
00:01:14,270 --> 00:01:16,620
Jeg har tænkt mig at gøre dette til en lidt mindre.

27
00:01:16,620 --> 00:01:19,300
Som du kan se, jeg har en lille overskrift, der siger Todo

28
00:01:19,300 --> 00:01:21,740
og en lille boks, hvor jeg kan indtaste en beskrivelse af en todo

29
00:01:21,740 --> 00:01:26,990
og derefter et nyt element knap, så lad os prøve at indtaste en ny todo til denne liste.

30
00:01:26,990 --> 00:01:31,000
Giv en JavaScript rammer seminar,

31
00:01:31,000 --> 00:01:33,090
og jeg er at ramme nyt element.

32
00:01:33,090 --> 00:01:35,730
Jeg får denne JavaScript-advarsel, der siger gennemfører mig.

33
00:01:35,730 --> 00:01:37,560
Vi har fået at gennemføre det.

34
00:01:37,560 --> 00:01:41,490
Lad os se koden til dette, både HTML og JavaScript.

35
00:01:41,490 --> 00:01:43,260
Her er vores HTML.

36
00:01:43,260 --> 00:01:45,500
Som du kan se her, her er vores lille Todos header.

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

38
00:01:47,620 --> 00:01:50,690
og så har vi input kassen med pladsholder,

39
00:01:50,690 --> 00:01:59,460
og så er der en vis egenskab ved denne knap, der kalder denne funktion addtodo.

40
00:01:59,460 --> 00:02:05,460
Er der nogen ønsker at gætte, hvad der på klik ensbetydende?

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

42
00:02:07,390 --> 00:02:09,289
Godt, on click er lidt ligesom en begivenhed,

43
00:02:09,289 --> 00:02:12,120
Ligesom at klikke med musen er bare en begivenhed, og hvad vi laver

44
00:02:12,120 --> 00:02:16,890
er vi binde tilfælde af at klikke på denne knap for at udføre denne funktion.

45
00:02:16,890 --> 00:02:21,700
Addtodo er denne event handler for at klikke på denne knap.

46
00:02:21,700 --> 00:02:25,010
>> Som du kan se, når jeg klikker på knappen Nyt element

47
00:02:25,010 --> 00:02:29,940
on klik begivenheden bliver fyret, og denne funktion bliver kaldt.

48
00:02:29,940 --> 00:02:33,170
Lad os se på funktionen.

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

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

51
00:02:41,280 --> 00:02:44,060
Det ligner et array. Det er bare en tom array.

52
00:02:44,060 --> 00:02:47,100
Og så har jeg den addtodo funktion, som vi så tidligere,

53
00:02:47,100 --> 00:02:50,740
og den eneste linje kode i der er denne alarm.

54
00:02:50,740 --> 00:02:55,730
Det advarer implementere mig, og så jeg har 2 opgaver på hånden.

55
00:02:55,730 --> 00:02:58,790
Jeg er nødt til at tilføje todo til, at den globale datastruktur,

56
00:02:58,790 --> 00:03:01,860
og så vil jeg trække ud to-do liste.

57
00:03:01,860 --> 00:03:06,360
Intet også lyst lige endnu, men JavaScript kan du være bekendt med,

58
00:03:06,360 --> 00:03:12,370
så jeg har tænkt mig at gå langsomt og gennemgå de grundlæggende elementer i JavaScript på den måde.

59
00:03:12,370 --> 00:03:15,490
>> Lad os give det en chance.

60
00:03:15,490 --> 00:03:21,130
Lad os sige at brugeren indtaster noget i dette felt.

61
00:03:21,130 --> 00:03:23,360
Jeg lige har skrevet noget herinde tekst.

62
00:03:23,360 --> 00:03:27,620
Hvordan sorterer jeg adgang teksten via JavaScript?

63
00:03:27,620 --> 00:03:32,500
Husk, at JavaScript, en af ​​dens grundlæggende funktioner er, at det giver os

64
00:03:32,500 --> 00:03:34,670
denne programmeringsmæssig adgang til DOM.

65
00:03:34,670 --> 00:03:40,670
Det giver os mulighed for at få adgang elementer og deres egenskaber i denne egentlige HTML.

66
00:03:40,670 --> 00:03:43,430
Den måde, vi gør det med skelettet JavaScript

67
00:03:43,430 --> 00:03:51,360
er, at vi rent faktisk kan bruge en funktion i JavaScript kaldte getElementByID.

68
00:03:51,360 --> 00:03:55,140
Jeg ønsker at gemme teksten, der er skrevet der på en eller anden variabel

69
00:03:55,140 --> 00:03:58,350
så jeg har tænkt mig at sige en ny variabel kaldet new_todo,

70
00:03:58,350 --> 00:04:01,980
og jeg har tænkt mig at få dette element.

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

72
00:04:06,330 --> 00:04:11,580
Og nu får jeg et element af id, så jeg har brug for ID af denne tekstboks

73
00:04:11,580 --> 00:04:15,860
så jeg har givet det id new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Det er sådan jeg har tænkt mig at få et element.

75
00:04:18,399 --> 00:04:23,880
Det er mit argument til denne funktion, for at angive, hvilke id for at få.

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

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

78
00:04:30,650 --> 00:04:37,090
Den egenskab af teksten element, der gemmer brugerens input kaldes værdi.

79
00:04:37,090 --> 00:04:40,860
Jeg gemte værdien af ​​dette tekstboksen nu i denne variabel kaldet new_todo.

80
00:04:40,860 --> 00:04:45,040
Nu har jeg programmeringsmæssig adgang til denne variabel, som er slags cool

81
00:04:45,040 --> 00:04:49,200
fordi nu, hvad jeg kan gøre, er jeg kan tilføje det til min to-do liste.

82
00:04:49,200 --> 00:04:52,870
>> Den måde, vi ville gøre dette i JavaScript-og ikke bekymre dig, hvis du er bekendt med dette,

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

84
00:04:57,010 --> 00:05:00,130
fordi det er navnet på min globale datastruktur heroppe,

85
00:05:00,130 --> 00:05:04,450
og jeg har tænkt mig at skubbe new_todo.

86
00:05:04,450 --> 00:05:09,120
Det er fantastisk, fordi nu har jeg tilføjet det til min JavaScript

87
00:05:09,120 --> 00:05:11,280
repræsentation af denne to-do liste.

88
00:05:11,280 --> 00:05:15,170
Men nu, hvordan får jeg det tilbage til HTML?

89
00:05:15,170 --> 00:05:18,560
Jeg er nødt til at finde en måde at sortere i skubbe den tilbage.

90
00:05:18,560 --> 00:05:21,830
Med andre ord, slags jeg nødt til at trække dette.

91
00:05:21,830 --> 00:05:26,060
Hvad vi vil gøre, er at vi kommer til at tegne to-do liste.

92
00:05:26,060 --> 00:05:29,270
Jeg har brug for at opdatere andre HTML på den side,

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

94
00:05:32,040 --> 00:05:36,840
denne divider på siden, hvis id er todos,

95
00:05:36,840 --> 00:05:40,870
og jeg har tænkt mig at sætte to-do liste der.

96
00:05:40,870 --> 00:05:47,240
Først vil jeg klare det ud, fordi, siger, der var en gammel to-do liste der.

97
00:05:47,240 --> 00:05:49,560
Jeg får dette element ved id igen,

98
00:05:49,560 --> 00:05:54,530
og jeg adgang til inderste HTML af dette element,

99
00:05:54,530 --> 00:05:58,010
og jeg har tænkt mig at rydde den.

100
00:05:58,010 --> 00:06:05,510
Hvis vi forlod denne kode som er, ville vi se en tom intet der,

101
00:06:05,510 --> 00:06:10,410
og nu vil jeg begynde at gøre min nye to-do liste.

102
00:06:10,410 --> 00:06:12,870
Jeg dybest set kommer til at udslette min to-do liste.

103
00:06:12,870 --> 00:06:18,180
>> Nu indre HTML indersiden af ​​det todos div er fuldstændig klar,

104
00:06:18,180 --> 00:06:20,060
og nu har jeg brug for at begynde at tilføje min liste.

105
00:06:20,060 --> 00:06:23,890
Den første ting, jeg ønsker at tilføje tilbage er uordnet liste tag,

106
00:06:23,890 --> 00:06:33,890
som dybest set betegner, at dette er starten på en uordnet liste.

107
00:06:33,890 --> 00:06:39,770
Nu til hvert element i min todos vifte Jeg ønsker at printe den ud inde i denne HTML.

108
00:06:39,770 --> 00:06:43,710
Jeg vil føje den til bunden af ​​listen.

109
00:06:43,710 --> 00:06:49,040
Ligesom i C, kan jeg bruge en for-løkke, og jeg har tænkt mig at starte i begyndelsen af ​​min liste

110
00:06:49,040 --> 00:06:54,140
på elementet 0, og jeg har tænkt mig at gå hele vejen til længden af ​​listen.

111
00:06:54,140 --> 00:07:01,100
Vi kan faktisk få længden af ​​et array i JavaScript ved hjælp af længden ejendom.

112
00:07:01,100 --> 00:07:03,420
Dybest set jeg tænkt mig at gøre noget meget lignende inde i her

113
00:07:03,420 --> 00:07:05,600
at udskrive dette element.

114
00:07:05,600 --> 00:07:12,970
Jeg kan igen få adgang til todos div, den indre HTML egenskab af det,

115
00:07:12,970 --> 00:07:17,560
og jeg har tænkt mig at tilføje denne nye liste element, og der kommer til at være omgivet af

116
00:07:17,560 --> 00:07:25,390
denne li-tag, og jeg har tænkt mig at sammenkæde med + operatør,

117
00:07:25,390 --> 00:07:28,040
og det er den i'te element af min todos array,

118
00:07:28,040 --> 00:07:32,380
og så jeg har tænkt mig at lukke dette mærke.

119
00:07:32,380 --> 00:07:36,240
Nu til hvert element vil vi tilføje en ny post på listen.

120
00:07:36,240 --> 00:07:48,700
Og så har vi virkelig brug for at gøre, er at lukke det mærke.

121
00:07:48,700 --> 00:07:52,820
Jeg har bare brug for at lukke det uordnet liste tag.

122
00:07:52,820 --> 00:07:55,490
>> Får du en fornemmelse for, hvordan det virker?

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

124
00:07:57,700 --> 00:08:01,080
Dette tilføjer enkelte elementer fra todos listen til listen,

125
00:08:01,080 --> 00:08:05,470
og så der lukker hele listen, og dette er mit addtodo funktion.

126
00:08:05,470 --> 00:08:09,590
Jeg dybest set begynde med at få todo fra tekstfeltet.

127
00:08:09,590 --> 00:08:18,950
Jeg tilføje, at todos array, og så vil jeg igen gøre to-do liste.

128
00:08:18,950 --> 00:08:21,520
Nu kan jeg føje elementer til min liste.

129
00:08:21,520 --> 00:08:24,620
Det er lidt spændende, fordi på blot et par linjer kode

130
00:08:24,620 --> 00:08:28,240
vi dybest set lavet en to-do liste, hvor vi kan tilføje elementer.

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

132
00:08:30,050 --> 00:08:34,480
Det er sådan en grundlæggende introduktion til JavaScript.

133
00:08:34,480 --> 00:08:36,179
Må ikke bekymre dig for meget om syntaksen for nu,

134
00:08:36,179 --> 00:08:38,130
men tænk over det konceptuelt.

135
00:08:38,130 --> 00:08:40,539
Vi havde nogle HTML.

136
00:08:40,539 --> 00:08:45,310
Vi havde en tekstboks på siden, der dybest set tillod brugerne at indtaste en huskeliste til at tilføje.

137
00:08:45,310 --> 00:08:49,210
Og så har vi brugt JavaScript til at hente denne todo fra tekstfeltet.

138
00:08:49,210 --> 00:08:52,830
Vi gemt at inde i en JavaScript-array, som er dybest set som

139
00:08:52,830 --> 00:08:56,010
vores programmatiske repræsentation af denne to-do liste,

140
00:08:56,010 --> 00:08:59,060
og så vi udskrives det.

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

142
00:09:02,690 --> 00:09:07,620
>> Det er lidt cool, men hvordan kan vi tage dette yderligere?

143
00:09:07,620 --> 00:09:11,350
Nå, som du kan se, er dette ikke som en komplet to-do liste.

144
00:09:11,350 --> 00:09:15,100
For eksempel kan jeg ikke markere nogen af ​​disse elementer som ufuldstændige,

145
00:09:15,100 --> 00:09:19,920
gerne, hvis jeg ønskede at omprioritere de emner eller slette elementer.

146
00:09:19,920 --> 00:09:23,150
Det er okay, men vi kan tage dette yderligere.

147
00:09:23,150 --> 00:09:29,280
Jeg vil ikke tale for meget om at tilføje ekstra funktioner,

148
00:09:29,280 --> 00:09:32,800
men vi kunne tage det yderligere.

149
00:09:32,800 --> 00:09:35,970
Lad os tale om at tilføje endnu en feature til denne to-do liste,

150
00:09:35,970 --> 00:09:40,370
som vil være at være i stand til at kontrollere en person til gøremålspunkt

151
00:09:40,370 --> 00:09:44,780
og har det udstreges så dybest set siger jeg har gjort dette.

152
00:09:44,780 --> 00:09:50,240
Lad os se på nogle kode, der kunne opnå dette.

153
00:09:50,240 --> 00:09:52,740
Læg mærke til, hvad jeg har gjort i toppen er jeg har tilføjet

154
00:09:52,740 --> 00:09:57,620
en ny global matrix kaldes fuldstændig.

155
00:09:57,620 --> 00:10:02,890
Jeg dybest set bruger denne til at gemme, om punkterne på to-do liste

156
00:10:02,890 --> 00:10:06,560
er fuldstændige eller ej.

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

158
00:10:08,470 --> 00:10:13,750
Hvis jeg ser på gennemførelsen af ​​denne, viser,

159
00:10:13,750 --> 00:10:21,120
dybest set, hvis jeg indtaster en todo, og jeg trykker på denne knap

160
00:10:21,120 --> 00:10:25,040
den krydser ud, så hvert element på denne liste har enten en komplet

161
00:10:25,040 --> 00:10:31,050
eller ufuldstændige tilstand, og jeg bruger en anden matrix til at repræsentere det.

162
00:10:31,050 --> 00:10:33,730
>> Dybest set for hver todo i at todos matrix

163
00:10:33,730 --> 00:10:37,110
der er et element i den samlede vifte, der dybest set viser

164
00:10:37,110 --> 00:10:39,060
om det er fuldstændige eller ej.

165
00:10:39,060 --> 00:10:41,640
Jeg har måttet foretage temmelig minimale ændringer i denne kode,

166
00:10:41,640 --> 00:10:44,470
så her er vores addtodo funktion.

167
00:10:44,470 --> 00:10:48,530
Bemærk at her er jeg skubber det på array,

168
00:10:48,530 --> 00:10:51,300
og så er jeg skubber en 0 til at fuldstændig array,

169
00:10:51,300 --> 00:10:57,090
dybest set parallelt med nye todo skub til at sige

170
00:10:57,090 --> 00:11:00,430
Jeg tilføjer dette punkt, og det er kombineret med denne værdi,

171
00:11:00,430 --> 00:11:02,810
hvilket betyder, at det er ufuldstændig.

172
00:11:02,810 --> 00:11:04,970
Og så er jeg gentegning to-do liste.

173
00:11:04,970 --> 00:11:09,220
Nu opdager jeg har tilføjet denne drawTodoList funktion.

174
00:11:09,220 --> 00:11:11,760
Det tager en masse af koden vi havde før,

175
00:11:11,760 --> 00:11:15,320
dybest rydder ud af boksen, og derefter trækker den nye to-do liste.

176
00:11:15,320 --> 00:11:19,620
Men bemærk at der inde i denne for-løkke vi laver lidt mere nu.

177
00:11:19,620 --> 00:11:25,000
Vi dybest set at kontrollere, om det element, der svarer til den i'te todo her

178
00:11:25,000 --> 00:11:30,220
er færdig, og vi opfører forskelligt i disse 2 forhold.

179
00:11:30,220 --> 00:11:32,790
Hvis det er komplet, vi tilføjer denne del tag,

180
00:11:32,790 --> 00:11:35,360
som er dybest set den måde, du kan få det strejke gennem effekt

181
00:11:35,360 --> 00:11:38,190
krydser ud to-do liste, hvis det er færdig,

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

183
00:11:42,200 --> 00:11:45,030
Og så den slags tager sig af det,

184
00:11:45,030 --> 00:11:49,140
>> og det er en måde at opnå dette.

185
00:11:49,140 --> 00:11:53,420
Og så mærke til, når brugeren klikker på en af ​​disse

186
00:11:53,420 --> 00:11:56,780
vi skifte færdiggørelsen status af det.

187
00:11:56,780 --> 00:12:02,170
Når brugeren klikker, vil vi vende om det er afsluttet eller ej,

188
00:12:02,170 --> 00:12:04,540
og så vil vi gentegne det.

189
00:12:04,540 --> 00:12:06,190
Denne form for værker.

190
00:12:06,190 --> 00:12:09,860
Vi har disse funktioner, der udfører deres egne opgaver,

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

192
00:12:11,730 --> 00:12:14,110
Er der noget vi kan gøre bedre om dette, selv?

193
00:12:14,110 --> 00:12:18,700
Bemærk vi har disse 2 globale arrays.

194
00:12:18,700 --> 00:12:23,550
Hvis dette var C, og vi havde 2 arrays den slags repræsenterede

195
00:12:23,550 --> 00:12:25,800
data, der blev slags relateret på en eller anden måde

196
00:12:25,800 --> 00:12:30,140
hvad ville vi bruger i C til at kombinere disse 2 områder

197
00:12:30,140 --> 00:12:35,420
ind i noget, der indkapsler begge stykker af oplysninger?

198
00:12:35,420 --> 00:12:37,600
Nogen ønsker at komme med et forslag?

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

200
00:12:39,450 --> 00:12:42,340
>> Præcis, så vi kunne bruge nogle form for struct,

201
00:12:42,340 --> 00:12:44,960
og hvis du tænker tilbage på, siger, Pset 3,

202
00:12:44,960 --> 00:12:47,350
husker, at vi havde ordbog, og så havde vi om ordet

203
00:12:47,350 --> 00:12:50,230
var i ordbogen, og alle disse oplysninger blev sat sammen

204
00:12:50,230 --> 00:12:52,420
indersiden af ​​nogle datastruktur.

205
00:12:52,420 --> 00:12:56,390
En ting jeg kan gøre med denne kode for at undgå at disse 2 forskellige arrays

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

207
00:13:01,760 --> 00:13:07,150
Lad os tage et kig på det.

208
00:13:07,150 --> 00:13:11,740
Bemærk, at jeg kun har én række øverst nu

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

210
00:13:17,650 --> 00:13:21,350
skabe en bogstavelig version af et objekt,

211
00:13:21,350 --> 00:13:24,670
og læg mærke til der er 2 ejendomme, så vi har den todo,

212
00:13:24,670 --> 00:13:29,660
og det er holdt sammen med om det er fuldstændig eller ufuldstændig.

213
00:13:29,660 --> 00:13:31,000
Dette er meget lignende kode.

214
00:13:31,000 --> 00:13:35,310
Vi bruger JavaScript objekter.

215
00:13:35,310 --> 00:13:38,600
Denne form for forbedrer man ting.

216
00:13:38,600 --> 00:13:43,850
Ligesom nu, er alle disse områder relaterede oplysninger holdes sammen.

217
00:13:43,850 --> 00:13:46,410
Når vi går til printe den ud, kan vi få adgang til markerne.

218
00:13:46,410 --> 00:13:49,060
>> Læg mærke til hvordan vi laver todos [i]. Komplet

219
00:13:49,060 --> 00:13:52,880
stedet for at kontrollere den fuldstændige række separat,

220
00:13:52,880 --> 00:13:56,560
og læg mærke til, når vi ønsker at få den to-do strengen vi får to-do ejendom

221
00:13:56,560 --> 00:13:58,750
af denne todo, denne form for så giver mening, fordi

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

223
00:14:01,660 --> 00:14:05,650
Det har en todo, og det har, om det er fuldstændige eller ej.

224
00:14:05,650 --> 00:14:11,540
Ikke alt for mange forandringer der funktionelt, lige tilføjet nogle flere til koden.

225
00:14:11,540 --> 00:14:13,430
Dette er en forbedring på nogle fronter, right?

226
00:14:13,430 --> 00:14:16,030
Jeg mener, vi indregnet ud design lidt.

227
00:14:16,030 --> 00:14:20,350
Nu har vi objekter til stort set indkapsler disse data.

228
00:14:20,350 --> 00:14:27,130
Er der noget mere vi kunne gøre fra her i form af JavaScript?

229
00:14:27,130 --> 00:14:31,810
Ligesom varsel, at denne kode lige her

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

231
00:14:34,760 --> 00:14:40,520
er en lille, tror jeg, længe.

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

233
00:14:45,100 --> 00:14:48,400
Én ting, vi kunne gøre for at gøre denne kode ser lidt venligere

234
00:14:48,400 --> 00:14:51,450
så jeg ville ikke have at holde rulle til venstre og højre, og tilbage,

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

236
00:14:58,480 --> 00:15:02,710
>> Lad os se Seminar 2,

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

238
00:15:05,880 --> 00:15:08,790
Du må ikke være alt for bekendt med jQuery,

239
00:15:08,790 --> 00:15:11,510
men bare vide, at jQuery er en slags bibliotek for JavaScript

240
00:15:11,510 --> 00:15:15,910
der gør det lettere at gøre ting som adgang enkelte elementer i DOM.

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

242
00:15:21,280 --> 00:15:25,210
Jeg kan bruge meget renere måde jQuery,

243
00:15:25,210 --> 00:15:28,490
som er lige til at bruge selektorer.

244
00:15:28,490 --> 00:15:31,300
Som du kan se, har denne kode få lidt renere,

245
00:15:31,300 --> 00:15:35,770
meget lignende funktionelt, men det er tanken.

246
00:15:35,770 --> 00:15:37,980
Vi har set et par ting hidtil,

247
00:15:37,980 --> 00:15:42,010
så vi startede med blot rå JavaScript implementering.

248
00:15:42,010 --> 00:15:45,370
Vi har tilføjet nye funktioner og viste hvordan vi kan forbedre det med

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

250
00:15:49,090 --> 00:15:53,300
>> Er der nogen se nogen problemer med dette design?

251
00:15:53,300 --> 00:16:01,090
Nemlig, jeg gætte-eller ikke nødvendigvis vanskeligheder, men lad os sige

252
00:16:01,090 --> 00:16:04,830
vi ikke gør en to-do liste projektet og i morgen besluttede vi

253
00:16:04,830 --> 00:16:10,320
Vi ønskede at lave en indkøbsliste eller en indkøbsliste projekt.

254
00:16:10,320 --> 00:16:14,150
En masse af disse funktioner er meget ens.

255
00:16:14,150 --> 00:16:19,080
En masse af de ting, vi ønsker at komme ud af JavaScript er meget almindelige,

256
00:16:19,080 --> 00:16:23,820
og det understreger behovet for en slags måde

257
00:16:23,820 --> 00:16:25,670
gør det lettere at gøre.

258
00:16:25,670 --> 00:16:30,400
Jeg havde til at opbygge alt dette HTML adgang alt dette DOM adgang,

259
00:16:30,400 --> 00:16:35,530
som jeg har tænkt mig at repræsentere to-do liste med denne model.

260
00:16:35,530 --> 00:16:39,130
Og mærke jeg er ansvarlig for som JavaScript-udvikler

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

262
00:16:42,890 --> 00:16:48,040
Intet automatisk lavet, at JavaScript repræsentation

263
00:16:48,040 --> 00:16:51,590
eller to-do liste bliver skubbet ud til HTML.

264
00:16:51,590 --> 00:16:54,000
Intet håndhæves, at bortset fra mig.

265
00:16:54,000 --> 00:16:56,880
Jeg havde til at skrive lodtrækningen to-do liste funktion.

266
00:16:56,880 --> 00:17:01,650
Og det kan ikke være, jeg mener, det er rimeligt at gøre det,

267
00:17:01,650 --> 00:17:03,670
men det kan være trættende til tider.

268
00:17:03,670 --> 00:17:08,190
Hvis du har et større projekt, kunne det være vanskeligt.

269
00:17:08,190 --> 00:17:10,720
>> Rammer, en af ​​formålene med rammer

270
00:17:10,720 --> 00:17:14,060
er at forenkle denne proces og sortering af faktor ud

271
00:17:14,060 --> 00:17:16,950
disse fælles-I gætte, du kunne sige-design mønstre

272
00:17:16,950 --> 00:17:20,700
at folk generelt har en form for måde at repræsentere data,

273
00:17:20,700 --> 00:17:25,599
uanset om det er en venneliste, uanset om det er kort information

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

275
00:17:27,280 --> 00:17:30,660
Nogle mennesker har generelt en måde at repræsentere information,

276
00:17:30,660 --> 00:17:33,650
og de generelt har brug for at holde denne information slags i sync

277
00:17:33,650 --> 00:17:36,520
mellem hvad brugeren ser i en slags visning,

278
00:17:36,520 --> 00:17:39,850
taler i form af som model view controller, som du så i foredrag,

279
00:17:39,850 --> 00:17:45,400
og derefter den model, som i dette tilfælde er denne JavaScript array.

280
00:17:45,400 --> 00:17:49,020
Rammer giver os en måde at løse dette problem.

281
00:17:49,020 --> 00:17:53,080
Lad os nu tage et kig på gennemførelsen af ​​denne to-do liste

282
00:17:53,080 --> 00:18:02,360
i en ramme, der kaldes angularjs.

283
00:18:02,360 --> 00:18:04,650
Her er det. Bemærk det passer på et dias.

284
00:18:04,650 --> 00:18:07,330
Jeg behøver ikke at rulle til venstre og højre.

285
00:18:07,330 --> 00:18:10,460
Det er sandsynligvis ikke en stor grund til at anbefale at bruge en ramme,

286
00:18:10,460 --> 00:18:20,120
men varsel jeg nogensinde adgang individuelle HTML-elementer her?

287
00:18:20,120 --> 00:18:22,400
Er jeg nogensinde gå ind i DOM?

288
00:18:22,400 --> 00:18:26,120
Kan du se nogen document.getElementById eller sådan noget?

289
00:18:26,120 --> 00:18:29,870
Nej, det er gået.

290
00:18:29,870 --> 00:18:35,590
>> Kantet hjælper os med at holde DOM og vores JavaScript repræsentation af noget

291
00:18:35,590 --> 00:18:40,430
slags i sync, så hvis det ikke er i js filen,

292
00:18:40,430 --> 00:18:46,790
hvis der er nogen måde at programmatisk komme til alt, HTML-indhold

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 filen, er det nødt til at være i HTML, right?

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

296
00:19:01,910 --> 00:19:04,660
og mærke har vi tilføjet en masse her.

297
00:19:04,660 --> 00:19:11,110
Bemærk at der er disse nye egenskaber, der siger ng-klik og ng-repeat.

298
00:19:11,110 --> 00:19:15,650
Kantet tilgang til at løse dette problem med vanskeligheder i design

299
00:19:15,650 --> 00:19:19,130
er at dybest set gør HTML meget mere kraftfuld.

300
00:19:19,130 --> 00:19:24,420
Kantet er en måde at tillade dig at gøre HTML noget mere udtryksfuld.

301
00:19:24,420 --> 00:19:30,520
For eksempel kan jeg sige, at jeg har tænkt mig at binde eller binde dette tekstfelt

302
00:19:30,520 --> 00:19:35,080
til en variabel i min Vinkel JavaScript-kode.

303
00:19:35,080 --> 00:19:37,030
Denne ng-model gør netop det.

304
00:19:37,030 --> 00:19:41,550
Der dybest set siger, at elementet inde i dette tekstfelt,

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 meget kraftig, fordi jeg ikke behøver at eksplicit at gå til

308
00:19:51,600 --> 00:19:53,310
DOM for at få disse oplysninger.

309
00:19:53,310 --> 00:19:56,250
Jeg behøver ikke at sige document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Jeg behøver ikke at bruge jQueries som DOM adgang.

311
00:19:58,750 --> 00:20:03,280
Jeg kan knytte det til en variabel, og så når jeg ændre denne variabel

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

313
00:20:07,400 --> 00:20:11,640
så der forenkler processen med at skulle gå frem og tilbage mellem de to.

314
00:20:11,640 --> 00:20:18,260
Giver det mening?

315
00:20:18,260 --> 00:20:22,060
>> Og mærke der er ingen HTML adgangskode.

316
00:20:22,060 --> 00:20:27,760
Vi har lige lavet HTML mere kraftfuld,

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

318
00:20:32,070 --> 00:20:38,610
ligesom når du klikker på denne, kalder denne funktion inden for rammerne af todos.js,

319
00:20:38,610 --> 00:20:43,410
og vi kunne gøre det før, men der er andre ting, som denne ng-model,

320
00:20:43,410 --> 00:20:47,020
og bemærke dette ng-repeat.

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

322
00:20:51,520 --> 00:20:54,390
Her er vores uordnet liste fra før.

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

324
00:20:56,470 --> 00:21:03,710
men jeg nogensinde gør denne liste inde i JavaScript-koden?

325
00:21:03,710 --> 00:21:09,280
Jeg er ikke altid eksplicit gør denne liste.

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

327
00:21:11,580 --> 00:21:16,410
Nå, den måde Kantet opnår dette er dette kaldes en repeater.

328
00:21:16,410 --> 00:21:22,760
Dybest set siger, at jeg ønsker at udskrive denne HTML

329
00:21:22,760 --> 00:21:26,240
for hver todo indersiden af ​​mine todos array.

330
00:21:26,240 --> 00:21:31,850
Inde i todos.jr der er en todos vifte lige her,

331
00:21:31,850 --> 00:21:37,910
og dette vil fortælle Kantet gå gennem denne array, og for hvert element, du ser

332
00:21:37,910 --> 00:21:41,390
Jeg vil have dig til at udskrive denne HTML.

333
00:21:41,390 --> 00:21:44,620
Det er lidt awesome, fordi jeg bare kan gøre dette

334
00:21:44,620 --> 00:21:47,760
uden at skulle skrive en for-løkke,

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

336
00:21:52,250 --> 00:21:54,700
kan ikke være den mest gavnlige ting,

337
00:21:54,700 --> 00:22:01,240
men hvis du har et stort projekt, kan dette få meget praktisk.

338
00:22:01,240 --> 00:22:06,100
>> Dette er en løsning på dette problem, hvilket gør HTML mere kraftfuld,

339
00:22:06,100 --> 00:22:10,820
og det gør det muligt for os at holde JavaScript og HTML i sync.

340
00:22:10,820 --> 00:22:13,220
Der er andre mulige måder at løse dette problem,

341
00:22:13,220 --> 00:22:15,320
og ikke alle rammer gør dette.

342
00:22:15,320 --> 00:22:17,720
Ikke alle rammer arbejder langs disse linjer.

343
00:22:17,720 --> 00:22:19,490
Nogle rammer har forskellige tilgange,

344
00:22:19,490 --> 00:22:23,310
og du kan opleve, at du nyder at kodning i én ramme over den anden.

345
00:22:23,310 --> 00:22:26,160
Lad os se på en mere.

346
00:22:26,160 --> 00:22:30,060
Dette er den to-do liste kodet op i en ramme, der kaldes Backbone.

347
00:22:30,060 --> 00:22:33,250
Jeg har tænkt mig at gå gennem denne hurtigt.

348
00:22:33,250 --> 00:22:38,300
Jeg vil starte med HTML, før vi går der.

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

350
00:22:40,290 --> 00:22:43,950
Startende med HTML, som du bemærker, er vores HTML er meget ens

351
00:22:43,950 --> 00:22:50,000
til, hvad det var før, så ikke alt for meget nyt på den front.

352
00:22:50,000 --> 00:22:55,410
Men vores js fil er lidt anderledes.

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

354
00:23:00,360 --> 00:23:04,750
at en masse af, hvad vi gør med, siger, vores JavaScript-projekter

355
00:23:04,750 --> 00:23:09,110
er tænker modeller og samlinger af disse modeller.

356
00:23:09,110 --> 00:23:12,510
Dette kunne for eksempel være, et foto og samlinger af fotos,

357
00:23:12,510 --> 00:23:16,230
eller tanken om en ven og samlinger venner.

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

359
00:23:20,700 --> 00:23:25,340
vi sortere i repræsenterer tanken om at have en samling af venner

360
00:23:25,340 --> 00:23:29,500
en eller anden måde i JavaScript, og Backbone giver os dette lag

361
00:23:29,500 --> 00:23:33,040
på toppen af ​​JavaScripts eksisterende arrays og objekter

362
00:23:33,040 --> 00:23:38,300
at gøre mere kraftfulde ting med, at mere nemt.

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

364
00:23:41,870 --> 00:23:44,630
og du behøver ikke at bekymre sig for meget om syntaks

365
00:23:44,630 --> 00:23:48,730
men bemærke, at hvad der er en af ​​de egenskaber af dette?

366
00:23:48,730 --> 00:23:53,190
Det har en standard felt.

367
00:23:53,190 --> 00:23:56,640
Backbone tillader mig at præcisere allerede off the bat

368
00:23:56,640 --> 00:24:00,190
enhver ny to-gøre, at jeg opretter vil have disse standarder.

369
00:24:00,190 --> 00:24:04,100
Nu kan jeg tilpasse dette, men at være i stand til at angive standardindstillingerne

370
00:24:04,100 --> 00:24:07,220
er rart, og det er lidt praktisk, fordi det ikke er noget, der er ligesom

371
00:24:07,220 --> 00:24:10,430
iboende i JavaScript, og nu har jeg ikke eksplicit

372
00:24:10,430 --> 00:24:12,430
sige, at todos er ufuldstændige.

373
00:24:12,430 --> 00:24:19,190
Jeg kan sige ret off the bat, at todos vil blive markeret som ufuldstændig.

374
00:24:19,190 --> 00:24:21,300
Bemærk så hvad er det?

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

376
00:24:25,520 --> 00:24:30,960
Bemærk feltet er forbundet med, der siger model todo.

377
00:24:30,960 --> 00:24:33,390
Dette er min måde at fortælle Backbone, at

378
00:24:33,390 --> 00:24:37,350
Jeg har tænkt mig til at tænke på en samling af disse individuelle todos.

379
00:24:37,350 --> 00:24:42,140
Dette er dybest set den model for mit program.

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

381
00:24:44,980 --> 00:24:48,960
og dybest set de elementer, der er indeholdt i denne samling er alle kommer til at være disse todos,

382
00:24:48,960 --> 00:24:51,910
og det er meget naturligt 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
>> Lad os se på en lidt mere af dette.

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

386
00:25:05,900 --> 00:25:08,890
Den anden ting, Backbone siger, er, at

387
00:25:08,890 --> 00:25:14,660
en masse af de modeller, som du tænker på eller endda samlinger

388
00:25:14,660 --> 00:25:19,150
vil få brug for at have en eller anden måde for at blive vist.

389
00:25:19,150 --> 00:25:21,900
Vi er nødt til at gøre, at to-do liste,

390
00:25:21,900 --> 00:25:25,460
og ville det ikke være rart, hvis vi kunne give for hver enkelt model

391
00:25:25,460 --> 00:25:28,390
eller forbinder med hver model dette synspunkt

392
00:25:28,390 --> 00:25:34,020
der tillader os at jeg gætte forbinde de to sammen?

393
00:25:34,020 --> 00:25:38,320
Mens før vi måtte bruge en for-løkke, der ville køre igennem

394
00:25:38,320 --> 00:25:41,130
hver todo på vores liste, og derefter printe det ud her

395
00:25:41,130 --> 00:25:44,650
Vi kan stort set forbinde det med denne model.

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 forbundet med todo vi fundet tidligere.

398
00:25:50,550 --> 00:25:54,940
Nu hver todo er Visbar eller renderable

399
00:25:54,940 --> 00:25:56,960
af dette gøremål visning.

400
00:25:56,960 --> 00:25:59,440
Bemærke nogle af felterne.

401
00:25:59,440 --> 00:26:05,880
Hvad tror du, det tagname er tagname: li?

402
00:26:05,880 --> 00:26:09,790
Husker fra før, når vi ønskede at gengive en todo

403
00:26:09,790 --> 00:26:16,700
vi skulle eksplicit parre vores todos med li-tag.

404
00:26:16,700 --> 00:26:21,080
Nu er vi siger, at hvor det todo kommer til at leve

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

406
00:26:25,250 --> 00:26:31,440
Og nu skal vi også associere begivenheder med vores todos.

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

408
00:26:34,320 --> 00:26:38,480
Hvis du klikker på stort set den knap, det er hvad jeg siger der,

409
00:26:38,480 --> 00:26:43,080
så dybest set markere todo som det modsatte af, hvad den var før

410
00:26:43,080 --> 00:26:45,890
og derefter igen at anvendelsen.

411
00:26:45,890 --> 00:26:47,810
Det er slags ligner koden før.

412
00:26:47,810 --> 00:26:50,730
Husk, når vi markeret den som enten det modsatte eller-

413
00:26:50,730 --> 00:26:52,410
og så vi re-gjort det.

414
00:26:52,410 --> 00:26:57,750
Men bemærk nu denne begivenhed plejede at være noget, der var i HTML.

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

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

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

418
00:27:05,310 --> 00:27:07,210
oprettet, der todo at være ufuldstændig.

419
00:27:07,210 --> 00:27:11,180
Her har vi tilknyttet denne begivenhed for at klikke denne knap

420
00:27:11,180 --> 00:27:15,830
og vende om det er tændt eller slukket i dette synspunkt.

421
00:27:15,830 --> 00:27:20,480
>> Dette er en dejlig måde at opsætte denne begivenhed, så det er meget tæt bundet

422
00:27:20,480 --> 00:27:26,980
dette synspunkt, og derfor bemærke dette en mere.

423
00:27:26,980 --> 00:27:31,050
Jeg har denne render metode, og vi behøver ikke at gå gennem detaljerne.

424
00:27:31,050 --> 00:27:33,650
Det er slags ligner, hvad vi havde før,

425
00:27:33,650 --> 00:27:36,070
men bemærker jeg ikke looping gennem noget.

426
00:27:36,070 --> 00:27:40,700
Jeg udskriver ikke, at ul-tag, der er slags sige jeg har tænkt mig at udskrive alle elementerne.

427
00:27:40,700 --> 00:27:46,610
Jeg leverer den funktionalitet for at gøre denne ene to-do element.

428
00:27:46,610 --> 00:27:49,400
Dette er et meget stærkt koncept, fordi stort set

429
00:27:49,400 --> 00:27:53,600
vores to-do liste består af alle disse todos, og hvis vi dybest set kan angive

430
00:27:53,600 --> 00:27:56,890
den måde at gøre en af ​​dem todos

431
00:27:56,890 --> 00:28:04,230
så kan vi have vores stærke rygrad per se gør alle todos

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

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

434
00:28:14,180 --> 00:28:18,160
Nu er et godt spørgsmål at stille er, hvordan dette program bliver sat sammen?

435
00:28:18,160 --> 00:28:21,200
Fordi vi har evnen til at gengive en todo,

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

437
00:28:23,860 --> 00:28:25,100
>> Lad os tage et kig på det.

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

439
00:28:27,100 --> 00:28:29,740
Bemærk vi har en to-do liste view her

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

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

442
00:28:36,970 --> 00:28:45,280
denne initialisering metode vil blive kaldt, når vi først skabe denne to-do liste.

443
00:28:45,280 --> 00:28:52,630
Som du kan se, er det som at skabe to-do liste, og forbinder det med dette synspunkt.

444
00:28:52,630 --> 00:28:57,860
Og så tilføjede jeg de funktioner her, så dybest set, når du tilføjer et emne-

445
00:28:57,860 --> 00:29:01,440
Dette svarer til den AddItem metode, vi så før-

446
00:29:01,440 --> 00:29:07,430
Jeg har tænkt mig at oprette et nyt todo objekt, og læg mærke til jeg er faktisk ringer

447
00:29:07,430 --> 00:29:13,080
denne nye todo metode, så dette er leveret af Backbone,

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

449
00:29:16,010 --> 00:29:23,710
Og nu hver todo, at jeg opretter ved hjælp dette vil få denne funktionalitet, som vi oplevede før.

450
00:29:23,710 --> 00:29:28,140
Bemærk, at jeg har tænkt rydde ud tekstfeltet før-en lille lille detalje-

451
00:29:28,140 --> 00:29:32,900
og så er jeg tilføje denne samling.

452
00:29:32,900 --> 00:29:37,630
>> Denne næsten synes mærkeligt fordi før havde vi blot at gøre det todos.push,

453
00:29:37,630 --> 00:29:43,310
og så blev vi gjort, og det kan virke mere kompliceret for dette projekt,

454
00:29:43,310 --> 00:29:46,980
og du kan opleve, at Backbone eller endda Kantet eller anden ramme

455
00:29:46,980 --> 00:29:50,790
ikke passer netop dit projekt, men jeg tror, ​​det er vigtigt at tænke over

456
00:29:50,790 --> 00:29:54,100
hvad det betyder på en større skala til større projekter,

457
00:29:54,100 --> 00:29:56,610
fordi hvis vi havde et større projekt, hvor vi repræsenterer

458
00:29:56,610 --> 00:30:00,860
nogle virkelig kompliceret indsamling, noget dybere end blot en to-do liste,

459
00:30:00,860 --> 00:30:04,490
lad os sige en venneliste eller sådan noget, kan det komme i handy

460
00:30:04,490 --> 00:30:09,620
fordi vi kunne organisere vores kode i en virkelig praktisk måde

461
00:30:09,620 --> 00:30:12,550
på en måde, der ville gøre det lettere for en anden

462
00:30:12,550 --> 00:30:16,820
der ønskede at afhente et projekt at bygge videre på.

463
00:30:16,820 --> 00:30:21,450
Du kan se, at dette giver en masse struktur.

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

465
00:30:26,580 --> 00:30:31,050
Render, som du kan se, og du behøver ikke at forstå denne fulde syntaks,

466
00:30:31,050 --> 00:30:37,790
men dybest set for hver model det kommer til at kalde den enkelte render metoden.

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

468
00:30:41,500 --> 00:30:44,140
Lad os bare angive, hvordan at gøre de enkelte todos,

469
00:30:44,140 --> 00:30:47,310
og lad os lime dem sammen som en helhed.

470
00:30:47,310 --> 00:30:49,810
Men dette giver mulighed for abstraktion,

471
00:30:49,810 --> 00:30:55,470
fordi jeg kunne ændre den måde, jeg beslutter at gøre de enkelte todos,

472
00:30:55,470 --> 00:30:57,940
og jeg ville ikke have at ændre nogle af denne kode.

473
00:30:57,940 --> 00:31:00,700
Det er lidt cool.

474
00:31:00,700 --> 00:31:08,540
>> Er der nogen har nogen spørgsmål om JavaScript rammer?

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

476
00:31:14,310 --> 00:31:16,050
Åh, sikker, det er et godt spørgsmål.

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

478
00:31:19,080 --> 00:31:22,970
De fleste JavaScript rammer er egentlig bare js-filer

479
00:31:22,970 --> 00:31:25,740
som du kan medtage i toppen af ​​din kode.

480
00:31:25,740 --> 00:31:29,830
Bemærk i hoveddelen af ​​min HTML jeg har alle disse scripttags,

481
00:31:29,830 --> 00:31:34,250
og den endelige script-tag er den kode, som vi har skrevet.

482
00:31:34,250 --> 00:31:38,820
Og så de 3 rammer koder er bare også scripttags.

483
00:31:38,820 --> 00:31:42,110
Jeg inklusive dem fra hvad der kaldes en CDN,

484
00:31:42,110 --> 00:31:46,200
som tillader mig at få det fra en anden på dette tidspunkt

485
00:31:46,200 --> 00:31:57,930
men hver ramme har det-kan du stort set finde det indhold

486
00:31:57,930 --> 00:32:03,540
for en bestemt JavaScript-bibliotek til rådighed på nogle CDN eller noget lignende,

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

488
00:32:05,570 --> 00:32:07,600
Giver det mening?

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

490
00:32:09,500 --> 00:32:11,730
>> Det er 2 forskellige tilgange.

491
00:32:11,730 --> 00:32:14,640
De er ikke de eneste metoder til at løse dette problem.

492
00:32:14,640 --> 00:32:17,080
Der er mange forskellige ting,

493
00:32:17,080 --> 00:32:19,490
nogen kunne gøre, og der er mange rammer derude.

494
00:32:19,490 --> 00:32:23,300
Kantet og Backbone fortæller ikke hele historien.

495
00:32:23,300 --> 00:32:26,370
Held og lykke med dine afgangsprojekter, og tak meget.

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