1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminário] [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
[Isto é CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Oi, pessoal. Bem-vindo ao seminário Frameworks JavaScript.

5
00:00:10,630 --> 00:00:14,910
Meu nome é Kevin, e hoje eu vou estar falando sobre frameworks JavaScript,

6
00:00:14,910 --> 00:00:20,400
eo objetivo deste seminário é não levá-lo a, digamos, dominar um quadro especial, por si só

7
00:00:20,400 --> 00:00:23,810
mas para dar-lhe uma ampla introdução a um par de quadros

8
00:00:23,810 --> 00:00:27,150
e mostrar por que iria querer usar um framework.

9
00:00:27,150 --> 00:00:31,060
>> Antes de eu fazer isso, eu vou dar um pouco de fundo em JavaScript,

10
00:00:31,060 --> 00:00:33,750
e depois vamos levá-lo de lá.

11
00:00:33,750 --> 00:00:36,270
Vamos começar por implementar uma lista de coisas a fazer.

12
00:00:36,270 --> 00:00:39,330
Aqui está a nossa lista de tarefas para hoje.

13
00:00:39,330 --> 00:00:41,990
É meio engraçado. Temos que implementar uma lista de coisas a fazer em JavaScript.

14
00:00:41,990 --> 00:00:45,110
Isto é o que ele vai parecer, para que o nosso primeiro objetivo.

15
00:00:45,110 --> 00:00:47,160
Nós não estamos indo para usar uma estrutura para fazer isso.

16
00:00:47,160 --> 00:00:51,930
Vamos ao código JavaScript e obter a lista de coisas a fazer para o trabalho.

17
00:00:51,930 --> 00:00:54,370
Então vamos melhorar o design sem usar um framework.

18
00:00:54,370 --> 00:00:57,190
Nós vamos discutir várias coisas que podemos fazer apenas sozinho com JavaScript

19
00:00:57,190 --> 00:01:00,650
para tornar a nossa lista de tarefas um pouco mais bem desenhado.

20
00:01:00,650 --> 00:01:02,490
Então vamos jogar em algum jQuery,

21
00:01:02,490 --> 00:01:05,030
e, em seguida, vamos olhar para a mesma lista de coisas a fazer,

22
00:01:05,030 --> 00:01:07,170
apenas implementada em diferentes contextos, e nós vamos discutir

23
00:01:07,170 --> 00:01:09,280
 os prós e contras ao longo do caminho.

24
00:01:09,280 --> 00:01:12,040
>> Vamos começar a implementar essa lista de coisas a fazer.

25
00:01:12,040 --> 00:01:14,270
Vamos dizer que nós estamos dando este HTML.

26
00:01:14,270 --> 00:01:16,620
Eu vou fazer isso um pouco menor.

27
00:01:16,620 --> 00:01:19,300
Como você pode ver, eu tenho um pouco de cabeçalho que diz Todo

28
00:01:19,300 --> 00:01:21,740
e uma pequena caixa onde eu possa entrar uma descrição de um TODO

29
00:01:21,740 --> 00:01:26,990
e, em seguida, um novo botão de ponto, então vamos tentar entrar em um novo TODO a esta lista.

30
00:01:26,990 --> 00:01:31,000
Dê um seminário de quadros JavaScript,

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

32
00:01:33,090 --> 00:01:35,730
Recebo este alerta JavaScript que diz implementar mim.

33
00:01:35,730 --> 00:01:37,560
Nós temos que implementá-lo.

34
00:01:37,560 --> 00:01:41,490
Vamos verificar o código para isso, tanto o HTML e JavaScript.

35
00:01:41,490 --> 00:01:43,260
Aqui está o nosso HTML.

36
00:01:43,260 --> 00:01:45,500
Como você pode ver aqui, aqui é o nosso pequeno cabeçalho Todos.

37
00:01:45,500 --> 00:01:47,620
Que era aquela coisa negrito no topo,

38
00:01:47,620 --> 00:01:50,690
e, em seguida, temos a caixa de entrada com o espaço reservado,

39
00:01:50,690 --> 00:01:59,460
e, em seguida, há um certo atributo desse botão que chama essa função addtodo.

40
00:01:59,460 --> 00:02:05,460
Alguém quer adivinhar o que é que significa no clique?

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

42
00:02:07,390 --> 00:02:09,289
Bom, sobre o clique é como uma espécie de evento,

43
00:02:09,289 --> 00:02:12,120
como clicar o mouse é apenas um evento, eo que nós estamos fazendo

44
00:02:12,120 --> 00:02:16,890
é nós estamos amarrando o evento de clicar neste botão para executar essa função.

45
00:02:16,890 --> 00:02:21,700
Addtodo é esse manipulador de eventos para clicar nesse botão.

46
00:02:21,700 --> 00:02:25,010
>> Como você pode ver, quando eu clico no botão novo item

47
00:02:25,010 --> 00:02:29,940
o evento click on é demitido, e esta função é chamada.

48
00:02:29,940 --> 00:02:33,170
Vejamos função.

49
00:02:33,170 --> 00:02:36,260
Como você pode ver, aqui está o meu código JavaScript até agora.

50
00:02:36,260 --> 00:02:41,280
O que eu tenho no topo é uma estrutura de dados global para a minha lista de coisas a fazer.

51
00:02:41,280 --> 00:02:44,060
Parece um array. É apenas um conjunto vazio.

52
00:02:44,060 --> 00:02:47,100
E então eu tenho a função addtodo que vimos anteriormente,

53
00:02:47,100 --> 00:02:50,740
ea única linha de código em que há este alerta.

54
00:02:50,740 --> 00:02:55,730
Ele alerta implementar mim, e então eu tenho duas tarefas na mão.

55
00:02:55,730 --> 00:02:58,790
Tenho de acrescentar o TODO para que a estrutura de dados global,

56
00:02:58,790 --> 00:03:01,860
e então eu quero chamar a lista de coisas a fazer.

57
00:03:01,860 --> 00:03:06,360
Nada muito extravagante ainda, mas JavaScript você pode estar familiarizado com,

58
00:03:06,360 --> 00:03:12,370
então eu vou ir devagar e rever os fundamentos de JavaScript dessa maneira.

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

60
00:03:15,490 --> 00:03:21,130
Digamos que o usuário digita algo na caixa.

61
00:03:21,130 --> 00:03:23,360
Eu digitei algo aqui, texto.

62
00:03:23,360 --> 00:03:27,620
Como posso classificar de acesso que o texto através de JavaScript?

63
00:03:27,620 --> 00:03:32,500
Lembre-se de que o JavaScript, uma de suas características fundamentais é que ele nos dá

64
00:03:32,500 --> 00:03:34,670
este acesso programático para o DOM.

65
00:03:34,670 --> 00:03:40,670
Ela nos permite acessar os elementos e suas propriedades desta HTML real.

66
00:03:40,670 --> 00:03:43,430
A maneira de fazer isso com bare ossos JavaScript

67
00:03:43,430 --> 00:03:51,360
é que podemos realmente usar uma função JavaScript chamada GetElementById.

68
00:03:51,360 --> 00:03:55,140
Eu quero armazenar o texto que está escrito lá em alguma variável,

69
00:03:55,140 --> 00:03:58,350
então eu vou dizer uma nova variável chamada new_todo,

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

71
00:04:01,980 --> 00:04:06,330
Esta é uma função,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
E agora eu estou recebendo um elemento por ID, então eu preciso do ID de que a caixa de texto,

73
00:04:11,580 --> 00:04:15,860
então eu dei-lhe o new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
É assim que eu estou indo para obter um elemento.

75
00:04:18,399 --> 00:04:23,880
Esse é o meu argumento para esta função, para especificar qual ID de obter.

76
00:04:23,880 --> 00:04:28,110
E isso é um elemento HTML, e tem propriedades.

77
00:04:28,110 --> 00:04:30,650
Você já viu isso. São atributos.

78
00:04:30,650 --> 00:04:37,090
O atributo do elemento de texto que armazena a entrada do usuário é chamado de valor.

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

80
00:04:40,860 --> 00:04:45,040
Agora eu tenho acesso programático a esta variável, o que é legal

81
00:04:45,040 --> 00:04:49,200
porque agora o que posso fazer é que eu posso adicioná-lo à minha lista de coisas a fazer.

82
00:04:49,200 --> 00:04:52,870
>> A forma como faríamos isso em JavaScript e não se preocupe se você não estiver familiarizado com isso,

83
00:04:52,870 --> 00:04:57,010
mas apenas passando por isso é todos.push

84
00:04:57,010 --> 00:05:00,130
porque esse é o nome da minha estrutura de dados global, aqui em cima,

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

86
00:05:04,450 --> 00:05:09,120
Isso é ótimo, porque agora eu adicionei ao meu JavaScript

87
00:05:09,120 --> 00:05:11,280
representação da lista de coisas a fazer.

88
00:05:11,280 --> 00:05:15,170
Mas agora, como faço para obtê-lo de volta para o HTML?

89
00:05:15,170 --> 00:05:18,560
Eu tenho que encontrar uma maneira de classificar de empurrá-lo de volta.

90
00:05:18,560 --> 00:05:21,830
Em outras palavras, eu meio que tenho que tirar isso.

91
00:05:21,830 --> 00:05:26,060
O que nós vamos fazer é que vamos desenhar a lista de coisas a fazer.

92
00:05:26,060 --> 00:05:29,270
Eu preciso atualizar outro HTML na página,

93
00:05:29,270 --> 00:05:32,040
e como você pode ver, eu deixei a embalagem pouco aqui,

94
00:05:32,040 --> 00:05:36,840
este divisor da página cujo ID é de Todos,

95
00:05:36,840 --> 00:05:40,870
e eu vou colocar a lista de coisas a fazer lá.

96
00:05:40,870 --> 00:05:47,240
Primeiro eu vou limpá-lo, porque, por exemplo, havia uma velha lista de coisas a fazer lá.

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

98
00:05:49,560 --> 00:05:54,530
e eu estou acessando o HTML interior desse elemento,

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

100
00:05:58,010 --> 00:06:05,510
Se deixamos este código como está, nós veríamos um nada em branco lá,

101
00:06:05,510 --> 00:06:10,410
e agora quero começar a prestar a minha nova lista de coisas a fazer.

102
00:06:10,410 --> 00:06:12,870
Estou basicamente vai acabar com a minha lista de coisas a fazer.

103
00:06:12,870 --> 00:06:18,180
>> Agora o interior HTML interno do que Todos div é totalmente clara,

104
00:06:18,180 --> 00:06:20,060
e agora eu preciso para começar a adicionar a minha lista.

105
00:06:20,060 --> 00:06:23,890
A primeira coisa que eu quero é voltar a adicionar a tag lista não ordenada,

106
00:06:23,890 --> 00:06:33,890
que basicamente indica que este é o início de uma lista ordenada.

107
00:06:33,890 --> 00:06:39,770
Agora, para cada elemento da minha matriz Todos Quero imprimi-lo dentro desse HTML.

108
00:06:39,770 --> 00:06:43,710
Eu quero acrescentar que para o final da lista.

109
00:06:43,710 --> 00:06:49,040
Assim como em C, eu posso usar um loop for, e eu vou começar no início da minha lista

110
00:06:49,040 --> 00:06:54,140
no elemento 0, e eu estou indo para ir todo o caminho até o comprimento da lista.

111
00:06:54,140 --> 00:07:01,100
Nós podemos realmente obter o comprimento de uma matriz em JavaScript usando a propriedade length.

112
00:07:01,100 --> 00:07:03,420
Basicamente, eu vou fazer algo muito parecido aqui dentro

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

114
00:07:05,600 --> 00:07:12,970
Eu posso acessar novamente o div Todos, a propriedade HTML interior que,

115
00:07:12,970 --> 00:07:17,560
e eu estou indo para adicionar este novo item da lista, e que vai estar rodeado por

116
00:07:17,560 --> 00:07:25,390
esta tag li, e eu estou indo para concatenar com o operador +,

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

118
00:07:28,040 --> 00:07:32,380
e então eu vou fechar essa tag.

119
00:07:32,380 --> 00:07:36,240
Agora, para cada elemento, vamos adicionar uma nova entrada na lista.

120
00:07:36,240 --> 00:07:48,700
E então tudo o que realmente precisa fazer é fechar essa marca.

121
00:07:48,700 --> 00:07:52,820
Eu só preciso fechar esse tag desordenadas lista.

122
00:07:52,820 --> 00:07:55,490
>> Você ter uma idéia de como isso funciona?

123
00:07:55,490 --> 00:07:57,700
Isso abre a lista inteira.

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

125
00:08:01,080 --> 00:08:05,470
e, em seguida, que fecha a lista inteira, e esta é a minha função addtodo.

126
00:08:05,470 --> 00:08:09,590
Eu, basicamente, começar por obter o TODO da caixa de texto.

127
00:08:09,590 --> 00:08:18,950
Devo acrescentar que, para a matriz de Todos, e então eu re-processar a lista de coisas a fazer.

128
00:08:18,950 --> 00:08:21,520
Agora eu posso adicionar itens a minha lista.

129
00:08:21,520 --> 00:08:24,620
Isso é muito empolgante porque em apenas algumas linhas de código

130
00:08:24,620 --> 00:08:28,240
temos, basicamente, fez uma lista de coisas a fazer, onde podemos adicionar itens.

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

132
00:08:30,050 --> 00:08:34,480
Esse é um tipo de uma introdução básica à JavaScript.

133
00:08:34,480 --> 00:08:36,179
Não se preocupe muito com a sintaxe, por agora,

134
00:08:36,179 --> 00:08:38,130
mas pensar sobre isso conceitualmente.

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

136
00:08:40,539 --> 00:08:45,310
Tivemos uma caixa de texto na página que basicamente permitiu que os usuários inserir um item para-fazer para adicionar.

137
00:08:45,310 --> 00:08:49,210
E então usamos JavaScript para buscar que TODO de que a caixa de texto.

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

139
00:08:52,830 --> 00:08:56,010
nossa representação programática dessa lista de coisas a fazer,

140
00:08:56,010 --> 00:08:59,060
e, então, imprimiu.

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

142
00:09:02,690 --> 00:09:07,620
>> Isso é legal, mas como podemos levar isso adiante?

143
00:09:07,620 --> 00:09:11,350
Bem, como você pode ver, isto não é como uma completa lista de coisas a fazer.

144
00:09:11,350 --> 00:09:15,100
Por exemplo, eu não posso marcar qualquer um desses itens como incompleta,

145
00:09:15,100 --> 00:09:19,920
como se eu queria priorizar os itens ou excluir itens.

146
00:09:19,920 --> 00:09:23,150
Isso é bom, mas nós podemos levar isso adiante.

147
00:09:23,150 --> 00:09:29,280
Eu não vou falar muito sobre a adição de recursos extras,

148
00:09:29,280 --> 00:09:32,800
mas podemos levar isso adiante.

149
00:09:32,800 --> 00:09:35,970
Vamos falar sobre a adição de mais um recurso para essa lista de coisas a fazer,

150
00:09:35,970 --> 00:09:40,370
que vai ser ser capaz de verificar um indivíduo a fazer ponto

151
00:09:40,370 --> 00:09:44,780
e tê-lo ser barrado, então, basicamente dizendo que eu fiz isso.

152
00:09:44,780 --> 00:09:50,240
Vamos dar uma olhada em algum código que pode conseguir isso.

153
00:09:50,240 --> 00:09:52,740
Observe o que eu fiz no topo é que eu adicionei

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

155
00:09:57,620 --> 00:10:02,890
Estou basicamente usando isso para se armazenar os itens da lista de coisas a fazer

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

157
00:10:06,560 --> 00:10:08,470
Esta é uma maneira de fazer isso.

158
00:10:08,470 --> 00:10:13,750
Se eu olhar para a implementação deste, o display,

159
00:10:13,750 --> 00:10:21,120
basicamente, se eu digitar um TODO e eu pressionar este botão de alternância

160
00:10:21,120 --> 00:10:25,040
cruza para fora, de modo que cada item desta lista tem ou uma completa

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

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

163
00:10:33,730 --> 00:10:37,110
há um item na matriz completa que, basicamente, indica

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

165
00:10:39,060 --> 00:10:41,640
Eu tive que fazer mudanças bastante mínimas para este código,

166
00:10:41,640 --> 00:10:44,470
isso aqui é a nossa função addtodo.

167
00:10:44,470 --> 00:10:48,530
Repare que aqui eu estou empurrando-o para a matriz,

168
00:10:48,530 --> 00:10:51,300
e então eu estou empurrando a 0 para essa matriz completa,

169
00:10:51,300 --> 00:10:57,090
basicamente, em paralelo com o novo impulso TODO dizer

170
00:10:57,090 --> 00:11:00,430
Eu estou adicionando este item, e é juntamente com 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ão eu estou redesenhando a lista de coisas a fazer.

173
00:11:04,970 --> 00:11:09,220
Agora, notem que eu adicionei essa função drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Isso leva um monte de código que tínhamos antes,

175
00:11:11,760 --> 00:11:15,320
basicamente limpa o caixa e, em seguida, chama a nova lista de coisas a fazer.

176
00:11:15,320 --> 00:11:19,620
Mas note que dentro deste loop que estamos fazendo um pouco mais agora.

177
00:11:19,620 --> 00:11:25,000
Estamos, basicamente, verificar se o item correspondente ao TODO om aqui

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

179
00:11:30,220 --> 00:11:32,790
Se ele é completo, estamos adicionando esta tag del,

180
00:11:32,790 --> 00:11:35,360
que é basicamente a maneira que você pode começar a greve através de efeito

181
00:11:35,360 --> 00:11:38,190
riscando da lista de coisas a fazer, se é completa,

182
00:11:38,190 --> 00:11:42,200
e se não for, não vamos incluí-la.

183
00:11:42,200 --> 00:11:45,030
E assim, esse tipo de cuida disso,

184
00:11:45,030 --> 00:11:49,140
>> e essa é uma maneira de conseguir isso.

185
00:11:49,140 --> 00:11:53,420
E, em seguida, perceber quando o usuário clica em um desses

186
00:11:53,420 --> 00:11:56,780
que alternar o status de conclusão do mesmo.

187
00:11:56,780 --> 00:12:02,170
Quando o usuário clica, vamos inverter se ele foi concluído ou não,

188
00:12:02,170 --> 00:12:04,540
e depois vamos 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 essas funções que exercem as suas próprias tarefas,

191
00:12:09,860 --> 00:12:11,730
e isso é bom.

192
00:12:11,730 --> 00:12:14,110
Existe alguma coisa que poderia fazer melhor sobre isso, então?

193
00:12:14,110 --> 00:12:18,700
Observe que temos essas duas matrizes globais.

194
00:12:18,700 --> 00:12:23,550
Se este era C, e tivemos duas matrizes que tipo de representadas

195
00:12:23,550 --> 00:12:25,800
dados que foi uma espécie de relacionados de alguma forma

196
00:12:25,800 --> 00:12:30,140
o que nós usamos em C para combinar esses dois campos

197
00:12:30,140 --> 00:12:35,420
em algo que encapsula os dois pedaços de informação?

198
00:12:35,420 --> 00:12:37,600
Alguém quer fazer uma sugestão?

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

200
00:12:39,450 --> 00:12:42,340
>> Exatamente, por isso, poderia usar algum tipo de estrutura,

201
00:12:42,340 --> 00:12:44,960
e se você acha que volta para, digamos, pset 3,

202
00:12:44,960 --> 00:12:47,350
lembro que tinha dicionário, e depois tivemos se a palavra

203
00:12:47,350 --> 00:12:50,230
Foi no dicionário, e todas as informações que foi colocado junto

204
00:12:50,230 --> 00:12:52,420
dentro de uma estrutura de dados.

205
00:12:52,420 --> 00:12:56,390
Uma coisa que eu posso fazer com esse código para evitar que estas duas matrizes diferentes

206
00:12:56,390 --> 00:13:01,760
para peças semelhantes de informações é que eu posso combiná-los em um objeto JavaScript.

207
00:13:01,760 --> 00:13:07,150
Vamos dar uma olhada nisso.

208
00:13:07,150 --> 00:13:11,740
Repare que eu só tenho uma matriz no topo agora

209
00:13:11,740 --> 00:13:17,650
eo que eu tenho feito é, e isto é apenas a sintaxe JavaScript para tipo de

210
00:13:17,650 --> 00:13:21,350
a criação de uma versão literal de um objeto,

211
00:13:21,350 --> 00:13:24,670
e notar que há duas propriedades, por isso temos o todo,

212
00:13:24,670 --> 00:13:29,660
e ele é mantido em conjunto com se é completo ou incompleto.

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

214
00:13:31,000 --> 00:13:35,310
Estamos usando os objetos JavaScript.

215
00:13:35,310 --> 00:13:38,600
Este tipo de coisas melhore.

216
00:13:38,600 --> 00:13:43,850
Como agora, todos esses campos de informações relacionadas são mantidos juntos.

217
00:13:43,850 --> 00:13:46,410
Quando vamos para imprimi-lo, podemos acessar os campos.

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

219
00:13:49,060 --> 00:13:52,880
em vez de verificar o conjunto completo separadamente

220
00:13:52,880 --> 00:13:56,560
e perceber quando queremos obter a seqüência de tarefas que estamos recebendo a propriedade de coisas a fazer

221
00:13:56,560 --> 00:13:58,750
desse todo, de modo que este tipo de faz sentido, porque

222
00:13:58,750 --> 00:14:01,660
cada item tem essas propriedades intrínsecas sobre o assunto.

223
00:14:01,660 --> 00:14:05,650
Tem um todo, e tem se é completa ou não.

224
00:14:05,650 --> 00:14:11,540
Não há muitas mudanças funcionalmente, acabou de adicionar um pouco mais para o código.

225
00:14:11,540 --> 00:14:13,430
Esta é uma melhoria em algumas frentes, certo?

226
00:14:13,430 --> 00:14:16,030
Quero dizer, nós consignado o design um pouco.

227
00:14:16,030 --> 00:14:20,350
Agora temos objetos para encapsular basicamente esses dados.

228
00:14:20,350 --> 00:14:27,130
Existe algo mais que podemos fazer daqui em termos de JavaScript?

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

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

231
00:14:34,760 --> 00:14:40,520
é um pouco, eu acho, por muito tempo.

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

233
00:14:45,100 --> 00:14:48,400
Uma coisa que poderia fazer para tornar este código olhar um pouco mais amigável

234
00:14:48,400 --> 00:14:51,450
então eu não teria que manter a rolagem esquerda e direita, frente e para trás,

235
00:14:51,450 --> 00:14:58,480
é que eu poderia usar uma biblioteca como jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Vamos verificar Seminário 2,

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

238
00:15:05,880 --> 00:15:08,790
Você pode não estar muito familiarizado com jQuery,

239
00:15:08,790 --> 00:15:11,510
mas só sei que jQuery é uma espécie de biblioteca de JavaScript

240
00:15:11,510 --> 00:15:15,910
que torna mais fácil fazer coisas como acessar os elementos individuais do DOM.

241
00:15:15,910 --> 00:15:21,280
Aqui, em vez de dizer document.getElementById ("todos"). InnerHTML

242
00:15:21,280 --> 00:15:25,210
Eu posso usar a forma mais limpa em jQuery,

243
00:15:25,210 --> 00:15:28,490
que é apenas para usar seletores.

244
00:15:28,490 --> 00:15:31,300
Como você pode ver, este código fez um pouco mais limpo,

245
00:15:31,300 --> 00:15:35,770
muito similar funcionalmente, mas essa é a idéia.

246
00:15:35,770 --> 00:15:37,980
Nós vimos um par de coisas, até agora,

247
00:15:37,980 --> 00:15:42,010
então começamos com a implementação JavaScript apenas cru.

248
00:15:42,010 --> 00:15:45,370
Nós adicionamos novos recursos e mostrou como podemos melhorá-lo com

249
00:15:45,370 --> 00:15:49,090
apenas o que temos em JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Alguém vê alguma dificuldade com este projeto?

251
00:15:53,300 --> 00:16:01,090
Ou seja, eu acho ou não, necessariamente, dificuldades, mas vamos dizer

252
00:16:01,090 --> 00:16:04,830
não estávamos fazendo um projeto de lista de coisas a fazer, e amanhã nós decidimos

253
00:16:04,830 --> 00:16:10,320
queríamos fazer uma lista de compras ou um projeto de lista de compras.

254
00:16:10,320 --> 00:16:14,150
Muitas dessas características são muito semelhantes.

255
00:16:14,150 --> 00:16:19,080
Um monte de coisas que queremos sair de JavaScript são muito comuns,

256
00:16:19,080 --> 00:16:23,820
e isso reforça a necessidade de algum tipo de meio de

257
00:16:23,820 --> 00:16:25,670
tornar isso mais fácil de fazer.

258
00:16:25,670 --> 00:16:30,400
Eu tive que construir tudo isso acesso HTML, tudo isso de acesso DOM,

259
00:16:30,400 --> 00:16:35,530
como eu vou para representar a lista de coisas a fazer com este modelo.

260
00:16:35,530 --> 00:16:39,130
E repare que eu sou responsável como o desenvolvedor JavaScript

261
00:16:39,130 --> 00:16:42,890
para manter o código HTML e JavaScript que eu tenho em sincronia.

262
00:16:42,890 --> 00:16:48,040
Nada feito automaticamente essa representação JavaScript

263
00:16:48,040 --> 00:16:51,590
ou a lista de coisas a fazer são empurrados para HTML.

264
00:16:51,590 --> 00:16:54,000
Nada forçado que, exceto para mim.

265
00:16:54,000 --> 00:16:56,880
Eu tinha que escrever o sorteio de coisas a fazer a função de lista.

266
00:16:56,880 --> 00:17:01,650
E isso não pode ser, eu quero dizer, é razoável fazer isso,

267
00:17:01,650 --> 00:17:03,670
mas pode ser tedioso às vezes.

268
00:17:03,670 --> 00:17:08,190
Se você tem um projeto maior, que poderia ser difícil.

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

270
00:17:10,720 --> 00:17:14,060
é simplificar esse processo e tipo de fator fora

271
00:17:14,060 --> 00:17:16,950
estes common-Eu acho que você poderia dizer-padrões de design

272
00:17:16,950 --> 00:17:20,700
que as pessoas geralmente têm algum tipo de forma de representação de dados,

273
00:17:20,700 --> 00:17:25,599
se isso é uma lista de amigos, se isso é informação do mapa

274
00:17:25,599 --> 00:17:27,280
ou algo assim ou uma lista de coisas a fazer.

275
00:17:27,280 --> 00:17:30,660
Algumas pessoas têm geralmente uma forma de representação da informação,

276
00:17:30,660 --> 00:17:33,650
e eles geralmente precisam manter esse tipo de informação em sincronia

277
00:17:33,650 --> 00:17:36,520
entre o que o usuário vê em algum tipo de ponto de vista,

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

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

280
00:17:45,400 --> 00:17:49,020
Frameworks dar-nos uma maneira de resolver esse problema.

281
00:17:49,020 --> 00:17:53,080
Agora vamos dar uma olhada na implementação da lista de coisas a fazer

282
00:17:53,080 --> 00:18:02,360
em um quadro chamado angularjs.

283
00:18:02,360 --> 00:18:04,650
É isso. Observe que ele se encaixa em um slide.

284
00:18:04,650 --> 00:18:07,330
Eu não tenho a rolar para a esquerda e para a direita.

285
00:18:07,330 --> 00:18:10,460
Isso provavelmente não é um grande motivo para recomendar o uso de um quadro,

286
00:18:10,460 --> 00:18:20,120
mas aviso que estou sempre acessando elementos HTML individuais aqui?

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

288
00:18:22,400 --> 00:18:26,120
Você vê alguma document.getElementById ou algo parecido?

289
00:18:26,120 --> 00:18:29,870
Não, isso é passado.

290
00:18:29,870 --> 00:18:35,590
>> Angular nos ajuda a manter o DOM e JavaScript nossa representação de algo

291
00:18:35,590 --> 00:18:40,430
tipo de em sincronia, por isso, se não é no arquivo js,

292
00:18:40,430 --> 00:18:46,790
se não há nenhuma maneira de programação começando a todo o conteúdo HTML

293
00:18:46,790 --> 00:18:51,800
do JavaScript como vamos manter isso em sincronia?

294
00:18:51,800 --> 00:18:58,160
Se não está no arquivo js., Ele tem que ser em HTML, certo?

295
00:18:58,160 --> 00:19:01,910
Esta é a nova versão do arquivo HTML,

296
00:19:01,910 --> 00:19:04,660
e notar que nós adicionamos um monte aqui.

297
00:19:04,660 --> 00:19:11,110
Observe que há esses novos atributos que dizem ng-click e ng-repeat.

298
00:19:11,110 --> 00:19:15,650
A abordagem da Angular para resolver este problema de dificuldades na concepção

299
00:19:15,650 --> 00:19:19,130
é, basicamente, fazer HTML muito mais poderoso.

300
00:19:19,130 --> 00:19:24,420
Angular é uma forma de permitir que você faça HTML um pouco mais expressivo.

301
00:19:24,420 --> 00:19:30,520
Por exemplo, eu posso dizer que eu vou amarrar ou ligar esta caixa de texto

302
00:19:30,520 --> 00:19:35,080
para uma variável dentro do meu código JavaScript Angular.

303
00:19:35,080 --> 00:19:37,030
Este modelo ng faz exatamente isso.

304
00:19:37,030 --> 00:19:41,550
Que basicamente diz que o interior desta caixa de texto do item,

305
00:19:41,550 --> 00:19:45,000
só associar isso com o new_todo_description variável

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

307
00:19:47,870 --> 00:19:51,600
Isso é muito poderoso, porque eu não tenho que ir explicitamente

308
00:19:51,600 --> 00:19:53,310
o DOM para obter essa informação.

309
00:19:53,310 --> 00:19:56,250
Eu não tenho que dizer document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Eu não tenho de usar jQueries como acesso à DOM.

311
00:19:58,750 --> 00:20:03,280
Eu posso associá-lo a uma variável, e então quando eu mudar essa variável

312
00:20:03,280 --> 00:20:07,400
dentro de JavaScript é mantido em sincronia com o HTML,

313
00:20:07,400 --> 00:20:11,640
para que simplifica o processo de ter que ir e voltar entre os dois.

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

315
00:20:18,260 --> 00:20:22,060
>> E notem que não há código de acesso HTML.

316
00:20:22,060 --> 00:20:27,760
Acabamos fez HTML mais poderoso,

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

318
00:20:32,070 --> 00:20:38,610
como quando você clicar sobre isso, chamar essa função no âmbito da todos.js,

319
00:20:38,610 --> 00:20:43,410
e nós poderíamos fazer isso antes, mas há outras coisas, como esta ng-modelo,

320
00:20:43,410 --> 00:20:47,020
e perceber isso ng-repeat.

321
00:20:47,020 --> 00:20:51,520
O que você acha que isso faz?

322
00:20:51,520 --> 00:20:54,390
Aqui está a nossa lista não ordenada de antes.

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

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

325
00:21:03,710 --> 00:21:09,280
Eu não estou sempre prestando explicitamente essa lista.

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

327
00:21:11,580 --> 00:21:16,410
Bem, a maneira angular faz isso por isso é chamado de repetidor.

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

329
00:21:22,760 --> 00:21:26,240
para todos os afazeres dentro do meu leque de Todos.

330
00:21:26,240 --> 00:21:31,850
Dentro de todos.jr existe uma matriz Todos aqui,

331
00:21:31,850 --> 00:21:37,910
e isso vai contar go Angular através dessa matriz e para cada elemento que você vê

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

333
00:21:41,390 --> 00:21:44,620
Este é o tipo de incrível, porque eu só posso fazer isso

334
00:21:44,620 --> 00:21:47,760
sem ter que escrever um loop for,

335
00:21:47,760 --> 00:21:52,250
que para uma lista de coisas a fazer que era de apenas 30 linhas de código

336
00:21:52,250 --> 00:21:54,700
pode não ser o mais vantajoso,

337
00:21:54,700 --> 00:22:01,240
mas se você tiver um projeto grande, isso pode ficar muito conveniente.

338
00:22:01,240 --> 00:22:06,100
>> Esta é uma solução para este problema, tornando HTML mais poderoso,

339
00:22:06,100 --> 00:22:10,820
e que nos permite manter JavaScript e HTML em sincronia.

340
00:22:10,820 --> 00:22:13,220
Há outras maneiras possíveis para resolver este problema,

341
00:22:13,220 --> 00:22:15,320
e não cada framework faz isso.

342
00:22:15,320 --> 00:22:17,720
Nem todo quadro funciona ao longo destas linhas.

343
00:22:17,720 --> 00:22:19,490
Alguns quadros têm abordagens diferentes,

344
00:22:19,490 --> 00:22:23,310
e você pode achar que você gosta de codificação em um quadro sobre o outro.

345
00:22:23,310 --> 00:22:26,160
Vejamos mais um.

346
00:22:26,160 --> 00:22:30,060
Esta é a lista de coisas a fazer codificado em um quadro chamado Backbone.

347
00:22:30,060 --> 00:22:33,250
Eu vou passar por isso rapidamente.

348
00:22:33,250 --> 00:22:38,300
Vou começar com o HTML antes de irmos para lá.

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

350
00:22:40,290 --> 00:22:43,950
Começando com o HTML, como você percebe, o nosso HTML é muito semelhante

351
00:22:43,950 --> 00:22:50,000
ao que era antes, então não é muito novo nessa frente.

352
00:22:50,000 --> 00:22:55,410
Mas o nosso arquivo js é um pouco diferente.

353
00:22:55,410 --> 00:23:00,360
Backbone meio que tem essa idéia, ou se baseia na idéia

354
00:23:00,360 --> 00:23:04,750
que muito do que fazemos com, digamos, nossos projetos de JavaScript

355
00:23:04,750 --> 00:23:09,110
é pensar sobre os modelos e coleções destes modelos.

356
00:23:09,110 --> 00:23:12,510
Isto poderia ser, por exemplo, uma fotografia e colecções de fotos

357
00:23:12,510 --> 00:23:16,230
ou a idéia de um amigo e coleções de amigos.

358
00:23:16,230 --> 00:23:20,700
E muitas vezes quando estamos programando aplicações JavaScript

359
00:23:20,700 --> 00:23:25,340
nós vamos resolver de representar a idéia de ter uma coleção de amigos

360
00:23:25,340 --> 00:23:29,500
de alguma forma em JavaScript, e Backbone nos dá essa camada

361
00:23:29,500 --> 00:23:33,040
em cima de matrizes e objetos existentes do JavaScript

362
00:23:33,040 --> 00:23:38,300
para fazer coisas mais poderosas com que mais facilmente.

363
00:23:38,300 --> 00:23:41,870
>> Aqui eu defini um modelo de tarefas,

364
00:23:41,870 --> 00:23:44,630
e você não tem que se preocupar muito com a sintaxe,

365
00:23:44,630 --> 00:23:48,730
de notar que o que é uma das propriedades deste?

366
00:23:48,730 --> 00:23:53,190
Tem um campo padrão.

367
00:23:53,190 --> 00:23:56,640
Backbone permite-me já para especificar fora do bastão

368
00:23:56,640 --> 00:24:00,190
qualquer novo para-fazer que eu criar vai ter esses padrões.

369
00:24:00,190 --> 00:24:04,100
Agora eu posso personalizar isso, mas ser capaz de especificar os padrões

370
00:24:04,100 --> 00:24:07,220
é bom, e é uma espécie de conveniente, porque isso não é algo que é como

371
00:24:07,220 --> 00:24:10,430
inerente JavaScript, e agora eu não tenho que explicitamente

372
00:24:10,430 --> 00:24:12,430
dizer que os Todos estão incompletos.

373
00:24:12,430 --> 00:24:19,190
Posso dizer logo de cara que Todos vão ser marcadas como incompletas.

374
00:24:19,190 --> 00:24:21,300
Observe então o que é isso?

375
00:24:21,300 --> 00:24:25,520
Agora eu tenho uma lista de coisas a fazer, e isso é uma coleção.

376
00:24:25,520 --> 00:24:30,960
Observe o campo associado que diz que modelo do todo.

377
00:24:30,960 --> 00:24:33,390
Esta é a minha maneira de dizer que Backbone

378
00:24:33,390 --> 00:24:37,350
Eu vou estar pensando em uma coleção desses 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
Aqui eu tenho essa idéia de uma coleção,

381
00:24:44,980 --> 00:24:48,960
e, basicamente, os itens contidos nessa coleção são todos que vão ser estes Todos,

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

383
00:24:51,910 --> 00:24:59,890
porque eu tenho Todos, e eu tê-los em uma coleção.

384
00:24:59,890 --> 00:25:02,940
>> Vamos olhar um pouco mais disso.

385
00:25:02,940 --> 00:25:05,900
Aqui está uma visão Backbone.

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

387
00:25:08,890 --> 00:25:14,660
um monte de modelos que você está pensando sobre coleções ou mesmo

388
00:25:14,660 --> 00:25:19,150
vão precisar de ter alguma forma de ser exibido.

389
00:25:19,150 --> 00:25:21,900
Precisamos tornar essa lista de coisas a fazer,

390
00:25:21,900 --> 00:25:25,460
e não seria bom se pudéssemos fornecer para cada modelo

391
00:25:25,460 --> 00:25:28,390
ou associar-se com cada modelo este ponto de vista

392
00:25:28,390 --> 00:25:34,020
que nos permite Acho que ligar os dois juntos?

393
00:25:34,020 --> 00:25:38,320
Considerando que, antes tivemos que usar um loop for que atravessaria

394
00:25:38,320 --> 00:25:41,130
todos os afazeres em nossa lista e, em seguida, imprimi-lo aqui

395
00:25:41,130 --> 00:25:44,650
podemos basicamente conectá-lo com este modelo.

396
00:25:44,650 --> 00:25:47,550
Esta é uma visão de coisas a fazer.

397
00:25:47,550 --> 00:25:50,550
Isto está associado com o TODO encontramos anteriormente.

398
00:25:50,550 --> 00:25:54,940
Agora, todos os afazeres é exibível ou renderizável

399
00:25:54,940 --> 00:25:56,960
por esse ponto de vista a fazer.

400
00:25:56,960 --> 00:25:59,440
Observe alguns dos campos.

401
00:25:59,440 --> 00:26:05,880
O que você acha que isso é tagName, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Lembre-se de antes quando queríamos tornar um TODO

403
00:26:09,790 --> 00:26:16,700
teríamos de emparelhar explicitamente nossos Todos com esta tag li.

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

405
00:26:21,080 --> 00:26:25,250
vai estar dentro de uma tag li.

406
00:26:25,250 --> 00:26:31,440
E agora também estamos associando eventos com nossos Todos.

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

408
00:26:34,320 --> 00:26:38,480
Se você clicar praticamente o botão de alternância, que é o que eu estou dizendo que,

409
00:26:38,480 --> 00:26:43,080
então basicamente marcar o TODO como o oposto do que era antes

410
00:26:43,080 --> 00:26:45,890
e então re-tornar a aplicação.

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

412
00:26:47,810 --> 00:26:50,730
Lembra-se quando marcou como quer o oposto, ou-

413
00:26:50,730 --> 00:26:52,410
e, então, re-processado-lo.

414
00:26:52,410 --> 00:26:57,750
Mas observe agora este evento costumava ser uma coisa que estava no HTML.

415
00:26:57,750 --> 00:26:59,640
Ele estava sentado lá.

416
00:26:59,640 --> 00:27:01,410
O botão tinha um clique em.

417
00:27:01,410 --> 00:27:05,310
Quando você clica no botão, ele faz o tipo de material para

418
00:27:05,310 --> 00:27:07,210
configurado que TODO ser incompleto.

419
00:27:07,210 --> 00:27:11,180
Aqui temos associado o evento de clicar no botão de alternância

420
00:27:11,180 --> 00:27:15,830
e reversão seja ligado ou desligado com essa visão.

421
00:27:15,830 --> 00:27:20,480
>> Esta é uma boa maneira de criar esse evento para que ele seja muito bem obrigado

422
00:27:20,480 --> 00:27:26,980
este ponto de vista, e assim perceber isso mais um.

423
00:27:26,980 --> 00:27:31,050
Eu tenho este método render, e não temos para passar os detalhes.

424
00:27:31,050 --> 00:27:33,650
É meio parecido com o que tínhamos antes,

425
00:27:33,650 --> 00:27:36,070
mas repare que eu não estou looping através de qualquer coisa.

426
00:27:36,070 --> 00:27:40,700
Eu não estou a impressão de que tag ul que é uma espécie de dizer que vou imprimir todos os elementos.

427
00:27:40,700 --> 00:27:46,610
Eu estou oferecendo a funcionalidade para tornar este um item de tarefa.

428
00:27:46,610 --> 00:27:49,400
Este é um conceito muito poderoso, porque, basicamente,

429
00:27:49,400 --> 00:27:53,600
nossa lista de coisas a fazer é composta por todos esses Todos, e se podemos basicamente especificar

430
00:27:53,600 --> 00:27:56,890
o modo para processar um daqueles Todos

431
00:27:56,890 --> 00:28:04,230
então podemos ter a nossa poderosa backbone per se tornar toda a 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 é um conceito que é útil aqui.

434
00:28:14,180 --> 00:28:18,160
Agora, uma boa pergunta é como é que esta aplicação a ser colocados juntos?

435
00:28:18,160 --> 00:28:21,200
Porque nós temos a capacidade de tornar um todo,

436
00:28:21,200 --> 00:28:23,860
mas como é que vamos ficar com a ideia de múltiplas Todos?

437
00:28:23,860 --> 00:28:25,100
>> Vamos dar uma olhada nisso.

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

439
00:28:27,100 --> 00:28:29,740
Observe que temos uma visão de lista de coisas a fazer aqui,

440
00:28:29,740 --> 00:28:34,440
e observe também é um ponto de vista.

441
00:28:34,440 --> 00:28:36,970
E para passar por cima de algumas coisas,

442
00:28:36,970 --> 00:28:45,280
este método initialize será chamado quando nos criar esta lista de coisas a fazer.

443
00:28:45,280 --> 00:28:52,630
Como você pode ver, é como criar a lista de coisas a fazer e associá-lo com essa visão.

444
00:28:52,630 --> 00:28:57,860
E então eu adicionei as funções aqui, então, basicamente, quando você adicionar um item-

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

446
00:29:01,440 --> 00:29:07,430
Vou criar um novo objeto todo, e notar que eu realmente estou chamando

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

448
00:29:13,080 --> 00:29:16,010
e eu posso passar em minhas propriedades aqui.

449
00:29:16,010 --> 00:29:23,710
E agora todos os afazeres que cria usando este vai ter essa funcionalidade que vimos antes.

450
00:29:23,710 --> 00:29:28,140
Repare que eu estou limpando a caixa de texto antes de um pequeno detalhe pequeno-

451
00:29:28,140 --> 00:29:32,900
e então eu estou adicionando esta coleção.

452
00:29:32,900 --> 00:29:37,630
>> Isto quase parece estranho, porque antes nós apenas tivemos que fazer isso todos.push,

453
00:29:37,630 --> 00:29:43,310
e depois que foram feitas, e isso pode parecer mais complicado para este projecto específico,

454
00:29:43,310 --> 00:29:46,980
e você pode achar que Backbone ou mesmo angular ou qualquer outra estrutura

455
00:29:46,980 --> 00:29:50,790
não se adequar ao seu projeto particular, mas eu acho que é importante pensar sobre

456
00:29:50,790 --> 00:29:54,100
o que isso significa em maior escala para projetos maiores,

457
00:29:54,100 --> 00:29:56,610
porque se tivéssemos um projeto maior onde estávamos representando

458
00:29:56,610 --> 00:30:00,860
uma coleção realmente complexo, algo mais profundo do que apenas uma lista de coisas a fazer,

459
00:30:00,860 --> 00:30:04,490
digamos que uma lista de amigos, ou algo assim, isso poderia vir a calhar

460
00:30:04,490 --> 00:30:09,620
porque poderíamos organizar nosso código de uma forma muito conveniente,

461
00:30:09,620 --> 00:30:12,550
de uma forma que tornaria mais fácil para alguém

462
00:30:12,550 --> 00:30:16,820
que queria pegar um projeto para construir em cima.

463
00:30:16,820 --> 00:30:21,450
Você pode ver que esta fornece uma grande quantidade de estrutura.

464
00:30:21,450 --> 00:30:26,580
E então eu estou chamando tornar este addItem.

465
00:30:26,580 --> 00:30:31,050
Render, como você pode ver, e você não tem que agarrar esta sintaxe completa,

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

467
00:30:37,790 --> 00:30:41,500
Isso é uma espécie de onde isso vem.

468
00:30:41,500 --> 00:30:44,140
Vamos apenas especificar como renderizar Todos os individuais,

469
00:30:44,140 --> 00:30:47,310
e, em seguida, vamos colá-los em conjunto, como um todo.

470
00:30:47,310 --> 00:30:49,810
Mas isso proporciona uma forma de abstração,

471
00:30:49,810 --> 00:30:55,470
porque eu poderia mudar a maneira que eu decidir tornar Todos os individuais,

472
00:30:55,470 --> 00:30:57,940
e eu não teria que mudar qualquer código.

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

474
00:31:00,700 --> 00:31:08,540
>> Alguém tem alguma dúvida sobre frameworks JavaScript?

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

476
00:31:14,310 --> 00:31:16,050
Oh, com certeza, essa é uma ótima pergunta.

477
00:31:16,050 --> 00:31:19,080
A questão era como se eu incluir os quadros?

478
00:31:19,080 --> 00:31:22,970
A maioria dos frameworks JavaScript são basicamente apenas js

479
00:31:22,970 --> 00:31:25,740
que você pode incluir no topo do seu código.

480
00:31:25,740 --> 00:31:29,830
Observe na parte da cabeça do meu HTML eu tenho todas essas tags de script,

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

482
00:31:34,250 --> 00:31:38,820
E então os três códigos de enquadramento são apenas também tags de script.

483
00:31:38,820 --> 00:31:42,110
Estou incluindo-los de que é chamado de CDN,

484
00:31:42,110 --> 00:31:46,200
o que me permite fazê-lo de outra pessoa neste momento

485
00:31:46,200 --> 00:31:57,930
mas cada quadro tem essa, você pode muito bem encontrar o conteúdo

486
00:31:57,930 --> 00:32:03,540
para uma biblioteca JavaScript especial disponível em alguns CDN ou algo parecido,

487
00:32:03,540 --> 00:32:05,570
e então você pode incluir essas tags de script.

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

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

490
00:32:09,500 --> 00:32:11,730
>> Essas são duas abordagens diferentes.

491
00:32:11,730 --> 00:32:14,640
Essas não são as únicas abordagens para resolver este problema.

492
00:32:14,640 --> 00:32:17,080
Há muitas coisas diferentes que

493
00:32:17,080 --> 00:32:19,490
alguém poderia fazer, e há muitos quadros lá fora.

494
00:32:19,490 --> 00:32:23,300
Angular e Backbone não contam toda a história.

495
00:32:23,300 --> 00:32:26,370
Boa sorte com seus projetos finais, e muito obrigado.

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