1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [讲座] [JavaScript框架：为什么和怎么样？]

2
00:00:02,000 --> 00:00:04,000
[凯文·施密德] [哈佛大学]

3
00:00:04,000 --> 00:00:06,960
[这是CS50。] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> 嗨，大家好。欢迎您的JavaScript框架研讨会。

5
00:00:10,630 --> 00:00:14,910
我的名字是凯文，今天我要谈论的JavaScript框架，

6
00:00:14,910 --> 00:00:20,400
本次研讨会的目的是不是让你说，掌握每一个特定的框架本身

7
00:00:20,400 --> 00:00:23,810
而是给你一个广泛的介绍一对夫妇的框架

8
00:00:23,810 --> 00:00:27,150
并说明为什么我们会永远想使用一个框架。

9
00:00:27,150 --> 00:00:31,060
>> 在我这样做，我会在JavaScript中提供一点背景，

10
00:00:31,060 --> 00:00:33,750
然后我们将它从那里。

11
00:00:33,750 --> 00:00:36,270
我们要开始实施一个To-Do列表。

12
00:00:36,270 --> 00:00:39,330
下面是我们今天的任务列表。

13
00:00:39,330 --> 00:00:41,990
这是一种有趣的。我们必须实现一个在JavaScript中的to-do列表。

14
00:00:41,990 --> 00:00:45,110
这是它的样子，所以这是我们的第一目标。

15
00:00:45,110 --> 00:00:47,160
我们不打算用一个框架来做到这一点。

16
00:00:47,160 --> 00:00:51,930
我们将编写JavaScript代码，并获得工作的to-do列表。

17
00:00:51,930 --> 00:00:54,370
那我们是要改进设计，而无需使用一个框架。

18
00:00:54,370 --> 00:00:57,190
我们要讨论的各种事情，我们能做的只是JavaScript独自

19
00:00:57,190 --> 00:01:00,650
使我们的To-Do列表一点点精心设计。

20
00:01:00,650 --> 00:01:02,490
然后我们要去扔在一些jQuery，

21
00:01:02,490 --> 00:01:05,030
然后我们要去看看在相同的to-do列表，

22
00:01:05,030 --> 00:01:07,170
只是在不同的框架实现，我们将讨论

23
00:01:07,170 --> 00:01:09,280
 沿途的利弊。

24
00:01:09,280 --> 00:01:12,040
>> 让我们开始实施，to-do列表。

25
00:01:12,040 --> 00:01:14,270
比方说，我们给这个HTML。

26
00:01:14,270 --> 00:01:16,620
我打算使这一点更小。

27
00:01:16,620 --> 00:01:19,300
正如你可以看到，我有一个小的头，说的Todo

28
00:01:19,300 --> 00:01:21,740
和一个小盒子，在那里我可以输入一个描述待办事项

29
00:01:21,740 --> 00:01:26,990
然后一个新的项目“按钮，让我们尝试进入一个新的待办事项列表。

30
00:01:26,990 --> 00:01:31,000
给一个JavaScript框架研讨会，

31
00:01:31,000 --> 00:01:33,090
而我创出新项目。

32
00:01:33,090 --> 00:01:35,730
我得到这个的JavaScript警告说实现我。

33
00:01:35,730 --> 00:01:37,560
我们已经得到了实现它。

34
00:01:37,560 --> 00:01:41,490
让我们来看看这个代码，HTML和JavaScript的。

35
00:01:41,490 --> 00:01:43,260
这里是我们的HTML。

36
00:01:43,260 --> 00:01:45,500
你可以在这里看到，这里的我们的小托多斯头。

37
00:01:45,500 --> 00:01:47,620
这是大胆的东西在上面，

38
00:01:47,620 --> 00:01:50,690
然后我们有输入框的占位符，

39
00:01:50,690 --> 00:01:59,460
然后有一定这按钮调用这个函数addTodo的的属性。

40
00:01:59,460 --> 00:02:05,460
有谁要猜测这标志着点击？

41
00:02:05,460 --> 00:02:07,390
[学生听不见回应]

42
00:02:07,390 --> 00:02:09,289
好，是有点像上点击事件，

43
00:02:09,289 --> 00:02:12,120
点击鼠标一样，仅仅是一个事件，我们正在做什么

44
00:02:12,120 --> 00:02:16,890
我们绑的情况下点击这个按钮，执行该功能。

45
00:02:16,890 --> 00:02:21,700
AddTodo此事件处理程序，点击该按钮。

46
00:02:21,700 --> 00:02:25,010
>> 正如你可以看到，当我点击“新项目”按钮

47
00:02:25,010 --> 00:02:29,940
上的click事件被解雇，这个函数被调用。

48
00:02:29,940 --> 00:02:33,170
让我们来看看功能。

49
00:02:33,170 --> 00:02:36,260
正如你可以看到，这里是我的JavaScript代码至今。

50
00:02:36,260 --> 00:02:41,280
我在上面为我的to-do列表是一个全球性的数据结构。

51
00:02:41,280 --> 00:02:44,060
它看起来像一个数组。这只是一个空数组。

52
00:02:44,060 --> 00:02:47,100
然后我有addTodo的功能，我们在前面看到的，

53
00:02:47,100 --> 00:02:50,740
只有一行代码，在那里是这样的警示。

54
00:02:50,740 --> 00:02:55,730
它警示实现我，然后我手头有2个任务。

55
00:02:55,730 --> 00:02:58,790
我要添加待办事项全局数据结构，

56
00:02:58,790 --> 00:03:01,860
，然后我想绘制出的to-do列表。

57
00:03:01,860 --> 00:03:06,360
没什么特别的，只是还没有，但JavaScript中，您可能不熟悉，

58
00:03:06,360 --> 00:03:12,370
所以我打算去缓慢和审查中的JavaScript这样的基本面。

59
00:03:12,370 --> 00:03:15,490
>> 让我们给这个一杆。

60
00:03:15,490 --> 00:03:21,130
比方说，用户输入的东西在这个盒子里。

61
00:03:21,130 --> 00:03:23,360
我只是在这里的东西，文字输入。

