1
00:00:00,000 --> 00:00:02,000
[Powered by Google Translate] [Seminar] [JavaScript Frameworks: Mengapa dan Bagaimana]

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

3
00:00:04,000 --> 00:00:06,960
[Ini adalah CS50.] [CS50.TV]

4
00:00:06,960 --> 00:00:10,630
>> Hi, semua orang. Selamat datang di seminar Frameworks JavaScript.

5
00:00:10,630 --> 00:00:14,910
Nama saya Kevin, dan hari ini aku akan berbicara tentang kerangka JavaScript,

6
00:00:14,910 --> 00:00:20,400
dan tujuan dari seminar ini bukan untuk mendapatkan Anda untuk, katakanlah, menguasai kerangka tertentu per se

7
00:00:20,400 --> 00:00:23,810
tetapi untuk memberikan pengenalan luas untuk beberapa kerangka

8
00:00:23,810 --> 00:00:27,150
dan menunjukkan mengapa kita akan pernah ingin menggunakan kerangka.

9
00:00:27,150 --> 00:00:31,060
>> Sebelum saya melakukan itu, saya akan memberikan sedikit latar belakang dalam JavaScript,

10
00:00:31,060 --> 00:00:33,750
dan kemudian kita akan mengambilnya dari sana.

11
00:00:33,750 --> 00:00:36,270
Kita akan memulai dengan menerapkan daftar to-do.

12
00:00:36,270 --> 00:00:39,330
Berikut daftar tugas kita untuk hari ini.

13
00:00:39,330 --> 00:00:41,990
Ini agak lucu. Kita harus menerapkan daftar to-do dalam JavaScript.

14
00:00:41,990 --> 00:00:45,110
Ini adalah apa yang akan terlihat seperti, jadi itulah tujuan pertama kami.

15
00:00:45,110 --> 00:00:47,160
Kami tidak akan menggunakan kerangka kerja untuk melakukan itu.

16
00:00:47,160 --> 00:00:51,930
Kita akan kode JavaScript dan mendapatkan to-do list untuk bekerja.

17
00:00:51,930 --> 00:00:54,370
Kemudian kita akan memperbaiki desain tanpa menggunakan kerangka.

18
00:00:54,370 --> 00:00:57,190
Kita akan membahas berbagai hal yang dapat kita lakukan hanya dengan JavaScript saja

19
00:00:57,190 --> 00:01:00,650
untuk membuat kami to-do daftar sedikit dirancang lebih baik.

20
00:01:00,650 --> 00:01:02,490
Kemudian kita akan melemparkan di beberapa jQuery,

21
00:01:02,490 --> 00:01:05,030
dan kemudian kita akan melihat yang sama to-do list,

22
00:01:05,030 --> 00:01:07,170
hanya diimplementasikan dalam kerangka kerja yang berbeda, dan kita akan membahas

23
00:01:07,170 --> 00:01:09,280
 pro dan kontra sepanjang jalan.

24
00:01:09,280 --> 00:01:12,040
>> Mari kita mulai menerapkan bahwa to-do list.

25
00:01:12,040 --> 00:01:14,270
Katakanlah kita diberi HTML ini.

26
00:01:14,270 --> 00:01:16,620
Aku akan membuat ini lebih kecil sedikit.

27
00:01:16,620 --> 00:01:19,300
Seperti yang Anda lihat, saya memiliki header kecil yang mengatakan Todo

28
00:01:19,300 --> 00:01:21,740
dan sebuah kotak kecil di mana saya dapat memasukkan deskripsi todo

29
00:01:21,740 --> 00:01:26,990
dan kemudian tombol item baru, jadi mari kita coba untuk memasukkan todo baru ke daftar ini.

30
00:01:26,990 --> 00:01:31,000
Berikan seminar kerangka JavaScript,

31
00:01:31,000 --> 00:01:33,090
dan aku memukul item baru.

32
00:01:33,090 --> 00:01:35,730
Saya bisa mendapatkan peringatan ini JavaScript mengatakan menerapkan saya.

33
00:01:35,730 --> 00:01:37,560
Kita harus menerapkannya.

34
00:01:37,560 --> 00:01:41,490
Mari kita memeriksa kode untuk ini, baik HTML dan JavaScript itu.

35
00:01:41,490 --> 00:01:43,260
Berikut HTML kita.

36
00:01:43,260 --> 00:01:45,500
Seperti yang dapat Anda lihat di sini, inilah sedikit Todos header kita.

37
00:01:45,500 --> 00:01:47,620
Itu hal tebal di bagian atas,

38
00:01:47,620 --> 00:01:50,690
dan kemudian kita memiliki kotak input dengan placeholder,

39
00:01:50,690 --> 00:01:59,460
dan kemudian ada atribut tertentu tombol ini yang memanggil fungsi ini addTodo.

40
00:01:59,460 --> 00:02:05,460
Apakah ada yang ingin menebak apa yang di klik yang menandakan?

41
00:02:05,460 --> 00:02:07,390
[Mahasiswa respon terdengar]

42
00:02:07,390 --> 00:02:09,289
Baik, di klik adalah semacam acara,

43
00:02:09,289 --> 00:02:12,120
seperti mengklik mouse hanya sebuah acara, dan apa yang kita lakukan

44
00:02:12,120 --> 00:02:16,890
adalah kita mengikat acara mengklik tombol ini untuk menjalankan fungsi tersebut.

45
00:02:16,890 --> 00:02:21,700
AddTodo adalah event handler untuk mengklik tombol itu.

46
00:02:21,700 --> 00:02:25,010
>> Seperti yang Anda lihat, ketika saya klik tombol item baru

47
00:02:25,010 --> 00:02:29,940
acara klik pada dipecat, dan fungsi ini dipanggil.

48
00:02:29,940 --> 00:02:33,170
Mari kita lihat fungsi.

49
00:02:33,170 --> 00:02:36,260
Seperti yang Anda lihat, inilah kode JavaScript saya sejauh ini.

50
00:02:36,260 --> 00:02:41,280
Apa yang saya miliki di atas adalah struktur data global untuk saya to-do list.

51
00:02:41,280 --> 00:02:44,060
Ini terlihat seperti sebuah array. Ini hanya sebuah array kosong.

52
00:02:44,060 --> 00:02:47,100
Dan kemudian saya memiliki fungsi addTodo yang kita lihat sebelumnya,

53
00:02:47,100 --> 00:02:50,740
dan satu-satunya baris kode dalam ada peringatan ini.

54
00:02:50,740 --> 00:02:55,730
Ini peringatan menerapkan saya, dan kemudian saya memiliki 2 tugas di tangan.

55
00:02:55,730 --> 00:02:58,790
Saya harus menambahkan todo ke struktur data global,

56
00:02:58,790 --> 00:03:01,860
dan kemudian saya ingin menarik keluar daftar to-do.

57
00:03:01,860 --> 00:03:06,360
Tidak terlalu mewah saja, namun JavaScript Anda mungkin belum terbiasa dengan,

58
00:03:06,360 --> 00:03:12,370
jadi aku akan pergi lambat dan meninjau dasar-dasar JavaScript dengan cara itu.

59
00:03:12,370 --> 00:03:15,490
>> Mari kita memberikan suntikan ini.

60
00:03:15,490 --> 00:03:21,130
Katakanlah pengguna memasukkan sesuatu dalam kotak ini.

61
00:03:21,130 --> 00:03:23,360
Aku hanya mengetik sesuatu di sini, teks.

