1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminario] [frameworks JavaScript: Por que e como]

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

3
00:00:04,000 --> 00:00:06,960
[É dicir CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Ola, persoal. Benvido ao seminario Frameworks Javascript.

5
00:00:10,630 --> 00:00:14,910
O meu nome é Kevin, e hoxe eu vou estar falando de frameworks JavaScript,

6
00:00:14,910 --> 00:00:20,400
eo obxectivo deste seminario é non leva-lo a, digamos, dominar un marco especial, por si só

7
00:00:20,400 --> 00:00:23,810
pero para darlle unha ampla introdución a un par de cadros

8
00:00:23,810 --> 00:00:27,150
e amosar por que ía querer empregar un framework.

9
00:00:27,150 --> 00:00:31,060
>> Antes de facelo, eu vou dar un pouco de fondo en JavaScript,

10
00:00:31,060 --> 00:00:33,750
e despois imos levalo de alí.

11
00:00:33,750 --> 00:00:36,270
Imos comezar por aplicar unha lista de cousas a facer.

12
00:00:36,270 --> 00:00:39,330
Aquí está a nosa lista de tarefas para hoxe.

13
00:00:39,330 --> 00:00:41,990
É medio divertido. Temos que implementar unha lista de cousas a facer en JavaScript.

14
00:00:41,990 --> 00:00:45,110
Isto é o que vai parecer, para que o noso primeiro obxectivo.

15
00:00:45,110 --> 00:00:47,160
Non estamos indo a usar unha estrutura para facelo.

16
00:00:47,160 --> 00:00:51,930
Imos ao código JavaScript e obter a lista de cousas a facer para o traballo.

17
00:00:51,930 --> 00:00:54,370
Entón imos mellorar o deseño sen usar un framework.

18
00:00:54,370 --> 00:00:57,190
Nós imos discutir moitas cousas que podemos facer só só con JavaScript

19
00:00:57,190 --> 00:01:00,650
para facer a nosa lista de tarefas algo máis ben deseñado.

20
00:01:00,650 --> 00:01:02,490
Entón imos xogar nalgún jQuery,

21
00:01:02,490 --> 00:01:05,030
e logo, imos ollar para a mesma lista de cousas a facer,

22
00:01:05,030 --> 00:01:07,170
só aplicada en diferentes contextos, e nós imos discutir

23
00:01:07,170 --> 00:01:09,280
 os pros e contras ao longo do camiño.

24
00:01:09,280 --> 00:01:12,040
>> Imos comezar a aplicar esta lista de cousas a facer.

25
00:01:12,040 --> 00:01:14,270
Digamos que estamos dando este HTML.

26
00:01:14,270 --> 00:01:16,620
Vou facelo un pouco menor.

27
00:01:16,620 --> 00:01:19,300
Como verás, eu teño un pouco de cabeceira que di Todo

28
00:01:19,300 --> 00:01:21,740
e unha pequena caixa onde eu poida entrar unha descrición dun TODO

29
00:01:21,740 --> 00:01:26,990
e logo, un novo botón de punto, entón imos tentar entrar nun novo TODO a esta lista.

30
00:01:26,990 --> 00:01:31,000
Bótalle un seminario de cadros JavaScript,

31
00:01:31,000 --> 00:01:33,090
e eu son a bater novo elemento.

32
00:01:33,090 --> 00:01:35,730
Recibe este aviso JavaScript que se aplicar min.

33
00:01:35,730 --> 00:01:37,560
Temos que implementar lo.

34
00:01:37,560 --> 00:01:41,490
Imos comprobar o código para iso, tanto o HTML e JavaScript.

35
00:01:41,490 --> 00:01:43,260
Aquí está o noso HTML.

36
00:01:43,260 --> 00:01:45,500
Como podes ver aquí, aquí é o noso pequeno cabeceira Todos.

37
00:01:45,500 --> 00:01:47,620
Que era aquela cousa negra na parte superior,

38
00:01:47,620 --> 00:01:50,690
e logo, temos a bandexa de entrada co espazo reservado,

39
00:01:50,690 --> 00:01:59,460
e logo, hai un certo atributo deste botón que chama esa función addtodo.

40
00:01:59,460 --> 00:02:05,460
Alguén quere adiviñar que é o que significa o click?

41
00:02:05,460 --> 00:02:07,390
[Student resposta inaudível]

42
00:02:07,390 --> 00:02:09,289
Bo, sobre o clic é como unha especie de evento,

43
00:02:09,289 --> 00:02:12,120
como premer o rato é só un evento, eo que estamos facendo

44
00:02:12,120 --> 00:02:16,890
E nós estamos amarre o evento de premer este botón para realizar esta función.

45
00:02:16,890 --> 00:02:21,700
Addtodo é este manipulador de eventos para premer nese botón.

46
00:02:21,700 --> 00:02:25,010
>> Como verás, cando clic no botón novo elemento

47
00:02:25,010 --> 00:02:29,940
o evento click on é despedido, e esta función é chamada.

48
00:02:29,940 --> 00:02:33,170
Vexamos función.

49
00:02:33,170 --> 00:02:36,260
Como verás, aquí está o meu código JavaScript ata agora.

50
00:02:36,260 --> 00:02:41,280
O que eu teño na parte superior é unha estrutura de datos global para a miña lista de cousas a facer.

51
00:02:41,280 --> 00:02:44,060
Parece un array. É só un conxunto baleiro.

52
00:02:44,060 --> 00:02:47,100
E entón eu teño a función addtodo que vimos anteriormente,

53
00:02:47,100 --> 00:02:50,740
ea única liña de código no que hai esta alerta.

54
00:02:50,740 --> 00:02:55,730
El alerta aplicar min, e entón eu teño dúas tarefas na man.

55
00:02:55,730 --> 00:02:58,790
Teño que engadir o TODO para que a estrutura de datos global,

56
00:02:58,790 --> 00:03:01,860
e entón eu quero chamar a lista de cousas a facer.

57
00:03:01,860 --> 00:03:06,360
Nada moi extravagante aínda, pero JavaScript pode estar familiarizado con,

58
00:03:06,360 --> 00:03:12,370
entón eu vou ir a modo e revisar os fundamentos de JavaScript dese xeito.

59
00:03:12,370 --> 00:03:15,490
>> Imos dar a este un tiro.

60
00:03:15,490 --> 00:03:21,130
Digamos que o usuario escribe algo na caixa.

61
00:03:21,130 --> 00:03:23,360
Eu escriba algo aquí, texto.

62
00:03:23,360 --> 00:03:27,620
Como podo clasificar de acceso que o texto mediante JavaScript?

63
00:03:27,620 --> 00:03:32,500
Lembre-se de que o JavaScript, unha das súas características fundamentais é que nos dá

64
00:03:32,500 --> 00:03:34,670
este acceso programático ao DOM.

65
00:03:34,670 --> 00:03:40,670
Ela nos permite acceder aos elementos e as súas propiedades desta HTML real.

66
00:03:40,670 --> 00:03:43,430
A forma de facelo co bare ósos JavaScript

67
00:03:43,430 --> 00:03:51,360
é que podemos realmente usar unha función JavaScript chamada GetElementById.

68
00:03:51,360 --> 00:03:55,140
Quero gardar o texto que está escrito alí nalgunha variable,

69
00:03:55,140 --> 00:03:58,350
entón eu vou dicir unha nova variable chamada new_todo,

70
00:03:58,350 --> 00:04:01,980
e eu vou incorporarse este elemento.

71
00:04:01,980 --> 00:04:06,330
Esta é unha función,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
E agora eu estou a recibir un elemento por ID, entón eu teño do ID de que a caixa de texto,

73
00:04:11,580 --> 00:04:15,860
entón eu dei-lle o new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
É así que eu estou indo a obter un elemento.

75
00:04:18,399 --> 00:04:23,880
Ese é o meu argumento para esta función, para especificar cal ID de conseguir.

76
00:04:23,880 --> 00:04:28,110
E iso é un elemento HTML, e ten propiedades.

77
00:04:28,110 --> 00:04:30,650
Xa viu iso. Son atributos.

78
00:04:30,650 --> 00:04:37,090
O atributo do elemento de texto que almacena a entrada do usuario chámase valor.

79
00:04:37,090 --> 00:04:40,860
Salvei o valor da caixa de texto que agora nesta variable chamada new_todo.

80
00:04:40,860 --> 00:04:45,040
Agora eu teño acceso programático a esta variable, o que é legal

81
00:04:45,040 --> 00:04:49,200
porque agora o que podo facer é que podo engadir lo á miña lista de cousas a facer.

82
00:04:49,200 --> 00:04:52,870
>> A forma na que fariamos isto en JavaScript e non se preocupe se non está familiarizado con iso,

83
00:04:52,870 --> 00:04:57,010
pero só pasando por iso é todos.push

84
00:04:57,010 --> 00:05:00,130
porque ese é o nome da miña estrutura de datos global, aquí enriba,

85
00:05:00,130 --> 00:05:04,450
e eu estou indo a empurrar new_todo.

86
00:05:04,450 --> 00:05:09,120
Isto é óptimo, porque agora eu engade ao meu JavaScript

87
00:05:09,120 --> 00:05:11,280
representación da lista de cousas a facer.

88
00:05:11,280 --> 00:05:15,170
Pero agora, como fago para obtelo de volta ao HTML?

89
00:05:15,170 --> 00:05:18,560
Eu teño que atopar unha forma de clasificar de empurra-lo de volta.

90
00:05:18,560 --> 00:05:21,830
Noutras palabras, eu medio que teño que aproveitar iso.

91
00:05:21,830 --> 00:05:26,060
O que imos facer é que imos deseñar a lista de cousas a facer.

92
00:05:26,060 --> 00:05:29,270
Necesito actualizar outro HTML na páxina,

93
00:05:29,270 --> 00:05:32,040
e como podes ver, eu deixei a barra pouco aquí,

94
00:05:32,040 --> 00:05:36,840
este divisor de páxina cuxo ID é de todos,

95
00:05:36,840 --> 00:05:40,870
e eu vou poñer a lista de cousas a facer alí.

96
00:05:40,870 --> 00:05:47,240
Primeiro vou limpa-lo, porque, por exemplo, había unha vella lista de cousas a facer alí.

97
00:05:47,240 --> 00:05:49,560
Estou recibindo este elemento por ID de novo,

98
00:05:49,560 --> 00:05:54,530
e eu estou accedendo HTML interior dese elemento,

99
00:05:54,530 --> 00:05:58,010
e eu vou limpar isto.

100
00:05:58,010 --> 00:06:05,510
Se deixamos este código como está, nos veriamos un nada en branco alí,

101
00:06:05,510 --> 00:06:10,410
e agora quero comezar a prestar a miña nova lista de cousas a facer.

102
00:06:10,410 --> 00:06:12,870
Estou basicamente vai acabar coa miña lista de cousas a facer.

103
00:06:12,870 --> 00:06:18,180
>> Agora o interior HTML interno que todos div está totalmente clara,

104
00:06:18,180 --> 00:06:20,060
e agora eu teño para comezar a engadir á miña lista.

105
00:06:20,060 --> 00:06:23,890
O primeiro que quero é volver a engadir a etiqueta de lista non ordenada,

106
00:06:23,890 --> 00:06:33,890
que basicamente indica que este é o principio dunha lista ordenada.

107
00:06:33,890 --> 00:06:39,770
Agora, para cada elemento da miña matriz Todos Quero imprimir lo dentro dese HTML.

108
00:06:39,770 --> 00:06:43,710
Quero engadir que ao final da lista.

109
00:06:43,710 --> 00:06:49,040
Así como en C, podo usar un loop for, e eu vou comezar a principios da miña lista

110
00:06:49,040 --> 00:06:54,140
no elemento 0, e eu estou indo a ir todo o camiño ata a lonxitude da lista.

111
00:06:54,140 --> 00:07:01,100
Podemos realmente obter a lonxitude dunha matriz en JavaScript usando a propiedade length.

112
00:07:01,100 --> 00:07:03,420
Basicamente, eu vou facer algo moi parecido aquí dentro

113
00:07:03,420 --> 00:07:05,600
para imprimir este elemento.

114
00:07:05,600 --> 00:07:12,970
Podo acceder de novo o div Todos, a propiedade HTML interior que,

115
00:07:12,970 --> 00:07:17,560
e eu estou indo a engadir este novo elemento da lista, e que estará rodeado por

116
00:07:17,560 --> 00:07:25,390
esta etiqueta li, e eu estou indo a concatenar co operador +,

117
00:07:25,390 --> 00:07:28,040
e ese é o elemento i do meu abano de Todos,

118
00:07:28,040 --> 00:07:32,380
e entón eu vou pechar esta etiqueta.

119
00:07:32,380 --> 00:07:36,240
Agora, para cada elemento, imos engadir unha nova entrada na lista.

120
00:07:36,240 --> 00:07:48,700
E entón todo o que realmente cómpre facer é pechar esa marca.

121
00:07:48,700 --> 00:07:52,820
Eu só teño pechar este tag desordenadas lista.

122
00:07:52,820 --> 00:07:55,490
>> Ter unha idea de como funciona isto?

123
00:07:55,490 --> 00:07:57,700
Isto abre a lista enteira.

124
00:07:57,700 --> 00:08:01,080
Isto engade elementos individuais da lista Todos da lista,

125
00:08:01,080 --> 00:08:05,470
e logo, que pecha a lista enteira, e esta é a miña función addtodo.

126
00:08:05,470 --> 00:08:09,590
Eu basicamente comezar por conseguir o TODO do cadro de texto.

127
00:08:09,590 --> 00:08:18,950
Debo engadir que, para a matriz de Todos, e entón eu re-analizar a lista de cousas a facer.

128
00:08:18,950 --> 00:08:21,520
Agora podo engadir elementos a miña lista.

129
00:08:21,520 --> 00:08:24,620
Iso é moi emocionante porque en só algunhas liñas de código

130
00:08:24,620 --> 00:08:28,240
temos, basicamente, fixo unha lista de cousas a facer, onde podemos engadir elementos.

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

132
00:08:30,050 --> 00:08:34,480
Este é un tipo de unha introdución básica á Javascript.

133
00:08:34,480 --> 00:08:36,179
Non te preocupes moito coa sintaxe, de momento,

134
00:08:36,179 --> 00:08:38,130
pero pensar sobre iso conceptualmente.

135
00:08:38,130 --> 00:08:40,539
Tivemos un pouco de HTML.

136
00:08:40,539 --> 00:08:45,310
Tivemos unha caixa de texto na páxina que basicamente permitiu que os usuarios introducir un elemento para-facer para engadir.

137
00:08:45,310 --> 00:08:49,210
E entón usan JavaScript para buscar que todo de que a caixa de texto.

138
00:08:49,210 --> 00:08:52,830
Nós almacenado que dentro dunha matriz JavaScript, que é basicamente como

139
00:08:52,830 --> 00:08:56,010
nosa representación programática desta lista de cousas a facer,

140
00:08:56,010 --> 00:08:59,060
e, entón, imprimiu.

141
00:08:59,060 --> 00:09:02,690
É dicir todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Iso é legal, pero como podemos levar isto adiante?

143
00:09:07,620 --> 00:09:11,350
Ben, como podes ver, isto non é como unha completa lista de cousas a facer.

144
00:09:11,350 --> 00:09:15,100
Por exemplo, eu non podo anotar calquera destes elementos como incompleta,

145
00:09:15,100 --> 00:09:19,920
como se eu quería priorizar os elementos ou eliminar elementos.

146
00:09:19,920 --> 00:09:23,150
Isto é bo, pero podemos levar isto adiante.

147
00:09:23,150 --> 00:09:29,280
Non vou falar moito sobre a adición de recursos extra,

148
00:09:29,280 --> 00:09:32,800
pero podemos levar isto adiante.

149
00:09:32,800 --> 00:09:35,970
Imos falar sobre a adición de máis un recurso para esta lista de cousas a facer,

150
00:09:35,970 --> 00:09:40,370
que será poder comprobar un individuo a facer punto

151
00:09:40,370 --> 00:09:44,780
e telo ser untado, entón, basicamente dicindo que eu fixen iso.

152
00:09:44,780 --> 00:09:50,240
Imos dar un ollo a un código que pode conseguir isto.

153
00:09:50,240 --> 00:09:52,740
Teña en conta o que fixen na parte superior é que eu engade

154
00:09:52,740 --> 00:09:57,620
unha nova matriz global chamado completa.

155
00:09:57,620 --> 00:10:02,890
Estou basicamente usar isto para almacenar os elementos da lista de cousas a facer

156
00:10:02,890 --> 00:10:06,560
están completos ou non.

157
00:10:06,560 --> 00:10:08,470
Esta é unha forma de facelo.

158
00:10:08,470 --> 00:10:13,750
Se eu ollar para a posta en marcha deste, o display,

159
00:10:13,750 --> 00:10:21,120
basicamente, se eu escribir un todo e eu premer este botón de alternancia

160
00:10:21,120 --> 00:10:25,040
cruza a fóra, de xeito que cada elemento desta lista ten ou unha completa

161
00:10:25,040 --> 00:10:31,050
ou estado incompleto, e eu estou usando outro array para representar isto.

162
00:10:31,050 --> 00:10:33,730
>> Basicamente, a todos os quefaceres do array Todos

163
00:10:33,730 --> 00:10:37,110
hai un elemento na matriz completa que basicamente indica

164
00:10:37,110 --> 00:10:39,060
se é completo ou non.

165
00:10:39,060 --> 00:10:41,640
Tiven que facer cambios moi mínimas a este código,

166
00:10:41,640 --> 00:10:44,470
iso aquí é a nosa función addtodo.

167
00:10:44,470 --> 00:10:48,530
Lembra que aquí estou empurrando-o para a matriz,

168
00:10:48,530 --> 00:10:51,300
e entón eu estou empurrando a 0 para esa matriz completa,

169
00:10:51,300 --> 00:10:57,090
basicamente, en paralelo co novo impulso TODO dicir

170
00:10:57,090 --> 00:11:00,430
Estou engadindo este elemento, e é xunto con este valor,

171
00:11:00,430 --> 00:11:02,810
o que significa que é incompleto.

172
00:11:02,810 --> 00:11:04,970
E entón eu estou redeseñado a lista de cousas a facer.

173
00:11:04,970 --> 00:11:09,220
Agora noten que eu engade esa función drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Iso leva unha morea de código que tiñamos antes,

175
00:11:11,760 --> 00:11:15,320
basicamente limpa o cadro e, a continuación, chama a nova lista de cousas a facer.

176
00:11:15,320 --> 00:11:19,620
Pero teña en conta que dentro deste loop que estamos facendo un pouco máis agora.

177
00:11:19,620 --> 00:11:25,000
Estamos basicamente comprobar se o elemento correspondente ao TODO om aquí

178
00:11:25,000 --> 00:11:30,220
está completa, e nós estamos comportando de xeito diferente neses dous casos.

179
00:11:30,220 --> 00:11:32,790
Se é completa, estamos engadindo este comando del,

180
00:11:32,790 --> 00:11:35,360
que é basicamente a forma que pode comezar a folga a través de efecto

181
00:11:35,360 --> 00:11:38,190
riscando na lista de cousas a facer, se é completa,

182
00:11:38,190 --> 00:11:42,200
e se non é, non imos inclui-la.

183
00:11:42,200 --> 00:11:45,030
E así, este tipo de coida diso,

184
00:11:45,030 --> 00:11:49,140
>> e esa é unha maneira de conseguir isto.

185
00:11:49,140 --> 00:11:53,420
E, a continuación, entender cando o usuario fai clic nun deses

186
00:11:53,420 --> 00:11:56,780
que cambiar o estado de conclusión do mesmo.

187
00:11:56,780 --> 00:12:02,170
Cando o usuario fai clic, imos inverter se foi concluído ou non,

188
00:12:02,170 --> 00:12:04,540
e despois imos redesenhá lo.

189
00:12:04,540 --> 00:12:06,190
Este tipo de obras.

190
00:12:06,190 --> 00:12:09,860
Temos estas funcións que exercen as súas propias tarefas,

191
00:12:09,860 --> 00:12:11,730
e iso é bo.

192
00:12:11,730 --> 00:12:14,110
¿Hai algunha cousa que podería facer mellor sobre iso, entón?

193
00:12:14,110 --> 00:12:18,700
Teña en conta que temos estas dúas matrices globais.

194
00:12:18,700 --> 00:12:23,550
Se este era C, e tivemos dúas matrices que tipo de representadas

195
00:12:23,550 --> 00:12:25,800
datos que foi unha especie de relacionados dalgunha forma

196
00:12:25,800 --> 00:12:30,140
o que usamos en C para combinar eses dous campos

197
00:12:30,140 --> 00:12:35,420
en algo que encapsulado os dous anacos de información?

198
00:12:35,420 --> 00:12:37,600
Alguén quere facer unha suxestión?

199
00:12:37,600 --> 00:12:39,450
[Student resposta inaudível]

200
00:12:39,450 --> 00:12:42,340
>> Exactamente, polo que podería usar algún tipo de estrutura,

201
00:12:42,340 --> 00:12:44,960
e se pensas que volta a, digamos, pset 3,

202
00:12:44,960 --> 00:12:47,350
lembro que había dicionario, e despois tivemos a palabra

203
00:12:47,350 --> 00:12:50,230
Foi no dicionario, e toda a información que foi colocado xunto

204
00:12:50,230 --> 00:12:52,420
dentro dunha estrutura de datos.

205
00:12:52,420 --> 00:12:56,390
Unha cousa que podo facer con ese código para evitar que estas dúas matrices diferentes

206
00:12:56,390 --> 00:13:01,760
para pezas similares de información é que podo combina-los nun obxecto JavaScript.

207
00:13:01,760 --> 00:13:07,150
Imos dar un ollo niso.

208
00:13:07,150 --> 00:13:11,740
Repare que eu só teño unha matriz na parte superior agora

209
00:13:11,740 --> 00:13:17,650
eo que eu teño feito é, e isto é só a sintaxe JavaScript para tipo de

210
00:13:17,650 --> 00:13:21,350
a creación dunha versión literal dun obxecto,

211
00:13:21,350 --> 00:13:24,670
e ter en conta que hai dúas propiedades, polo que temos o conxunto,

212
00:13:24,670 --> 00:13:29,660
e el é mantido en conxunto con si é completo ou incompleto.

213
00:13:29,660 --> 00:13:31,000
Este código é moi semellante.

214
00:13:31,000 --> 00:13:35,310
Estamos a usar os obxectos Javascript.

215
00:13:35,310 --> 00:13:38,600
Este tipo de cousas mellores.

216
00:13:38,600 --> 00:13:43,850
Como agora, todos eses campos de información relacionadas son mantidos xuntos.

217
00:13:43,850 --> 00:13:46,410
Cando imos para imprimir lo, podemos acceder aos campos.

218
00:13:46,410 --> 00:13:49,060
>> Observe como estamos facendo Todos [i]. Completo

219
00:13:49,060 --> 00:13:52,880
no canto de comprobar o conxunto completo separado

220
00:13:52,880 --> 00:13:56,560
e entender cando queremos obter a secuencia de tarefas que estamos recibindo a propiedade de cousas a facer

221
00:13:56,560 --> 00:13:58,750
dese total, de xeito que este tipo de ten sentido, xa que

222
00:13:58,750 --> 00:14:01,660
cada elemento ten estas propiedades intrínsecas sobre o tema.

223
00:14:01,660 --> 00:14:05,650
Ten un todo, e ten se é completa ou non.

224
00:14:05,650 --> 00:14:11,540
Non hai moitos cambios funcionalmente, acaba de engadir un pouco máis para o código.

225
00:14:11,540 --> 00:14:13,430
Esta é unha mellora nalgunhas frontes, non?

226
00:14:13,430 --> 00:14:16,030
Quero dicir, nós consignado o deseño un pouco.

227
00:14:16,030 --> 00:14:20,350
Agora temos obxectos para encapsular basicamente eses datos.

228
00:14:20,350 --> 00:14:27,130
Hai algo máis que podemos facer de aquí en termos de JavaScript?

229
00:14:27,130 --> 00:14:31,810
Como aviso de que este código aquí

230
00:14:31,810 --> 00:14:34,760
para obter o HTML interior dunha div

231
00:14:34,760 --> 00:14:40,520
é un pouco, creo, por moito tempo.

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

233
00:14:45,100 --> 00:14:48,400
Unha cousa que podería facer para facer este código mirar un pouco máis agradable

234
00:14:48,400 --> 00:14:51,450
entón eu non tería que manter o desprazamento esquerda e dereita, adiante e cara atrás,

235
00:14:51,450 --> 00:14:58,480
é que eu podería usar unha biblioteca como jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Imos comprobar Seminario 2,

237
00:15:02,710 --> 00:15:05,880
e este é o mesmo código, mais é feito con jQuery.

238
00:15:05,880 --> 00:15:08,790
Pode non estar moi familiarizado con jQuery,

239
00:15:08,790 --> 00:15:11,510
pero só sei que jQuery é unha especie de biblioteca de JavaScript

240
00:15:11,510 --> 00:15:15,910
que fai máis doado facer cousas como acceder os elementos individuais do DOM.

241
00:15:15,910 --> 00:15:21,280
Aquí, en vez de dicir document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Podo usar a forma máis limpa en jQuery,

243
00:15:25,210 --> 00:15:28,490
que é só para usar selectores.

244
00:15:28,490 --> 00:15:31,300
Como verás, este código fixo un pouco máis limpo,

245
00:15:31,300 --> 00:15:35,770
moi similar funcionalmente, pero esa é a idea.

246
00:15:35,770 --> 00:15:37,980
Nós vimos un par de cousas, ata agora,

247
00:15:37,980 --> 00:15:42,010
entón comezamos coa implementación JavaScript só cru.

248
00:15:42,010 --> 00:15:45,370
Nós engadimos novas funcionalidades e mostrou como podemos melloralo lo

249
00:15:45,370 --> 00:15:49,090
só o que temos en JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Alguén ve algunha dificultade con este proxecto?

251
00:15:53,300 --> 00:16:01,090
É dicir, eu creo ou non, necesariamente, dificultades, pero imos dicir

252
00:16:01,090 --> 00:16:04,830
non estabamos facendo un proxecto de lista de cousas a facer, e mañá decidimos

253
00:16:04,830 --> 00:16:10,320
queriamos facer unha lista da compra ou un proxecto de lista da compra.

254
00:16:10,320 --> 00:16:14,150
Moitas destas características son moi semellantes.

255
00:16:14,150 --> 00:16:19,080
Unha morea de cousas que queremos saír de JavaScript son moi comúns,

256
00:16:19,080 --> 00:16:23,820
e isto reforza a necesidade de calquera tipo de medio de

257
00:16:23,820 --> 00:16:25,670
facer isto máis doado de facer.

258
00:16:25,670 --> 00:16:30,400
Tiven que construír todo isto acceso HTML, todo isto de acceso DOM,

259
00:16:30,400 --> 00:16:35,530
como eu vou para representar a lista de cousas a facer con este modelo.

260
00:16:35,530 --> 00:16:39,130
E repare que eu son responsable como o creador JavaScript

261
00:16:39,130 --> 00:16:42,890
para manter o código HTML e JavaScript que eu teño en sincronía.

262
00:16:42,890 --> 00:16:48,040
Nada feito automaticamente esa representación JavaScript

263
00:16:48,040 --> 00:16:51,590
ou a lista de cousas a facer son empurrados para HTML.

264
00:16:51,590 --> 00:16:54,000
Nada forzado que, excepto para min.

265
00:16:54,000 --> 00:16:56,880
Eu tiña que escribir o sorteo de cousas a facer a función de lista.

266
00:16:56,880 --> 00:17:01,650
E iso non pode ser, quero dicir, é razoable facelo,

267
00:17:01,650 --> 00:17:03,670
pero pode ser tedioso ás veces.

268
00:17:03,670 --> 00:17:08,190
Se tes un proxecto maior, que podería ser difícil.

269
00:17:08,190 --> 00:17:10,720
>> Frameworks, un dos propósitos de frameworks

270
00:17:10,720 --> 00:17:14,060
é simplificar este proceso e tipo de factor fóra

271
00:17:14,060 --> 00:17:16,950
estes common-Creo que podería dicir-patróns de deseño

272
00:17:16,950 --> 00:17:20,700
que a xente xeralmente teñen algún tipo de forma de representación de datos,

273
00:17:20,700 --> 00:17:25,599
se isto é unha lista de amigos, se isto é información do mapa

274
00:17:25,599 --> 00:17:27,280
ou algo así ou unha lista de cousas a facer.

275
00:17:27,280 --> 00:17:30,660
Algunhas persoas teñen xeralmente unha forma de representación da información,

276
00:17:30,660 --> 00:17:33,650
e eles xeralmente teñen que manter este tipo de información en sincronía

277
00:17:33,650 --> 00:17:36,520
entre o que o usuario ve nalgún tipo de punto de vista,

278
00:17:36,520 --> 00:17:39,850
falando en termos de como o controlador de vista do modelo que viu na aula,

279
00:17:39,850 --> 00:17:45,400
e logo, o modelo, o que, neste caso, esta matriz é JavaScript.

280
00:17:45,400 --> 00:17:49,020
Frameworks darnos unha forma de resolver este problema.

281
00:17:49,020 --> 00:17:53,080
Agora imos dar un ollo na implantación da lista de cousas a facer

282
00:17:53,080 --> 00:18:02,360
nun cadro chamado angularjs.

283
00:18:02,360 --> 00:18:04,650
É iso. Teña en conta que encaixa nunha foto.

284
00:18:04,650 --> 00:18:07,330
Non teño a rodar cara á esquerda e á dereita.

285
00:18:07,330 --> 00:18:10,460
Iso probablemente non é un gran motivo para recomendar o uso dun cadro,

286
00:18:10,460 --> 00:18:20,120
pero aviso que estou sempre accedendo elementos HTML individuais aquí?

287
00:18:20,120 --> 00:18:22,400
Estou sempre indo ao DOM?

288
00:18:22,400 --> 00:18:26,120
Ve algunha document.getElementById ou algo así?

289
00:18:26,120 --> 00:18:29,870
Non, iso é pasado.

290
00:18:29,870 --> 00:18:35,590
>> Angular nos axuda a manter o DOM e Javascript nosa representación de algo

291
00:18:35,590 --> 00:18:40,430
tipo de sincronizada, por iso, se non é o ficheiro js,

292
00:18:40,430 --> 00:18:46,790
se non hai ningunha forma de programación empezando a todo o contido HTML

293
00:18:46,790 --> 00:18:51,800
do JavaScript como imos manter isto en sincronía?

294
00:18:51,800 --> 00:18:58,160
Se non está no ficheiro js., El ten que ser en HTML, non?

295
00:18:58,160 --> 00:19:01,910
Esta é a nova versión do ficheiro HTML,

296
00:19:01,910 --> 00:19:04,660
e ter en conta que nós engadimos unha morea aquí.

297
00:19:04,660 --> 00:19:11,110
Teña en conta que hai eses novos atributos que din NG-click e ng-repeat.

298
00:19:11,110 --> 00:19:15,650
O enfoque da Angular para solucionar este problema de dificultades no deseño

299
00:19:15,650 --> 00:19:19,130
é, basicamente, facer HTML moito máis poderoso.

300
00:19:19,130 --> 00:19:24,420
Angular é unha forma de permitir que faga HTML algo máis expresivo.

301
00:19:24,420 --> 00:19:30,520
Por exemplo, eu podo dicir que eu vou amarre ou conectar esta caixa de texto

302
00:19:30,520 --> 00:19:35,080
para unha variable dentro do meu código JavaScript Angular.

303
00:19:35,080 --> 00:19:37,030
Este modelo NG fai exactamente iso.

304
00:19:37,030 --> 00:19:41,550
Que basicamente di que o interior deste cadro de texto do elemento,

305
00:19:41,550 --> 00:19:45,000
só asociar iso co new_todo_description variable

306
00:19:45,000 --> 00:19:47,870
dentro do código JavaScript.

307
00:19:47,870 --> 00:19:51,600
Isto é moi poderoso, porque eu non teño que ir explicitamente

308
00:19:51,600 --> 00:19:53,310
o DOM para obter esta información.

309
00:19:53,310 --> 00:19:56,250
Non teño que dicir document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Non teño de utilizar jQueries como acceso á DOM.

311
00:19:58,750 --> 00:20:03,280
Podo asocia-lo a unha variable, e entón cando eu cambiar esa variable

312
00:20:03,280 --> 00:20:07,400
dentro Javascript é mantido en sincronía co HTML,

313
00:20:07,400 --> 00:20:11,640
para que simplifica o proceso de ter que ir e volver entre os dous.

314
00:20:11,640 --> 00:20:18,260
Será que isto ten sentido?

315
00:20:18,260 --> 00:20:22,060
>> E noten que non hai código de acceso HTML.

316
00:20:22,060 --> 00:20:27,760
Acaba fixo HTML máis poderoso,

317
00:20:27,760 --> 00:20:32,070
e agora, por exemplo, podemos facer cousas como esta,

318
00:20:32,070 --> 00:20:38,610
como cando fai clic sobre isto, chamar esa función no ámbito da todos.js,

319
00:20:38,610 --> 00:20:43,410
e nós poderiamos facelo antes, pero hai outras cousas, como esta NG-modelo,

320
00:20:43,410 --> 00:20:47,020
e entender iso NG-repeat.

321
00:20:47,020 --> 00:20:51,520
¿Que pensas que iso fai?

322
00:20:51,520 --> 00:20:54,390
Aquí está a nosa lista non ordenada de antes.

323
00:20:54,390 --> 00:20:56,470
Temos as etiquetas ul,

324
00:20:56,470 --> 00:21:03,710
pero estou sempre prestando esta lista dentro do código JavaScript?

325
00:21:03,710 --> 00:21:09,280
Non estou sempre prestando explícitamente esta lista.

326
00:21:09,280 --> 00:21:11,580
Como funciona isto?

327
00:21:11,580 --> 00:21:16,410
Ben, a forma angular fai iso por iso chámase repetidor.

328
00:21:16,410 --> 00:21:22,760
Basicamente, este di que quero imprimir este HTML

329
00:21:22,760 --> 00:21:26,240
para todas as tarefas dentro do meu abano de Todos.

330
00:21:26,240 --> 00:21:31,850
Dentro todos.jr existe unha matriz Todos aquí,

331
00:21:31,850 --> 00:21:37,910
e iso vai contar go Angular través desa matriz e para cada elemento que ve

332
00:21:37,910 --> 00:21:41,390
Eu quero que imprimir este HTML.

333
00:21:41,390 --> 00:21:44,620
Este é o tipo de incrible, porque eu só podo facelo

334
00:21:44,620 --> 00:21:47,760
sen ter que escribir un loop for,

335
00:21:47,760 --> 00:21:52,250
que para unha lista de cousas a facer que era de só 30 liñas de código

336
00:21:52,250 --> 00:21:54,700
Pode non ser o máis vantaxoso,

337
00:21:54,700 --> 00:22:01,240
pero se ten un proxecto grande, iso pode ser moi cómodo.

338
00:22:01,240 --> 00:22:06,100
>> Esta é unha solución a este problema, facendo HTML máis poderoso,

339
00:22:06,100 --> 00:22:10,820
e que nos permite manter JavaScript e HTML en sincronía.

340
00:22:10,820 --> 00:22:13,220
Hai outras formas posibles para solucionar este problema,

341
00:22:13,220 --> 00:22:15,320
e non cada framework fai iso.

342
00:22:15,320 --> 00:22:17,720
Non todo o cadro funciona ao longo destas liñas.

343
00:22:17,720 --> 00:22:19,490
Algúns cadros teñen enfoques distintos,

344
00:22:19,490 --> 00:22:23,310
e pode considerar que desexa codificación nun cadro sobre o outro.

345
00:22:23,310 --> 00:22:26,160
Vexamos un máis.

346
00:22:26,160 --> 00:22:30,060
Esta é a lista de cousas a facer codificado nun cadro chamado Backbone.

347
00:22:30,060 --> 00:22:33,250
Vou pasar por iso rapidamente.

348
00:22:33,250 --> 00:22:38,300
Vou comezar co HTML antes de irmos para alí.

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

350
00:22:40,290 --> 00:22:43,950
Comezando co HTML, como entende, o noso HTML é moi semellante

351
00:22:43,950 --> 00:22:50,000
ao que era antes, así que non é moi novo nesa fronte.

352
00:22:50,000 --> 00:22:55,410
Pero o noso arquivo js é un pouco diferente.

353
00:22:55,410 --> 00:23:00,360
Backbone medio que ten esa idea, ou se basea na idea

354
00:23:00,360 --> 00:23:04,750
que moito do que facemos con, digamos, os nosos proxectos de JavaScript

355
00:23:04,750 --> 00:23:09,110
é pensar sobre os modelos e coleccións destes modelos.

356
00:23:09,110 --> 00:23:12,510
Isto podería ser, por exemplo, unha foto e coleccións de fotos

357
00:23:12,510 --> 00:23:16,230
ou a idea de correo e coleccións de amigos.

358
00:23:16,230 --> 00:23:20,700
E moitas veces cando estamos programando aplicacións JavaScript

359
00:23:20,700 --> 00:23:25,340
nós imos resolver de representar a idea de ter unha colección de amigos

360
00:23:25,340 --> 00:23:29,500
de algunha maneira en JavaScript, e Backbone dános esa capa

361
00:23:29,500 --> 00:23:33,040
encima de matrices e obxectos existentes do JavaScript

362
00:23:33,040 --> 00:23:38,300
para facer cousas máis poderosas que máis facilmente.

363
00:23:38,300 --> 00:23:41,870
>> Aquí define un modelo de tarefas,

364
00:23:41,870 --> 00:23:44,630
e non ten que se preocupar moito coa sintaxe,

365
00:23:44,630 --> 00:23:48,730
de ter en conta que o que é unha das propiedades deste?

366
00:23:48,730 --> 00:23:53,190
Ten un campo estándar.

367
00:23:53,190 --> 00:23:56,640
Backbone permíteme xa para especificar fóra do pau

368
00:23:56,640 --> 00:24:00,190
calquera novo para-facer que crear terá eses patróns.

369
00:24:00,190 --> 00:24:04,100
Agora podo personalizar iso, pero ser capaz de especificar as normas

370
00:24:04,100 --> 00:24:07,220
é bo, e é unha especie de cómodo, porque iso non é algo que é como

371
00:24:07,220 --> 00:24:10,430
inherente JavaScript, e agora eu non teño que explicitamente

372
00:24:10,430 --> 00:24:12,430
dicir que os Todos están incompletos.

373
00:24:12,430 --> 00:24:19,190
Podo dicir pronto de cara que todos van ser marcadas como incompletas.

374
00:24:19,190 --> 00:24:21,300
Observe entón o que é iso?

375
00:24:21,300 --> 00:24:25,520
Agora eu teño unha lista de cousas a facer, e iso é unha colección.

376
00:24:25,520 --> 00:24:30,960
Teña en conta o campo asociado que di que modelo do todo.

377
00:24:30,960 --> 00:24:33,390
Esta é a miña forma de dicir que Backbone

378
00:24:33,390 --> 00:24:37,350
Eu vou estar a pensar en unha colección deses Todos individuais.

379
00:24:37,350 --> 00:24:42,140
Esta é basicamente a estrutura do modelo para o meu programa.

380
00:24:42,140 --> 00:24:44,980
Aquí eu teño esa idea dunha colección,

381
00:24:44,980 --> 00:24:48,960
e, basicamente, os elementos contidos nesta colección son todos os que van ser estes Todos,

382
00:24:48,960 --> 00:24:51,910
e que é moi natural, neste sentido

383
00:24:51,910 --> 00:24:59,890
porque eu teño todos, e eu te-los nunha colección.

384
00:24:59,890 --> 00:25:02,940
>> Imos mirar un pouco máis diso.

385
00:25:02,940 --> 00:25:05,900
Aquí está unha visión Backbone.

386
00:25:05,900 --> 00:25:08,890
A outra cousa que di é que Backbone

387
00:25:08,890 --> 00:25:14,660
unha gran cantidade de modelos que está a pensar sobre coleccións ou mesmo

388
00:25:14,660 --> 00:25:19,150
van ter que ter algunha forma de ser exhibido.

389
00:25:19,150 --> 00:25:21,900
Necesitamos facer esa lista de cousas a facer,

390
00:25:21,900 --> 00:25:25,460
e non sería bo se puidésemos proporcionar para cada modelo

391
00:25:25,460 --> 00:25:28,390
ou asociarse con cada modelo este punto de vista

392
00:25:28,390 --> 00:25:34,020
que nos permite Creo que conectar os dous xuntos?

393
00:25:34,020 --> 00:25:38,320
Considerando que, antes tivemos que usar un loop for que atravesaría

394
00:25:38,320 --> 00:25:41,130
as tarefas na nosa lista e, a continuación, imprimir-lo aquí

395
00:25:41,130 --> 00:25:44,650
podemos basicamente conecta-lo con este modelo.

396
00:25:44,650 --> 00:25:47,550
Esta é unha visión de cousas a facer.

397
00:25:47,550 --> 00:25:50,550
Isto está asociado co TODO atopamos anteriormente.

398
00:25:50,550 --> 00:25:54,940
Agora, as tarefas é exibível ou renderizável

399
00:25:54,940 --> 00:25:56,960
por este punto de vista a facer.

400
00:25:56,960 --> 00:25:59,440
Teña en conta algúns dos campos.

401
00:25:59,440 --> 00:26:05,880
¿Que pensas que iso é tagName, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Lembre-se de antes cando queriamos facer un TODO

403
00:26:09,790 --> 00:26:16,700
teriamos que vincular explicitamente nosos Todos con esta etiqueta li.

404
00:26:16,700 --> 00:26:21,080
Agora estamos dicindo que onde esta TODO vai vivir

405
00:26:21,080 --> 00:26:25,250
estará dentro dunha etiqueta li.

406
00:26:25,250 --> 00:26:31,440
E agora tamén estamos asociando eventos con nosos Todos.

407
00:26:31,440 --> 00:26:34,320
>> Cada TODO ten este evento.

408
00:26:34,320 --> 00:26:38,480
Se fai clic practicamente o botón de alternancia, que é o que eu estou dicindo que,

409
00:26:38,480 --> 00:26:43,080
entón basicamente marcar o todo como o contrario do que era antes

410
00:26:43,080 --> 00:26:45,890
e entón re-facer a aplicación.

411
00:26:45,890 --> 00:26:47,810
Esta é unha especie de similar ao código antes.

412
00:26:47,810 --> 00:26:50,730
Lembra-se cando marcou como quere o contrario, ou-

413
00:26:50,730 --> 00:26:52,410
e, entón, re-procesado-lo.

414
00:26:52,410 --> 00:26:57,750
Pero teña en conta agora este evento adoitaba ser unha cousa que estaba no HTML.

415
00:26:57,750 --> 00:26:59,640
Estaba sentado alí.

416
00:26:59,640 --> 00:27:01,410
O botón tiña un clic.

417
00:27:01,410 --> 00:27:05,310
Cando fai clic no botón, fai o tipo de material para

418
00:27:05,310 --> 00:27:07,210
configurar que todo ser incompleto.

419
00:27:07,210 --> 00:27:11,180
Aquí temos asociado o evento de premer o botón de alternancia

420
00:27:11,180 --> 00:27:15,830
e reversión sexa activado ou desactivado con esa visión.

421
00:27:15,830 --> 00:27:20,480
>> Esta é unha boa forma de crear este evento para que sexa moi ben grazas

422
00:27:20,480 --> 00:27:26,980
este punto de vista, e así entender iso máis.

423
00:27:26,980 --> 00:27:31,050
Teño a rede renderse, e non temos para pasar os detalles.

424
00:27:31,050 --> 00:27:33,650
É medio parecido co que tiñamos antes,

425
00:27:33,650 --> 00:27:36,070
mais repare que eu non estou Looping través de calquera cousa.

426
00:27:36,070 --> 00:27:40,700
Non estou a impresión de que etiqueta UL que é unha especie de dicir que vou imprimir os elementos.

427
00:27:40,700 --> 00:27:46,610
Eu estou ofrecendo a funcionalidade para facer este un elemento de tarefa.

428
00:27:46,610 --> 00:27:49,400
Este é un concepto moi poderoso, porque, basicamente,

429
00:27:49,400 --> 00:27:53,600
nosa lista de cousas a facer consta de todos estes Todos, e se podemos basicamente especificar

430
00:27:53,600 --> 00:27:56,890
o modo para procesar un deses Todos

431
00:27:56,890 --> 00:28:04,230
entón podemos ter a nosa poderosa backbone per facer toda Todos

432
00:28:04,230 --> 00:28:07,760
chamando o método render nas Todos individuais.

433
00:28:07,760 --> 00:28:14,180
Este é un concepto que é útil aquí.

434
00:28:14,180 --> 00:28:18,160
Agora, unha boa pregunta é como é que esta aplicación a ser colocados xuntos?

435
00:28:18,160 --> 00:28:21,200
Porque temos a posibilidade de facer un todo,

436
00:28:21,200 --> 00:28:23,860
pero como é que imos estar coa idea de múltiples Todos?

437
00:28:23,860 --> 00:28:25,100
>> Imos dar un ollo niso.

438
00:28:25,100 --> 00:28:27,100
Esta é a última parte.

439
00:28:27,100 --> 00:28:29,740
Teña en conta que temos unha visión de lista de cousas a facer aquí,

440
00:28:29,740 --> 00:28:34,440
e teña en conta tamén é un punto de vista.

441
00:28:34,440 --> 00:28:36,970
E para pasar por riba de algunhas cousas,

442
00:28:36,970 --> 00:28:45,280
este método initialize chamarase cando nos crear esta lista de cousas a facer.

443
00:28:45,280 --> 00:28:52,630
Como verás, é como crear a lista de cousas a facer e asocia-lo con esa visión.

444
00:28:52,630 --> 00:28:57,860
E entón eu engade as funcións aquí, entón, basicamente, cando engadir un elemento-

445
00:28:57,860 --> 00:29:01,440
Isto é semellante ao método addItem se viu antes,

446
00:29:01,440 --> 00:29:07,430
Vou crear un novo obxecto todo, e ter en conta que eu realmente estou chamando

447
00:29:07,430 --> 00:29:13,080
este novo método todo, de forma que este é fornecido pola Backbone,

448
00:29:13,080 --> 00:29:16,010
e podo pasar miñas propiedades aquí.

449
00:29:16,010 --> 00:29:23,710
E agora as tarefas que se crea mediante este vai ter esa función que xa vimos antes.

450
00:29:23,710 --> 00:29:28,140
Repare que eu estou limpando o cadro de texto antes dun pequeno detalle pequeno-

451
00:29:28,140 --> 00:29:32,900
e entón eu estou engadindo esta colección.

452
00:29:32,900 --> 00:29:37,630
>> Isto case parece raro, porque antes nós só tivemos que facelo todos.push,

453
00:29:37,630 --> 00:29:43,310
e despois de que se fixeron, e isto pode parecer máis complicado para este proxecto específico,

454
00:29:43,310 --> 00:29:46,980
e pode considerar que Backbone ou mesmo angular ou calquera outra estrutura

455
00:29:46,980 --> 00:29:50,790
non axeitado ao seu proxecto particular, pero eu creo que é importante pensar sobre

456
00:29:50,790 --> 00:29:54,100
o que iso significa en maior escala para proxectos máis grandes,

457
00:29:54,100 --> 00:29:56,610
porque se tivésemos un proxecto grande onde estabamos representando

458
00:29:56,610 --> 00:30:00,860
unha colección realmente complexo, algo máis profundo que unha lista de cousas a facer,

459
00:30:00,860 --> 00:30:04,490
digamos que unha lista de amigos, ou algo así, isto podería vir a cadra

460
00:30:04,490 --> 00:30:09,620
porque poderiamos organizar noso código dun xeito moi cómodo,

461
00:30:09,620 --> 00:30:12,550
dun xeito que sería máis doado para alguén

462
00:30:12,550 --> 00:30:16,820
que quería coller un proxecto para construír encima.

463
00:30:16,820 --> 00:30:21,450
Podes ver que este ofrece unha gran cantidade de estrutura.

464
00:30:21,450 --> 00:30:26,580
E entón eu estou chamando facer este addItem.

465
00:30:26,580 --> 00:30:31,050
Render, como pode ver, e non ten que coller esta sintaxe completa,

466
00:30:31,050 --> 00:30:37,790
pero, basicamente, para cada modelo que vai chamar o método render individual.

467
00:30:37,790 --> 00:30:41,500
Isto é unha especie de onde isto vén.

468
00:30:41,500 --> 00:30:44,140
Imos só especificar como renderizar Todos os individuais,

469
00:30:44,140 --> 00:30:47,310
e logo, imos cola-los en conxunto, coma un todo.

470
00:30:47,310 --> 00:30:49,810
Pero iso proporciona unha forma de abstracción,

471
00:30:49,810 --> 00:30:55,470
por que eu podería cambiar a forma que eu decidir facer Todos os individuais,

472
00:30:55,470 --> 00:30:57,940
e eu non tería que cambiar un código.

473
00:30:57,940 --> 00:31:00,700
Iso é legal.

474
00:31:00,700 --> 00:31:08,540
>> Alguén ten algunha dúbida sobre frameworks JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Student pregunta inaudível]