62
00:03:23,360 --> 00:03:27,620
我如何通过JavaScript访问该文本排序？

63
00:03:27,620 --> 00:03:32,500
记住了JavaScript，其基本特点之一是，它为我们提供了

64
00:03:32,500 --> 00:03:34,670
这一纲领性访问DOM。

65
00:03:34,670 --> 00:03:40,670
它允许我们访问这个实际的HTML元素和它们的属性。

66
00:03:40,670 --> 00:03:43,430
我们做事的方式，与裸露的骨头JAVASCRIPT

67
00:03:43,430 --> 00:03:51,360
实际上，我们可以使用一个函数在JavaScript称为getElementByID的。

68
00:03:51,360 --> 00:03:55,140
我想存储键入的文本有一些变量，

69
00:03:55,140 --> 00:03:58,350
所以我会说一个新的变量new_todo

70
00:03:58,350 --> 00:04:01,980
我会得到这个元素。

71
00:04:01,980 --> 00:04:06,330
这是一个功能，getElementByID。

72
00:04:06,330 --> 00:04:11,580
现在我得到一个元素的ID，所以我需要该文本框的ID，

73
00:04:11,580 --> 00:04:15,860
所以我给它的ID new_todo_description。

74
00:04:15,860 --> 00:04:18,399
这就是我要得到一个元素。

75
00:04:18,399 --> 00:04:23,880
这是我的此函数的参数，以指定的ID来获得。

76
00:04:23,880 --> 00:04:28,110
并使得HTML中的一个元素，它具有属性。

77
00:04:28,110 --> 00:04:30,650
你见过这些。他们的属性。

78
00:04:30,650 --> 00:04:37,090
被调用，用于存储用户输入的文本元素的属性值。

79
00:04:37,090 --> 00:04:40,860
我现在保存该文本框的值在这个变量称为new_todo的。

80
00:04:40,860 --> 00:04:45,040
现在我有这个变量的编程访问，这是一种很酷

81
00:04:45,040 --> 00:04:49,200
因为现在我能做些什么，我可以把它添加到我的to-do列表。

82
00:04:49,200 --> 00:04:52,870
>> 在JavaScript中，我们会做到这一点的方法，不要担心，如果你不熟悉这个，

83
00:04:52,870 --> 00:04:57,010
但只是通过todos.push的

84
00:04:57,010 --> 00:05:00,130
因为这是我的全局数据结构的名称，在这里，

85
00:05:00,130 --> 00:05:04,450
我要去推new_todo。

86
00:05:04,450 --> 00:05:09,120
这是伟大的，因为现在我已经把它添加到我的JavaScript

87
00:05:09,120 --> 00:05:11,280
代表性的to-do列表。

88
00:05:11,280 --> 00:05:15,170
但现在我怎么得到它的HTML？

89
00:05:15,170 --> 00:05:18,560
我一定要找到一种方式来排序，将其推回。

90
00:05:18,560 --> 00:05:21,830
换句话说，我不得不得出这样的。

91
00:05:21,830 --> 00:05:26,060
我们要做的是我们要绘制的to-do列表。

92
00:05:26,060 --> 00:05:29,270
我需要更新该网页上的其他HTML，

93
00:05:29,270 --> 00:05:32,040
你可以看到，我已经离开这个小容器在这里，

94
00:05:32,040 --> 00:05:36,840
这个分频器的页面的ID是待办事项，

95
00:05:36,840 --> 00:05:40,870
我打算把那里的to-do列表。

96
00:05:40,870 --> 00:05:47,240
首先，我将它清除出去，因为，说是一个老的to-do列表。

97
00:05:47,240 --> 00:05:49,560
我理解的元素的ID再次，

98
00:05:49,560 --> 00:05:54,530
我访问该元素的内部HTML，

99
00:05:54,530 --> 00:05:58,010
我要明确表示。

100
00:05:58,010 --> 00:06:05,510
如果我们离开了这个代码，我们会看到一个空白的什么也没有，

101
00:06:05,510 --> 00:06:10,410
现在我想开始渲染我的新的to-do列表。

102
00:06:10,410 --> 00:06:12,870
我基本上是要消灭我的to-do列表。

103
00:06:12,870 --> 00:06:18,180
>> 现在的内部HTML里面，待办事项格是完全清楚的，

104
00:06:18,180 --> 00:06:20,060
现在我需要开始添加我的清单。

105
00:06:20,060 --> 00:06:23,890
第一件事情，我想补充的是无序列表标记，

106
00:06:23,890 --> 00:06:33,890
这基本上表示，这是一个无序列表开始。

107
00:06:33,890 --> 00:06:39,770
我想现在我的待办事项数组中的每个元素，HTML里面打印出来。

108
00:06:39,770 --> 00:06:43,710
我想将其追加到这个列表的底部。

109
00:06:43,710 --> 00:06:49,040
就像在C，我可以使用一个for循环，我要在我的清单年初开始

110
00:06:49,040 --> 00:06:54,140
元素为0，而且我要去一路列表的长度。

111
00:06:54,140 --> 00:07:01,100
事实上，我们可以在JavaScript中使用数组的长度属性的长度。

112
00:07:01,100 --> 00:07:03,420
基本上我要做的东西非常相似，这里里面

113
00:07:03,420 --> 00:07:05,600
打印出该元素。

114
00:07:05,600 --> 00:07:12,970
我可以再次访问待办事项格，内部HTML的财产，

115
00:07:12,970 --> 00:07:17,560
我要去上添加这个新的清单项目，那就是要被包围

116
00:07:17,560 --> 00:07:25,390
这个li标记，我要带“+”运算符来连接，

117
00:07:25,390 --> 00:07:28,040
这就是我的待办事项数组的第i个元素，

118
00:07:28,040 --> 00:07:32,380
然后我要关闭该标签。

119
00:07:32,380 --> 00:07:36,240
现在，每一个元素，我们将添加一个新的列表项。

120
00:07:36,240 --> 00:07:48,700
然后我们真正需要做的是关闭该标签。