62
00:03:23,360 --> 00:03:27,620
Bagaimana cara semacam akses yang teks melalui JavaScript?

63
00:03:27,620 --> 00:03:32,500
Ingat bahwa JavaScript, salah satu fitur yang mendasar adalah bahwa hal itu memberi kita

64
00:03:32,500 --> 00:03:34,670
ini akses program ke DOM.

65
00:03:34,670 --> 00:03:40,670
Hal ini memungkinkan kita untuk mengakses elemen dan sifat mereka HTML ini sebenarnya.

66
00:03:40,670 --> 00:03:43,430
Cara kita melakukannya dengan tulang-tulang JavaScript

67
00:03:43,430 --> 00:03:51,360
adalah kita benar-benar dapat menggunakan fungsi dalam JavaScript yang disebut getElementById.

68
00:03:51,360 --> 00:03:55,140
Saya ingin menyimpan teks yang diketik ada dalam beberapa variabel,

69
00:03:55,140 --> 00:03:58,350
jadi aku akan mengatakan sebuah variabel baru yang disebut new_todo,

70
00:03:58,350 --> 00:04:01,980
dan aku akan mendapatkan elemen tersebut.

71
00:04:01,980 --> 00:04:06,330
Ini adalah fungsi,. GetElementById.

72
00:04:06,330 --> 00:04:11,580
Dan sekarang aku mendapatkan elemen dengan ID, jadi saya membutuhkan ID dari kotak teks,

73
00:04:11,580 --> 00:04:15,860
jadi aku memberikannya ID new_todo_description.

74
00:04:15,860 --> 00:04:18,399
Itulah bagaimana aku akan mendapatkan elemen.

75
00:04:18,399 --> 00:04:23,880
Itu argumen saya untuk fungsi ini, untuk menentukan ID untuk mendapatkan.

76
00:04:23,880 --> 00:04:28,110
Dan itulah elemen dalam HTML, dan memiliki sifat.

77
00:04:28,110 --> 00:04:30,650
Anda telah melihat ini. Mereka atribut.

78
00:04:30,650 --> 00:04:37,090
Atribut dari elemen teks yang menyimpan input pengguna disebut nilai.

79
00:04:37,090 --> 00:04:40,860
Aku menyimpan nilai dari kotak teks sekarang dalam variabel ini disebut new_todo.

80
00:04:40,860 --> 00:04:45,040
Sekarang aku punya akses program ke variabel ini, yang merupakan jenis keren

81
00:04:45,040 --> 00:04:49,200
karena sekarang apa yang bisa saya lakukan adalah saya dapat menambahkannya ke saya to-do list.

82
00:04:49,200 --> 00:04:52,870
>> Cara kita akan melakukan ini dalam JavaScript-dan jangan khawatir jika Anda tidak terbiasa dengan hal ini,

83
00:04:52,870 --> 00:04:57,010
tapi hanya akan melalui itu todos.push

84
00:04:57,010 --> 00:05:00,130
karena itulah nama struktur data global saya di sini,

85
00:05:00,130 --> 00:05:04,450
dan aku akan mendorong new_todo.

86
00:05:04,450 --> 00:05:09,120
Ini bagus karena sekarang saya telah menambahkan ke saya JavaScript

87
00:05:09,120 --> 00:05:11,280
representasi yang to-do list.

88
00:05:11,280 --> 00:05:15,170
Tapi sekarang bagaimana cara mendapatkannya kembali ke HTML?

89
00:05:15,170 --> 00:05:18,560
Aku harus menemukan cara untuk semacam mendorong kembali.

90
00:05:18,560 --> 00:05:21,830
Dengan kata lain, aku agak harus menggambar ini.

91
00:05:21,830 --> 00:05:26,060
Apa yang akan kita lakukan adalah kita akan menarik to-do list.

92
00:05:26,060 --> 00:05:29,270
Saya perlu memperbarui HTML lainnya pada halaman tersebut,

93
00:05:29,270 --> 00:05:32,040
dan seperti yang Anda lihat, aku sudah meninggalkan ini wadah kecil di sini,

94
00:05:32,040 --> 00:05:36,840
pembagi ini dari halaman di mana ID adalah todos,

95
00:05:36,840 --> 00:05:40,870
dan aku akan menempatkan daftar yang harus dilakukan di sana.

96
00:05:40,870 --> 00:05:47,240
Pertama aku akan membersihkan itu karena, katakanlah, ada tua to-do list di sana.

97
00:05:47,240 --> 00:05:49,560
Saya mendapatkan elemen yang oleh ID lagi,

98
00:05:49,560 --> 00:05:54,530
dan aku mengakses HTML batin elemen,

99
00:05:54,530 --> 00:05:58,010
dan aku akan jelas bahwa.

100
00:05:58,010 --> 00:06:05,510
Jika kita meninggalkan kode ini, kita akan melihat apa-apa di sana kosong,

101
00:06:05,510 --> 00:06:10,410
dan sekarang saya ingin memulai render baru to-do list saya.

102
00:06:10,410 --> 00:06:12,870
Aku pada dasarnya akan menghapus saya to-do list.

103
00:06:12,870 --> 00:06:18,180
>> Sekarang batin dalam HTML itu todos div benar-benar jelas,

104
00:06:18,180 --> 00:06:20,060
dan sekarang saya harus mulai menambahkan daftar saya.

105
00:06:20,060 --> 00:06:23,890
Hal pertama yang saya ingin menambahkan kembali adalah unordered tag daftar,

106
00:06:23,890 --> 00:06:33,890
yang pada dasarnya menunjukkan bahwa ini adalah awal dari unordered list.

107
00:06:33,890 --> 00:06:39,770
Sekarang untuk setiap elemen dalam array todos saya, saya ingin mencetaknya dalam HTML itu.

108
00:06:39,770 --> 00:06:43,710
Saya ingin tambahkan pada bagian bawah daftar ini.

109
00:06:43,710 --> 00:06:49,040
Sama seperti di C, saya dapat menggunakan untuk loop, dan aku akan mulai pada awal daftar saya

110
00:06:49,040 --> 00:06:54,140
pada elemen 0, dan aku akan pergi jauh-jauh dengan panjang daftar.

111
00:06:54,140 --> 00:07:01,100
Kami benar-benar bisa mendapatkan panjang array dalam JavaScript menggunakan properti panjang.

112
00:07:01,100 --> 00:07:03,420
Pada dasarnya aku akan melakukan sesuatu yang sangat mirip dalam sini

113
00:07:03,420 --> 00:07:05,600
untuk mencetak elemen.

114
00:07:05,600 --> 00:07:12,970
Saya bisa lagi mengakses todos div, properti HTML batin itu,

115
00:07:12,970 --> 00:07:17,560
dan aku akan menambahkan pada item daftar baru, dan itu akan dikelilingi oleh

116
00:07:17,560 --> 00:07:25,390
tag li ini, dan aku akan menggabungkan dengan operator +,

117
00:07:25,390 --> 00:07:28,040
dan itulah elemen engan array todos saya,

118
00:07:28,040 --> 00:07:32,380
dan kemudian aku akan menutup tag tersebut.

119
00:07:32,380 --> 00:07:36,240
Sekarang untuk setiap elemen kami akan menambahkan entri daftar baru.

120
00:07:36,240 --> 00:07:48,700
Dan kemudian semua kita benar-benar perlu lakukan adalah menutup tag tersebut.

121
00:07:48,700 --> 00:07:52,820
Aku hanya perlu untuk menutup yang unordered tag daftar.

