1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminari] [marcs de JavaScript: Per què i com]

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

3
00:00:04,000 --> 00:00:06,960
[Aquest és CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hola a tots. Benvingut al seminari Frameworks JavaScript.

5
00:00:10,630 --> 00:00:14,910
El meu nom és Kevin, i avui parlaré de marcs de JavaScript,

6
00:00:14,910 --> 00:00:20,400
i l'objectiu d'aquest seminari no és per arribar a, per exemple, dominar un marc particular, per se

7
00:00:20,400 --> 00:00:23,810
però per donar-li una àmplia introducció a un parell de marcs

8
00:00:23,810 --> 00:00:27,150
i demostrar per què voldrà fer servir un framework.

9
00:00:27,150 --> 00:00:31,060
>> Abans de fer-ho, vaig a donar una mica d'història en JavaScript,

10
00:00:31,060 --> 00:00:33,750
i després anem a prendre des d'allà.

11
00:00:33,750 --> 00:00:36,270
Anem a començar per l'aplicació d'una llista de tasques pendents.

12
00:00:36,270 --> 00:00:39,330
Aquí està la nostra llista de tasques per avui.

13
00:00:39,330 --> 00:00:41,990
És una mica graciós. Hem d'aplicar una llista de coses per fer en JavaScript.

14
00:00:41,990 --> 00:00:45,110
Això és el que serà similar, pel que és el nostre primer objectiu.

15
00:00:45,110 --> 00:00:47,160
No utilitzarem un marc per fer això.

16
00:00:47,160 --> 00:00:51,930
Anem a codi JavaScript i obtenir la llista de coses per fer que funcioni.

17
00:00:51,930 --> 00:00:54,370
A continuació, anem a millorar el disseny sense necessitat d'utilitzar un marc.

18
00:00:54,370 --> 00:00:57,190
Anem a parlar de diverses coses que podem fer amb només sols JavaScript

19
00:00:57,190 --> 00:01:00,650
per fer la nostra llista de tasques una mica més ben dissenyat.

20
00:01:00,650 --> 00:01:02,490
A continuació, anem a tirar una mica de jQuery,

21
00:01:02,490 --> 00:01:05,030
i després anem a veure la mateixa llista de tasques pendents,

22
00:01:05,030 --> 00:01:07,170
només implementat en diferents marcs, i discutirem

23
00:01:07,170 --> 00:01:09,280
 els pros i els contres en el camí.

24
00:01:09,280 --> 00:01:12,040
>> Anem a començar l'aplicació d'aquesta llista de coses per fer.

25
00:01:12,040 --> 00:01:14,270
Diguem que se'ns ha donat aquest HTML.

26
00:01:14,270 --> 00:01:16,620
Vaig a fer això una mica més petit.

27
00:01:16,620 --> 00:01:19,300
Com pots veure, tinc una mica de capçalera que diu Tot

28
00:01:19,300 --> 00:01:21,740
i una petita caixa on pugui entrar en la descripció d'un TOT

29
00:01:21,740 --> 00:01:26,990
i després un botó nou tema, així que tractarem d'entrar en una nova del tot a aquesta llista.

30
00:01:26,990 --> 00:01:31,000
Dóna-li un seminari marcs JavaScript

31
00:01:31,000 --> 00:01:33,090
i estic de colpejar element nou.

32
00:01:33,090 --> 00:01:35,730
Tinc aquesta alerta de JavaScript que em diu implementar.

33
00:01:35,730 --> 00:01:37,560
Hem de posar-ho en pràctica.

34
00:01:37,560 --> 00:01:41,490
Anem a veure el codi per això, tant el codi HTML i JavaScript.

35
00:01:41,490 --> 00:01:43,260
Aquí està el nostre HTML.

36
00:01:43,260 --> 00:01:45,500
Com es pot veure aquí, aquí està el nostre petit encapçalat Tots.

37
00:01:45,500 --> 00:01:47,620
Això va ser tot el negreta a la part superior,

38
00:01:47,620 --> 00:01:50,690
i després tenim el quadre d'entrada amb el marcador de posició,

39
00:01:50,690 --> 00:01:59,460
i després hi ha un cert atribut d'aquest botó que crida a aquesta funció addTodo.

40
00:01:59,460 --> 00:02:05,460
Algú vol endevinar el que en fer clic es significant?

41
00:02:05,460 --> 00:02:07,390
[Estudiant resposta inaudible]

42
00:02:07,390 --> 00:02:09,289
Bé, el clic al és com un esdeveniment,

43
00:02:09,289 --> 00:02:12,120
com fer clic amb el ratolí és només un esdeveniment, i el que estem fent

44
00:02:12,120 --> 00:02:16,890
és que estem lligant el cas de fer clic en aquest botó per executar aquesta funció.

45
00:02:16,890 --> 00:02:21,700
AddTodo és aquest controlador d'esdeveniments per fer clic en aquest botó.

46
00:02:21,700 --> 00:02:25,010
>> Com es pot veure, en fer clic al botó Nou element

47
00:02:25,010 --> 00:02:29,940
l'esdeveniment clic en acomiaden, i aquesta funció es diu.

48
00:02:29,940 --> 00:02:33,170
Fem una ullada a la funció.

49
00:02:33,170 --> 00:02:36,260
Com podeu veure, aquí està el meu codi de JavaScript fins ara.

50
00:02:36,260 --> 00:02:41,280
El que tinc a la part superior és una estructura de dades global per a la meva llista de coses per fer.

51
00:02:41,280 --> 00:02:44,060
S'assembla a una matriu. És només una matriu buida.

52
00:02:44,060 --> 00:02:47,100
I després tinc la funció addTodo que hem vist abans,

53
00:02:47,100 --> 00:02:50,740
i l'única línia de codi no aquesta alerta.

54
00:02:50,740 --> 00:02:55,730
S'avisa em implementar, i després tinc 2 tasques.

55
00:02:55,730 --> 00:02:58,790
He d'afegir el del tot a l'estructura de dades global,

56
00:02:58,790 --> 00:03:01,860
i després vull cridar la llista de tasques pendents.

57
00:03:01,860 --> 00:03:06,360
Res massa elaborat encara, però JavaScript que pot no estar familiaritzat amb,

58
00:03:06,360 --> 00:03:12,370
així que vaig a anar poc a poc i revisar els fonaments de JavaScript en aquest camí.

59
00:03:12,370 --> 00:03:15,490
>> Anem a donar-li una oportunitat a això.

60
00:03:15,490 --> 00:03:21,130
Diguem que l'usuari introdueix alguna cosa en aquest quadre.

61
00:03:21,130 --> 00:03:23,360
M'acaba d'escriure alguna cosa aquí, text.

62
00:03:23,360 --> 00:03:27,620
Com puc ordenar l'accés que el text a través de JavaScript?

63
00:03:27,620 --> 00:03:32,500
Recordeu que JavaScript, una de les característiques fonamentals és que ens dóna

64
00:03:32,500 --> 00:03:34,670
aquest accés mitjançant programació a la DOM.

65
00:03:34,670 --> 00:03:40,670
Això ens permet accedir als elements i les seves propietats d'aquest HTML real.

66
00:03:40,670 --> 00:03:43,430
La forma en què fem amb els ossos al descobert JavaScript

67
00:03:43,430 --> 00:03:51,360
és en realitat podem utilitzar una funció de JavaScript anomenada getElementById.

68
00:03:51,360 --> 00:03:55,140
Vull guardar el text que està escrit allà, en alguna variable,

69
00:03:55,140 --> 00:03:58,350
així que vaig a dir una nova variable anomenada new_todo,

70
00:03:58,350 --> 00:04:01,980
i jo vaig a aconseguir aquest element.

71
00:04:01,980 --> 00:04:06,330
Aquesta és una funció,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
I ara m'estic posant un element d'identificació, pel que necessitarà l'ID d'aquest quadre de text,

73
00:04:11,580 --> 00:04:15,860
així que m'he donat la new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
Així és com em vaig a posar un element.

75
00:04:18,399 --> 00:04:23,880
Aquest és el meu argument per a aquesta funció per especificar els ID d'aconseguir.

76
00:04:23,880 --> 00:04:28,110
I això és un element d'HTML, i no té propietats.

77
00:04:28,110 --> 00:04:30,650
Vostè ha vist aquests. Són atributs.

78
00:04:30,650 --> 00:04:37,090
L'atribut de l'element de text que emmagatzema l'entrada de l'usuari es denomina valor.

79
00:04:37,090 --> 00:04:40,860
Em va salvar el valor del quadre de text que ara en aquesta variable anomenada new_todo.

80
00:04:40,860 --> 00:04:45,040
Ara tinc accés mitjançant programació a aquesta variable, que és una mena de fresc

81
00:04:45,040 --> 00:04:49,200
perquè ara el que puc fer és que puc afegir a la meva llista de coses per fer.

82
00:04:49,200 --> 00:04:52,870
>> La forma en què anàvem a fer això en JavaScript i no es preocupi si no està familiaritzat amb aquest,

83
00:04:52,870 --> 00:04:57,010
però només a través d'ell és todos.push

84
00:04:57,010 --> 00:05:00,130
perquè aquest és el nom de la meva estructura de dades mundial aquí,

85
00:05:00,130 --> 00:05:04,450
i jo vaig a empènyer new_todo.

86
00:05:04,450 --> 00:05:09,120
Això és molt bo perquè ara he afegit a la meva JavaScript

87
00:05:09,120 --> 00:05:11,280
representació de la llista de tasques pendents.

88
00:05:11,280 --> 00:05:15,170
Però ara, com puc obtenir de nou a l'HTML?

89
00:05:15,170 --> 00:05:18,560
He de trobar una manera d'ordenar d'empenta cap enrere.

90
00:05:18,560 --> 00:05:21,830
En altres paraules, com que he de treure això.

91
00:05:21,830 --> 00:05:26,060
El que farem és que anem a elaborar la llista de tasques pendents.

92
00:05:26,060 --> 00:05:29,270
Necessito actualitzar un altre HTML en aquesta pàgina,

93
00:05:29,270 --> 00:05:32,040
i com es pot veure, he deixat aquest petit contenidor aquí,

94
00:05:32,040 --> 00:05:36,840
aquest divisor de la pàgina amb identificador de Tots,

95
00:05:36,840 --> 00:05:40,870
i jo vaig a posar la llista de coses per fer.

96
00:05:40,870 --> 00:05:47,240
Primer vaig a aclarir que a causa, per exemple, hi havia una vella llista de coses per fer.

97
00:05:47,240 --> 00:05:49,560
M'estic posant aquest element per ID nou,

98
00:05:49,560 --> 00:05:54,530
i estic accedint al codi HTML intern d'aquest element,

99
00:05:54,530 --> 00:05:58,010
i jo vaig a netejar això.

100
00:05:58,010 --> 00:06:05,510
Si deixem aquest codi com és, ens agradaria veure una res en blanc allà,

101
00:06:05,510 --> 00:06:10,410
i ara vull començar fent la meva nova llista de tasques.

102
00:06:10,410 --> 00:06:12,870
Estic bàsicament, acabarà amb la meva llista de coses per fer.

103
00:06:12,870 --> 00:06:18,180
>> Ara l'interior HTML intern Tots div està del tot clar,

104
00:06:18,180 --> 00:06:20,060
i ara he de començar a afegir a la cistella.

105
00:06:20,060 --> 00:06:23,890
La primera cosa que vull afegir de nou és l'etiqueta llista desordenada,

106
00:06:23,890 --> 00:06:33,890
fet que denota que, bàsicament, aquest és el començament d'una llista no ordenada.

107
00:06:33,890 --> 00:06:39,770
Ara per a tots els elements en el meu array Tots vull imprimir dins d'aquest HTML.

108
00:06:39,770 --> 00:06:43,710
Vull afegir que a la part inferior de la llista.

109
00:06:43,710 --> 00:06:49,040
Igual que a C, puc utilitzar un bucle for, i vaig a començar pel principi de la cistella

110
00:06:49,040 --> 00:06:54,140
en l'element 0, i em vaig a anar fins al final a la longitud de la llista.

111
00:06:54,140 --> 00:07:01,100
De fet, podem obtenir la longitud d'un array en JavaScript utilitzant la propietat length.

112
00:07:01,100 --> 00:07:03,420
Bàsicament, vaig a fer alguna cosa molt similar a l'interior d'aquí

113
00:07:03,420 --> 00:07:05,600
per imprimir aquest element.

114
00:07:05,600 --> 00:07:12,970
Puc tenir accés de nou la div Tots, la propietat HTML intern que,

115
00:07:12,970 --> 00:07:17,560
i jo vaig a afegir en aquest nou element de la llista, i que estarà envoltat d'

116
00:07:17,560 --> 00:07:25,390
aquesta etiqueta li, i jo vaig a concatenar amb l'operador +,

117
00:07:25,390 --> 00:07:28,040
i aquest és l'element i de la meva Tots matriu,

118
00:07:28,040 --> 00:07:32,380
i després em vaig a tancar aquesta etiqueta.

119
00:07:32,380 --> 00:07:36,240
Ara per a tots els elements anem a afegir una nova entrada a la llista.

120
00:07:36,240 --> 00:07:48,700
I llavors tot el que realment hem de fer és tancar aquesta etiqueta.

121
00:07:48,700 --> 00:07:52,820
Només he de tancar aquesta desordenada tag llista.

122
00:07:52,820 --> 00:07:55,490
>> Li dóna una idea de com funciona això?

123
00:07:55,490 --> 00:07:57,700
Això obre la llista completa.

124
00:07:57,700 --> 00:08:01,080
Això afegeix elements individuals de la llista de Tots a la llista,

125
00:08:01,080 --> 00:08:05,470
i després que es tanca la llista completa, i aquest és la meva funció addTodo.

126
00:08:05,470 --> 00:08:09,590
Jo, bàsicament, començar per aconseguir el tot en el quadre de text.

127
00:08:09,590 --> 00:08:18,950
Afegeixo que en la matriu de Tots, i després tornar a fer la llista de coses per fer.

128
00:08:18,950 --> 00:08:21,520
Ara puc afegir elements a la llista.

129
00:08:21,520 --> 00:08:24,620
Això és molt emocionant, perquè en tan sols unes poques línies de codi

130
00:08:24,620 --> 00:08:28,240
bàsicament hem fet una llista de coses per fer, on podem afegir elements.

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

132
00:08:30,050 --> 00:08:34,480
Això és una cosa d'una introducció bàsica a JavaScript.

133
00:08:34,480 --> 00:08:36,179
No es preocupi massa sobre la sintaxi, per ara,

134
00:08:36,179 --> 00:08:38,130
però pensar en això conceptualment.

135
00:08:38,130 --> 00:08:40,539
Teníem una mica d'HTML.

136
00:08:40,539 --> 00:08:45,310
Vam tenir un quadre de text a la pàgina que bàsicament permeten als usuaris introduir un element de tasques pendents per afegir.

137
00:08:45,310 --> 00:08:49,210
I després utilitzem estigui habilitat per portar que tasques pendents d'aquest quadre de text.

138
00:08:49,210 --> 00:08:52,830
Ens van guardar que dins d'una matriu de JavaScript, que és bàsicament com

139
00:08:52,830 --> 00:08:56,010
nostra representació programàtica d'aquesta llista de coses per fer,

140
00:08:56,010 --> 00:08:59,060
i després imprimir.

141
00:08:59,060 --> 00:09:02,690
Aquesta és todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Es tracta d'una mena de fresc, però com podem anar més lluny?

143
00:09:07,620 --> 00:09:11,350
Bé, com poden veure, això no és com una completa llista de tasques pendents.

144
00:09:11,350 --> 00:09:15,100
Per exemple, no puc marcar qualsevol d'aquests elements com incompleta,

145
00:09:15,100 --> 00:09:19,920
com si volgués canviar la prioritat dels elements o eliminar elements.

146
00:09:19,920 --> 00:09:23,150
Això està bé, però podem anar més lluny.

147
00:09:23,150 --> 00:09:29,280
No parlaré molt sobre l'addició de característiques addicionals,

148
00:09:29,280 --> 00:09:32,800
però podríem prendre aquest més enllà.

149
00:09:32,800 --> 00:09:35,970
Anem a parlar sobre com afegir una característica més a aquesta llista de coses per fer,

150
00:09:35,970 --> 00:09:40,370
que es podrà comprovar que un individu tasca pendent

151
00:09:40,370 --> 00:09:44,780
i han de ser titllat, així que bàsicament dient que he fet això.

152
00:09:44,780 --> 00:09:50,240
Anem a veure una mica de codi que podria aconseguir-ho.

153
00:09:50,240 --> 00:09:52,740
Noti el que he fet a la part superior és que he afegit

154
00:09:52,740 --> 00:09:57,620
un nou array global anomenat complet.

155
00:09:57,620 --> 00:10:02,890
Bàsicament estic utilitzant això per emmagatzemar tant els elements de la llista de tasques pendents

156
00:10:02,890 --> 00:10:06,560
estan complets o no.

157
00:10:06,560 --> 00:10:08,470
Aquesta és una manera de fer això.

158
00:10:08,470 --> 00:10:13,750
Si miro l'execució d'aquest, a la pantalla,

159
00:10:13,750 --> 00:10:21,120
bàsicament, si entro en un TOT i premi el botó d'activació

160
00:10:21,120 --> 00:10:25,040
creua cap a fora, de manera que cada element en aquesta llista té ja sigui un complet

161
00:10:25,040 --> 00:10:31,050
o l'estat incomplet, i estic fent servir una altra matriu per representar això.

162
00:10:31,050 --> 00:10:33,730
>> Bàsicament per a cada tasques pendents en aquesta Tots array

163
00:10:33,730 --> 00:10:37,110
hi ha un element de la matriu completa que indica bàsicament

164
00:10:37,110 --> 00:10:39,060
si que és completa o no.

165
00:10:39,060 --> 00:10:41,640
He hagut de fer canvis molt mínims en aquest codi,

166
00:10:41,640 --> 00:10:44,470
així que aquí està la nostra funció addTodo.

167
00:10:44,470 --> 00:10:48,530
Tingueu en compte que aquí m'estic empenyent a la matriu,

168
00:10:48,530 --> 00:10:51,300
i estic empenyent un 0 a la gamma completa,

169
00:10:51,300 --> 00:10:57,090
bàsicament en paral · lel amb aquest nova embranzida del tot que dir

170
00:10:57,090 --> 00:11:00,430
Estic afegir aquest article, i està unida a aquest valor,

171
00:11:00,430 --> 00:11:02,810
el que significa que és incompleta.

172
00:11:02,810 --> 00:11:04,970
I llavors em redibuixar la llista de tasques pendents.

173
00:11:04,970 --> 00:11:09,220
Ara, noto que he afegit aquesta funció drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Això pren molt del codi que teníem abans,

175
00:11:11,760 --> 00:11:15,320
bàsicament esborra la caixa i després assenyala a la nova llista de tasques pendents.

176
00:11:15,320 --> 00:11:19,620
Però es va adonar que dins d'aquest bucle for estem fent una mica més ara.

177
00:11:19,620 --> 00:11:25,000
Bàsicament estem comprovant si l'element corresponent a Tot ITH aquí

178
00:11:25,000 --> 00:11:30,220
és completa, i estem actuant de manera diferent en aquestes 2 circumstàncies.

179
00:11:30,220 --> 00:11:32,790
Si està complet, estem afegint aquesta etiqueta del,

180
00:11:32,790 --> 00:11:35,360
que és bàsicament la manera d'aconseguir que la vaga a través de l'efecte

181
00:11:35,360 --> 00:11:38,190
ratllant la llista de coses per fer si és completa,

182
00:11:38,190 --> 00:11:42,200
i si no és així, no anem a incloure-ho.

183
00:11:42,200 --> 00:11:45,030
I perquè tipus de s'encarrega d'això,

184
00:11:45,030 --> 00:11:49,140
>> i aquesta és una manera d'aconseguir això.

185
00:11:49,140 --> 00:11:53,420
I després adonar-se quan l'usuari fa clic a un d'aquests

186
00:11:53,420 --> 00:11:56,780
d'alternar l'estat de finalització de la mateixa.

187
00:11:56,780 --> 00:12:02,170
Quan l'usuari fa clic, invertirem si ha estat completada o no,

188
00:12:02,170 --> 00:12:04,540
i després tornarem a dibuixar.

189
00:12:04,540 --> 00:12:06,190
Aquest tipus d'obres.

190
00:12:06,190 --> 00:12:09,860
Tenim les funcions que duen a terme les seves pròpies tasques,

191
00:12:09,860 --> 00:12:11,730
i això està bé.

192
00:12:11,730 --> 00:12:14,110
Hi ha alguna cosa que podem fer millor en això, però?

193
00:12:14,110 --> 00:12:18,700
Observi que tenim aquestes 2 sèries mundials.

194
00:12:18,700 --> 00:12:23,550
Si això era C, i teníem 2 arrays aquest tipus de representats

195
00:12:23,550 --> 00:12:25,800
dades que van ser una mena de relacionats d'alguna manera

196
00:12:25,800 --> 00:12:30,140
el faríem servir en C de combinar aquests 2 camps

197
00:12:30,140 --> 00:12:35,420
en alguna cosa que encapsula les dues peces d'informació?

198
00:12:35,420 --> 00:12:37,600
Algú vol fer un suggeriment?

199
00:12:37,600 --> 00:12:39,450
[Estudiant resposta inaudible]

200
00:12:39,450 --> 00:12:42,340
>> Exactament, així que podríem utilitzar algun tipus d'estructura,

201
00:12:42,340 --> 00:12:44,960
i si penses en, diguem, PSET 3,

202
00:12:44,960 --> 00:12:47,350
Recordo que vam tenir diccionari, i després vam haver si la paraula

203
00:12:47,350 --> 00:12:50,230
Va ser en el diccionari, i tota aquesta informació es va elaborar

204
00:12:50,230 --> 00:12:52,420
dins d'alguna estructura de dades.

205
00:12:52,420 --> 00:12:56,390
Una de les coses que puc fer amb aquest codi per evitar que aquests 2 conjunts diferents

206
00:12:56,390 --> 00:13:01,760
per peces similars d'informació és el que puc combinar-los en un objecte de JavaScript.

207
00:13:01,760 --> 00:13:07,150
Anem a fer una ullada a això.

208
00:13:07,150 --> 00:13:11,740
Observeu que només tinc una matriu al cim ara

209
00:13:11,740 --> 00:13:17,650
i el que he fet és-i això és només la sintaxi de JavaScript per a la classe de

210
00:13:17,650 --> 00:13:21,350
la creació d'una versió literal d'un objecte,

211
00:13:21,350 --> 00:13:24,670
i nota que hi ha 2 propietats, per la qual cosa tenim el TOT,

212
00:13:24,670 --> 00:13:29,660
i està obert, així com si és completa o incompleta.

213
00:13:29,660 --> 00:13:31,000
Aquest codi és molt similar.

214
00:13:31,000 --> 00:13:35,310
Estem usant els objectes JavaScript.

215
00:13:35,310 --> 00:13:38,600
Aquest tipus de coses millori.

216
00:13:38,600 --> 00:13:43,850
Com ara, tots aquests camps d'informació relacionada es mantenen junts.

217
00:13:43,850 --> 00:13:46,410
Quan anem a imprimir, podem accedir als camps.

218
00:13:46,410 --> 00:13:49,060
>> Noteu com ho estem fent de Tots [i]. Completa

219
00:13:49,060 --> 00:13:52,880
en lloc de revisar la matriu completa separada,

220
00:13:52,880 --> 00:13:56,560
i notem quan volem obtenir la cadena de tasques que estem rebent la propietat de tasques

221
00:13:56,560 --> 00:13:58,750
que TOT, pel que aquest tipus de té sentit perquè

222
00:13:58,750 --> 00:14:01,660
cada element té aquestes propietats intrínseques al respecte.

223
00:14:01,660 --> 00:14:05,650
Té un TOT, i té ja sigui completa o no.

224
00:14:05,650 --> 00:14:11,540
No hi ha molts canvis no funcionalment, acaba d'afegir una mica més per el codi.

225
00:14:11,540 --> 00:14:13,430
Es tracta d'una millora en alguns fronts, oi?

226
00:14:13,430 --> 00:14:16,030
Em refereixo a que un factor fos el disseny una mica.

227
00:14:16,030 --> 00:14:20,350
Ara tenim objectes per encapsular bàsicament aquestes dades.

228
00:14:20,350 --> 00:14:27,130
Hi ha alguna cosa més que podem fer d'aquí en termes de JavaScript?

229
00:14:27,130 --> 00:14:31,810
Com avís que el codi aquí

230
00:14:31,810 --> 00:14:34,760
per obtenir el codi HTML intern d'un div

231
00:14:34,760 --> 00:14:40,520
és una mica, suposo, molt de temps.

232
00:14:40,520 --> 00:14:45,100
Hi ha document.getElementById ("tots"). InnerHTML.

233
00:14:45,100 --> 00:14:48,400
Una de les coses que podríem fer perquè aquest codi es veuen una mica més amigable

234
00:14:48,400 --> 00:14:51,450
per no haver de seguir desplaçant cap a l'esquerra i dreta, amunt i avall,

235
00:14:51,450 --> 00:14:58,480
és que podria utilitzar una biblioteca com jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Anem a veure el Seminari 2,

237
00:15:02,710 --> 00:15:05,880
i aquest és el mateix codi, però s'ha fet amb jQuery.

238
00:15:05,880 --> 00:15:08,790
Potser no és molt familiaritzat amb jQuery,

239
00:15:08,790 --> 00:15:11,510
però només sé que jQuery és una espècie d'una biblioteca de JavaScript

240
00:15:11,510 --> 00:15:15,910
això fa que sigui més fàcil fer coses com accés als diferents elements del DOM.

241
00:15:15,910 --> 00:15:21,280
Aquí en comptes de dir document.getElementById ("tots"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Puc utilitzar la forma més neta tant en jQuery,

243
00:15:25,210 --> 00:15:28,490
que és només per utilitzar selectors.

244
00:15:28,490 --> 00:15:31,300
Com podeu veure, aquest codi es va fer una mica més net,

245
00:15:31,300 --> 00:15:35,770
molt similar funcionalment, però aquesta és la idea.

246
00:15:35,770 --> 00:15:37,980
Hem vist un parell de coses fins al moment,

247
00:15:37,980 --> 00:15:42,010
així que vam començar amb la implementació de JavaScript només prima.

248
00:15:42,010 --> 00:15:45,370
Hem afegit noves característiques i mostrem com podem millorar amb

249
00:15:45,370 --> 00:15:49,090
just el que tenim en JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Algú veu cap dificultat amb aquest disseny?

251
00:15:53,300 --> 00:16:01,090
És a dir, suposo, o no necessàriament dificultats, però direm

252
00:16:01,090 --> 00:16:04,830
no estàvem fent un projecte de llista de coses per fer, i demà ens decidim

253
00:16:04,830 --> 00:16:10,320
hem volgut fer una llista de compres o d'un projecte de llista de la compra.

254
00:16:10,320 --> 00:16:14,150
Moltes d'aquestes característiques són molt similars.

255
00:16:14,150 --> 00:16:19,080
Moltes de les coses que volem sortir de JavaScript són molt comuns,

256
00:16:19,080 --> 00:16:23,820
i això subratlla la necessitat d'algun tipus de forma d'

257
00:16:23,820 --> 00:16:25,670
fer això més fàcil de fer.

258
00:16:25,670 --> 00:16:30,400
Vaig haver de construir tot aquest accés HTML, tot aquest accés DOM,

259
00:16:30,400 --> 00:16:35,530
que vaig a representar la llista de tasques amb aquest model.

260
00:16:35,530 --> 00:16:39,130
I noto que sóc responsable com el desenvolupador de JavaScript

261
00:16:39,130 --> 00:16:42,890
per mantenir el codi HTML i JavaScript que tinc en sincronia.

262
00:16:42,890 --> 00:16:48,040
Res del fet automàticament que la representació JavaScript

263
00:16:48,040 --> 00:16:51,590
o la llista de tasques pendents d'ells acaben fora d'HTML.

264
00:16:51,590 --> 00:16:54,000
Res fa complir que a excepció de mi.

265
00:16:54,000 --> 00:16:56,880
Vaig haver de escriure el sorteig de tasques funció de llista.

266
00:16:56,880 --> 00:17:01,650
I això no pot ser, vull dir, que és raonable fer-ho,

267
00:17:01,650 --> 00:17:03,670
però de vegades pot ser tediós.

268
00:17:03,670 --> 00:17:08,190
Si vostè té un projecte més ampli, que podria ser difícil.

269
00:17:08,190 --> 00:17:10,720
>> Marc, un dels propòsits de marcs

270
00:17:10,720 --> 00:17:14,060
és simplificar el procés i tipus de factor de sortida

271
00:17:14,060 --> 00:17:16,950
aquests common-Suposo que es podria dir que els patrons de disseny

272
00:17:16,950 --> 00:17:20,700
que les persones solen tenir algun tipus de forma de representar les dades,

273
00:17:20,700 --> 00:17:25,599
ja sigui una llista d'amics, si aquesta és la informació del mapa

274
00:17:25,599 --> 00:17:27,280
o alguna cosa així, o una llista de tasques pendents.

275
00:17:27,280 --> 00:17:30,660
Algunes persones tenen en general una forma de representació de la informació,

276
00:17:30,660 --> 00:17:33,650
i en general han de mantenir aquest tipus d'informació en sincronia

277
00:17:33,650 --> 00:17:36,520
entre el que l'usuari veu en algun tipus de vista,

278
00:17:36,520 --> 00:17:39,850
parlant en termes de com el controlador de vista de model que vas veure a la conferència,

279
00:17:39,850 --> 00:17:45,400
i llavors el model, que en aquest cas és aquesta matriu de JavaScript.

280
00:17:45,400 --> 00:17:49,020
Marc ens donen una manera de resoldre aquest problema.

281
00:17:49,020 --> 00:17:53,080
Ara donem una ullada a l'aplicació d'aquesta llista de tasques

282
00:17:53,080 --> 00:18:02,360
en un marc anomenat angularjs.

283
00:18:02,360 --> 00:18:04,650
Això és tot. Observi que encaixa en una diapositiva.

284
00:18:04,650 --> 00:18:07,330
Jo no he de desplaçar-se a l'esquerra ia la dreta.

285
00:18:07,330 --> 00:18:10,460
Això probablement no és una gran raó per recomanar l'ús d'un marc,

286
00:18:10,460 --> 00:18:20,120
però noti que estic sempre accés als elements HTML individuals aquí?

287
00:18:20,120 --> 00:18:22,400
Estic cada vegada va en el DOM?

288
00:18:22,400 --> 00:18:26,120
¿Veu vostè alguna document.getElementById o alguna cosa així?

289
00:18:26,120 --> 00:18:29,870
No, això va ser.

290
00:18:29,870 --> 00:18:35,590
>> Angular ens ajuda a mantenir el DOM i JavaScript nostra representació d'alguna cosa

291
00:18:35,590 --> 00:18:40,430
tipus de sincronitzats, pel que si no està a l'arxiu js,

292
00:18:40,430 --> 00:18:46,790
si no hi ha forma de programació per arribar a tot aquest contingut HTML

293
00:18:46,790 --> 00:18:51,800
Del JavaScript com estem tenint això en sincronització?

294
00:18:51,800 --> 00:18:58,160
Si no està a l'arxiu js., Ha d'estar en HTML, oi?

295
00:18:58,160 --> 00:19:01,910
Aquesta és la nova versió de l'arxiu HTML,

296
00:19:01,910 --> 00:19:04,660
i notem que hem afegit molt aquí.

297
00:19:04,660 --> 00:19:11,110
Observeu que hi ha aquests nous atributs que diuen ng-clic i ng-repeat.

298
00:19:11,110 --> 00:19:15,650
L'enfocament d'angular a la solució d'aquest problema de les dificultats en el disseny

299
00:19:15,650 --> 00:19:19,130
és fer bàsicament HTML molt més potent.

300
00:19:19,130 --> 00:19:24,420
Angular és una forma de permetre que vostè faci HTML una mica més expressiu.

301
00:19:24,420 --> 00:19:30,520
Per exemple, jo puc dir que em vaig a lligar o enllaçar aquest quadre de text

302
00:19:30,520 --> 00:19:35,080
a una variable dins del meu codi JavaScript Angular.

303
00:19:35,080 --> 00:19:37,030
Aquest ng-model fa precisament això.

304
00:19:37,030 --> 00:19:41,550
Que bàsicament diu que l'element dins d'aquesta caixa de text,

305
00:19:41,550 --> 00:19:45,000
simplement associar això amb el new_todo_description variables

306
00:19:45,000 --> 00:19:47,870
dins del codi JavaScript.

307
00:19:47,870 --> 00:19:51,600
Això és molt poderós perquè no m'he d'anar expressament a

308
00:19:51,600 --> 00:19:53,310
el DOM per obtenir aquesta informació.

309
00:19:53,310 --> 00:19:56,250
No he de dir document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Jo no he de fer servir jQueries com accés DOM.

311
00:19:58,750 --> 00:20:03,280
Puc associar-lo a una variable, i després quan canvi la variable

312
00:20:03,280 --> 00:20:07,400
dins de JavaScript es tracta de mantenir-se en sintonia amb el codi HTML,

313
00:20:07,400 --> 00:20:11,640
el que simplifica el procés d'haver d'anar i venir entre els dos.

314
00:20:11,640 --> 00:20:18,260
Això té sentit?

315
00:20:18,260 --> 00:20:22,060
>> I fixin-se que no hi ha codi d'accés HTML.

316
00:20:22,060 --> 00:20:27,760
Hem aconseguit fer HTML més potent,

317
00:20:27,760 --> 00:20:32,070
i ara, per exemple, podem fer coses com aquesta,

318
00:20:32,070 --> 00:20:38,610
com quan fa clic a aquest, cridar a aquesta funció en l'àmbit de todos.js,

319
00:20:38,610 --> 00:20:43,410
i podríem fer això abans, però hi ha altres coses, com aquest ng-model,

320
00:20:43,410 --> 00:20:47,020
i observar aquest ng-repeat.

321
00:20:47,020 --> 00:20:51,520
Què pensa vostè que això fa?

322
00:20:51,520 --> 00:20:54,390
Aquí està la nostra llista desordenada d'abans.

323
00:20:54,390 --> 00:20:56,470
Tenim les etiquetes ul,

324
00:20:56,470 --> 00:21:03,710
però sento que he renderitzat aquesta llista dins del codi JavaScript?

325
00:21:03,710 --> 00:21:09,280
No estic sempre fent explícita aquesta llista.

326
00:21:09,280 --> 00:21:11,580
Com funciona això?

327
00:21:11,580 --> 00:21:16,410
Bé, la forma angular aconsegueix això és el que s'anomena un repetidor.

328
00:21:16,410 --> 00:21:22,760
Bàsicament diu que vull imprimir aquest HTML

329
00:21:22,760 --> 00:21:26,240
per a totes les tasques pendents en l'interior del meu Tots matriu.

330
00:21:26,240 --> 00:21:31,850
Dins todos.jr hi ha una varietat de Tots aquí,

331
00:21:31,850 --> 00:21:37,910
i això li dirà anar angular a través de la matriu, i per cada element que es veu

332
00:21:37,910 --> 00:21:41,390
Vull imprimir aquest HTML.

333
00:21:41,390 --> 00:21:44,620
Això és una mica impressionant, ja que només pot fer això

334
00:21:44,620 --> 00:21:47,760
sense haver d'escriure un bucle,

335
00:21:47,760 --> 00:21:52,250
que per obtenir una llista de tasques que tenia només 30 línies de codi

336
00:21:52,250 --> 00:21:54,700
pot no ser el més beneficiós,

337
00:21:54,700 --> 00:22:01,240
però si vostè té un projecte gran, això podria ser molt convenient.

338
00:22:01,240 --> 00:22:06,100
>> Aquesta és una solució a aquest problema, fent més potent HTML,

339
00:22:06,100 --> 00:22:10,820
i que ens permet seguir amb JavaScript i HTML en sincronia.

340
00:22:10,820 --> 00:22:13,220
Hi ha altres maneres possibles per resoldre aquest problema,

341
00:22:13,220 --> 00:22:15,320
i no cada marc ho fa.

342
00:22:15,320 --> 00:22:17,720
No tot marc treballa en aquesta línia.

343
00:22:17,720 --> 00:22:19,490
Alguns marcs tenen diferents enfocaments,

344
00:22:19,490 --> 00:22:23,310
i és possible que vostè gaudeixi de codificació en un marc sobre l'altre.

345
00:22:23,310 --> 00:22:26,160
Fem una ullada a un més.

346
00:22:26,160 --> 00:22:30,060
Aquesta és la llista de coses per fer codificat en un marc anomenat Backbone.

347
00:22:30,060 --> 00:22:33,250
Vaig a passar per això ràpidament.

348
00:22:33,250 --> 00:22:38,300
Vaig a començar amb el codi HTML abans d'anar-hi.

349
00:22:38,300 --> 00:22:40,290
Un segon.

350
00:22:40,290 --> 00:22:43,950
Començant amb l'HTML, com s'observa, l'HTML és molt similar

351
00:22:43,950 --> 00:22:50,000
al que era abans, així que no hi ha molt de nou en aquest front.

352
00:22:50,000 --> 00:22:55,410
Però la nostra js és una mica diferent.

353
00:22:55,410 --> 00:23:00,360
Backbone tipus de té aquesta idea, o es basa en la idea

354
00:23:00,360 --> 00:23:04,750
que molt del que fem amb, per exemple, els projectes de JavaScript

355
00:23:04,750 --> 00:23:09,110
és pensar en models i col · leccions d'aquests models.

356
00:23:09,110 --> 00:23:12,510
Això podria ser, per exemple, una foto i col · leccions de fotografies,

357
00:23:12,510 --> 00:23:16,230
o la idea d'un amic i col · leccions d'amics.

358
00:23:16,230 --> 00:23:20,700
I sovint, quan estem programant aplicacions JavaScript

359
00:23:20,700 --> 00:23:25,340
anem a resoldre de representar la idea de tenir un grup d'amics

360
00:23:25,340 --> 00:23:29,500
d'alguna manera en JavaScript, i Backbone ens dóna aquesta capa

361
00:23:29,500 --> 00:23:33,040
a la part superior de les matrius i els objectes existents de JavaScript

362
00:23:33,040 --> 00:23:38,300
per fer les coses més poderoses amb que més fàcilment.

363
00:23:38,300 --> 00:23:41,870
>> Aquí he definit un model per-do,

364
00:23:41,870 --> 00:23:44,630
i vostè no ha de preocupar massa sobre la sintaxi,

365
00:23:44,630 --> 00:23:48,730
però es va adonar que el que és una de les propietats d'aquesta?

366
00:23:48,730 --> 00:23:53,190
Ofereix un camp predeterminat.

367
00:23:53,190 --> 00:23:56,640
Backbone em permet especificar ja del pal

368
00:23:56,640 --> 00:24:00,190
tot nou a fer això crec que va a tenir aquests valors predeterminats.

369
00:24:00,190 --> 00:24:04,100
Ara puc personalitzar això, però ser capaç d'especificar els valors predeterminats

370
00:24:04,100 --> 00:24:07,220
és agradable, i és una mica convenient perquè això no és una cosa que és com

371
00:24:07,220 --> 00:24:10,430
inherent a JavaScript, i ara no tinc que explícitament

372
00:24:10,430 --> 00:24:12,430
Tots diuen que els estan incomplets.

373
00:24:12,430 --> 00:24:19,190
El que puc dir de bones a primeres que Tots seran marcats com incompleta.

374
00:24:19,190 --> 00:24:21,300
Cal notar llavors, què és això?

375
00:24:21,300 --> 00:24:25,520
Ara tinc una llista de coses per fer, i això és una col · lecció.

376
00:24:25,520 --> 00:24:30,960
Observeu el camp associat amb el model diu del tot.

377
00:24:30,960 --> 00:24:33,390
Aquesta és la meva manera de dir que la columna vertebral

378
00:24:33,390 --> 00:24:37,350
Jo estaré pensant en una col · lecció d'aquests Tots individuals.

379
00:24:37,350 --> 00:24:42,140
Aquesta és bàsicament l'estructura del model per al meu programa.

380
00:24:42,140 --> 00:24:44,980
Aquí tinc aquesta idea d'una col · lecció,

381
00:24:44,980 --> 00:24:48,960
i, bàsicament, els elements continguts en aquesta col · lecció de tots van a ser aquestes de Tots,

382
00:24:48,960 --> 00:24:51,910
i que és molt natural en aquest sentit

383
00:24:51,910 --> 00:24:59,890
perquè jo sí que tinc Tots, i els tinc en una col · lecció.

384
00:24:59,890 --> 00:25:02,940
>> Anem a veure una mica més d'això.

385
00:25:02,940 --> 00:25:05,900
Aquí és una vista Backbone.

386
00:25:05,900 --> 00:25:08,890
L'altra cosa que Backbone diu és que

387
00:25:08,890 --> 00:25:14,660
molts dels models que vostè està pensant, o fins i tot col · leccions

388
00:25:14,660 --> 00:25:19,150
hauran de tenir alguna manera de què es mostra.

389
00:25:19,150 --> 00:25:21,900
Hem de fer que la llista de coses per fer,

390
00:25:21,900 --> 00:25:25,460
i ¿no seria bo si poguéssim proveir per a cada model

391
00:25:25,460 --> 00:25:28,390
o associar a cada model d'aquest punt de vista

392
00:25:28,390 --> 00:25:34,020
que ens permet Suposo que connectar els dos junts?

393
00:25:34,020 --> 00:25:38,320
Mentre que abans havíem de fer servir un bucle que s'executi a través de

394
00:25:38,320 --> 00:25:41,130
totes les tasques pendents en la llista i després imprimir aquí

395
00:25:41,130 --> 00:25:44,650
que bàsicament podem connectar-lo amb aquest model.

396
00:25:44,650 --> 00:25:47,550
Aquesta és una vista de tasques pendents.

397
00:25:47,550 --> 00:25:50,550
Això s'associa amb el TOT hem constatat abans.

398
00:25:50,550 --> 00:25:54,940
Ara cada TOT és mostrable o renderizable

399
00:25:54,940 --> 00:25:56,960
per aquest punt de vista de tasques pendents.

400
00:25:56,960 --> 00:25:59,440
Observeu alguns dels camps.

401
00:25:59,440 --> 00:26:05,880
Què creus que és això tagName, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Recordeu que des d'abans, quan volíem fer un TOT

403
00:26:09,790 --> 00:26:16,700
caldria vincular explícitament Tots els nostres amb aquesta etiqueta li.

404
00:26:16,700 --> 00:26:21,080
Ara estem dient que quan això del tot es va a viure

405
00:26:21,080 --> 00:26:25,250
va a estar dins d'una etiqueta li.

406
00:26:25,250 --> 00:26:31,440
I ara també estem associant esdeveniments amb els nostres Tots.

407
00:26:31,440 --> 00:26:34,320
>> Cada TOT té aquest esdeveniment.

408
00:26:34,320 --> 00:26:38,480
Si fa clic a més o menys el botó de canvi, això és el que estic dient no,

409
00:26:38,480 --> 00:26:43,080
llavors bàsicament marcar el del tot com el contrari del que era abans

410
00:26:43,080 --> 00:26:45,890
i després tornar a fer la sol · licitud.

411
00:26:45,890 --> 00:26:47,810
Això és una mica similar al codi anterior.

412
00:26:47,810 --> 00:26:50,730
Recordeu que quan vam marcar com aviat el contrari o-

413
00:26:50,730 --> 00:26:52,410
i llavors tornen a representar ell.

414
00:26:52,410 --> 00:26:57,750
Però noti ara aquest esdeveniment que solia ser una cosa que estava en el codi HTML.

415
00:26:57,750 --> 00:26:59,640
Estava assegut allà.

416
00:26:59,640 --> 00:27:01,410
El botó tenia un clic.

417
00:27:01,410 --> 00:27:05,310
En fer clic al botó, és com que fa les coses a

418
00:27:05,310 --> 00:27:07,210
establir que TOT sigui incompleta.

419
00:27:07,210 --> 00:27:11,180
Aquí ens hem associat l'esdeveniment de fer clic en aquest botó d'activació

420
00:27:11,180 --> 00:27:15,830
i invertir ja sigui dins o fora d'aquesta opinió.

421
00:27:15,830 --> 00:27:20,480
>> Aquesta és una bona manera de crear aquest esdeveniment perquè sigui molt estretament units

422
00:27:20,480 --> 00:27:26,980
aquest punt de vista, pel que conta d'això una vegada més.

423
00:27:26,980 --> 00:27:31,050
Tinc aquest mètode render, i no hem de passar pels detalls.

424
00:27:31,050 --> 00:27:33,650
És una cosa semblant al que teníem abans,

425
00:27:33,650 --> 00:27:36,070
però noto que no estic recorrent res.

426
00:27:36,070 --> 00:27:40,700
No vaig a imprimir aquesta etiqueta ul que és una espècie de dir que vaig a imprimir tots els elements.

427
00:27:40,700 --> 00:27:46,610
Estic proporcionant la funcionalitat per a la prestació d'aquest element de tasca.

428
00:27:46,610 --> 00:27:49,400
Aquest és un concepte molt poderós perquè en el fons

429
00:27:49,400 --> 00:27:53,600
la nostra llista de tasques consisteix en totes aquestes Tots, i si podem especificar bàsicament

430
00:27:53,600 --> 00:27:56,890
la manera de fer que un dels Tots

431
00:27:56,890 --> 00:28:04,230
llavors podem tenir la nostra poderosa xarxa troncal per se rendeixi tot el Tots

432
00:28:04,230 --> 00:28:07,760
cridant al mètode render a Tots els individuals.

433
00:28:07,760 --> 00:28:14,180
Aquest és un concepte que és útil aquí.

434
00:28:14,180 --> 00:28:18,160
Ara, una bona pregunta és com es aquesta aplicació està posant junts?

435
00:28:18,160 --> 00:28:21,200
Com que tenim la capacitat de fer un TOT,

436
00:28:21,200 --> 00:28:23,860
però com fem perquè la idea de múltiples Tots?

437
00:28:23,860 --> 00:28:25,100
>> Anem a fer una ullada a això.

438
00:28:25,100 --> 00:28:27,100
Aquesta és l'última part.

439
00:28:27,100 --> 00:28:29,740
Observeu que tenim una vista de la llista de coses per fer aquí,

440
00:28:29,740 --> 00:28:34,440
i compta també és un punt de vista.

441
00:28:34,440 --> 00:28:36,970
I per anar més d'un parell de coses,

442
00:28:36,970 --> 00:28:45,280
aquest mètode initialize serà cridat quan vam crear primer aquesta llista de coses per fer.

443
00:28:45,280 --> 00:28:52,630
Com es pot veure, és com la creació de la llista de tasques pendents i associar-lo amb aquesta opinió.

444
00:28:52,630 --> 00:28:57,860
I després he afegit les funcions aquí, així que bàsicament quan s'agrega un element-

445
00:28:57,860 --> 00:29:01,440
això és similar al mètode addItem vam veure abans-

446
00:29:01,440 --> 00:29:07,430
Vaig a crear un objecte nou del tot, i noti realment estic trucant

447
00:29:07,430 --> 00:29:13,080
aquest nou mètode del tot, de manera que aquest és proporcionat per Backbone,

448
00:29:13,080 --> 00:29:16,010
i puc passar les meves propietats aquí.

449
00:29:16,010 --> 00:29:23,710
I ara cada TOT que crec amb això aconseguir que la funcionalitat que hem vist abans.

450
00:29:23,710 --> 00:29:28,140
Noti que estic netejant el quadre de text abans d'un petit petit detall-

451
00:29:28,140 --> 00:29:32,900
i estic afegint aquesta col · lecció.

452
00:29:32,900 --> 00:29:37,630
>> Això gairebé sembla estrany perquè abans només havíem de fer això todos.push,

453
00:29:37,630 --> 00:29:43,310
i després vam acabar, i això pot semblar més complicat per a aquest projecte en particular,

454
00:29:43,310 --> 00:29:46,980
i és possible que Backbone o fins i tot angular o qualsevol altre marc

455
00:29:46,980 --> 00:29:50,790
no s'adapta al seu projecte particular, però crec que és important pensar en

456
00:29:50,790 --> 00:29:54,100
el que això significa en una escala més gran per a projectes de més envergadura,

457
00:29:54,100 --> 00:29:56,610
perquè si tinguéssim un projecte més ampli en el que representàvem

458
00:29:56,610 --> 00:30:00,860
alguna col · lecció realment complex, una mica més profund que una simple llista de coses per fer,

459
00:30:00,860 --> 00:30:04,490
diguem que una llista d'amics o alguna cosa així, això podria ser útil

460
00:30:04,490 --> 00:30:09,620
perquè podríem organitzar el nostre codi d'una manera molt convenient,

461
00:30:09,620 --> 00:30:12,550
d'una manera que faria més fàcil per a algú més

462
00:30:12,550 --> 00:30:16,820
que volia recollir a un projecte per construir.

463
00:30:16,820 --> 00:30:21,450
Es pot veure que això proporciona una gran quantitat d'estructura.

464
00:30:21,450 --> 00:30:26,580
I després et dic fer en aquest addItem.

465
00:30:26,580 --> 00:30:31,050
Render, com es pot veure, i vostè no ha d'aprofitar aquesta sintaxi,

466
00:30:31,050 --> 00:30:37,790
però en el fons de cada model que va a cridar al mètode render individual.

467
00:30:37,790 --> 00:30:41,500
Això és una espècie d'on ve.

468
00:30:41,500 --> 00:30:44,140
Anem a especificar com representar els Tots individuals,

469
00:30:44,140 --> 00:30:47,310
i després anem a enganxar-les en el seu conjunt.

470
00:30:47,310 --> 00:30:49,810
No obstant això, això proporciona una forma d'abstracció,

471
00:30:49,810 --> 00:30:55,470
perquè podria canviar la forma en què decideixo fer de Tots individuals,

472
00:30:55,470 --> 00:30:57,940
i jo no hauria de canviar alguna d'aquest codi.

473
00:30:57,940 --> 00:31:00,700
Això és una mena de fresc.

474
00:31:00,700 --> 00:31:08,540
>> Algú té alguna pregunta sobre els marcs de JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Pregunta inaudible Estudiant]

476
00:31:14,310 --> 00:31:16,050
Sí, és clar, això és una gran pregunta.

477
00:31:16,050 --> 00:31:19,080
La pregunta era com m'incloc els marcs?

478
00:31:19,080 --> 00:31:22,970
La majoria dels frameworks de JavaScript són bàsicament js

479
00:31:22,970 --> 00:31:25,740
que es poden incloure en la part superior del seu codi.

480
00:31:25,740 --> 00:31:29,830
Observeu que a la part de cap de la meva HTML tinc totes aquestes etiquetes de script,

481
00:31:29,830 --> 00:31:34,250
i l'etiqueta de final de l'escriptura és el codi que hem escrit.

482
00:31:34,250 --> 00:31:38,820
I llavors els codis de marc 3 són també etiquetes de script.

483
00:31:38,820 --> 00:31:42,110
Estic inclusió del que s'anomena un CDN,

484
00:31:42,110 --> 00:31:46,200
que em permet entenc d'una altra persona en aquest moment

485
00:31:46,200 --> 00:31:57,930
però cada marc té aquesta-es pot gairebé trobar el contingut

486
00:31:57,930 --> 00:32:03,540
per a una biblioteca de JavaScript en particular disponible en alguns CDN o alguna cosa així,

487
00:32:03,540 --> 00:32:05,570
i llavors vostè pot incloure les següents etiquetes de script.

488
00:32:05,570 --> 00:32:07,600
Això té sentit?

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

490
00:32:09,500 --> 00:32:11,730
>> Aquests son 2 enfocaments diferents.

491
00:32:11,730 --> 00:32:14,640
Aquests no són els únics enfocaments per resoldre aquest problema.

492
00:32:14,640 --> 00:32:17,080
Hi ha moltes coses diferents que

493
00:32:17,080 --> 00:32:19,490
algú podria fer, i hi ha molts marcs per aquí.

494
00:32:19,490 --> 00:32:23,300
Angulars i Backbone no compten tota la història.

495
00:32:23,300 --> 00:32:26,370
Bona sort amb els seus projectes finals, i moltes gràcies.

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