121
00:07:48,700 --> 00:07:52,820
我只需要以关闭无序列表标记。

122
00:07:52,820 --> 00:07:55,490
>> 你感觉如何工作？

123
00:07:55,490 --> 00:07:57,700
这将打开整个列表。

124
00:07:57,700 --> 00:08:01,080
这增加了个别元素从待办事项列表列表，

125
00:08:01,080 --> 00:08:05,470
然后关闭整个列表，这是我addTodo的功能。

126
00:08:05,470 --> 00:08:09,590
基本上，我开始获得从文本框的待办事项。

127
00:08:09,590 --> 00:08:18,950
我想补充一点到待办事项的数组，然后我重新渲染的to-do列表。

128
00:08:18,950 --> 00:08:21,520
现在我可以将项目添加到我的清单。

129
00:08:21,520 --> 00:08:24,620
这是一种令人兴奋的，因为在短短的几行代码

130
00:08:24,620 --> 00:08:28,240
基本上，我们已经做了一个to-do列表，在这里我们可以添加项目。

131
00:08:28,240 --> 00:08:30,050
太好了。

132
00:08:30,050 --> 00:08:34,480
这是一个基本的介绍到JavaScript。

133
00:08:34,480 --> 00:08:36,179
不要太担心现在的语法，

134
00:08:36,179 --> 00:08:38,130
而是去想这个概念。

135
00:08:38,130 --> 00:08:40,539
我们有一些HTML。

136
00:08:40,539 --> 00:08:45,310
我们有一个文本框，基本上允许用户输入一个做项目添加在页面上。

137
00:08:45,310 --> 00:08:49,210
然后，我们使用JavaScript来获取该文本框，待办事项。

138
00:08:49,210 --> 00:08:52,830
我们存储JavaScript数组里面，基本上是像

139
00:08:52,830 --> 00:08:56,010
我们的方案表示，待办事项，

140
00:08:56,010 --> 00:08:59,060
然后我们打印出来。

141
00:08:59,060 --> 00:09:02,690
这是todos.js。

142
00:09:02,690 --> 00:09:07,620
>> 这是一种很酷的，但如何才能采取进一步的？

143
00:09:07,620 --> 00:09:11,350
嗯，你可以看到，这是不是像一个完整的to-do列表。

144
00:09:11,350 --> 00:09:15,100
例如，我不能标志着这些项目不完整，

145
00:09:15,100 --> 00:09:19,920
想，如果我想重新安排的项目或删除项目。

146
00:09:19,920 --> 00:09:23,150
这是好的，但我们可以借此进一步。

147
00:09:23,150 --> 00:09:29,280
我不会添加额外的功能过多谈论，

148
00:09:29,280 --> 00:09:32,800
但我们可以采取进一步。

149
00:09:32,800 --> 00:09:35,970
让我们来谈谈有关添加一个功能更to-do列表，

150
00:09:35,970 --> 00:09:40,370
这是怎么回事能够检查个人做项目

151
00:09:40,370 --> 00:09:44,780
它划掉了，所以基本上说我做这个。

152
00:09:44,780 --> 00:09:50,240
让我们来看看一些代码，可以完成。

153
00:09:50,240 --> 00:09:52,740
请注意，在上面我做了什么我已经添加

154
00:09:52,740 --> 00:09:57,620
一个新的全球阵列​​称为完整。

155
00:09:57,620 --> 00:10:02,890
我基本上都采用这种存储To-Do列表上的项目是否

156
00:10:02,890 --> 00:10:06,560
或不完整的。

157
00:10:06,560 --> 00:10:08,470
这是一个办法做到这一点。

158
00:10:08,470 --> 00:10:13,750
如果我看的实现，显示，

159
00:10:13,750 --> 00:10:21,120
基本上，如果我输入待办事项，我按这个切换按钮

160
00:10:21,120 --> 00:10:25,040
它跨越了，所以这个名单上的每个项目都有一个完整的

161
00:10:25,040 --> 00:10:31,050
或不完整的状态，我使用另一个数组来表示。

162
00:10:31,050 --> 00:10:33,730
>> 基本上，待办事项数组中的每一个待办事项

163
00:10:33,730 --> 00:10:37,110
有一个完整的数组，基本上表示项目

164
00:10:37,110 --> 00:10:39,060
是否是完整的或不。

165
00:10:39,060 --> 00:10:41,640
我不得不对代码的改变非常少，

166
00:10:41,640 --> 00:10:44,470
所以这里的我们的addTodo函数。

167
00:10:44,470 --> 00:10:48,530
请注意，在这里我推到阵列，

168
00:10:48,530 --> 00:10:51,300
然后我推，完整阵列0，

169
00:10:51,300 --> 00:10:57,090
基本上说，新的todo推平行

170
00:10:57,090 --> 00:11:00,430
我加入这个项目，它加上这个值，

171
00:11:00,430 --> 00:11:02,810
这意味着它是不完整的。

172
00:11:02,810 --> 00:11:04,970
然后我重绘To-Do列表。

173
00:11:04,970 --> 00:11:09,220
现在，请注意我已经加入这个drawTodoList的功能。

174
00:11:09,220 --> 00:11:11,760
这需要花费很多我们以前的代码，

175
00:11:11,760 --> 00:11:15,320
基本上清除出箱，然后绘制新的to-do列表。

176
00:11:15,320 --> 00:11:19,620
但是请注意，这里面的for循环，我们正在做的多一点现在。

177
00:11:19,620 --> 00:11:25,000
我们基本上是检查是否对应的项目的第i个待办事项

178
00:11:25,000 --> 00:11:30,220
是完整的，我们在这2种情况下表现不同。

179
00:11:30,220 --> 00:11:32,790
如果它是完整的，我们正在添加本德尔标签，

180
00:11:32,790 --> 00:11:35,360
这基本上是这样，你可以得到渗透作用

181
00:11:35,360 --> 00:11:38,190
过路的to-​​do列表，如果它是完整的，

182
00:11:38,190 --> 00:11:42,200
如果它不是，我们不包括它。