122
00:07:52,820 --> 00:07:55,490
>> Apakah Anda mendapatkan merasakan bagaimana yang bekerja?

123
00:07:55,490 --> 00:07:57,700
Ini akan membuka seluruh daftar.

124
00:07:57,700 --> 00:08:01,080
Ini menambahkan unsur-unsur individu dari daftar todos ke dalam daftar,

125
00:08:01,080 --> 00:08:05,470
dan kemudian yang menutup seluruh daftar, dan ini adalah fungsi addTodo saya.

126
00:08:05,470 --> 00:08:09,590
Pada dasarnya saya mulai dengan mendapatkan todo dari kotak teks.

127
00:08:09,590 --> 00:08:18,950
Saya menambahkan bahwa untuk todos array, dan kemudian saya kembali membuat to-do daftar.

128
00:08:18,950 --> 00:08:21,520
Sekarang saya bisa menambahkan item ke daftar saya.

129
00:08:21,520 --> 00:08:24,620
Ini adalah jenis menarik karena hanya dalam beberapa baris kode

130
00:08:24,620 --> 00:08:28,240
pada dasarnya kita telah membuat to-do list di mana kita dapat menambahkan item.

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

132
00:08:30,050 --> 00:08:34,480
Itu semacam pengenalan dasar JavaScript.

133
00:08:34,480 --> 00:08:36,179
Jangan khawatir terlalu banyak tentang sintaks untuk saat ini,

134
00:08:36,179 --> 00:08:38,130
tetapi berpikir tentang hal ini secara konseptual.

135
00:08:38,130 --> 00:08:40,539
Kami memiliki beberapa HTML.

136
00:08:40,539 --> 00:08:45,310
Kami memiliki kotak teks pada halaman yang pada dasarnya memungkinkan pengguna untuk memasukkan to-do item untuk menambahkannya.

137
00:08:45,310 --> 00:08:49,210
Dan kemudian kami menggunakan JavaScript untuk mengambil todo itu dari kotak teks.

138
00:08:49,210 --> 00:08:52,830
Kami yang tersimpan dalam array JavaScript, yang pada dasarnya adalah seperti

139
00:08:52,830 --> 00:08:56,010
representasi program kami yang daftar yang harus dilakukan,

140
00:08:56,010 --> 00:08:59,060
dan kemudian kita mencetaknya.

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

142
00:09:02,690 --> 00:09:07,620
>> Ini adalah jenis dingin, tapi bagaimana kita bisa mengambil ini lebih lanjut?

143
00:09:07,620 --> 00:09:11,350
Yah, seperti yang Anda lihat, ini tidak seperti lengkap to-do list.

144
00:09:11,350 --> 00:09:15,100
Sebagai contoh, saya tidak bisa menandai salah satu item yang tidak lengkap,

145
00:09:15,100 --> 00:09:19,920
seperti jika saya ingin melakukan prioritas ulang terhadap barang atau menghapus item.

146
00:09:19,920 --> 00:09:23,150
Ini tidak apa-apa, tapi kita bisa mengambil ini lebih lanjut.

147
00:09:23,150 --> 00:09:29,280
Aku tidak akan berbicara terlalu banyak tentang menambahkan fitur tambahan,

148
00:09:29,280 --> 00:09:32,800
tapi kita bisa mengambil yang lebih lanjut.

149
00:09:32,800 --> 00:09:35,970
Mari kita bicara tentang menambahkan satu lagi fitur ini to-do list,

150
00:09:35,970 --> 00:09:40,370
yang akan mampu memeriksa seorang individu to-do item yang

151
00:09:40,370 --> 00:09:44,780
dan memilikinya dicoret, jadi pada dasarnya mengatakan bahwa saya sudah melakukan ini.

152
00:09:44,780 --> 00:09:50,240
Mari kita lihat beberapa kode yang bisa mencapai itu.

153
00:09:50,240 --> 00:09:52,740
Perhatikan apa yang telah saya lakukan di atas adalah saya telah menambahkan

154
00:09:52,740 --> 00:09:57,620
array global baru yang disebut lengkap.

155
00:09:57,620 --> 00:10:02,890
Aku pada dasarnya menggunakan ini untuk menyimpan apakah item pada daftar to-do

156
00:10:02,890 --> 00:10:06,560
lengkap atau tidak.

157
00:10:06,560 --> 00:10:08,470
Ini adalah salah satu cara untuk melakukan ini.

158
00:10:08,470 --> 00:10:13,750
Jika saya melihat pelaksanaan ini, layar,

159
00:10:13,750 --> 00:10:21,120
pada dasarnya jika saya masukkan todo dan saya menekan tombol ini beralih

160
00:10:21,120 --> 00:10:25,040
melintasi keluar, sehingga setiap item pada daftar ini memiliki baik lengkap

161
00:10:25,040 --> 00:10:31,050
atau negara yang tidak lengkap, dan aku menggunakan array lain untuk mewakili itu.

162
00:10:31,050 --> 00:10:33,730
>> Pada dasarnya untuk setiap todo dalam berbagai todos

163
00:10:33,730 --> 00:10:37,110
ada item dalam array lengkap yang pada dasarnya menunjukkan

164
00:10:37,110 --> 00:10:39,060
apakah itu lengkap atau tidak.

165
00:10:39,060 --> 00:10:41,640
Saya harus membuat perubahan yang cukup minimal untuk kode ini,

166
00:10:41,640 --> 00:10:44,470
jadi inilah fungsi addTodo kami.

167
00:10:44,470 --> 00:10:48,530
Perhatikan bahwa di sini aku mendorongnya ke array,

168
00:10:48,530 --> 00:10:51,300
dan kemudian aku mendorong 0 ke array lengkap,

169
00:10:51,300 --> 00:10:57,090
pada dasarnya secara paralel dengan yang mendorong todo baru untuk mengatakan

170
00:10:57,090 --> 00:11:00,430
Saya menambahkan item ini, dan itu ditambah dengan nilai ini,

171
00:11:00,430 --> 00:11:02,810
yang berarti bahwa itu tidak lengkap.

172
00:11:02,810 --> 00:11:04,970
Dan kemudian aku menggambar ulang daftar to-do.

173
00:11:04,970 --> 00:11:09,220
Sekarang, perhatikan saya telah menambahkan fungsi ini drawTodoList.

174
00:11:09,220 --> 00:11:11,760
Ini membutuhkan banyak kode yang kami miliki sebelumnya,

175
00:11:11,760 --> 00:11:15,320
pada dasarnya sepi kotak dan kemudian menarik baru to-do list.

176
00:11:15,320 --> 00:11:19,620
Tapi perhatikan bahwa dalam hal ini untuk loop yang kita lakukan sedikit lebih sekarang.

177
00:11:19,620 --> 00:11:25,000
Kami pada dasarnya memeriksa apakah item yang sesuai dengan todo engan sini

178
00:11:25,000 --> 00:11:30,220
selesai, dan kita berperilaku berbeda dalam 2 keadaan.

179
00:11:30,220 --> 00:11:32,790
Jika itu selesai, kami menambahkan del tag ini,

180
00:11:32,790 --> 00:11:35,360
yang pada dasarnya adalah cara Anda bisa mendapatkan pemogokan bahwa melalui efek

181
00:11:35,360 --> 00:11:38,190
mencoret to-do list jika itu selesai,

182
00:11:38,190 --> 00:11:42,200
dan jika tidak, kita tidak termasuk itu.