476
00:31:14,310 --> 00:31:16,050
Ah, con certeza, esta é unha boa pregunta.

477
00:31:16,050 --> 00:31:19,080
A cuestión era como se eu incluír os cadros?

478
00:31:19,080 --> 00:31:22,970
A maioría dos frameworks JavaScript son basicamente só js

479
00:31:22,970 --> 00:31:25,740
que pode incluír na parte superior do seu código.

480
00:31:25,740 --> 00:31:29,830
Observe na parte da cabeza do meu HTML teño todas estas etiquetas de script,

481
00:31:29,830 --> 00:31:34,250
ea marca final de script é o código que escribiu.

482
00:31:34,250 --> 00:31:38,820
E entón os tres códigos de marco son só tamén etiquetas de script.

483
00:31:38,820 --> 00:31:42,110
Estou incluíndo los de que se chama CDN,

484
00:31:42,110 --> 00:31:46,200
o que me permite facelo de outra persoa neste momento

485
00:31:46,200 --> 00:31:57,930
pero cada cadro ten esa, pode moi ben atopar o contido

486
00:31:57,930 --> 00:32:03,540
para unha biblioteca JavaScript especial dispoñible nalgúns CDN ou algo parecido,

487
00:32:03,540 --> 00:32:05,570
e entón pode incluír estas etiquetas de script.

488
00:32:05,570 --> 00:32:07,600
Será que isto ten sentido?

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

490
00:32:09,500 --> 00:32:11,730
>> Esas son dous enfoques distintos.

491
00:32:11,730 --> 00:32:14,640
Estas non son as únicas propostas para solucionar este problema.

492
00:32:14,640 --> 00:32:17,080
Hai moitas cousas distintas que

493
00:32:17,080 --> 00:32:19,490
alguén podería facer, e hai moitos cadros por aí.

494
00:32:19,490 --> 00:32:23,300
Angular e Backbone non contan toda a historia.

495
00:32:23,300 --> 00:32:26,370
Boa sorte con proxectos finais, e moitas grazas.

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