183
00:11:42,200 --> 00:11:45,030
所以那种需要照顾，

184
00:11:45,030 --> 00:11:49,140
>> 来完成，这是一种方式。

185
00:11:49,140 --> 00:11:53,420
然后注意到，当用户点击这些

186
00:11:53,420 --> 00:11:56,780
我们切换的完成状态。

187
00:11:56,780 --> 00:12:02,170
当用户点击时，我们是否会扭转，它已经完成或不

188
00:12:02,170 --> 00:12:04,540
然后我们将重绘。

189
00:12:04,540 --> 00:12:06,190
这种作品。

190
00:12:06,190 --> 00:12:09,860
我们有这些功能，进行自己的任务，

191
00:12:09,860 --> 00:12:11,730
这是好的。

192
00:12:11,730 --> 00:12:14,110
有什么我们可以做的更好，虽然？

193
00:12:14,110 --> 00:12:18,700
请注意，我们有2全球阵列。

194
00:12:18,700 --> 00:12:23,550
如果这是C，我们有2个阵列，代表一种

195
00:12:23,550 --> 00:12:25,800
排序的数据以某种方式相关

196
00:12:25,800 --> 00:12:30,140
结合这2个字段，我们会用什么在C

197
00:12:30,140 --> 00:12:35,420
到的东西，它封装了两条信息？

198
00:12:35,420 --> 00:12:37,600
有人要提出一个建议吗？

199
00:12:37,600 --> 00:12:39,450
[学生听不见回应]

200
00:12:39,450 --> 00:12:42,340
>> 没错，所以我们可以使用某种形式的结构，

201
00:12:42,340 --> 00:12:44,960
如果你想回来，说，习题集3，

202
00:12:44,960 --> 00:12:47,350
记得我们有字典，然后我们有这个词是否

203
00:12:47,350 --> 00:12:50,230
在字典中，所有这些信息放在一起

204
00:12:50,230 --> 00:12:52,420
内的一些数据结构。

205
00:12:52,420 --> 00:12:56,390
有一件事我可以做这个代码，以避免这2个不同的阵列

206
00:12:56,390 --> 00:13:01,760
类似的作品信息，我可以将它们组合成一个JavaScript对象。

207
00:13:01,760 --> 00:13:07,150
让我们来看看这个。

208
00:13:07,150 --> 00:13:11,740
请注意，我只在顶部有一个数组

209
00:13:11,740 --> 00:13:17,650
我做了什么，这仅仅是JavaScript的语法排序

210
00:13:17,650 --> 00:13:21,350
创建一个文本版本的对象，

211
00:13:21,350 --> 00:13:24,670
注意到有2个属性，所以我们有待办事项，

212
00:13:24,670 --> 00:13:29,660
和它的保持在一起，无论它是完全或不完全。

213
00:13:29,660 --> 00:13:31,000
这是非常相似的代码。

214
00:13:31,000 --> 00:13:35,310
我们使用的JavaScript对象。

215
00:13:35,310 --> 00:13:38,600
这种提高了的东西。

216
00:13:38,600 --> 00:13:43,850
就像现在，所有这些领域的相关信息放在一起。

217
00:13:43,850 --> 00:13:46,410
当我们去把它打印出来，我们就可以进入的领域。

218
00:13:46,410 --> 00:13:49,060
>> 请注意，我们正在做的待办事项[I]。完整

219
00:13:49,060 --> 00:13:52,880
而不是单独检查完整的数组，

220
00:13:52,880 --> 00:13:56,560
注意到，当我们想要做字符串，我们正在做物业

221
00:13:56,560 --> 00:13:58,750
，待办事项，所以这种有道理的，因为

222
00:13:58,750 --> 00:14:01,660
每一个项目都有它的这些内在属性。

223
00:14:01,660 --> 00:14:05,650
它有一个待办事项，并且它有，它是否是完整的或不。

224
00:14:05,650 --> 00:14:11,540
没有太多变化有功能，只是增加了一些更多的代码。

225
00:14:11,540 --> 00:14:13,430
这是一个在某些方面改善，对不对？

226
00:14:13,430 --> 00:14:16,030
我的意思是，我们考虑设计出位。

227
00:14:16,030 --> 00:14:20,350
现在，我们基本上这个数据封装的对象。

228
00:14:20,350 --> 00:14:27,130
是否有从这里我们可以做更多的JavaScript的事吗？

229
00:14:27,130 --> 00:14:31,810
同样的通知，该代码在这里

230
00:14:31,810 --> 00:14:34,760
获得一个div的内部HTML

231
00:14:34,760 --> 00:14:40,520
是一点点，我猜，长。

232
00:14:40,520 --> 00:14:45,100
有（“待办事项”）的innerHTML。

233
00:14:45,100 --> 00:14:48,400
有一件事我们可以做些什么来使这个代码看起来友善一点

234
00:14:48,400 --> 00:14:51,450
所以我不会一直滚动左，右，来回奔波，

235
00:14:51,450 --> 00:14:58,480
我可以用一个像jQuery库。

236
00:14:58,480 --> 00:15:02,710
>> 让我们来看看会2

237
00:15:02,710 --> 00:15:05,880
这是相同的代码，但它与jQuery。

238
00:15:05,880 --> 00:15:08,790
你可能不是太熟悉使用jQuery，

239
00:15:08,790 --> 00:15:11,510
但我们知道，jQuery是排序为JavaScript库

240
00:15:11,510 --> 00:15:15,910
这使得它更容易做的事情像访问单个元素的DOM。

241
00:15:15,910 --> 00:15:21,280
在这里，而不是说的document.getElementById（“待办事项”）的innerHTML

242
00:15:21,280 --> 00:15:25,210
我可以使用更清洁的方式在jQuery中，

243
00:15:25,210 --> 00:15:28,490
这仅仅是使用选择。

244
00:15:28,490 --> 00:15:31,300
正如你可以看到，这个代码没有得到少许清洁剂，

245
00:15:31,300 --> 00:15:35,770
非常相似的功能，但是这是这个想法。