183
00:11:42,200 --> 00:11:45,030
Dan sehingga jenis menangani itu,

184
00:11:45,030 --> 00:11:49,140
>> dan itu salah satu cara untuk mencapai hal ini.

185
00:11:49,140 --> 00:11:53,420
Dan kemudian melihat ketika pengguna mengklik salah satu

186
00:11:53,420 --> 00:11:56,780
kita beralih status penyelesaian itu.

187
00:11:56,780 --> 00:12:02,170
Ketika pengguna mengklik, kami akan membalikkan apakah itu sudah selesai atau tidak,

188
00:12:02,170 --> 00:12:04,540
dan kemudian kita akan redraw.

189
00:12:04,540 --> 00:12:06,190
Ini jenis karya.

190
00:12:06,190 --> 00:12:09,860
Kami memiliki fungsi ini yang melaksanakan tugas-tugas mereka sendiri,

191
00:12:09,860 --> 00:12:11,730
dan ini tidak apa-apa.

192
00:12:11,730 --> 00:12:14,110
Apakah ada sesuatu yang kita bisa berbuat lebih baik tentang hal ini, meskipun?

193
00:12:14,110 --> 00:12:18,700
Perhatikan kita memiliki 2 array global.

194
00:12:18,700 --> 00:12:23,550
Jika ini adalah C, dan kami memiliki 2 array semacam itu diwakili

195
00:12:23,550 --> 00:12:25,800
Data yang semacam terkait dalam beberapa cara

196
00:12:25,800 --> 00:12:30,140
apa yang akan kita gunakan dalam C untuk menggabungkan 2 bidang

197
00:12:30,140 --> 00:12:35,420
menjadi sesuatu yang merangkum kedua potongan informasi?

198
00:12:35,420 --> 00:12:37,600
Ada yang mau memberi saran?

199
00:12:37,600 --> 00:12:39,450
[Mahasiswa respon terdengar]

200
00:12:39,450 --> 00:12:42,340
>> Tepat, sehingga kita bisa menggunakan beberapa jenis struct,

201
00:12:42,340 --> 00:12:44,960
dan jika Anda berpikir kembali ke, katakanlah, pset 3,

202
00:12:44,960 --> 00:12:47,350
ingat kami memiliki kamus, dan kemudian kami harus apakah kata

203
00:12:47,350 --> 00:12:50,230
berada di kamus, dan semua informasi yang disatukan

204
00:12:50,230 --> 00:12:52,420
dalam beberapa struktur data.

205
00:12:52,420 --> 00:12:56,390
Satu hal yang dapat saya lakukan dengan kode ini untuk menghindari ini 2 array yang berbeda

206
00:12:56,390 --> 00:13:01,760
untuk potongan-potongan serupa informasi adalah saya bisa menggabungkan mereka ke dalam objek JavaScript.

207
00:13:01,760 --> 00:13:07,150
Mari kita lihat pada saat itu.

208
00:13:07,150 --> 00:13:11,740
Perhatikan saya hanya memiliki satu array di atas sekarang

209
00:13:11,740 --> 00:13:17,650
dan apa yang saya lakukan adalah-dan ini hanya sintaks JavaScript untuk jenis

210
00:13:17,650 --> 00:13:21,350
menciptakan sebuah versi harfiah dari suatu objek,

211
00:13:21,350 --> 00:13:24,670
dan melihat ada 2 properti, jadi kita harus todo,

212
00:13:24,670 --> 00:13:29,660
dan itu tetap bersama-sama dengan apakah itu lengkap atau tidak lengkap.

213
00:13:29,660 --> 00:13:31,000
Ini adalah kode yang sangat mirip.

214
00:13:31,000 --> 00:13:35,310
Kami menggunakan obyek JavaScript.

215
00:13:35,310 --> 00:13:38,600
Ini semacam hal membaik.

216
00:13:38,600 --> 00:13:43,850
Seperti sekarang, semua bidang informasi terkait disimpan bersama-sama.

217
00:13:43,850 --> 00:13:46,410
Ketika kita pergi untuk mencetak keluar, kita dapat mengakses ladang.

218
00:13:46,410 --> 00:13:49,060
>> Perhatikan bagaimana kita melakukan todos [i]. Lengkap

219
00:13:49,060 --> 00:13:52,880
bukannya memeriksa array lengkap secara terpisah,

220
00:13:52,880 --> 00:13:56,560
dan perhatikan ketika kita ingin mendapatkan to-do tali kita mendapatkan to-do properti

221
00:13:56,560 --> 00:13:58,750
itu todo, jadi ini semacam masuk akal karena

222
00:13:58,750 --> 00:14:01,660
setiap item memiliki sifat intrinsik tentang hal itu.

223
00:14:01,660 --> 00:14:05,650
Memiliki todo, dan memiliki apakah itu lengkap atau tidak.

224
00:14:05,650 --> 00:14:11,540
Tidak terlalu banyak perubahan di sana fungsional, hanya menambahkan beberapa kode.

225
00:14:11,540 --> 00:14:13,430
Ini adalah perbaikan di beberapa bidang, kan?

226
00:14:13,430 --> 00:14:16,030
Maksudku, kami keluar faktor desain sedikit.

227
00:14:16,030 --> 00:14:20,350
Sekarang kita memiliki objek pada dasarnya merangkum data ini.

228
00:14:20,350 --> 00:14:27,130
Apakah ada sesuatu yang lebih dari yang bisa kami lakukan di sini dalam hal JavaScript?

229
00:14:27,130 --> 00:14:31,810
Seperti pemberitahuan bahwa kode ini di sini

230
00:14:31,810 --> 00:14:34,760
untuk mendapatkan HTML batin div

231
00:14:34,760 --> 00:14:40,520
sedikit, saya kira, lama.

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

233
00:14:45,100 --> 00:14:48,400
Satu hal yang kita bisa lakukan untuk membuat kode ini terlihat sedikit ramah

234
00:14:48,400 --> 00:14:51,450
jadi saya tidak harus terus bergulir kiri dan kanan, maju-mundur,

235
00:14:51,450 --> 00:14:58,480
adalah saya bisa menggunakan perpustakaan seperti jQuery.

236
00:14:58,480 --> 00:15:02,710
>> Mari kita periksa Seminar 2,

237
00:15:02,710 --> 00:15:05,880
dan ini adalah kode yang sama, tapi itu dilakukan dengan jQuery.

238
00:15:05,880 --> 00:15:08,790
Anda mungkin tidak terlalu akrab dengan jQuery,

239
00:15:08,790 --> 00:15:11,510
tapi hanya tahu bahwa jQuery adalah semacam perpustakaan untuk JavaScript

240
00:15:11,510 --> 00:15:15,910
yang membuatnya lebih mudah untuk melakukan hal-hal seperti elemen individu akses DOM.

241
00:15:15,910 --> 00:15:21,280
InnerHTML sini bukannya mengatakan document.getElementById ("todos").

242
00:15:21,280 --> 00:15:25,210
Saya bisa menggunakan cara yang lebih bersih di jQuery,

243
00:15:25,210 --> 00:15:28,490
yang hanya menggunakan penyeleksi.

244
00:15:28,490 --> 00:15:31,300
Seperti yang Anda lihat, kode ini tidak bisa sedikit lebih bersih,

245
00:15:31,300 --> 00:15:35,770
sangat mirip fungsional, tapi itu ide.

246
00:15:35,770 --> 00:15:37,980
Kami telah melihat beberapa hal sejauh ini,

