1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Hội thảo] [Khung JavaScript: Tại sao và như thế nào]

2
00:00:02,000 --> 00:00:04,000
[Kevin Schmid] [Đại học Harvard]

3
00:00:04,000 --> 00:00:06,960
[Đây là CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hi, tất cả mọi người. Chào mừng bạn đến Khung hội thảo JavaScript.

5
00:00:10,630 --> 00:00:14,910
Tôi tên là Kevin, và hôm nay tôi sẽ nói chuyện về các khuôn khổ JavaScript,

6
00:00:14,910 --> 00:00:20,400
và mục tiêu của hội thảo này không phải là để có được bạn, nói, chủ một khuôn khổ cụ thể cho mỗi gia nhập

7
00:00:20,400 --> 00:00:23,810
nhưng để cung cấp cho bạn một giới thiệu rộng rãi với một vài khung

8
00:00:23,810 --> 00:00:27,150
và cho thấy lý do tại sao chúng tôi sẽ bao giờ muốn sử dụng một khuôn khổ.

9
00:00:27,150 --> 00:00:31,060
>> Trước khi tôi làm điều đó, tôi sẽ cung cấp một nền tảng nhỏ trong JavaScript,

10
00:00:31,060 --> 00:00:33,750
và sau đó chúng tôi sẽ mang nó từ đó.

11
00:00:33,750 --> 00:00:36,270
Chúng ta sẽ bắt đầu bằng cách thực hiện một danh sách to-do.

12
00:00:36,270 --> 00:00:39,330
Dưới đây là danh sách công việc của chúng tôi ngày hôm nay.

13
00:00:39,330 --> 00:00:41,990
Nó là buồn cười. Chúng tôi phải thực hiện một danh sách công việc phải làm trong JavaScript.

14
00:00:41,990 --> 00:00:45,110
Đây là những gì nó sẽ như thế nào, vì vậy đó là mục tiêu đầu tiên của chúng tôi.

15
00:00:45,110 --> 00:00:47,160
Chúng tôi sẽ không sử dụng một khuôn khổ để làm điều đó.

16
00:00:47,160 --> 00:00:51,930
Chúng tôi đang đi vào mã JavaScript và nhận được danh sách công việc phải làm để làm việc.

17
00:00:51,930 --> 00:00:54,370
Sau đó chúng ta sẽ cải thiện thiết kế mà không sử dụng một khuôn khổ.

18
00:00:54,370 --> 00:00:57,190
Chúng ta sẽ thảo luận về những điều khác nhau chúng ta có thể làm gì với chỉ một mình JavaScript

19
00:00:57,190 --> 00:01:00,650
để làm cho chúng tôi phải làm liệt kê một chút tốt hơn thiết kế.

20
00:01:00,650 --> 00:01:02,490
Sau đó chúng ta sẽ ném trong một số jQuery,

21
00:01:02,490 --> 00:01:05,030
và sau đó chúng ta sẽ nhìn vào cùng một việc cần làm,

22
00:01:05,030 --> 00:01:07,170
chỉ cần thực hiện trong khuôn khổ khác nhau, và chúng tôi sẽ thảo luận về

23
00:01:07,170 --> 00:01:09,280
 ưu và nhược điểm trên đường đi.

24
00:01:09,280 --> 00:01:12,040
>> Chúng ta hãy bắt đầu thực hiện là việc cần làm.

25
00:01:12,040 --> 00:01:14,270
Hãy nói rằng chúng tôi đang đưa ra HTML này.

26
00:01:14,270 --> 00:01:16,620
Tôi sẽ làm cho nhỏ hơn một chút này.

27
00:01:16,620 --> 00:01:19,300
Như bạn thấy, tôi có một tiêu đề nhỏ mà nói Todo

28
00:01:19,300 --> 00:01:21,740
và một hộp nhỏ nơi tôi có thể nhập một mô tả về một việc cần làm

29
00:01:21,740 --> 00:01:26,990
và sau đó một nút mục mới, vì vậy hãy cố gắng để nhập cần làm mới vào danh sách này.

30
00:01:26,990 --> 00:01:31,000
Cho một khuôn khổ hội thảo JavaScript,

31
00:01:31,000 --> 00:01:33,090
và tôi là để đạt mục mới.

32
00:01:33,090 --> 00:01:35,730
Tôi có được điều này cảnh báo JavaScript mà nói tôi thực hiện.

33
00:01:35,730 --> 00:01:37,560
Chúng ta phải thực hiện nó.

34
00:01:37,560 --> 00:01:41,490
Hãy kiểm tra mã cho điều này, cả HTML và JavaScript.

35
00:01:41,490 --> 00:01:43,260
Đây là HTML.

36
00:01:43,260 --> 00:01:45,500
Như bạn có thể thấy ở đây, đây là Todos ít tiêu đề của chúng tôi.

37
00:01:45,500 --> 00:01:47,620
Đó là điều đậm ở đầu trang,

38
00:01:47,620 --> 00:01:50,690
và sau đó chúng tôi có hộp nhập với giữ chỗ,

39
00:01:50,690 --> 00:01:59,460
và sau đó có một thuộc tính nào đó của nút này sẽ gọi hàm này addTodo.

40
00:01:59,460 --> 00:02:05,460
Không ai muốn đoán những gì mà trên nhấp chuột là nghĩa?

41
00:02:05,460 --> 00:02:07,390
[Sinh viên phản ứng không nghe được]

42
00:02:07,390 --> 00:02:09,289
Tốt, trên nhấp chuột là loại giống như một sự kiện,

43
00:02:09,289 --> 00:02:12,120
như cách nhấp chuột chỉ là một sự kiện, và những gì chúng tôi đang làm

44
00:02:12,120 --> 00:02:16,890
là chúng ta đang buộc các sự kiện của cách nhấn vào nút này để thực hiện chức năng đó.

45
00:02:16,890 --> 00:02:21,700
AddTodo là xử lý sự kiện này cho cách nhấp vào nút đó.

46
00:02:21,700 --> 00:02:25,010
>> Như bạn có thể thấy, khi tôi nhấn vào nút mục mới

47
00:02:25,010 --> 00:02:29,940
sự kiện click trên bị sa thải, và chức năng này được gọi là.

48
00:02:29,940 --> 00:02:33,170
Hãy nhìn vào chức năng.

49
00:02:33,170 --> 00:02:36,260
Như bạn có thể thấy, đây là mã JavaScript của tôi cho đến nay.

50
00:02:36,260 --> 00:02:41,280
Một cấu trúc dữ liệu toàn cầu cho danh sách công việc phải làm của tôi những gì tôi có ở trên cùng là.

51
00:02:41,280 --> 00:02:44,060
Nó trông giống như một mảng. Nó chỉ là một mảng trống.

52
00:02:44,060 --> 00:02:47,100
Và sau đó tôi có chức năng addTodo mà chúng ta đã thấy,

53
00:02:47,100 --> 00:02:50,740
và dòng duy nhất của mã trong đó là cảnh báo này.

54
00:02:50,740 --> 00:02:55,730
Nó cảnh báo thực hiện tôi, và sau đó tôi có 2 nhiệm vụ trong tầm tay.

55
00:02:55,730 --> 00:02:58,790
Tôi có thêm những việc cần làm cho cấu trúc dữ liệu toàn cầu,

56
00:02:58,790 --> 00:03:01,860
và sau đó tôi muốn đề ra các danh sách to-do.

57
00:03:01,860 --> 00:03:06,360
Không có gì quá lạ mắt chỉ được nêu ra, nhưng JavaScript của bạn có thể không quen thuộc với,

58
00:03:06,360 --> 00:03:12,370
vì vậy tôi sẽ đi chậm và xem xét các nguyên tắc cơ bản của JavaScript theo cách đó.

59
00:03:12,370 --> 00:03:15,490
>> Hãy cung cấp cho một shot.

60
00:03:15,490 --> 00:03:21,130
Hãy nói rằng người dùng nhập vào một cái gì đó trong hộp này.

61
00:03:21,130 --> 00:03:23,360
Tôi chỉ cần gõ một cái gì đó ở đây, văn bản.

62
00:03:23,360 --> 00:03:27,620
Làm thế nào để sắp xếp của truy cập văn bản thông qua JavaScript?

63
00:03:27,620 --> 00:03:32,500
Hãy nhớ rằng JavaScript, một trong những tính năng cơ bản của nó là nó cung cấp cho chúng tôi

64
00:03:32,500 --> 00:03:34,670
truy cập chương trình này vào DOM.

65
00:03:34,670 --> 00:03:40,670
Nó cho phép chúng ta truy cập vào các yếu tố và các thuộc tính của họ về HTML thực tế này.

66
00:03:40,670 --> 00:03:43,430
Cách chúng ta làm điều đó với trần xương JavaScript

67
00:03:43,430 --> 00:03:51,360
là chúng ta thực sự có thể sử dụng chức năng trong JavaScript được gọi là getElementById.

68
00:03:51,360 --> 00:03:55,140
Tôi muốn để lưu trữ các văn bản đó là đánh máy có trong một số biến,

69
00:03:55,140 --> 00:03:58,350
vì vậy tôi sẽ nói một biến mới tên là new_todo,

70
00:03:58,350 --> 00:04:01,980
và tôi sẽ có được yếu tố đó.

71
00:04:01,980 --> 00:04:06,330
Đây là một chức năng,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
Và bây giờ tôi nhận được một phần tử của ID, vì vậy tôi cần ID là hộp văn bản,

73
00:04:11,580 --> 00:04:15,860
vì vậy tôi đã cho nó những new_todo_description ID.

74
00:04:15,860 --> 00:04:18,399
Đó là làm thế nào tôi sẽ nhận được một phần tử.

75
00:04:18,399 --> 00:04:23,880
Đó là lý luận của tôi để chức năng này, để xác định các ID để có được.

76
00:04:23,880 --> 00:04:28,110
Và đó là một yếu tố trong HTML, và nó có tính chất.

77
00:04:28,110 --> 00:04:30,650
Bạn đã nhìn thấy này. Họ là các thuộc tính.

78
00:04:30,650 --> 00:04:37,090
Các thuộc tính của phần tử văn bản mà các cửa hàng đầu vào của người dùng được gọi là giá trị.

79
00:04:37,090 --> 00:04:40,860
Tôi đã lưu các giá trị là hộp văn bản bây giờ trong biến này được gọi là new_todo.

80
00:04:40,860 --> 00:04:45,040
Bây giờ tôi có thể truy cập chương trình để biến này, đó là loại mát mẻ

81
00:04:45,040 --> 00:04:49,200
bởi vì bây giờ những gì tôi có thể làm là tôi có thể thêm vào danh sách công việc phải làm của tôi.

82
00:04:49,200 --> 00:04:52,870
>> Cách chúng ta sẽ làm điều này trong JavaScript và không lo lắng nếu bạn không quen với điều này,

83
00:04:52,870 --> 00:04:57,010
nhưng chỉ đi qua nó là todos.push

84
00:04:57,010 --> 00:05:00,130
bởi vì đó là tên của cấu trúc dữ liệu toàn cầu của tôi lên đây,

85
00:05:00,130 --> 00:05:04,450
và tôi sẽ đẩy new_todo.

86
00:05:04,450 --> 00:05:09,120
Điều này là rất tốt vì bây giờ tôi đã thêm nó vào JavaScript của tôi

87
00:05:09,120 --> 00:05:11,280
đại diện cho rằng việc cần làm.

88
00:05:11,280 --> 00:05:15,170
Nhưng bây giờ làm thế nào để có được nó trở lại với HTML?

89
00:05:15,170 --> 00:05:18,560
Tôi phải tìm một cách để sắp xếp của đẩy nó trở lại.

90
00:05:18,560 --> 00:05:21,830
Nói cách khác, tôi hẳn sẽ có những hình ảnh này.

91
00:05:21,830 --> 00:05:26,060
Những gì chúng ta sẽ làm là chúng ta sẽ rút ra những danh sách công việc phải làm.

92
00:05:26,060 --> 00:05:29,270
Tôi cần phải cập nhật mã HTML khác trên trang đó,

93
00:05:29,270 --> 00:05:32,040
và như bạn thấy, tôi đã để lại bình chứa nhỏ ở đây,

94
00:05:32,040 --> 00:05:36,840
chia này của trang có ID là todos,

95
00:05:36,840 --> 00:05:40,870
và tôi sẽ đưa danh sách công việc phải làm ở đó.

96
00:05:40,870 --> 00:05:47,240
Đầu tiên tôi sẽ rõ ràng nó ra bởi vì, nói rằng, đã có một tuổi để làm danh sách đó.

97
00:05:47,240 --> 00:05:49,560
Tôi nhận được yếu tố đó bằng ID một lần nữa,

98
00:05:49,560 --> 00:05:54,530
và tôi đang truy cập vào HTML bên trong của phần tử đó,

99
00:05:54,530 --> 00:05:58,010
và tôi sẽ rõ ràng đó.

100
00:05:58,010 --> 00:06:05,510
Nếu chúng ta bỏ mã này như là, chúng ta sẽ thấy một không trống đó,

101
00:06:05,510 --> 00:06:10,410
và bây giờ tôi muốn bắt đầu render mới danh sách công việc phải làm của tôi.

102
00:06:10,410 --> 00:06:12,870
Tôi về cơ bản sẽ quét sạch danh sách công việc phải làm của tôi.

103
00:06:12,870 --> 00:06:18,180
>> Bây giờ trong HTML bên trong mà todos div là hoàn toàn rõ ràng,

104
00:06:18,180 --> 00:06:20,060
và bây giờ tôi cần phải bắt đầu bổ sung thêm danh sách của tôi.

105
00:06:20,060 --> 00:06:23,890
Điều đầu tiên tôi muốn thêm lại là danh sách từ khóa có thứ tự,

106
00:06:23,890 --> 00:06:33,890
mà về cơ bản chứng tỏ rằng đây là khởi đầu của một danh sách có thứ tự.

107
00:06:33,890 --> 00:06:39,770
Bây giờ cho mỗi phần tử trong mảng todos của tôi, tôi muốn in nó ra bên trong HTML.

108
00:06:39,770 --> 00:06:43,710
Tôi muốn thêm nó vào dưới cùng của danh sách này.

109
00:06:43,710 --> 00:06:49,040
Cũng giống như trong C, tôi có thể sử dụng một vòng lặp, và tôi sẽ bắt đầu vào đầu danh sách của tôi

110
00:06:49,040 --> 00:06:54,140
tại phần tử 0, và tôi sẽ làm mọi cách để chiều dài của danh sách.

111
00:06:54,140 --> 00:07:01,100
Chúng tôi thực sự có thể có được chiều dài của một mảng trong JavaScript bằng cách sử dụng tài sản dài.

112
00:07:01,100 --> 00:07:03,420
Về cơ bản tôi sẽ làm một cái gì đó rất giống nhau bên trong đây

113
00:07:03,420 --> 00:07:05,600
để in ra phần tử đó.

114
00:07:05,600 --> 00:07:12,970
Tôi lại có thể truy cập todos div, thuộc tính HTML bên trong đó,

115
00:07:12,970 --> 00:07:17,560
và tôi sẽ để thêm vào danh sách mặt hàng này mới, và điều đó sẽ được bao quanh bởi

116
00:07:17,560 --> 00:07:25,390
thẻ li này, và tôi sẽ để nối với các nhà điều hành +,

117
00:07:25,390 --> 00:07:28,040
và đó là yếu tố thứ i của mảng todos của tôi,

118
00:07:28,040 --> 00:07:32,380
và sau đó tôi sẽ đóng thẻ đó.

119
00:07:32,380 --> 00:07:36,240
Bây giờ cho từng yếu tố chúng ta sẽ thêm một mục danh sách mới.

120
00:07:36,240 --> 00:07:48,700
Và sau đó tất cả chúng tôi thực sự cần phải làm là đóng lại thẻ đó.

121
00:07:48,700 --> 00:07:52,820
Tôi chỉ cần đóng kín mà không có thứ tự danh sách từ khóa.

122
00:07:52,820 --> 00:07:55,490
>> Để bạn có được một cảm giác về làm thế nào mà làm việc?

123
00:07:55,490 --> 00:07:57,700
Điều này mở ra toàn bộ danh sách.

124
00:07:57,700 --> 00:08:01,080
Này cho biết thêm yếu tố cá nhân trong danh sách todos vào danh sách,

125
00:08:01,080 --> 00:08:05,470
và sau đó là đóng cửa toàn bộ danh sách, và đây là chức năng addTodo của tôi.

126
00:08:05,470 --> 00:08:09,590
Tôi về cơ bản bắt đầu bằng cách nhận được việc cần làm từ hộp văn bản.

127
00:08:09,590 --> 00:08:18,950
Tôi thêm rằng vào mảng todos, và sau đó tôi lại hiển thị danh sách công việc phải làm.

128
00:08:18,950 --> 00:08:21,520
Bây giờ tôi có thể thêm các mục vào danh sách của tôi.

129
00:08:21,520 --> 00:08:24,620
Đây là loại thú vị bởi vì chỉ trong một vài dòng mã

130
00:08:24,620 --> 00:08:28,240
chúng tôi đã cơ bản thực hiện một danh sách công việc phải làm mà chúng ta có thể thêm các mục.

131
00:08:28,240 --> 00:08:30,050
Tuyệt vời.

132
00:08:30,050 --> 00:08:34,480
Đó là loại giới thiệu cơ bản cho JavaScript.

133
00:08:34,480 --> 00:08:36,179
Đừng lo lắng quá nhiều về cú pháp cho bây giờ,

134
00:08:36,179 --> 00:08:38,130
nhưng suy nghĩ về khái niệm này.

135
00:08:38,130 --> 00:08:40,539
Chúng tôi đã có một số HTML.

136
00:08:40,539 --> 00:08:45,310
Chúng tôi đã có một hộp văn bản trên trang mà người dùng về cơ bản cho phép nhập vào một mục công việc phải làm thêm.

137
00:08:45,310 --> 00:08:49,210
Và sau đó chúng tôi sử dụng JavaScript để lấy cần làm mà từ đó hộp văn bản.

138
00:08:49,210 --> 00:08:52,830
Chúng tôi lưu trữ mà bên trong một mảng JavaScript, đó là cơ bản như

139
00:08:52,830 --> 00:08:56,010
đại diện chương trình của chúng tôi là việc cần làm,

140
00:08:56,010 --> 00:08:59,060
và sau đó chúng tôi in nó ra.

141
00:08:59,060 --> 00:09:02,690
Đây là todos.js.

142
00:09:02,690 --> 00:09:07,620
>> Đây là loại mát mẻ, nhưng làm thế nào chúng ta có thể thực hiện việc này hơn nữa?

143
00:09:07,620 --> 00:09:11,350
Vâng, như bạn có thể thấy, đây không phải là như hoàn toàn việc cần làm.

144
00:09:11,350 --> 00:09:15,100
Ví dụ, tôi không thể đánh dấu bất kỳ của các mặt hàng này là không đầy đủ,

145
00:09:15,100 --> 00:09:19,920
giống như nếu tôi muốn reprioritize các mục hoặc xóa các mục.

146
00:09:19,920 --> 00:09:23,150
Điều này không quan trọng, nhưng chúng ta có thể thực hiện việc này hơn nữa.

147
00:09:23,150 --> 00:09:29,280
Tôi sẽ không nói quá nhiều về việc thêm các tính năng bổ sung,

148
00:09:29,280 --> 00:09:32,800
nhưng chúng ta có thể đi mà tiếp tục.

149
00:09:32,800 --> 00:09:35,970
Chúng ta hãy nói về việc thêm một tính năng nhiều hơn nữa đến việc cần làm,

150
00:09:35,970 --> 00:09:40,370
mà là có được có thể kiểm tra một cá nhân để làm mục

151
00:09:40,370 --> 00:09:44,780
và nó đã được gạch chéo, vì vậy về cơ bản nói rằng tôi đã làm điều này.

152
00:09:44,780 --> 00:09:50,240
Hãy nhìn vào một số mã có thể thực hiện điều đó.

153
00:09:50,240 --> 00:09:52,740
Thông báo những gì tôi đã làm ở đầu trang là tôi đã thêm

154
00:09:52,740 --> 00:09:57,620
một mảng toàn cầu mới được gọi là hoàn chỉnh.

155
00:09:57,620 --> 00:10:02,890
Tôi về cơ bản sử dụng điều này để lưu trữ có các mục trong danh sách to-do

156
00:10:02,890 --> 00:10:06,560
đầy đủ hay không.

157
00:10:06,560 --> 00:10:08,470
Đây là một cách để làm điều này.

158
00:10:08,470 --> 00:10:13,750
Nếu tôi nhìn vào việc thực hiện điều này, màn hình hiển thị,

159
00:10:13,750 --> 00:10:21,120
về cơ bản nếu tôi nhập vào một công việc phải làm và tôi nhấn nút này chuyển đổi

160
00:10:21,120 --> 00:10:25,040
nó vượt ra ngoài, vì vậy tất cả các mục trong danh sách này có cả một hoàn chỉnh

161
00:10:25,040 --> 00:10:31,050
hoặc nhà nước không đầy đủ, và tôi đang sử dụng mảng khác làm đại diện đó.

162
00:10:31,050 --> 00:10:33,730
>> Về cơ bản cho tất cả các công việc phải làm trong đó mảng todos

163
00:10:33,730 --> 00:10:37,110
có một mục trong mảng hoàn chỉnh về cơ bản chỉ

164
00:10:37,110 --> 00:10:39,060
cho dù đó là hoàn chỉnh hay không.

165
00:10:39,060 --> 00:10:41,640
Tôi đã thay đổi khá tối thiểu để mã này,

166
00:10:41,640 --> 00:10:44,470
vì vậy đây là chức năng addTodo của chúng tôi.

167
00:10:44,470 --> 00:10:48,530
Chú ý rằng ở đây tôi là đẩy nó vào mảng,

168
00:10:48,530 --> 00:10:51,300
và sau đó tôi đẩy một 0 với mảng hoàn chỉnh,

169
00:10:51,300 --> 00:10:57,090
về cơ bản song song với đó cần làm thúc đẩy mới để nói

170
00:10:57,090 --> 00:11:00,430
Tôi bổ sung thêm mặt hàng này, và nó kết hợp với giá trị này,

171
00:11:00,430 --> 00:11:02,810
có nghĩa là nó không đầy đủ.

172
00:11:02,810 --> 00:11:04,970
Và sau đó tôi vẽ lại danh sách to-do.

173
00:11:04,970 --> 00:11:09,220
Bây giờ, thông báo tôi đã thêm chức năng drawTodoList này.

174
00:11:09,220 --> 00:11:11,760
Này có rất nhiều mã chúng tôi đã có trước đây,

175
00:11:11,760 --> 00:11:15,320
về cơ bản xóa ra khỏi hộp và sau đó rút ra mới để làm danh sách.

176
00:11:15,320 --> 00:11:19,620
Nhưng nhận thấy rằng bên trong này cho vòng lặp chúng tôi đang làm một ít giờ hơn.

177
00:11:19,620 --> 00:11:25,000
Chúng tôi về cơ bản là kiểm tra xem các mục tương ứng với các công việc phải làm thứ i đây

178
00:11:25,000 --> 00:11:30,220
hoàn tất, và chúng ta đang hành xử khác nhau trong 2 trường hợp.

179
00:11:30,220 --> 00:11:32,790
Nếu nó hoàn thành, chúng ta đang thêm thẻ del này,

180
00:11:32,790 --> 00:11:35,360
mà về cơ bản là cách bạn có thể nhận được cuộc tấn công thông qua hiệu quả

181
00:11:35,360 --> 00:11:38,190
vượt ra khỏi danh sách công việc phải làm nếu nó hoàn thành,

182
00:11:38,190 --> 00:11:42,200
và nếu nó không, chúng tôi không bao gồm nó.

183
00:11:42,200 --> 00:11:45,030
Và để loại chăm sóc đó,

184
00:11:45,030 --> 00:11:49,140
>> và đó là một cách để thực hiện điều này.

185
00:11:49,140 --> 00:11:53,420
Và sau đó thông báo khi người dùng nhấp vào một trong những

186
00:11:53,420 --> 00:11:56,780
chúng tôi chuyển đổi trạng thái hoàn thành nó.

187
00:11:56,780 --> 00:12:02,170
Khi người dùng nhấp chuột, chúng tôi sẽ đảo ngược dù nó được hoàn thành hay không,

188
00:12:02,170 --> 00:12:04,540
và sau đó chúng tôi sẽ vẽ lại nó.

189
00:12:04,540 --> 00:12:06,190
Loại công trình.

190
00:12:06,190 --> 00:12:09,860
Chúng tôi có những chức năng thực hiện nhiệm vụ của mình,

191
00:12:09,860 --> 00:12:11,730
và điều này không quan trọng.

192
00:12:11,730 --> 00:12:14,110
Là có bất cứ điều gì chúng ta có thể làm tốt hơn về điều này, mặc dù?

193
00:12:14,110 --> 00:12:18,700
Nhận thấy chúng tôi có những 2 mảng toàn cầu.

194
00:12:18,700 --> 00:12:23,550
Nếu điều này là C, và chúng tôi đã có 2 mảng là loại đại diện

195
00:12:23,550 --> 00:12:25,800
dữ liệu đã được loại liên quan một cách nào đó

196
00:12:25,800 --> 00:12:30,140
những gì chúng ta sẽ sử dụng trong C để kết hợp các lĩnh vực 2

197
00:12:30,140 --> 00:12:35,420
vào một cái gì đó mà gói gọn cả hai phần của thông tin?

198
00:12:35,420 --> 00:12:37,600
Bất kỳ ai muốn thực hiện một đề nghị?

199
00:12:37,600 --> 00:12:39,450
[Sinh viên phản ứng không nghe được]

200
00:12:39,450 --> 00:12:42,340
>> Chính xác, vì vậy chúng tôi có thể sử dụng một số loại cấu trúc,

201
00:12:42,340 --> 00:12:44,960
và nếu bạn nghĩ lại, nói, pset 3,

202
00:12:44,960 --> 00:12:47,350
nhớ là chúng tôi đã có từ điển, và sau đó chúng tôi đã có từ

203
00:12:47,350 --> 00:12:50,230
là trong từ điển, và tất cả các thông tin đã được đặt lại với nhau

204
00:12:50,230 --> 00:12:52,420
trong một số cấu trúc dữ liệu.

205
00:12:52,420 --> 00:12:56,390
Một điều tôi có thể làm với mã này để tránh có những 2 mảng khác nhau

206
00:12:56,390 --> 00:13:01,760
cho điểm giống nhau về thông tin là tôi có thể kết hợp chúng thành một đối tượng JavaScript.

207
00:13:01,760 --> 00:13:07,150
Chúng ta hãy nhìn vào đó.

208
00:13:07,150 --> 00:13:11,740
Thông báo tôi chỉ có một mảng ở đầu giờ

209
00:13:11,740 --> 00:13:17,650
và những gì tôi đã thực hiện được và điều này chỉ là cú pháp JavaScript cho loại

210
00:13:17,650 --> 00:13:21,350
tạo ra một phiên bản đen của một đối tượng,

211
00:13:21,350 --> 00:13:24,670
và nhận thấy có 2 tài sản, vì vậy chúng tôi có việc phải làm,

212
00:13:24,670 --> 00:13:29,660
và nó được lưu giữ cùng với cho dù đó là đầy đủ hoặc không đầy đủ.

213
00:13:29,660 --> 00:13:31,000
Đây là mã rất giống nhau.

214
00:13:31,000 --> 00:13:35,310
Chúng tôi đang sử dụng các đối tượng JavaScript.

215
00:13:35,310 --> 00:13:38,600
Loại thứ cải thiện.

216
00:13:38,600 --> 00:13:43,850
Như bây giờ, tất cả các lĩnh vực thông tin liên quan được lưu giữ cùng.

217
00:13:43,850 --> 00:13:46,410
Khi chúng tôi đi để in nó ra, chúng ta có thể truy cập vào các lĩnh vực.

218
00:13:46,410 --> 00:13:49,060
>> Hãy chú ý cách chúng ta đang làm todos [i]. Hoàn chỉnh

219
00:13:49,060 --> 00:13:52,880
thay vì kiểm tra các mảng hoàn toàn riêng biệt,

220
00:13:52,880 --> 00:13:56,560
và thông báo khi chúng tôi muốn có được những chuỗi công việc phải làm, chúng tôi đang nhận được tài sản phải làm

221
00:13:56,560 --> 00:13:58,750
trong đó cần làm, vì vậy loại này có ý nghĩa bởi vì

222
00:13:58,750 --> 00:14:01,660
tất cả các mục có các đặc tính nội tại về nó.

223
00:14:01,660 --> 00:14:05,650
Nó có một việc phải làm, và nó có cho dù đó là hoàn toàn hay không.

224
00:14:05,650 --> 00:14:11,540
Không có quá nhiều thay đổi về chức năng, chỉ cần thêm một số chi tiết để mã.

225
00:14:11,540 --> 00:14:13,430
Đây là một sự cải tiến trên một số mặt trận, phải không?

226
00:14:13,430 --> 00:14:16,030
Ý tôi là, chúng ta yếu tố ra các thiết kế một chút.

227
00:14:16,030 --> 00:14:20,350
Bây giờ chúng ta có các đối tượng về cơ bản đóng gói dữ liệu này.

228
00:14:20,350 --> 00:14:27,130
Là có bất cứ điều gì hơn chúng ta có thể làm từ đây về JavaScript?

229
00:14:27,130 --> 00:14:31,810
Giống như thông báo rằng mã này ngay tại đây

230
00:14:31,810 --> 00:14:34,760
để nhận được HTML bên trong của một div

231
00:14:34,760 --> 00:14:40,520
là một chút, tôi đoán, dài.

232
00:14:40,520 --> 00:14:45,100
Có innerHTML là document.getElementById ("todos")..

233
00:14:45,100 --> 00:14:48,400
Một điều chúng ta có thể làm để làm cho mã này nhìn một chút thân thiện

234
00:14:48,400 --> 00:14:51,450
vì vậy tôi sẽ không phải tiếp tục di chuyển sang trái và phải, qua lại,

235
00:14:51,450 --> 00:14:58,480
là tôi có thể sử dụng một thư viện như jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Hãy kiểm tra Hội thảo 2,

237
00:15:02,710 --> 00:15:05,880
và đây là mã tương tự, nhưng nó được thực hiện với jQuery.

238
00:15:05,880 --> 00:15:08,790
Bạn có thể không quá quen thuộc với jQuery,

239
00:15:08,790 --> 00:15:11,510
nhưng chỉ biết rằng jQuery là sắp xếp của một thư viện JavaScript

240
00:15:11,510 --> 00:15:15,910
mà làm cho nó dễ dàng hơn để làm những việc như các yếu tố cá nhân truy cập của DOM.

241
00:15:15,910 --> 00:15:21,280
InnerHTML đây thay vì nói document.getElementById ("todos").

242
00:15:21,280 --> 00:15:25,210
Tôi có thể sử dụng cách sạch hơn trong jQuery,

243
00:15:25,210 --> 00:15:28,490
mà chỉ là sử dụng bộ chọn.

244
00:15:28,490 --> 00:15:31,300
Như bạn thấy, mã này đã nhận được một chút sạch hơn,

245
00:15:31,300 --> 00:15:35,770
tương tự như chức năng, nhưng đó là ý tưởng.

246
00:15:35,770 --> 00:15:37,980
Chúng tôi đã nhìn thấy một vài điều cho đến nay,

247
00:15:37,980 --> 00:15:42,010
vì vậy chúng tôi bắt đầu với việc thực hiện JavaScript chỉ thô.

248
00:15:42,010 --> 00:15:45,370
Chúng tôi đã thêm tính năng mới và cho thấy cách chúng tôi có thể cải thiện nó với

249
00:15:45,370 --> 00:15:49,090
chỉ là những gì chúng tôi có trong JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Không ai nhìn thấy bất kỳ khó khăn với thiết kế này?

251
00:15:53,300 --> 00:16:01,090
Cụ thể là, tôi đoán hoặc không nhất thiết phải là khó khăn nhưng chúng ta hãy nói

252
00:16:01,090 --> 00:16:04,830
chúng tôi đã không làm một dự án danh sách công việc phải làm, và ngày mai chúng tôi quyết định

253
00:16:04,830 --> 00:16:10,320
chúng tôi muốn tạo ra một danh sách tạp hóa hoặc một dự án danh sách mua sắm.

254
00:16:10,320 --> 00:16:14,150
Rất nhiều các tính năng này rất giống nhau.

255
00:16:14,150 --> 00:16:19,080
Rất nhiều những điều chúng ta muốn có được ra khỏi JavaScript là rất phổ biến,

256
00:16:19,080 --> 00:16:23,820
và điều này nhấn mạnh sự cần thiết đối với một số loại đường

257
00:16:23,820 --> 00:16:25,670
làm cho điều này dễ dàng hơn để làm.

258
00:16:25,670 --> 00:16:30,400
Tôi đã xây dựng tất cả các truy cập HTML này, tất cả các truy cập DOM này,

259
00:16:30,400 --> 00:16:35,530
như tôi sẽ đại diện cho danh sách công việc phải làm với mô hình này.

260
00:16:35,530 --> 00:16:39,130
Và thông báo tôi chịu trách nhiệm như các nhà phát triển JavaScript

261
00:16:39,130 --> 00:16:42,890
để giữ cho HTML và JavaScript mà tôi có trong đồng bộ.

262
00:16:42,890 --> 00:16:48,040
Không tự động thực hiện mà hiện JavaScript

263
00:16:48,040 --> 00:16:51,590
hoặc danh sách công việc phải làm được đẩy ra HTML.

264
00:16:51,590 --> 00:16:54,000
Không thực thi rằng ngoại trừ tôi.

265
00:16:54,000 --> 00:16:56,880
Tôi đã phải viết vẽ to-do list chức năng.

266
00:16:56,880 --> 00:17:01,650
Và có thể không-Ý tôi là, đó là hợp lý để làm điều đó,

267
00:17:01,650 --> 00:17:03,670
nhưng nó có thể là tẻ nhạt đôi khi.

268
00:17:03,670 --> 00:17:08,190
Nếu bạn có một dự án lớn hơn, đó có thể là khó khăn.

269
00:17:08,190 --> 00:17:10,720
>> Khuôn khổ, một trong những mục đích của các khuôn khổ

270
00:17:10,720 --> 00:17:14,060
là để đơn giản hóa quá trình và loại yếu tố ra

271
00:17:14,060 --> 00:17:16,950
các chung tôi đoán bạn có thể nói mẫu thiết kế

272
00:17:16,950 --> 00:17:20,700
mà mọi người thường có một số loại cách đại diện cho dữ liệu,

273
00:17:20,700 --> 00:17:25,599
cho dù đó là một danh sách bạn bè, cho dù đó là thông tin bản đồ

274
00:17:25,599 --> 00:17:27,280
hoặc một cái gì đó hoặc một danh sách công việc phải làm.

275
00:17:27,280 --> 00:17:30,660
Một số người có chung một cách để đại diện cho thông tin,

276
00:17:30,660 --> 00:17:33,650
và họ thường cần phải giữ thông tin loại đồng bộ

277
00:17:33,650 --> 00:17:36,520
giữa những gì người dùng thấy trong một số loại xem,

278
00:17:36,520 --> 00:17:39,850
nói về như bộ điều khiển xem mô hình mà bạn đã thấy trong bài giảng,

279
00:17:39,850 --> 00:17:45,400
và sau đó mô hình, mà trong trường hợp này là mảng JavaScript này.

280
00:17:45,400 --> 00:17:49,020
Khuôn khổ cho chúng ta một cách để giải quyết vấn đề đó.

281
00:17:49,020 --> 00:17:53,080
Bây giờ chúng ta hãy nhìn vào việc thực hiện này cần làm

282
00:17:53,080 --> 00:18:02,360
trong một khuôn khổ gọi là angularjs.

283
00:18:02,360 --> 00:18:04,650
Đây là nó. Nhận thấy nó phù hợp trên một slide.

284
00:18:04,650 --> 00:18:07,330
Tôi không cần phải di chuyển bên trái và bên phải.

285
00:18:07,330 --> 00:18:10,460
Điều đó có lẽ không phải là một lý do tuyệt vời để khuyên bạn sử dụng một khuôn khổ,

286
00:18:10,460 --> 00:18:20,120
nhưng thông báo tôi bao giờ truy cập vào các phần tử HTML cá nhân đây?

287
00:18:20,120 --> 00:18:22,400
Có bao giờ tớ vào DOM?

288
00:18:22,400 --> 00:18:26,120
Bạn có thấy bất kỳ document.getElementById hoặc một cái gì đó như thế?

289
00:18:26,120 --> 00:18:29,870
Không, đó là đi.

290
00:18:29,870 --> 00:18:35,590
>> Góc giúp chúng ta giữ cho DOM và đại diện JavaScript của chúng ta về một cái gì đó

291
00:18:35,590 --> 00:18:40,430
loại đồng bộ, vì vậy nếu nó không có trong các tập tin js,

292
00:18:40,430 --> 00:18:46,790
nếu không có cách lập trình để nhận được tất cả những nội dung HTML

293
00:18:46,790 --> 00:18:51,800
từ JavaScript làm sao chúng ta giữ này đồng bộ?

294
00:18:51,800 --> 00:18:58,160
Nếu nó không có trong file. Js, nó đã nhận được trong HTML, phải không?

295
00:18:58,160 --> 00:19:01,910
Đây là phiên bản mới của tập tin HTML,

296
00:19:01,910 --> 00:19:04,660
và nhận thấy chúng tôi đã thêm rất nhiều ở đây.

297
00:19:04,660 --> 00:19:11,110
Nhận thấy có những thuộc tính mới mà nói ng nhấp chuột và ng-lặp lại.

298
00:19:11,110 --> 00:19:15,650
Cách tiếp cận góc để giải quyết vấn đề này khó khăn trong thiết kế

299
00:19:15,650 --> 00:19:19,130
là cơ bản làm cho HTML mạnh hơn rất nhiều.

300
00:19:19,130 --> 00:19:24,420
Góc là một cách cho phép bạn thực hiện HTML hơi biểu cảm hơn.

301
00:19:24,420 --> 00:19:30,520
Ví dụ, tôi có thể nói rằng tôi sẽ buộc hoặc gắn hộp văn bản này

302
00:19:30,520 --> 00:19:35,080
cho một biến trong mã JavaScript góc của tôi.

303
00:19:35,080 --> 00:19:37,030
Này ng mô hình hiện điều đó.

304
00:19:37,030 --> 00:19:41,550
Nói về cơ bản mà bên trong hộp văn bản này mục,

305
00:19:41,550 --> 00:19:45,000
chỉ liên kết đó với new_todo_description biến

306
00:19:45,000 --> 00:19:47,870
trong mã JavaScript.

307
00:19:47,870 --> 00:19:51,600
Đó là rất mạnh mẽ bởi vì tôi không cần phải đi đến một cách rõ ràng

308
00:19:51,600 --> 00:19:53,310
DOM để có được thông tin đó.

309
00:19:53,310 --> 00:19:56,250
Tôi không cần phải nói document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Tôi không cần phải sử dụng jQueries như truy cập DOM.

311
00:19:58,750 --> 00:20:03,280
Tôi có thể kết hợp nó với một biến, và sau đó khi tôi thay đổi điều đó biến

312
00:20:03,280 --> 00:20:07,400
trong JavaScript nó giữ đồng bộ với HTML,

313
00:20:07,400 --> 00:20:11,640
để đơn giản hoá quá trình phải đi qua lại giữa hai người.

314
00:20:11,640 --> 00:20:18,260
Điều đó có ý nghĩa?

315
00:20:18,260 --> 00:20:22,060
>> Và nhận thấy không có mã truy cập HTML.

316
00:20:22,060 --> 00:20:27,760
Chúng tôi đã chỉ cần thực hiện HTML mạnh mẽ hơn,

317
00:20:27,760 --> 00:20:32,070
và bây giờ, ví dụ, chúng ta có thể làm những việc như thế này,

318
00:20:32,070 --> 00:20:38,610
giống như khi bạn click vào đó, gọi chức năng này trong phạm vi todos.js,

319
00:20:38,610 --> 00:20:43,410
và chúng ta có thể làm điều đó trước đây, nhưng có những thứ khác, như thế này ng mô hình,

320
00:20:43,410 --> 00:20:47,020
và thông báo này ng-lặp lại.

321
00:20:47,020 --> 00:20:51,520
Làm những gì bạn nghĩ rằng điều này không?

322
00:20:51,520 --> 00:20:54,390
Dưới đây là danh sách không có thứ tự từ trước.

323
00:20:54,390 --> 00:20:56,470
Chúng tôi có các thẻ ul,

324
00:20:56,470 --> 00:21:03,710
nhưng tôi bao giờ khiến danh sách đó bên trong mã JavaScript?

325
00:21:03,710 --> 00:21:09,280
Tôi không bao giờ vẽ một cách rõ ràng danh sách đó.

326
00:21:09,280 --> 00:21:11,580
Làm thế nào để làm việc này?

327
00:21:11,580 --> 00:21:16,410
Vâng, cách thực hiện việc này là góc này được gọi là một lặp lại.

328
00:21:16,410 --> 00:21:22,760
Về cơ bản này nói rằng tôi muốn in HTML này

329
00:21:22,760 --> 00:21:26,240
cho tất cả các công việc phải làm trong mảng todos của tôi.

330
00:21:26,240 --> 00:21:31,850
Bên trong todos.jr có một mảng todos ngay tại đây,

331
00:21:31,850 --> 00:21:37,910
và điều này sẽ cho góc đi qua mảng đó, và cho tất cả các yếu tố mà bạn nhìn thấy

332
00:21:37,910 --> 00:21:41,390
Tôi muốn bạn in HTML này.

333
00:21:41,390 --> 00:21:44,620
Đây là loại tuyệt vời vì tôi chỉ có thể làm điều này

334
00:21:44,620 --> 00:21:47,760
mà không cần phải viết một vòng lặp,

335
00:21:47,760 --> 00:21:52,250
mà đối với một danh sách công việc phải làm đó là chỉ có 30 dòng mã

336
00:21:52,250 --> 00:21:54,700
có thể không phải là điều có lợi nhất,

337
00:21:54,700 --> 00:22:01,240
nhưng nếu bạn có một dự án lớn, điều này có thể nhận được rất thuận tiện.

338
00:22:01,240 --> 00:22:06,100
>> Đây là một giải pháp cho vấn đề này, làm cho HTML mạnh mẽ hơn,

339
00:22:06,100 --> 00:22:10,820
và cho phép chúng ta giữ JavaScript và HTML đồng bộ.

340
00:22:10,820 --> 00:22:13,220
Có nhiều cách khác có thể giải quyết vấn đề này,

341
00:22:13,220 --> 00:22:15,320
và không phải tất cả khuôn khổ thực hiện điều này.

342
00:22:15,320 --> 00:22:17,720
Không phải mọi khuôn khổ hoạt động dọc theo những dòng.

343
00:22:17,720 --> 00:22:19,490
Một số khuôn khổ có cách tiếp cận khác nhau,

344
00:22:19,490 --> 00:22:23,310
và bạn có thể thấy rằng bạn thích mã hóa trong một khuôn khổ trong khác.

345
00:22:23,310 --> 00:22:26,160
Hãy xem xét một lần nữa.

346
00:22:26,160 --> 00:22:30,060
Đây là danh sách công việc phải làm mã hóa trong một khuôn khổ gọi là đường trục.

347
00:22:30,060 --> 00:22:33,250
Tôi sẽ đi qua này một cách nhanh chóng.

348
00:22:33,250 --> 00:22:38,300
Tôi sẽ bắt đầu với HTML trước khi chúng tôi đến đó.

349
00:22:38,300 --> 00:22:40,290
Thứ hai.

350
00:22:40,290 --> 00:22:43,950
Bắt đầu với HTML, như bạn thấy, HTML của chúng tôi là rất tương tự

351
00:22:43,950 --> 00:22:50,000
với những gì nó đã được trước đó, vì vậy không quá nhiều mới trên mặt trận này.

352
00:22:50,000 --> 00:22:55,410
Nhưng tập tin js của chúng tôi là một chút khác nhau.

353
00:22:55,410 --> 00:23:00,360
Loại có xương sống của ý tưởng này, hoặc xây dựng trên ý tưởng

354
00:23:00,360 --> 00:23:04,750
mà rất nhiều những gì chúng tôi làm với, nói, dự án JavaScript của chúng tôi

355
00:23:04,750 --> 00:23:09,110
là suy nghĩ về mô hình và bộ sưu tập các mô hình này.

356
00:23:09,110 --> 00:23:12,510
Điều này có thể, ví dụ, một bức ảnh và bộ sưu tập các bức ảnh,

357
00:23:12,510 --> 00:23:16,230
hoặc ý tưởng của một người bạn và các bộ sưu tập của bạn bè.

358
00:23:16,230 --> 00:23:20,700
Và đôi khi chúng ta đang lập trình các ứng dụng JavaScript

359
00:23:20,700 --> 00:23:25,340
chúng tôi sẽ sắp xếp của đại diện các ý tưởng có một bộ sưu tập của bạn bè

360
00:23:25,340 --> 00:23:29,500
bằng cách nào đó trong JavaScript, và xương sống cho chúng ta lớp này

361
00:23:29,500 --> 00:23:33,040
trên đầu trang của các mảng và các đối tượng hiện có JavaScript

362
00:23:33,040 --> 00:23:38,300
để làm những điều mạnh mẽ hơn với điều đó dễ dàng hơn.

363
00:23:38,300 --> 00:23:41,870
>> Ở đây tôi đã xác định một mô hình-do,

364
00:23:41,870 --> 00:23:44,630
và bạn không cần phải lo lắng quá nhiều về cú pháp,

365
00:23:44,630 --> 00:23:48,730
nhưng nhận thấy đó là những gì một trong những thuộc tính của điều này?

366
00:23:48,730 --> 00:23:53,190
Nó có một lĩnh vực mặc định.

367
00:23:53,190 --> 00:23:56,640
Xương sống cho phép tôi để xác định đã lập tức

368
00:23:56,640 --> 00:24:00,190
bất kỳ mới phải làm mà tôi tạo ra là sẽ có những mặc định.

369
00:24:00,190 --> 00:24:04,100
Bây giờ tôi có thể tùy chỉnh này, nhưng có thể chỉ định giá trị mặc định

370
00:24:04,100 --> 00:24:07,220
là tốt đẹp, và đó là loại thuận lợi bởi vì đây không phải là một cái gì đó như

371
00:24:07,220 --> 00:24:10,430
vốn có trong JavaScript, và bây giờ tôi không cần phải rõ ràng

372
00:24:10,430 --> 00:24:12,430
nói rằng todos chưa đầy đủ.

373
00:24:12,430 --> 00:24:19,190
Tôi có thể nói ngay lập tức mà todos sẽ được đánh dấu là không đầy đủ.

374
00:24:19,190 --> 00:24:21,300
Nhận thấy thì đây là những gì?

375
00:24:21,300 --> 00:24:25,520
Bây giờ tôi có một danh sách công việc phải làm, và đó là một bộ sưu tập.

376
00:24:25,520 --> 00:24:30,960
Thông báo các lĩnh vực liên quan đến nói rằng mô hình cần làm.

377
00:24:30,960 --> 00:24:33,390
Đây là cách của tôi nói rằng Backbone

378
00:24:33,390 --> 00:24:37,350
Tôi sẽ phải suy nghĩ về một bộ sưu tập các todos cá nhân.

379
00:24:37,350 --> 00:24:42,140
Điều này về cơ bản là cấu trúc mô hình cho chương trình của tôi.

380
00:24:42,140 --> 00:24:44,980
Ở đây tôi có ý tưởng này của một bộ sưu tập,

381
00:24:44,980 --> 00:24:48,960
và về cơ bản các mục có trong bộ sưu tập đó là tất cả sẽ là những todos,

382
00:24:48,960 --> 00:24:51,910
và đó là rất tự nhiên trong ý nghĩa này

383
00:24:51,910 --> 00:24:59,890
bởi vì tôi có todos, và tôi có chúng trong một bộ sưu tập.

384
00:24:59,890 --> 00:25:02,940
>> Hãy xem xét một chút về điều này.

385
00:25:02,940 --> 00:25:05,900
Đây là một cái nhìn Backbone.

386
00:25:05,900 --> 00:25:08,890
Một thứ khác mà Backbone nói là

387
00:25:08,890 --> 00:25:14,660
rất nhiều các mô hình mà bạn đang suy nghĩ về hoặc thậm chí bộ sưu tập

388
00:25:14,660 --> 00:25:19,150
sẽ cần phải có một số cách được hiển thị.

389
00:25:19,150 --> 00:25:21,900
Chúng ta cần phải làm đó để làm,

390
00:25:21,900 --> 00:25:25,460
và nó sẽ không được tốt đẹp nếu chúng tôi có thể cung cấp cho mỗi mô hình

391
00:25:25,460 --> 00:25:28,390
hoặc liên kết với mỗi mô hình điểm này

392
00:25:28,390 --> 00:25:34,020
cho phép chúng ta tôi đoán kết nối hai cùng nhau?

393
00:25:34,020 --> 00:25:38,320
Trong khi đó, trước khi chúng tôi đã phải sử dụng một vòng lặp mà có thể chạy thông qua

394
00:25:38,320 --> 00:25:41,130
tất cả các việc cần làm trong danh sách của chúng tôi và sau đó in ra đây

395
00:25:41,130 --> 00:25:44,650
chúng tôi về cơ bản có thể kết nối nó với mô hình này.

396
00:25:44,650 --> 00:25:47,550
Đây là một cái nhìn công việc phải làm.

397
00:25:47,550 --> 00:25:50,550
Điều này có liên quan đến các việc cần làm, chúng tôi tìm thấy trước đó.

398
00:25:50,550 --> 00:25:54,940
Bây giờ mọi việc cần làm là bày hoặc renderable

399
00:25:54,940 --> 00:25:56,960
bằng cách này để làm điểm.

400
00:25:56,960 --> 00:25:59,440
Nhận thấy một số các lĩnh vực.

401
00:25:59,440 --> 00:26:05,880
Bạn nghĩ gì tagName này là, tagName: li?

402
00:26:05,880 --> 00:26:09,790
Nhớ từ trước khi chúng tôi muốn làm một việc cần làm

403
00:26:09,790 --> 00:26:16,700
chúng ta sẽ phải ghép một cách rõ ràng todos của chúng tôi với thẻ li này.

404
00:26:16,700 --> 00:26:21,080
Bây giờ chúng ta đang nói rằng nơi cần làm này sẽ sống

405
00:26:21,080 --> 00:26:25,250
là có được bên trong một thẻ li.

406
00:26:25,250 --> 00:26:31,440
Và bây giờ chúng tôi cũng đang liên kết các sự kiện với todos của chúng tôi.

407
00:26:31,440 --> 00:26:34,320
>> Tất cả các việc cần làm có sự kiện này một.

408
00:26:34,320 --> 00:26:38,480
Nếu bạn bấm khá nhiều nút chuyển đổi, đó là những gì tôi nói có,

409
00:26:38,480 --> 00:26:43,080
sau đó về cơ bản đánh dấu sự cần làm như trái ngược với những gì nó đã được trước

410
00:26:43,080 --> 00:26:45,890
và sau đó lại làm cho các ứng dụng.

411
00:26:45,890 --> 00:26:47,810
Đây là loại tương tự như mã trước.

412
00:26:47,810 --> 00:26:50,730
Nhớ khi chúng ta đánh dấu nó như là ngược lại hoặc-

413
00:26:50,730 --> 00:26:52,410
và sau đó chúng tôi lại trả lại nó.

414
00:26:52,410 --> 00:26:57,750
Nhưng hãy chú ý tại sự kiện này là một điều đó là trong HTML.

415
00:26:57,750 --> 00:26:59,640
Nó đang ngồi ở đó.

416
00:26:59,640 --> 00:27:01,410
Nút có một trên nhấp chuột.

417
00:27:01,410 --> 00:27:05,310
Khi bạn nhấp vào nút, nó loại nào công cụ để

418
00:27:05,310 --> 00:27:07,210
thiết lập mà cần làm là không đầy đủ.

419
00:27:07,210 --> 00:27:11,180
Ở đây chúng tôi đã kết hợp sự kiện của cách nhấp vào nút chuyển đổi

420
00:27:11,180 --> 00:27:15,830
và ngược lại cho dù đó là trên hoặc tắt với quan điểm này.

421
00:27:15,830 --> 00:27:20,480
>> Đây là một cách tốt đẹp của việc thiết lập sự kiện này để nó rất ràng buộc chặt chẽ

422
00:27:20,480 --> 00:27:26,980
quan điểm này, và do đó nhận thấy một điều này hơn.

423
00:27:26,980 --> 00:27:31,050
Tôi có khiến phương pháp này, và chúng tôi không cần phải đi qua các chi tiết.

424
00:27:31,050 --> 00:27:33,650
Đó là loại tương tự như những gì chúng ta có trước đây,

425
00:27:33,650 --> 00:27:36,070
nhưng nhận thấy tôi không vòng lặp thông qua bất cứ điều gì.

426
00:27:36,070 --> 00:27:40,700
Tôi không in mà thẻ ul đó là loại nói tôi sẽ in tất cả các yếu tố.

427
00:27:40,700 --> 00:27:46,610
Tôi đang cung cấp các chức năng để biểu diễn này để làm mục.

428
00:27:46,610 --> 00:27:49,400
Đây là một khái niệm rất mạnh mẽ bởi vì về cơ bản

429
00:27:49,400 --> 00:27:53,600
danh sách công việc phải làm của chúng tôi bao gồm tất cả các todos, và nếu chúng ta về cơ bản có thể xác định

430
00:27:53,600 --> 00:27:56,890
cách để làm cho một trong những todos

431
00:27:56,890 --> 00:28:04,230
sau đó chúng ta có thể có xương sống mạnh mẽ của chúng tôi cho mỗi gia nhập làm cho tất cả các todos

432
00:28:04,230 --> 00:28:07,760
bằng cách gọi phương pháp vẽ lại trên các todos cá nhân.

433
00:28:07,760 --> 00:28:14,180
Đây là một khái niệm đó là hữu ích ở đây.

434
00:28:14,180 --> 00:28:18,160
Bây giờ một câu hỏi hay để hỏi là làm thế nào là ứng dụng này được đặt lại với nhau?

435
00:28:18,160 --> 00:28:21,200
Bởi vì chúng tôi có khả năng làm một việc phải làm,

436
00:28:21,200 --> 00:28:23,860
nhưng làm thế nào để chúng ta có được ý tưởng của nhiều todos?

437
00:28:23,860 --> 00:28:25,100
>> Chúng ta hãy nhìn vào đó.

438
00:28:25,100 --> 00:28:27,100
Đây là phần cuối cùng.

439
00:28:27,100 --> 00:28:29,740
Nhận thấy chúng tôi có một danh sách xem việc phải làm ở đây,

440
00:28:29,740 --> 00:28:34,440
và nhận thấy nó cũng là một quan điểm.

441
00:28:34,440 --> 00:28:36,970
Và phải đi qua một vài điều,

442
00:28:36,970 --> 00:28:45,280
phương thức khởi tạo này sẽ được gọi khi chúng tôi lần đầu tiên tạo ra danh sách to-do này.

443
00:28:45,280 --> 00:28:52,630
Như bạn thấy, nó giống như việc tạo ra các danh sách công việc phải làm và kết hợp nó với quan điểm này.

444
00:28:52,630 --> 00:28:57,860
Và sau đó tôi được thêm vào các chức năng ở đây về cơ bản khi bạn thêm một mục-

445
00:28:57,860 --> 00:29:01,440
điều này cũng tương tự như phương pháp addItem chúng ta đã thấy trước-

446
00:29:01,440 --> 00:29:07,430
Tôi sẽ tạo một đối tượng cần làm mới, và thông báo tôi đang thực sự kêu gọi

447
00:29:07,430 --> 00:29:13,080
phương pháp này cần làm mới, vì vậy đây được cung cấp bởi Backbone,

448
00:29:13,080 --> 00:29:16,010
và tôi có thể vượt qua trong tài sản của tôi ở đây.

449
00:29:16,010 --> 00:29:23,710
Và bây giờ mọi việc cần làm mà tôi tạo bằng này sẽ nhận được rằng chức năng mà chúng ta đã thấy trước đây.

450
00:29:23,710 --> 00:29:28,140
Thông báo tôi đang thanh toán bù trừ ra khỏi hộp văn bản trước-một chút nhỏ chi tiết-

451
00:29:28,140 --> 00:29:32,900
và sau đó tôi thêm bộ sưu tập này.

452
00:29:32,900 --> 00:29:37,630
>> Điều này gần như có vẻ lạ vì trước khi chúng tôi chỉ phải làm todos.push đó,

453
00:29:37,630 --> 00:29:43,310
và sau đó chúng tôi đã được thực hiện, và điều này có vẻ phức tạp hơn đối với dự án này,

454
00:29:43,310 --> 00:29:46,980
và bạn có thể thấy rằng đường trục hoặc thậm chí góc hoặc bất kỳ khuôn khổ khác

455
00:29:46,980 --> 00:29:50,790
không phù hợp với dự án cụ thể của bạn, nhưng tôi nghĩ rằng điều quan trọng là phải suy nghĩ về

456
00:29:50,790 --> 00:29:54,100
điều này có nghĩa là trên một quy mô lớn hơn cho các dự án lớn hơn,

457
00:29:54,100 --> 00:29:56,610
bởi vì nếu chúng tôi đã có một dự án lớn hơn, nơi chúng tôi đã đại diện cho

458
00:29:56,610 --> 00:30:00,860
một số bộ sưu tập thực sự phức tạp, một cái gì đó sâu sắc hơn chỉ là một danh sách công việc phải làm,

459
00:30:00,860 --> 00:30:04,490
hãy nói một danh sách bạn bè hoặc một cái gì đó như thế, điều này có thể có ích

460
00:30:04,490 --> 00:30:09,620
bởi vì chúng tôi có thể tổ chức mã của chúng tôi trong một cách thực sự thuận tiện,

461
00:30:09,620 --> 00:30:12,550
trong một cách mà sẽ làm cho nó dễ dàng hơn cho người khác

462
00:30:12,550 --> 00:30:16,820
ai muốn nhận một dự án xây dựng trên.

463
00:30:16,820 --> 00:30:21,450
Bạn có thể thấy rằng điều này cung cấp rất nhiều cấu trúc.

464
00:30:21,450 --> 00:30:26,580
Và sau đó tôi gọi điện thoại làm cho trên addItem này.

465
00:30:26,580 --> 00:30:31,050
Làm, bạn có thể thấy, và bạn không cần phải nắm bắt đầy đủ cú pháp này,

466
00:30:31,050 --> 00:30:37,790
nhưng về cơ bản cho mỗi mô hình nó sẽ gọi phương thức vẽ lại cá nhân.

467
00:30:37,790 --> 00:30:41,500
Đó là sắp xếp của nơi này đến từ đâu.

468
00:30:41,500 --> 00:30:44,140
Chúng ta hãy xác định làm thế nào để làm cho todos cá nhân,

469
00:30:44,140 --> 00:30:47,310
và sau đó chúng ta hãy dán chúng lại với nhau như một toàn thể.

470
00:30:47,310 --> 00:30:49,810
Nhưng cung cấp một cách trừu tượng,

471
00:30:49,810 --> 00:30:55,470
vì tôi có thể thay đổi cách tôi quyết định làm cho todos cá nhân,

472
00:30:55,470 --> 00:30:57,940
và tôi sẽ không phải thay đổi bất kỳ của mã này.

473
00:30:57,940 --> 00:31:00,700
Đó là loại mát mẻ.

474
00:31:00,700 --> 00:31:08,540
>> Không ai có bất kỳ câu hỏi về các khuôn khổ JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Sinh viên không nghe được câu hỏi]