246
00:15:35,770 --> 00:15:37,980
到目前为止，我们已经看到了一对夫妇的事情，

247
00:15:37,980 --> 00:15:42,010
所以我们开始只是原始的JavaScript实现。

248
00:15:42,010 --> 00:15:45,370
我们增加了新的功能，并表明我们如何才能改善它与

249
00:15:45,370 --> 00:15:49,090
正是我们在JavaScript。

250
00:15:49,090 --> 00:15:53,300
>> 有谁看到这种设计任何困难？

251
00:15:53,300 --> 00:16:01,090
也就是说，我猜或不一定困难，但让我们说

252
00:16:01,090 --> 00:16:04,830
我们根本没有做一个待办事项列表项目，我们明天决定

253
00:16:04,830 --> 00:16:10,320
我们希望做一个购物清单或购物清单项目。

254
00:16:10,320 --> 00:16:14,150
很多这些功能都非常相似。

255
00:16:14,150 --> 00:16:19,080
很多的事情，我们想要得到的JavaScript是很常见的，

256
00:16:19,080 --> 00:16:23,820
这强调了需要某种方式

257
00:16:23,820 --> 00:16:25,670
这更容易做。

258
00:16:25,670 --> 00:16:30,400
我必须建立此HTML访问，这一切访问DOM，

259
00:16:30,400 --> 00:16:35,530
像我要代表这个模型的To-Do列表。

260
00:16:35,530 --> 00:16:39,130
并注意到我负责为JavaScript开发人员

261
00:16:39,130 --> 00:16:42,890
保持同步，我在HTML和JavaScript。

262
00:16:42,890 --> 00:16:48,040
没有自动的JavaScript表示

263
00:16:48,040 --> 00:16:51,590
或to-do列表推到HTML。

264
00:16:51,590 --> 00:16:54,000
没有强制执行，除了我。

265
00:16:54,000 --> 00:16:56,880
我不得不写抽奖待办事项功能。

266
00:16:56,880 --> 00:17:01,650
可能不是，我的意思是，它是合理的做到这一点，

267
00:17:01,650 --> 00:17:03,670
但它可能是乏味的，有时。

268
00:17:03,670 --> 00:17:08,190
如果你有一个更大的项目，这可能是困难的。

269
00:17:08,190 --> 00:17:10,720
>> 框架，框架的目的之一

270
00:17:10,720 --> 00:17:14,060
简化这个过程和排序的因素出来

271
00:17:14,060 --> 00:17:16,950
这些常见的，我猜你可以说设计模式

272
00:17:16,950 --> 00:17:20,700
人们一般都有某种形式的数据表示方式，

273
00:17:20,700 --> 00:17:25,599
是否这是一个好友列表，不管是地图信息

274
00:17:25,599 --> 00:17:27,280
要么就是一个to-do列表。

275
00:17:27,280 --> 00:17:30,660
有些人普遍表示信息的一种方式，

276
00:17:30,660 --> 00:17:33,650
他们一般都需要保持该信息排序同步

277
00:17:33,650 --> 00:17:36,520
用户看到的某种观点之间，

278
00:17:36,520 --> 00:17:39,850
来说的，就像你在讲座上看到的模型视图控制器，

279
00:17:39,850 --> 00:17:45,400
然后模型，该模型在这种情况下，这是JavaScript数组。

280
00:17:45,400 --> 00:17:49,020
框架给大家一个办法来解决这个问题。

281
00:17:49,020 --> 00:17:53,080
现在，让我们来看看在实施这一to-do列表

282
00:17:53,080 --> 00:18:02,360
的框架称为angularjs。

283
00:18:02,360 --> 00:18:04,650
这是什么。请注意，它适合在幻灯片上。

284
00:18:04,650 --> 00:18:07,330
我没有滚动到左侧和右侧。

285
00:18:07,330 --> 00:18:10,460
这可能是不是一个伟大的理由，建议使用一个框架，

286
00:18:10,460 --> 00:18:20,120
但是请注意，我曾经访问单个HTML元素在这里？

287
00:18:20,120 --> 00:18:22,400
我曾经打算到DOM？

288
00:18:22,400 --> 00:18:26,120
你看不到任何的document.getElementById或类似的东西吗？

289
00:18:26,120 --> 00:18:29,870
不，那是走了。

290
00:18:29,870 --> 00:18:35,590
>> 角有助于我们保持DOM和代表性的东西，我们的JavaScript

291
00:18:35,590 --> 00:18:40,430
一种同步，因此，如果它不是在js文件，

292
00:18:40,430 --> 00:18:46,790
如果没有编程所有的HTML内容的方式

293
00:18:46,790 --> 00:18:51,800
从JavaScript，我们如何保持同步？

294
00:18:51,800 --> 00:18:58,160
如果它不是在。js文件，它必须是在HTML，对不对？

295
00:18:58,160 --> 00:19:01,910
这是新的版本的HTML文件，

296
00:19:01,910 --> 00:19:04,660
注意到我们在这里增加了很多。

297
00:19:04,660 --> 00:19:11,110
注意有说点击和NG-NG-重复这些新属性。

298
00:19:11,110 --> 00:19:15,650
角的方法来解决这个问题，在设计上的困难

299
00:19:15,650 --> 00:19:19,130
是基本HTML更强大的。

300
00:19:19,130 --> 00:19:24,420
角是一种方式，可以让您在HTML有些更传神。

301
00:19:24,420 --> 00:19:30,520
例如，我可以说，我要配合或绑定该文本框中

302
00:19:30,520 --> 00:19:35,080
内我角的JavaScript代码的变量。

303
00:19:35,080 --> 00:19:37,030
这纳克模型做到了这一点。

304
00:19:37,030 --> 00:19:41,550
这基本上说，这个文本框里面的项目，

305
00:19:41,550 --> 00:19:45,000
只是关联，变量new_todo_description的

306
00:19:45,000 --> 00:19:47,870
在JavaScript代码。

307
00:19:47,870 --> 00:19:51,600
这是非常强大的，因为我没有明确地去

308
00:19:51,600 --> 00:19:53,310
DOM来得到这些信息。