247
00:15:37,980 --> 00:15:42,010
jadi kita mulai dengan implementasi JavaScript hanya mentah.

248
00:15:42,010 --> 00:15:45,370
Kami menambahkan fitur baru dan menunjukkan bagaimana kita dapat memperbaikinya dengan

249
00:15:45,370 --> 00:15:49,090
hanya apa yang kita miliki di JavaScript.

250
00:15:49,090 --> 00:15:53,300
>> Apakah ada yang melihat kesulitan dengan desain ini?

251
00:15:53,300 --> 00:16:01,090
Yaitu, saya kira-atau tidak selalu kesulitan tetapi katakanlah

252
00:16:01,090 --> 00:16:04,830
kami tidak melakukan proyek daftar to-do, dan besok kami memutuskan

253
00:16:04,830 --> 00:16:10,320
kami ingin membuat daftar belanjaan atau proyek daftar belanja.

254
00:16:10,320 --> 00:16:14,150
Banyak fitur ini sangat mirip.

255
00:16:14,150 --> 00:16:19,080
Banyak hal yang kita ingin keluar dari JavaScript yang sangat umum,

256
00:16:19,080 --> 00:16:23,820
dan ini menggarisbawahi perlunya semacam cara

257
00:16:23,820 --> 00:16:25,670
membuat ini lebih mudah dilakukan.

258
00:16:25,670 --> 00:16:30,400
Aku harus membangun semua akses ini HTML, semua ini akses DOM,

259
00:16:30,400 --> 00:16:35,530
seperti aku akan mewakili daftar to-do dengan model ini.

260
00:16:35,530 --> 00:16:39,130
Dan perhatikan saya bertanggung jawab sebagai pengembang JavaScript

261
00:16:39,130 --> 00:16:42,890
untuk menjaga HTML dan JavaScript yang saya miliki di sync.

262
00:16:42,890 --> 00:16:48,040
Tidak ada yang otomatis dibuat bahwa representasi JavaScript

263
00:16:48,040 --> 00:16:51,590
atau to-do list tersingkir ke HTML.

264
00:16:51,590 --> 00:16:54,000
Tidak ditegakkan bahwa kecuali aku.

265
00:16:54,000 --> 00:16:56,880
Aku harus menulis imbang to-do daftar fungsi.

266
00:16:56,880 --> 00:17:01,650
Dan yang mungkin tidak-maksudku, itu masuk akal untuk melakukan itu,

267
00:17:01,650 --> 00:17:03,670
tapi mungkin kadang-kadang membosankan.

268
00:17:03,670 --> 00:17:08,190
Jika Anda memiliki proyek yang lebih besar, yang mungkin sulit.

269
00:17:08,190 --> 00:17:10,720
>> Frameworks, salah satu tujuan dari kerangka

270
00:17:10,720 --> 00:17:14,060
adalah untuk menyederhanakan proses dan semacam faktor luar

271
00:17:14,060 --> 00:17:16,950
ini umum-saya kira Anda bisa mengatakan pola-desain

272
00:17:16,950 --> 00:17:20,700
bahwa orang umumnya memiliki beberapa jenis cara untuk mewakili data,

273
00:17:20,700 --> 00:17:25,599
apakah itu daftar teman, apakah itu informasi peta

274
00:17:25,599 --> 00:17:27,280
atau sesuatu atau to-do list.

275
00:17:27,280 --> 00:17:30,660
Beberapa orang umumnya memiliki cara untuk mewakili informasi,

276
00:17:30,660 --> 00:17:33,650
dan mereka umumnya perlu untuk menjaga semacam informasi di sync

277
00:17:33,650 --> 00:17:36,520
antara apa yang pengguna melihat dalam beberapa jenis tampilan,

278
00:17:36,520 --> 00:17:39,850
berbicara dalam hal seperti model view controller yang anda lihat di kuliah,

279
00:17:39,850 --> 00:17:45,400
dan kemudian model, yang dalam hal ini adalah array JavaScript ini.

280
00:17:45,400 --> 00:17:49,020
Kerangka memberi kita cara untuk mengatasi masalah tersebut.

281
00:17:49,020 --> 00:17:53,080
Sekarang mari kita lihat pada pelaksanaan ini to-do list

282
00:17:53,080 --> 00:18:02,360
dalam kerangka disebut angularjs.

283
00:18:02,360 --> 00:18:04,650
Ini dia. Perhatikan cocok pada slide.

284
00:18:04,650 --> 00:18:07,330
Saya tidak harus gulir ke kiri dan kanan.

285
00:18:07,330 --> 00:18:10,460
Itu mungkin bukan alasan yang baik untuk merekomendasikan menggunakan kerangka,

286
00:18:10,460 --> 00:18:20,120
tapi perhatikan saya pernah mengakses elemen HTML individu di sini?

287
00:18:20,120 --> 00:18:22,400
Apakah aku pernah pergi ke DOM?

288
00:18:22,400 --> 00:18:26,120
Apakah Anda melihat document.getElementById atau sesuatu seperti itu?

289
00:18:26,120 --> 00:18:29,870
Tidak, itu hilang.

290
00:18:29,870 --> 00:18:35,590
>> Sudut membantu kita menjaga DOM dan JavaScript representasi kami sesuatu

291
00:18:35,590 --> 00:18:40,430
jenis sinkron, jadi jika tidak dalam file js,

292
00:18:40,430 --> 00:18:46,790
jika tidak ada cara untuk pemrograman mendapatkan untuk semua konten HTML

293
00:18:46,790 --> 00:18:51,800
dari JavaScript bagaimana kita menjaga ini di sync?

294
00:18:51,800 --> 00:18:58,160
Jika tidak dalam file js., Itu harus berada di HTML, kan?

295
00:18:58,160 --> 00:19:01,910
Ini adalah versi baru dari file HTML,

296
00:19:01,910 --> 00:19:04,660
dan perhatikan kami telah menambahkan banyak di sini.

297
00:19:04,660 --> 00:19:11,110
Perhatikan ada atribut-atribut baru yang mengatakan ng-klik dan ng-ulangi.

298
00:19:11,110 --> 00:19:15,650
Pendekatan sudut untuk memecahkan masalah ini kesulitan dalam desain

299
00:19:15,650 --> 00:19:19,130
adalah pada dasarnya membuat HTML jauh lebih kuat.

300
00:19:19,130 --> 00:19:24,420
Angular adalah cara untuk memungkinkan Anda untuk membuat HTML agak lebih ekspresif.

301
00:19:24,420 --> 00:19:30,520
Sebagai contoh, saya dapat mengatakan bahwa aku akan mengikat atau mengikat kotak teks ini

302
00:19:30,520 --> 00:19:35,080
ke variabel dalam kode JavaScript sudut saya.

303
00:19:35,080 --> 00:19:37,030
Ini ng model tidak hanya itu.

304
00:19:37,030 --> 00:19:41,550
Yang pada dasarnya mengatakan bahwa item dalam kotak teks ini,

305
00:19:41,550 --> 00:19:45,000
hanya mengasosiasikan bahwa dengan new_todo_description variabel

306
00:19:45,000 --> 00:19:47,870
dalam kode JavaScript.

307
00:19:47,870 --> 00:19:51,600
Itu sangat kuat karena saya tidak harus secara eksplisit pergi ke

308
00:19:51,600 --> 00:19:53,310
DOM untuk mendapatkan informasi tersebut.

309
00:19:53,310 --> 00:19:56,250
Saya tidak harus mengatakan document.getElementById.