476
00:31:14,310 --> 00:31:16,050
Oh, chắc chắn, đó là một câu hỏi lớn.

477
00:31:16,050 --> 00:31:19,080
Câu hỏi đặt ra là làm thế nào tôi bao gồm các khuôn khổ?

478
00:31:19,080 --> 00:31:22,970
Hầu hết các khuôn khổ JavaScript cơ bản chỉ là các file js

479
00:31:22,970 --> 00:31:25,740
mà bạn có thể bao gồm ở trên cùng của mã của bạn.

480
00:31:25,740 --> 00:31:29,830
Thông báo trong phần đầu của HTML của tôi, tôi có tất cả những thẻ script,

481
00:31:29,830 --> 00:31:34,250
và thẻ kịch bản cuối cùng là mã mà chúng tôi đã viết.

482
00:31:34,250 --> 00:31:38,820
Và sau đó là 3 mã số khuôn khổ chỉ còn thẻ script.

483
00:31:38,820 --> 00:31:42,110
Tôi là bao gồm cả chúng từ những gì được gọi là một CDN,

484
00:31:42,110 --> 00:31:46,200
cho phép tôi để có được nó từ một người khác vào thời điểm này

485
00:31:46,200 --> 00:31:57,930
nhưng mỗi khung có này, bạn có thể tìm thấy khá nhiều nội dung

486
00:31:57,930 --> 00:32:03,540
cho một thư viện JavaScript đặc biệt có sẵn trên một số CDN hoặc một cái gì đó như thế,

487
00:32:03,540 --> 00:32:05,570
và sau đó bạn có thể bao gồm các thẻ script.

488
00:32:05,570 --> 00:32:07,600
Điều đó có ý nghĩa?

489
00:32:07,600 --> 00:32:09,500
Mát mẻ.

490
00:32:09,500 --> 00:32:11,730
>> Đó là 2 phương pháp tiếp cận khác nhau.

491
00:32:11,730 --> 00:32:14,640
Đó không phải là cách tiếp cận duy nhất để giải quyết vấn đề này.

492
00:32:14,640 --> 00:32:17,080
Có rất nhiều điều khác nhau mà

493
00:32:17,080 --> 00:32:19,490
ai đó có thể làm, và có rất nhiều khuôn khổ ra khỏi đó.

494
00:32:19,490 --> 00:32:23,300
Góc cạnh và đường trục không nói cho toàn bộ câu chuyện.

495
00:32:23,300 --> 00:32:26,370
Chúc may mắn với các dự án cuối cùng của bạn, và cảm ơn bạn rất nhiều.

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