309
00:19:53,310 --> 00:19:56,250
我没有说的document.getElementById。

310
00:19:56,250 --> 00:19:58,750
我不必使用jQueries像DOM访问。

311
00:19:58,750 --> 00:20:03,280
我可以联想到一个变量，然后当我改变这个变量

312
00:20:03,280 --> 00:20:07,400
在JavaScript中，它保持同步的HTML，

313
00:20:07,400 --> 00:20:11,640
因此，简化的过程中，两者之间来回走。

314
00:20:11,640 --> 00:20:18,260
这是否有意义？

315
00:20:18,260 --> 00:20:22,060
>> 并注意有没有HTML访问代码。

316
00:20:22,060 --> 00:20:27,760
我们刚刚作出了HTML更强大，

317
00:20:27,760 --> 00:20:32,070
而现在，例如，我们可以做这样的事情，

318
00:20:32,070 --> 00:20:38,610
喜欢当你点击这个，调用这个函数的todos.js范围内，

319
00:20:38,610 --> 00:20:43,410
我们可以做到这一点，但还有其他的东西，比如这个纳克模型，

320
00:20:43,410 --> 00:20:47,020
并注意到这个NG重复。

321
00:20:47,020 --> 00:20:51,520
你觉得这样做吗？

322
00:20:51,520 --> 00:20:54,390
下面是我们从之前的无序列表。

323
00:20:54,390 --> 00:20:56,470
我们有UL标签，

324
00:20:56,470 --> 00:21:03,710
但我没有呈现该名单内的JavaScript代码？

325
00:21:03,710 --> 00:21:09,280
我不会明确地呈现这一名单。

326
00:21:09,280 --> 00:21:11,580
这是如何工作？

327
00:21:11,580 --> 00:21:16,410
那么，角的方式完成，这就是所谓的中继。

328
00:21:16,410 --> 00:21:22,760
基本上说，我想打印此HTML

329
00:21:22,760 --> 00:21:26,240
每一个待办事项里面我待办事项阵列的。

330
00:21:26,240 --> 00:21:31,850
内部todos.jr有一个待办事项阵列就在这里，

331
00:21:31,850 --> 00:21:37,910
会告诉角度去通过该阵列，你看到的每个元素

332
00:21:37,910 --> 00:21:41,390
我希望你能打印此HTML。

333
00:21:41,390 --> 00:21:44,620
这是一种真棒，因为我就可以做到这一点

334
00:21:44,620 --> 00:21:47,760
而无需写一个for循环，

335
00:21:47,760 --> 00:21:52,250
这对于一个待办事项列表，只有30行代码

336
00:21:52,250 --> 00:21:54,700
未必是最有利的事情，

337
00:21:54,700 --> 00:22:01,240
但如果你有一个大的项目，这可能会变得非常方便。

338
00:22:01,240 --> 00:22:06,100
>> 这是这个问题的一个解决方案，使得HTML的更强大的，

339
00:22:06,100 --> 00:22:10,820
，使我们能够保持同步JavaScript和HTML。

340
00:22:10,820 --> 00:22:13,220
还有其他可能的方法来解决这个问题，

341
00:22:13,220 --> 00:22:15,320
而不是每一个框架，这样做了。

342
00:22:15,320 --> 00:22:17,720
并不是每一个框架沿着这些线路。

343
00:22:17,720 --> 00:22:19,490
一些框架有不同的方法，

344
00:22:19,490 --> 00:22:23,310
你会发现，你喜欢在一个框架比其他编码。

345
00:22:23,310 --> 00:22:26,160
让我们来看看一个。

346
00:22:26,160 --> 00:22:30,060
这是编写了一个称为骨干框架的to-do列表。

347
00:22:30,060 --> 00:22:33,250
我会去通过这个迅速。

348
00:22:33,250 --> 00:22:38,300
我将开始与HTML之前，我们去那里。

349
00:22:38,300 --> 00:22:40,290
一秒钟。

350
00:22:40,290 --> 00:22:43,950
与HTML开始，你注意到，我们的HTML非常相似

351
00:22:43,950 --> 00:22:50,000
它是什么之前，所以没有太多新在这一方面。

352
00:22:50,000 --> 00:22:55,410
但是，我们的js文件是一个有点不同。

353
00:22:55,410 --> 00:23:00,360
骨干种有这样的想法，或基础上的想法

354
00:23:00,360 --> 00:23:04,750
我们做了很多，比方说，我们的JavaScript项目

355
00:23:04,750 --> 00:23:09,110
想想模型和这些模型的集合。

356
00:23:09,110 --> 00:23:12,510
例如，这可能是一张照片，照片集，

357
00:23:12,510 --> 00:23:16,230
或想法的朋友和收藏的朋友。

358
00:23:16,230 --> 00:23:20,700
而且通常情况下，当我们的JavaScript应用程序编程

359
00:23:20,700 --> 00:23:25,340
我们将整理代表的想法，有一个收藏的朋友

360
00:23:25,340 --> 00:23:29,500
不知何故在JavaScript中，骨干，为我们提供了这层

361
00:23:29,500 --> 00:23:33,040
现有的JavaScript的数组和对象之上

362
00:23:33,040 --> 00:23:38,300
做更强大的东西，更容易。

363
00:23:38,300 --> 00:23:41,870
>> 在这里，我定义了一个待办模型，

364
00:23:41,870 --> 00:23:44,630
你不必过分担心语法，

365
00:23:44,630 --> 00:23:48,730
但要注意什么的属性？

366
00:23:48,730 --> 00:23:53,190
它有一个默认的字段。

367
00:23:53,190 --> 00:23:56,640
骨干已经让我指定了蝙蝠

368
00:23:56,640 --> 00:24:00,190
任何新的做，我创建这些默认值。

369
00:24:00,190 --> 00:24:04,100
现在我可以自定义，但可以指定默认值

370
00:24:04,100 --> 00:24:07,220
是很好的，它是一种方便，因为这是不是就像

371
00:24:07,220 --> 00:24:10,430
在JavaScript中固有的，现在我没有明确