310
00:19:56,250 --> 00:19:58,750
Saya tidak harus menggunakan jQueries seperti akses DOM.

311
00:19:58,750 --> 00:20:03,280
Saya dapat mengasosiasikannya dengan variabel, dan kemudian ketika saya mengubah bahwa variabel

312
00:20:03,280 --> 00:20:07,400
dalam JavaScript itu disimpan di sinkron dengan HTML,

313
00:20:07,400 --> 00:20:11,640
sehingga menyederhanakan proses harus pergi bolak-balik antara keduanya.

314
00:20:11,640 --> 00:20:18,260
Apakah itu masuk akal?

315
00:20:18,260 --> 00:20:22,060
>> Dan perhatikan ada kode akses HTML.

316
00:20:22,060 --> 00:20:27,760
Kami baru saja membuat HTML lebih kuat,

317
00:20:27,760 --> 00:20:32,070
dan sekarang, misalnya, kita dapat melakukan hal-hal seperti ini,

318
00:20:32,070 --> 00:20:38,610
seperti ketika Anda klik ini, memanggil fungsi ini dalam lingkup todos.js,

319
00:20:38,610 --> 00:20:43,410
dan kita bisa melakukan itu sebelumnya, tapi ada hal-hal lain, seperti ini ng model,

320
00:20:43,410 --> 00:20:47,020
dan perhatikan ini ng-ulangi.

321
00:20:47,020 --> 00:20:51,520
Bagaimana menurut Anda ini tidak?

322
00:20:51,520 --> 00:20:54,390
Berikut daftar unordered dari sebelumnya.

323
00:20:54,390 --> 00:20:56,470
Kami memiliki tag ul,

324
00:20:56,470 --> 00:21:03,710
tapi aku pernah render daftar itu dalam kode JavaScript?

325
00:21:03,710 --> 00:21:09,280
Aku tidak pernah secara eksplisit render daftar itu.

326
00:21:09,280 --> 00:21:11,580
Bagaimana cara kerjanya?

327
00:21:11,580 --> 00:21:16,410
Nah, cara sudut menyelesaikan ini adalah ini disebut repeater.

328
00:21:16,410 --> 00:21:22,760
Pada dasarnya ini mengatakan bahwa saya ingin mencetak HTML ini

329
00:21:22,760 --> 00:21:26,240
untuk setiap todo dalam array todos saya.

330
00:21:26,240 --> 00:21:31,850
Di dalam todos.jr ada array todos di sini,

331
00:21:31,850 --> 00:21:37,910
dan ini akan memberitahu sudut pergi melalui array itu, dan untuk setiap elemen yang Anda lihat

332
00:21:37,910 --> 00:21:41,390
Saya ingin Anda cetak HTML ini.

333
00:21:41,390 --> 00:21:44,620
Ini adalah jenis mengagumkan karena saya hanya bisa melakukan ini

334
00:21:44,620 --> 00:21:47,760
tanpa harus menulis untuk loop,

335
00:21:47,760 --> 00:21:52,250
yang untuk to-do list yang hanya 30 baris kode

336
00:21:52,250 --> 00:21:54,700
mungkin tidak menjadi hal yang paling menguntungkan,

337
00:21:54,700 --> 00:22:01,240
tetapi jika Anda memiliki proyek besar, ini bisa sangat nyaman.

338
00:22:01,240 --> 00:22:06,100
>> Ini adalah salah satu solusi untuk masalah ini, membuat HTML lebih kuat,

339
00:22:06,100 --> 00:22:10,820
dan yang memungkinkan kita untuk menjaga JavaScript dan HTML di sync.

340
00:22:10,820 --> 00:22:13,220
Ada cara lain yang mungkin untuk memecahkan masalah ini,

341
00:22:13,220 --> 00:22:15,320
dan tidak setiap kerangka melakukan hal ini.

342
00:22:15,320 --> 00:22:17,720
Tidak setiap kerangka bekerja sepanjang jalur tersebut.

343
00:22:17,720 --> 00:22:19,490
Beberapa kerangka kerja memiliki pendekatan yang berbeda,

344
00:22:19,490 --> 00:22:23,310
dan Anda mungkin menemukan bahwa Anda menikmati coding dalam satu kerangka atas yang lain.

345
00:22:23,310 --> 00:22:26,160
Mari kita lihat satu lagi.

346
00:22:26,160 --> 00:22:30,060
Ini adalah daftar yang harus dilakukan dikodekan dalam kerangka kerja yang disebut Backbone.

347
00:22:30,060 --> 00:22:33,250
Aku akan pergi melalui ini dengan cepat.

348
00:22:33,250 --> 00:22:38,300
Saya akan mulai dengan HTML sebelum kami pergi ke sana.

349
00:22:38,300 --> 00:22:40,290
Satu detik.

350
00:22:40,290 --> 00:22:43,950
Dimulai dengan HTML, seperti Anda perhatikan, HTML kita sangat mirip

351
00:22:43,950 --> 00:22:50,000
apa itu sebelumnya, jadi tidak terlalu banyak yang baru di depan itu.

352
00:22:50,000 --> 00:22:55,410
Tapi file js kami sedikit berbeda.

353
00:22:55,410 --> 00:23:00,360
Backbone jenis memiliki ide ini, atau dibangun di atas ide

354
00:23:00,360 --> 00:23:04,750
bahwa banyak dari apa yang kita lakukan dengan, katakanlah, proyek JavaScript kami

355
00:23:04,750 --> 00:23:09,110
adalah berpikir tentang model dan koleksi dari model ini.

356
00:23:09,110 --> 00:23:12,510
Ini bisa jadi, misalnya, foto dan koleksi foto,

357
00:23:12,510 --> 00:23:16,230
atau gagasan dari seorang teman dan koleksi teman-teman.

358
00:23:16,230 --> 00:23:20,700
Dan seringkali ketika kita pemrograman aplikasi JavaScript

359
00:23:20,700 --> 00:23:25,340
kita akan semacam mewakili gagasan memiliki koleksi teman

360
00:23:25,340 --> 00:23:29,500
entah bagaimana dalam JavaScript, dan Backbone memberikan kita lapisan ini

361
00:23:29,500 --> 00:23:33,040
di atas array existing JavaScript dan benda-benda

362
00:23:33,040 --> 00:23:38,300
untuk melakukan hal-hal yang lebih kuat dengan lebih mudah.

363
00:23:38,300 --> 00:23:41,870
>> Di sini saya telah menetapkan sebuah model untuk-do,

364
00:23:41,870 --> 00:23:44,630
dan Anda tidak perlu khawatir terlalu banyak tentang sintaks,

365
00:23:44,630 --> 00:23:48,730
tapi melihat bahwa apa yang salah satu sifat ini?

366
00:23:48,730 --> 00:23:53,190
Ini memiliki medan default.

367
00:23:53,190 --> 00:23:56,640
Backbone memungkinkan saya untuk menentukan sudah dari kelelawar

368
00:23:56,640 --> 00:24:00,190
setiap baru to-do yang saya buat akan memiliki default ini.

369
00:24:00,190 --> 00:24:04,100
Sekarang saya dapat menyesuaikan ini, tetapi mampu menentukan default

370
00:24:04,100 --> 00:24:07,220
bagus, dan itu agak nyaman karena ini bukan sesuatu yang seperti

371
00:24:07,220 --> 00:24:10,430
melekat dalam JavaScript, dan sekarang saya tidak perlu secara eksplisit

372
00:24:10,430 --> 00:24:12,430
mengatakan bahwa todos tidak lengkap.

