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]