372
00:24:10,430 --> 00:24:12,430
说是不完整的待办事项。

373
00:24:12,430 --> 00:24:19,190
我可以说了蝙蝠的权利，待办事项标记为不完整。

374
00:24:19,190 --> 00:24:21,300
然后请注意这是什么？

375
00:24:21,300 --> 00:24:25,520
现在我有一个to-do列表，这是一个集合。

376
00:24:25,520 --> 00:24:30,960
注意领域模型TODO说。

377
00:24:30,960 --> 00:24:33,390
这是我的方式告诉骨干

378
00:24:33,390 --> 00:24:37,350
我要思考这些单个待办事项的集合。

379
00:24:37,350 --> 00:24:42,140
这基本上是我的程序的模型结构。

380
00:24:42,140 --> 00:24:44,980
在这里，我有这个想法的集合，

381
00:24:44,980 --> 00:24:48,960
该集合中包含的项目基本上都被这些待办事项，

382
00:24:48,960 --> 00:24:51,910
，这是很自然的，在这个意义上

383
00:24:51,910 --> 00:24:59,890
因为我做的待办事项，我让他们在一个集合。

384
00:24:59,890 --> 00:25:02,940
>> 让我们来看看多一点。

385
00:25:02,940 --> 00:25:05,900
这里是一个骨干视图。

386
00:25:05,900 --> 00:25:08,890
骨干说的另一件事是，

387
00:25:08,890 --> 00:25:14,660
很多的车型，你想约，甚至收藏

388
00:25:14,660 --> 00:25:19,150
需要有某种方式被显示。

389
00:25:19,150 --> 00:25:21,900
我们需要渲染，to-do列表，

390
00:25:21,900 --> 00:25:25,460
不会是很好，如果我们能够提供每个模型

391
00:25:25,460 --> 00:25:28,390
或与每个模型视图

392
00:25:28,390 --> 00:25:34,020
我想，使我们能够将两者结合起来呢？

393
00:25:34,020 --> 00:25:38,320
而在此之前，我们不得不使用for循环将贯穿

394
00:25:38,320 --> 00:25:41,130
每一个待办事项列表，然后在这里把它打印出来

395
00:25:41,130 --> 00:25:44,650
基本上，我们可以将它连接这种模式。

396
00:25:44,650 --> 00:25:47,550
这是一个观点。

397
00:25:47,550 --> 00:25:50,550
这与我们早期发现的待办事项。

398
00:25:50,550 --> 00:25:54,940
现在每天的待办事项可显示或渲染

399
00:25:54,940 --> 00:25:56,960
这看法。

400
00:25:56,960 --> 00:25:59,440
请注意的一些领域。

401
00:25:59,440 --> 00:26:05,880
你怎么看这个标记名，标记名：李？

402
00:26:05,880 --> 00:26:09,790
还记得前当我们想要呈现一个TODO

403
00:26:09,790 --> 00:26:16,700
我们将有明确配对的的待办事项与此li标记。

404
00:26:16,700 --> 00:26:21,080
现在，我们说，这TODO去住

405
00:26:21,080 --> 00:26:25,250
将是里面的li标记。

406
00:26:25,250 --> 00:26:31,440
而现在我们也关联事件与我们的待办事项。

407
00:26:31,440 --> 00:26:34,320
>> 每一个待办事项这个事件。

408
00:26:34,320 --> 00:26:38,480
如果你点击了相当多的切换按钮，这就是我说有什么，

409
00:26:38,480 --> 00:26:43,080
然后基本上标志着什么之前相反的待办事项

410
00:26:43,080 --> 00:26:45,890
然后重新呈现该应用程序。

411
00:26:45,890 --> 00:26:47,810
这是一种类似于之前的代码。

412
00:26:47,810 --> 00:26:50,730
记住，当我们将其标记为相反或

413
00:26:50,730 --> 00:26:52,410
然后我们重新呈现。

414
00:26:52,410 --> 00:26:57,750
但是请注意，现在是在HTML使用此事件。

415
00:26:57,750 --> 00:26:59,640
就坐在那里。

416
00:26:59,640 --> 00:27:01,410
按钮上点击。

417
00:27:01,410 --> 00:27:05,310
当你按一下按钮，它做的东西

418
00:27:05,310 --> 00:27:07,210
待办事项是不完整的。

419
00:27:07,210 --> 00:27:11,180
在这里，我们点击切换按钮，该事件相关联

420
00:27:11,180 --> 00:27:15,830
和扭转，无论是打开或关闭这个观点。

421
00:27:15,830 --> 00:27:20,480
>> 因此，它是非常紧密的结合，这是一个很好的方式，设立这个事件

422
00:27:20,480 --> 00:27:26,980
这种观点，所以注意到这一个。

423
00:27:26,980 --> 00:27:31,050
我有这样的渲染方法，我们不必去通过细节。

424
00:27:31,050 --> 00:27:33,650
这是一种类似于我们以前，

425
00:27:33,650 --> 00:27:36,070
但是请注意我不是遍历什么。

426
00:27:36,070 --> 00:27:40,700
我不是说我要打印的所有元素的排序打印，UL标签。

427
00:27:40,700 --> 00:27:46,610
我提供的功能呈现一个做项目。

428
00:27:46,610 --> 00:27:49,400
这是一个非常强大的概念，因为基本上

429
00:27:49,400 --> 00:27:53,600
我们的to-do列表包含所有这些待办事项，如果我们基本上可以指定

430
00:27:53,600 --> 00:27:56,890
的方式来呈现这些待办事项

431
00:27:56,890 --> 00:28:04,230
那么我们可以有我们强大的骨干本身渲染所有的待办事项

432
00:28:04,230 --> 00:28:07,760
通过对个人待办事项调用render方法。

433
00:28:07,760 --> 00:28:14,180
这是一个概念，这里是非常有用的。

434
00:28:14,180 --> 00:28:18,160
现在要问的是一个很好的问题这是怎么应用程序放在一起？

435
00:28:18,160 --> 00:28:21,200
因为我们有能力呈现一个待办事项，