373
00:24:12,430 --> 00:24:19,190
Saya bisa mengatakan langsung dari kelelawar bahwa todos akan ditandai sebagai tidak lengkap.

374
00:24:19,190 --> 00:24:21,300
Perhatikan lalu apa ini?

375
00:24:21,300 --> 00:24:25,520
Sekarang aku punya daftar yang harus dilakukan, dan itu koleksi.

376
00:24:25,520 --> 00:24:30,960
Perhatikan bidang yang terkait dengan kata Model todo.

377
00:24:30,960 --> 00:24:33,390
Ini adalah cara saya memberitahu Backbone yang

378
00:24:33,390 --> 00:24:37,350
Aku akan berpikir tentang koleksi ini todos individu.

379
00:24:37,350 --> 00:24:42,140
Ini pada dasarnya adalah struktur model untuk program saya.

380
00:24:42,140 --> 00:24:44,980
Di sini saya punya ide ini koleksi,

381
00:24:44,980 --> 00:24:48,960
dan pada dasarnya barang-barang yang terdapat dalam koleksi yang semuanya akan todos ini,

382
00:24:48,960 --> 00:24:51,910
dan yang sangat alami dalam pengertian ini

383
00:24:51,910 --> 00:24:59,890
karena saya punya todos, dan saya memiliki mereka dalam koleksi.

384
00:24:59,890 --> 00:25:02,940
>> Mari kita lihat sedikit lebih ini.

385
00:25:02,940 --> 00:25:05,900
Berikut ini adalah tampilan Backbone.

386
00:25:05,900 --> 00:25:08,890
Hal lain yang Backbone mengatakan bahwa

387
00:25:08,890 --> 00:25:14,660
banyak model yang Anda pikirkan atau bahkan koleksi

388
00:25:14,660 --> 00:25:19,150
akan perlu memiliki beberapa cara yang ditampilkan.

389
00:25:19,150 --> 00:25:21,900
Kita perlu membuat bahwa daftar yang harus dilakukan,

390
00:25:21,900 --> 00:25:25,460
dan tidak akan lebih baik jika kita bisa menyediakan untuk setiap model

391
00:25:25,460 --> 00:25:28,390
atau mengasosiasikan dengan masing-masing model pandangan ini

392
00:25:28,390 --> 00:25:34,020
yang memungkinkan kita untuk kurasa menghubungkan dua bersama-sama?

393
00:25:34,020 --> 00:25:38,320
Padahal sebelumnya kami harus menggunakan untuk loop yang akan dijalankan melalui

394
00:25:38,320 --> 00:25:41,130
setiap todo dalam daftar kami dan kemudian mencetaknya di sini

395
00:25:41,130 --> 00:25:44,650
pada dasarnya kita dapat menghubungkannya dengan model ini.

396
00:25:44,650 --> 00:25:47,550
Ini adalah tampilan agenda.

397
00:25:47,550 --> 00:25:50,550
Hal ini terkait dengan todo kami temukan sebelumnya.

398
00:25:50,550 --> 00:25:54,940
Sekarang setiap todo yang dapat ditampilkan atau renderable

399
00:25:54,940 --> 00:25:56,960
oleh ini untuk tampilan agenda.

400
00:25:56,960 --> 00:25:59,440
Perhatikan beberapa bidang.

401
00:25:59,440 --> 00:26:05,880
Apa yang Anda pikir TagName ini, TagName: li?

402
00:26:05,880 --> 00:26:09,790
Ingat dari sebelumnya ketika kita ingin membuat sebuah todo

403
00:26:09,790 --> 00:26:16,700
kita harus secara eksplisit memasangkan todos kami dengan tag li ini.

404
00:26:16,700 --> 00:26:21,080
Sekarang kita mengatakan bahwa di mana todo ini akan hidup

405
00:26:21,080 --> 00:26:25,250
akan menjadi dalam sebuah tag li.

406
00:26:25,250 --> 00:26:31,440
Dan sekarang kita juga mengasosiasikan acara dengan todos kami.

407
00:26:31,440 --> 00:26:34,320
>> Setiap todo memiliki acara yang satu ini.

408
00:26:34,320 --> 00:26:38,480
Jika Anda mengklik cukup banyak tombol toggle, itulah yang saya katakan di sana,

409
00:26:38,480 --> 00:26:43,080
maka pada dasarnya menandai todo sebagai kebalikan dari apa itu sebelumnya

410
00:26:43,080 --> 00:26:45,890
dan kemudian kembali membuat aplikasi.

411
00:26:45,890 --> 00:26:47,810
Ini adalah jenis yang mirip dengan kode sebelumnya.

412
00:26:47,810 --> 00:26:50,730
Ingat ketika kita ditandai sebagai salah satu lawan atau

413
00:26:50,730 --> 00:26:52,410
dan kemudian kami kembali diberikan tersebut.

414
00:26:52,410 --> 00:26:57,750
Tapi perhatikan sekarang acara ini digunakan untuk menjadi sesuatu yang dalam HTML.

415
00:26:57,750 --> 00:26:59,640
Itu duduk di sana.

416
00:26:59,640 --> 00:27:01,410
Tombol memiliki klik.

417
00:27:01,410 --> 00:27:05,310
Ketika Anda mengklik tombol, jenis melakukan hal-hal untuk

418
00:27:05,310 --> 00:27:07,210
mengatur bahwa todo tidak lengkap.

419
00:27:07,210 --> 00:27:11,180
Di sini kita telah terkait bahwa hal mengklik tombol togel

420
00:27:11,180 --> 00:27:15,830
dan membalikkan apakah itu aktif atau tidak aktif dengan pandangan ini.

421
00:27:15,830 --> 00:27:20,480
>> Ini adalah cara yang baik untuk menyiapkan acara ini sehingga sangat terikat erat

422
00:27:20,480 --> 00:27:26,980
pandangan ini, dan melihat satu ini lagi.

423
00:27:26,980 --> 00:27:31,050
Saya memiliki metode render, dan kita tidak harus pergi melalui rincian.

424
00:27:31,050 --> 00:27:33,650
Ini sama halnya dengan apa yang kita miliki sebelumnya,

425
00:27:33,650 --> 00:27:36,070
tapi perhatikan aku tidak perulangan melalui apa-apa.

426
00:27:36,070 --> 00:27:40,700
Saya tidak mencetak bahwa tag ul itu semacam mengatakan saya akan mencetak semua elemen.

427
00:27:40,700 --> 00:27:46,610
Saya menyediakan fungsi untuk render yang satu ini harus dilakukan barang.

428
00:27:46,610 --> 00:27:49,400
Ini adalah konsep yang sangat kuat karena pada dasarnya

429
00:27:49,400 --> 00:27:53,600
kami to-do list terdiri dari semua todos ini, dan jika kita pada dasarnya dapat menentukan

430
00:27:53,600 --> 00:27:56,890
cara untuk membuat salah satu dari mereka todos

431
00:27:56,890 --> 00:28:04,230
maka kita dapat memiliki tulang kuat kami per se membuat semua todos

432
00:28:04,230 --> 00:28:07,760
dengan memanggil metode render pada todos individu.

433
00:28:07,760 --> 00:28:14,180
Ini adalah konsep yang berguna di sini.

434
00:28:14,180 --> 00:28:18,160
Sekarang pertanyaan yang baik untuk bertanya adalah bagaimana aplikasi ini sedang disatukan?