436
00:28:21,200 --> 00:28:23,860
但我们怎样才能获得多个待办事项的想法？

437
00:28:23,860 --> 00:28:25,100
>> 让我们来看看这个。

438
00:28:25,100 --> 00:28:27,100
这是最后的部分。

439
00:28:27,100 --> 00:28:29,740
请注意，我们这里有一个to-do列表视图，

440
00:28:29,740 --> 00:28:34,440
并注意到它也是一个观点。

441
00:28:34,440 --> 00:28:36,970
走了过来一对夫妇的事情，

442
00:28:36,970 --> 00:28:45,280
这个初始化方法会被调用时，我们首先创建这个To-Do列表。

443
00:28:45,280 --> 00:28:52,630
正如你可以看到的，它就像创建to-do列表，并将其关联到这个观点。

444
00:28:52,630 --> 00:28:57,860
然后我说这里的功能，所以基本上，当你添加一个项目

445
00:28:57,860 --> 00:29:01,440
这是addItem方法类似，我们看到前

446
00:29:01,440 --> 00:29:07,430
我要创建一个新的todo对象，并通知我实际调用

447
00:29:07,430 --> 00:29:13,080
这个新的todo方法，所以这是由骨干，

448
00:29:13,080 --> 00:29:16,010
我可以通过在这里我的物业。

449
00:29:16,010 --> 00:29:23,710
现在每天的待办事项我创建使用该功能，我们以前看到的。

450
00:29:23,710 --> 00:29:28,140
请注意，我清理出的文本框中前一个小细节 - 

451
00:29:28,140 --> 00:29:32,900
然后我加入这个集合。

452
00:29:32,900 --> 00:29:37,630
>> 这几乎似乎不可思议，因为之前我们刚刚做到这一点todos.push的，

453
00:29:37,630 --> 00:29:43,310
然后我们做了，为这个特殊的项目，这可能看起来比较复杂，

454
00:29:43,310 --> 00:29:46,980
你可能会发现，骨干，甚至角或任何其他框架

455
00:29:46,980 --> 00:29:50,790
不能满足您的特定项目，但我认为重要的是要思考

456
00:29:50,790 --> 00:29:54,100
这意味着什么，在更大的规模较大的项目，

457
00:29:54,100 --> 00:29:56,610
因为，如果我们有一个更大的项目，我们代表

458
00:29:56,610 --> 00:30:00,860
收集一些真正复杂的，更深层次的东西不仅仅是一个to-do列表，

459
00:30:00,860 --> 00:30:04,490
让我们说一个朋友列表或类似的东西，这可能会派上用场

460
00:30:04,490 --> 00:30:09,620
，因为我们可以在一个非常方便的方式组织我们的代码，

461
00:30:09,620 --> 00:30:12,550
在某种程度上，这将使它更容易为别人

462
00:30:12,550 --> 00:30:16,820
谁想要拿起建立一个项目。

463
00:30:16,820 --> 00:30:21,450
你可以看到，这提供了很多结构。

464
00:30:21,450 --> 00:30:26,580
然后我打电话来，呈现在此的addItem。

465
00:30:26,580 --> 00:30:31,050
渲染，你可以看到，你没有抓住这个完整的语法，

466
00:30:31,050 --> 00:30:37,790
但基本上每一个模型，它会打电话给个别渲染方法。

467
00:30:37,790 --> 00:30:41,500
这就是一种来自哪里。

468
00:30:41,500 --> 00:30:44,140
让我们只指定如何呈现各个待办事项，

469
00:30:44,140 --> 00:30:47,310
然后让它们粘合在一起作为一个整体。

470
00:30:47,310 --> 00:30:49,810
但是，这提供了一种方法的抽象，

471
00:30:49,810 --> 00:30:55,470
因为我可以改变我决定的方式来呈现个人待办事项，

472
00:30:55,470 --> 00:30:57,940
我也不会改变任何代码。

473
00:30:57,940 --> 00:31:00,700
这是一种很酷的。

474
00:31:00,700 --> 00:31:08,540
>> 没有任何人有任何关于JavaScript框架的问题吗？

475
00:31:08,540 --> 00:31:14,310
[学生听不见的问题]

476
00:31:14,310 --> 00:31:16,050
哦，当然，这是一个很大的问题。

477
00:31:16,050 --> 00:31:19,080
问题我怎么框架？

478
00:31:19,080 --> 00:31:22,970
大多数JavaScript框架基本上只是js文件

479
00:31:22,970 --> 00:31:25,740
可以包含在你的代码的顶部。

480
00:31:25,740 --> 00:31:29,830
注意，在我的HTML的头部，我有所有这些脚本标签，

481
00:31:29,830 --> 00:31:34,250
最终脚本标签是我们写的代码。

482
00:31:34,250 --> 00:31:38,820
然后3框架代码也只是脚本标签。

483
00:31:38,820 --> 00:31:42,110
我包括他们从什么叫做CDN，

484
00:31:42,110 --> 00:31:46,200
这可以让我在这一点上它从别人

485
00:31:46,200 --> 00:31:57,930
但每一个框架，你几乎可以找到的内容

486
00:31:57,930 --> 00:32:03,540
对于一个特定的JavaScript库，可在一些CDN或类似的东西，

487
00:32:03,540 --> 00:32:05,570
然后你就可以包括这些脚本标签。

488
00:32:05,570 --> 00:32:07,600
这是否有意义？

489
00:32:07,600 --> 00:32:09,500
凉爽。

490
00:32:09,500 --> 00:32:11,730
>> 这是两种不同的途径。

491
00:32:11,730 --> 00:32:14,640
这些都不是唯一的方法来解决这个问题。

492
00:32:14,640 --> 00:32:17,080
有很多不同的事情，

493
00:32:17,080 --> 00:32:19,490
有人能做到，而且有很多框架在那里。

494
00:32:19,490 --> 00:32:23,300
角和骨干不告诉整个故事。

495
00:32:23,300 --> 00:32:26,370
祝你好运与您的最终项目，非常感谢你。

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