435
00:28:18,160 --> 00:28:21,200
Karena kita memiliki kemampuan untuk membuat satu todo,

436
00:28:21,200 --> 00:28:23,860
tapi bagaimana kita mendapatkan ide beberapa todos?

437
00:28:23,860 --> 00:28:25,100
>> Mari kita lihat pada saat itu.

438
00:28:25,100 --> 00:28:27,100
Ini adalah bagian terakhir.

439
00:28:27,100 --> 00:28:29,740
Perhatikan kita memiliki to-do tampilan daftar di sini,

440
00:28:29,740 --> 00:28:34,440
dan perhatikan itu juga pandangan.

441
00:28:34,440 --> 00:28:36,970
Dan untuk pergi ke beberapa hal,

442
00:28:36,970 --> 00:28:45,280
Metode ini initialize akan dipanggil ketika kita pertama kali membuat ini daftar to-do.

443
00:28:45,280 --> 00:28:52,630
Seperti yang Anda lihat, itu seperti membuat to-do list dan mengaitkannya dengan pandangan ini.

444
00:28:52,630 --> 00:28:57,860
Lalu aku menambahkan fungsi di sini jadi pada dasarnya ketika Anda menambahkan item-

445
00:28:57,860 --> 00:29:01,440
ini mirip dengan metode addItem kita lihat sebelumnya-

446
00:29:01,440 --> 00:29:07,430
Aku akan membuat objek todo baru, dan perhatikan aku benar-benar memanggil

447
00:29:07,430 --> 00:29:13,080
ini metode todo baru, jadi ini disediakan oleh Backbone,

448
00:29:13,080 --> 00:29:16,010
dan saya dapat lulus dalam properti saya di sini.

449
00:29:16,010 --> 00:29:23,710
Dan sekarang setiap todo yang saya buat dengan menggunakan ini akan mendapatkan fungsi yang kita lihat sebelumnya.

450
00:29:23,710 --> 00:29:28,140
Perhatikan Aku membersihkan kotak teks sebelum-sedikit kecil rinci-

451
00:29:28,140 --> 00:29:32,900
dan kemudian saya menambahkan koleksi ini.

452
00:29:32,900 --> 00:29:37,630
>> Ini hampir tampaknya aneh karena sebelum kami hanya harus melakukan todos.push itu,

453
00:29:37,630 --> 00:29:43,310
dan kemudian kami selesai, dan ini mungkin tampak lebih rumit untuk proyek khusus ini,

454
00:29:43,310 --> 00:29:46,980
dan Anda mungkin menemukan bahwa Backbone atau bahkan sudut atau kerangka lainnya

455
00:29:46,980 --> 00:29:50,790
tidak sesuai dengan proyek tertentu, tapi saya pikir sangat penting untuk berpikir tentang

456
00:29:50,790 --> 00:29:54,100
apa artinya ini pada skala yang lebih besar untuk proyek-proyek yang lebih besar,

457
00:29:54,100 --> 00:29:56,610
karena jika kita memiliki proyek yang lebih besar di mana kami mewakili

458
00:29:56,610 --> 00:30:00,860
beberapa koleksi benar-benar kompleks, sesuatu yang lebih dari sekedar to-do list,

459
00:30:00,860 --> 00:30:04,490
katakanlah daftar teman atau sesuatu seperti itu, ini bisa berguna

460
00:30:04,490 --> 00:30:09,620
karena kita bisa mengatur kode kami dengan cara yang benar-benar nyaman,

461
00:30:09,620 --> 00:30:12,550
dengan cara yang akan membuat lebih mudah bagi orang lain

462
00:30:12,550 --> 00:30:16,820
yang ingin mengambil sebuah proyek untuk membangun di atas.

463
00:30:16,820 --> 00:30:21,450
Anda dapat melihat bahwa ini menyediakan banyak struktur.

464
00:30:21,450 --> 00:30:26,580
Dan kemudian saya menelepon membuat di addItem ini.

465
00:30:26,580 --> 00:30:31,050
Render, seperti yang Anda lihat, dan Anda tidak perlu memahami sintaks ini penuh,

466
00:30:31,050 --> 00:30:37,790
tetapi pada dasarnya untuk setiap model itu akan memanggil metode render individu.

467
00:30:37,790 --> 00:30:41,500
Itu semacam mana ini berasal dari.

468
00:30:41,500 --> 00:30:44,140
Mari kita hanya menentukan bagaimana menerjemahkan todos individu,

469
00:30:44,140 --> 00:30:47,310
dan kemudian mari kita lem mereka bersama-sama secara keseluruhan.

470
00:30:47,310 --> 00:30:49,810
Tapi ini menyediakan cara abstraksi,

471
00:30:49,810 --> 00:30:55,470
karena saya bisa mengubah cara saya memutuskan untuk membuat todos individu,

472
00:30:55,470 --> 00:30:57,940
dan saya tidak akan mengubah apapun kode ini.

473
00:30:57,940 --> 00:31:00,700
Itu agak dingin.

474
00:31:00,700 --> 00:31:08,540
>> Apakah ada yang memiliki pertanyaan tentang kerangka kerja JavaScript?

475
00:31:08,540 --> 00:31:14,310
[Pertanyaan terdengar Mahasiswa]

476
00:31:14,310 --> 00:31:16,050
Oh, tentu, itu pertanyaan yang bagus.

477
00:31:16,050 --> 00:31:19,080
Pertanyaannya adalah bagaimana saya termasuk kerangka kerja?

478
00:31:19,080 --> 00:31:22,970
Kebanyakan kerangka JavaScript pada dasarnya hanya file js

479
00:31:22,970 --> 00:31:25,740
yang dapat Anda masukkan di atas kode Anda.

480
00:31:25,740 --> 00:31:29,830
Perhatikan di bagian kepala HTML saya, saya memiliki semua tag script,

481
00:31:29,830 --> 00:31:34,250
dan tag akhir script adalah kode yang kami telah menulis.

482
00:31:34,250 --> 00:31:38,820
Dan kemudian kode 3 kerangka hanya juga tag script.

483
00:31:38,820 --> 00:31:42,110
Aku termasuk mereka dari apa yang disebut CDN,

484
00:31:42,110 --> 00:31:46,200
yang memungkinkan saya untuk mendapatkannya dari orang lain pada saat ini

485
00:31:46,200 --> 00:31:57,930
tapi setiap kerangka kerja memiliki ini-Anda dapat cukup banyak menemukan konten

486
00:31:57,930 --> 00:32:03,540
untuk perpustakaan JavaScript tertentu yang tersedia pada beberapa CDN atau sesuatu seperti itu,

487
00:32:03,540 --> 00:32:05,570
dan kemudian Anda dapat menyertakan tag script.

488
00:32:05,570 --> 00:32:07,600
Apakah itu masuk akal?

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

490
00:32:09,500 --> 00:32:11,730
>> Mereka adalah 2 pendekatan yang berbeda.

491
00:32:11,730 --> 00:32:14,640
Itu bukan satu-satunya pendekatan untuk memecahkan masalah ini.

492
00:32:14,640 --> 00:32:17,080
Ada banyak hal yang berbeda yang

493
00:32:17,080 --> 00:32:19,490
seseorang bisa lakukan, dan ada banyak kerangka kerja di luar sana.

494
00:32:19,490 --> 00:32:23,300
Angular dan Backbone tidak menceritakan keseluruhan cerita.

495
00:32:23,300 --> 00:32:26,370
Good luck dengan proyek akhir Anda, dan terima kasih banyak.

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