[Powered by Google Translate] [Seminar] [JavaScript Frameworks: Mengapa dan Bagaimana]
[Kevin Schmid] [Harvard University]
[Ini adalah CS50.] [CS50.TV]
>> Hi, semua orang. Selamat datang di seminar Frameworks JavaScript.
Nama saya Kevin, dan hari ini aku akan berbicara tentang kerangka JavaScript,
dan tujuan dari seminar ini bukan untuk mendapatkan Anda untuk, katakanlah, menguasai kerangka tertentu per se
tetapi untuk memberikan pengenalan luas untuk beberapa kerangka
dan menunjukkan mengapa kita akan pernah ingin menggunakan kerangka.
>> Sebelum saya melakukan itu, saya akan memberikan sedikit latar belakang dalam JavaScript,
dan kemudian kita akan mengambilnya dari sana.
Kita akan memulai dengan menerapkan daftar to-do.
Berikut daftar tugas kita untuk hari ini.
Ini agak lucu. Kita harus menerapkan daftar to-do dalam JavaScript.
Ini adalah apa yang akan terlihat seperti, jadi itulah tujuan pertama kami.
Kami tidak akan menggunakan kerangka kerja untuk melakukan itu.
Kita akan kode JavaScript dan mendapatkan to-do list untuk bekerja.
Kemudian kita akan memperbaiki desain tanpa menggunakan kerangka.
Kita akan membahas berbagai hal yang dapat kita lakukan hanya dengan JavaScript saja
untuk membuat kami to-do daftar sedikit dirancang lebih baik.
Kemudian kita akan melemparkan di beberapa jQuery,
dan kemudian kita akan melihat yang sama to-do list,
hanya diimplementasikan dalam kerangka kerja yang berbeda, dan kita akan membahas
pro dan kontra sepanjang jalan.
>> Mari kita mulai menerapkan bahwa to-do list.
Katakanlah kita diberi HTML ini.
Aku akan membuat ini lebih kecil sedikit.
Seperti yang Anda lihat, saya memiliki header kecil yang mengatakan Todo
dan sebuah kotak kecil di mana saya dapat memasukkan deskripsi todo
dan kemudian tombol item baru, jadi mari kita coba untuk memasukkan todo baru ke daftar ini.
Berikan seminar kerangka JavaScript,
dan aku memukul item baru.
Saya bisa mendapatkan peringatan ini JavaScript mengatakan menerapkan saya.
Kita harus menerapkannya.
Mari kita memeriksa kode untuk ini, baik HTML dan JavaScript itu.
Berikut HTML kita.
Seperti yang dapat Anda lihat di sini, inilah sedikit Todos header kita.
Itu hal tebal di bagian atas,
dan kemudian kita memiliki kotak input dengan placeholder,
dan kemudian ada atribut tertentu tombol ini yang memanggil fungsi ini addTodo.
Apakah ada yang ingin menebak apa yang di klik yang menandakan?
[Mahasiswa respon terdengar]
Baik, di klik adalah semacam acara,
seperti mengklik mouse hanya sebuah acara, dan apa yang kita lakukan
adalah kita mengikat acara mengklik tombol ini untuk menjalankan fungsi tersebut.
AddTodo adalah event handler untuk mengklik tombol itu.
>> Seperti yang Anda lihat, ketika saya klik tombol item baru
acara klik pada dipecat, dan fungsi ini dipanggil.
Mari kita lihat fungsi.
Seperti yang Anda lihat, inilah kode JavaScript saya sejauh ini.
Apa yang saya miliki di atas adalah struktur data global untuk saya to-do list.
Ini terlihat seperti sebuah array. Ini hanya sebuah array kosong.
Dan kemudian saya memiliki fungsi addTodo yang kita lihat sebelumnya,
dan satu-satunya baris kode dalam ada peringatan ini.
Ini peringatan menerapkan saya, dan kemudian saya memiliki 2 tugas di tangan.
Saya harus menambahkan todo ke struktur data global,
dan kemudian saya ingin menarik keluar daftar to-do.
Tidak terlalu mewah saja, namun JavaScript Anda mungkin belum terbiasa dengan,
jadi aku akan pergi lambat dan meninjau dasar-dasar JavaScript dengan cara itu.
>> Mari kita memberikan suntikan ini.
Katakanlah pengguna memasukkan sesuatu dalam kotak ini.
Aku hanya mengetik sesuatu di sini, teks.
Bagaimana cara semacam akses yang teks melalui JavaScript?
Ingat bahwa JavaScript, salah satu fitur yang mendasar adalah bahwa hal itu memberi kita
ini akses program ke DOM.
Hal ini memungkinkan kita untuk mengakses elemen dan sifat mereka HTML ini sebenarnya.
Cara kita melakukannya dengan tulang-tulang JavaScript
adalah kita benar-benar dapat menggunakan fungsi dalam JavaScript yang disebut getElementById.
Saya ingin menyimpan teks yang diketik ada dalam beberapa variabel,
jadi aku akan mengatakan sebuah variabel baru yang disebut new_todo,
dan aku akan mendapatkan elemen tersebut.
Ini adalah fungsi,. GetElementById.
Dan sekarang aku mendapatkan elemen dengan ID, jadi saya membutuhkan ID dari kotak teks,
jadi aku memberikannya ID new_todo_description.
Itulah bagaimana aku akan mendapatkan elemen.
Itu argumen saya untuk fungsi ini, untuk menentukan ID untuk mendapatkan.
Dan itulah elemen dalam HTML, dan memiliki sifat.
Anda telah melihat ini. Mereka atribut.
Atribut dari elemen teks yang menyimpan input pengguna disebut nilai.
Aku menyimpan nilai dari kotak teks sekarang dalam variabel ini disebut new_todo.
Sekarang aku punya akses program ke variabel ini, yang merupakan jenis keren
karena sekarang apa yang bisa saya lakukan adalah saya dapat menambahkannya ke saya to-do list.
>> Cara kita akan melakukan ini dalam JavaScript-dan jangan khawatir jika Anda tidak terbiasa dengan hal ini,
tapi hanya akan melalui itu todos.push
karena itulah nama struktur data global saya di sini,
dan aku akan mendorong new_todo.
Ini bagus karena sekarang saya telah menambahkan ke saya JavaScript
representasi yang to-do list.
Tapi sekarang bagaimana cara mendapatkannya kembali ke HTML?
Aku harus menemukan cara untuk semacam mendorong kembali.
Dengan kata lain, aku agak harus menggambar ini.
Apa yang akan kita lakukan adalah kita akan menarik to-do list.
Saya perlu memperbarui HTML lainnya pada halaman tersebut,
dan seperti yang Anda lihat, aku sudah meninggalkan ini wadah kecil di sini,
pembagi ini dari halaman di mana ID adalah todos,
dan aku akan menempatkan daftar yang harus dilakukan di sana.
Pertama aku akan membersihkan itu karena, katakanlah, ada tua to-do list di sana.
Saya mendapatkan elemen yang oleh ID lagi,
dan aku mengakses HTML batin elemen,
dan aku akan jelas bahwa.
Jika kita meninggalkan kode ini, kita akan melihat apa-apa di sana kosong,
dan sekarang saya ingin memulai render baru to-do list saya.
Aku pada dasarnya akan menghapus saya to-do list.
>> Sekarang batin dalam HTML itu todos div benar-benar jelas,
dan sekarang saya harus mulai menambahkan daftar saya.
Hal pertama yang saya ingin menambahkan kembali adalah unordered tag daftar,
yang pada dasarnya menunjukkan bahwa ini adalah awal dari unordered list.
Sekarang untuk setiap elemen dalam array todos saya, saya ingin mencetaknya dalam HTML itu.
Saya ingin tambahkan pada bagian bawah daftar ini.
Sama seperti di C, saya dapat menggunakan untuk loop, dan aku akan mulai pada awal daftar saya
pada elemen 0, dan aku akan pergi jauh-jauh dengan panjang daftar.
Kami benar-benar bisa mendapatkan panjang array dalam JavaScript menggunakan properti panjang.
Pada dasarnya aku akan melakukan sesuatu yang sangat mirip dalam sini
untuk mencetak elemen.
Saya bisa lagi mengakses todos div, properti HTML batin itu,
dan aku akan menambahkan pada item daftar baru, dan itu akan dikelilingi oleh
tag li ini, dan aku akan menggabungkan dengan operator +,
dan itulah elemen engan array todos saya,
dan kemudian aku akan menutup tag tersebut.
Sekarang untuk setiap elemen kami akan menambahkan entri daftar baru.
Dan kemudian semua kita benar-benar perlu lakukan adalah menutup tag tersebut.
Aku hanya perlu untuk menutup yang unordered tag daftar.
>> Apakah Anda mendapatkan merasakan bagaimana yang bekerja?
Ini akan membuka seluruh daftar.
Ini menambahkan unsur-unsur individu dari daftar todos ke dalam daftar,
dan kemudian yang menutup seluruh daftar, dan ini adalah fungsi addTodo saya.
Pada dasarnya saya mulai dengan mendapatkan todo dari kotak teks.
Saya menambahkan bahwa untuk todos array, dan kemudian saya kembali membuat to-do daftar.
Sekarang saya bisa menambahkan item ke daftar saya.
Ini adalah jenis menarik karena hanya dalam beberapa baris kode
pada dasarnya kita telah membuat to-do list di mana kita dapat menambahkan item.
Besar.
Itu semacam pengenalan dasar JavaScript.
Jangan khawatir terlalu banyak tentang sintaks untuk saat ini,
tetapi berpikir tentang hal ini secara konseptual.
Kami memiliki beberapa HTML.
Kami memiliki kotak teks pada halaman yang pada dasarnya memungkinkan pengguna untuk memasukkan to-do item untuk menambahkannya.
Dan kemudian kami menggunakan JavaScript untuk mengambil todo itu dari kotak teks.
Kami yang tersimpan dalam array JavaScript, yang pada dasarnya adalah seperti
representasi program kami yang daftar yang harus dilakukan,
dan kemudian kita mencetaknya.
Ini todos.js.
>> Ini adalah jenis dingin, tapi bagaimana kita bisa mengambil ini lebih lanjut?
Yah, seperti yang Anda lihat, ini tidak seperti lengkap to-do list.
Sebagai contoh, saya tidak bisa menandai salah satu item yang tidak lengkap,
seperti jika saya ingin melakukan prioritas ulang terhadap barang atau menghapus item.
Ini tidak apa-apa, tapi kita bisa mengambil ini lebih lanjut.
Aku tidak akan berbicara terlalu banyak tentang menambahkan fitur tambahan,
tapi kita bisa mengambil yang lebih lanjut.
Mari kita bicara tentang menambahkan satu lagi fitur ini to-do list,
yang akan mampu memeriksa seorang individu to-do item yang
dan memilikinya dicoret, jadi pada dasarnya mengatakan bahwa saya sudah melakukan ini.
Mari kita lihat beberapa kode yang bisa mencapai itu.
Perhatikan apa yang telah saya lakukan di atas adalah saya telah menambahkan
array global baru yang disebut lengkap.
Aku pada dasarnya menggunakan ini untuk menyimpan apakah item pada daftar to-do
lengkap atau tidak.
Ini adalah salah satu cara untuk melakukan ini.
Jika saya melihat pelaksanaan ini, layar,
pada dasarnya jika saya masukkan todo dan saya menekan tombol ini beralih
melintasi keluar, sehingga setiap item pada daftar ini memiliki baik lengkap
atau negara yang tidak lengkap, dan aku menggunakan array lain untuk mewakili itu.
>> Pada dasarnya untuk setiap todo dalam berbagai todos
ada item dalam array lengkap yang pada dasarnya menunjukkan
apakah itu lengkap atau tidak.
Saya harus membuat perubahan yang cukup minimal untuk kode ini,
jadi inilah fungsi addTodo kami.
Perhatikan bahwa di sini aku mendorongnya ke array,
dan kemudian aku mendorong 0 ke array lengkap,
pada dasarnya secara paralel dengan yang mendorong todo baru untuk mengatakan
Saya menambahkan item ini, dan itu ditambah dengan nilai ini,
yang berarti bahwa itu tidak lengkap.
Dan kemudian aku menggambar ulang daftar to-do.
Sekarang, perhatikan saya telah menambahkan fungsi ini drawTodoList.
Ini membutuhkan banyak kode yang kami miliki sebelumnya,
pada dasarnya sepi kotak dan kemudian menarik baru to-do list.
Tapi perhatikan bahwa dalam hal ini untuk loop yang kita lakukan sedikit lebih sekarang.
Kami pada dasarnya memeriksa apakah item yang sesuai dengan todo engan sini
selesai, dan kita berperilaku berbeda dalam 2 keadaan.
Jika itu selesai, kami menambahkan del tag ini,
yang pada dasarnya adalah cara Anda bisa mendapatkan pemogokan bahwa melalui efek
mencoret to-do list jika itu selesai,
dan jika tidak, kita tidak termasuk itu.
Dan sehingga jenis menangani itu,
>> dan itu salah satu cara untuk mencapai hal ini.
Dan kemudian melihat ketika pengguna mengklik salah satu
kita beralih status penyelesaian itu.
Ketika pengguna mengklik, kami akan membalikkan apakah itu sudah selesai atau tidak,
dan kemudian kita akan redraw.
Ini jenis karya.
Kami memiliki fungsi ini yang melaksanakan tugas-tugas mereka sendiri,
dan ini tidak apa-apa.
Apakah ada sesuatu yang kita bisa berbuat lebih baik tentang hal ini, meskipun?
Perhatikan kita memiliki 2 array global.
Jika ini adalah C, dan kami memiliki 2 array semacam itu diwakili
Data yang semacam terkait dalam beberapa cara
apa yang akan kita gunakan dalam C untuk menggabungkan 2 bidang
menjadi sesuatu yang merangkum kedua potongan informasi?
Ada yang mau memberi saran?
[Mahasiswa respon terdengar]
>> Tepat, sehingga kita bisa menggunakan beberapa jenis struct,
dan jika Anda berpikir kembali ke, katakanlah, pset 3,
ingat kami memiliki kamus, dan kemudian kami harus apakah kata
berada di kamus, dan semua informasi yang disatukan
dalam beberapa struktur data.
Satu hal yang dapat saya lakukan dengan kode ini untuk menghindari ini 2 array yang berbeda
untuk potongan-potongan serupa informasi adalah saya bisa menggabungkan mereka ke dalam objek JavaScript.
Mari kita lihat pada saat itu.
Perhatikan saya hanya memiliki satu array di atas sekarang
dan apa yang saya lakukan adalah-dan ini hanya sintaks JavaScript untuk jenis
menciptakan sebuah versi harfiah dari suatu objek,
dan melihat ada 2 properti, jadi kita harus todo,
dan itu tetap bersama-sama dengan apakah itu lengkap atau tidak lengkap.
Ini adalah kode yang sangat mirip.
Kami menggunakan obyek JavaScript.
Ini semacam hal membaik.
Seperti sekarang, semua bidang informasi terkait disimpan bersama-sama.
Ketika kita pergi untuk mencetak keluar, kita dapat mengakses ladang.
>> Perhatikan bagaimana kita melakukan todos [i]. Lengkap
bukannya memeriksa array lengkap secara terpisah,
dan perhatikan ketika kita ingin mendapatkan to-do tali kita mendapatkan to-do properti
itu todo, jadi ini semacam masuk akal karena
setiap item memiliki sifat intrinsik tentang hal itu.
Memiliki todo, dan memiliki apakah itu lengkap atau tidak.
Tidak terlalu banyak perubahan di sana fungsional, hanya menambahkan beberapa kode.
Ini adalah perbaikan di beberapa bidang, kan?
Maksudku, kami keluar faktor desain sedikit.
Sekarang kita memiliki objek pada dasarnya merangkum data ini.
Apakah ada sesuatu yang lebih dari yang bisa kami lakukan di sini dalam hal JavaScript?
Seperti pemberitahuan bahwa kode ini di sini
untuk mendapatkan HTML batin div
sedikit, saya kira, lama.
Ada document.getElementById ("todos"). InnerHTML.
Satu hal yang kita bisa lakukan untuk membuat kode ini terlihat sedikit ramah
jadi saya tidak harus terus bergulir kiri dan kanan, maju-mundur,
adalah saya bisa menggunakan perpustakaan seperti jQuery.
>> Mari kita periksa Seminar 2,
dan ini adalah kode yang sama, tapi itu dilakukan dengan jQuery.
Anda mungkin tidak terlalu akrab dengan jQuery,
tapi hanya tahu bahwa jQuery adalah semacam perpustakaan untuk JavaScript
yang membuatnya lebih mudah untuk melakukan hal-hal seperti elemen individu akses DOM.
InnerHTML sini bukannya mengatakan document.getElementById ("todos").
Saya bisa menggunakan cara yang lebih bersih di jQuery,
yang hanya menggunakan penyeleksi.
Seperti yang Anda lihat, kode ini tidak bisa sedikit lebih bersih,
sangat mirip fungsional, tapi itu ide.
Kami telah melihat beberapa hal sejauh ini,
jadi kita mulai dengan implementasi JavaScript hanya mentah.
Kami menambahkan fitur baru dan menunjukkan bagaimana kita dapat memperbaikinya dengan
hanya apa yang kita miliki di JavaScript.
>> Apakah ada yang melihat kesulitan dengan desain ini?
Yaitu, saya kira-atau tidak selalu kesulitan tetapi katakanlah
kami tidak melakukan proyek daftar to-do, dan besok kami memutuskan
kami ingin membuat daftar belanjaan atau proyek daftar belanja.
Banyak fitur ini sangat mirip.
Banyak hal yang kita ingin keluar dari JavaScript yang sangat umum,
dan ini menggarisbawahi perlunya semacam cara
membuat ini lebih mudah dilakukan.
Aku harus membangun semua akses ini HTML, semua ini akses DOM,
seperti aku akan mewakili daftar to-do dengan model ini.
Dan perhatikan saya bertanggung jawab sebagai pengembang JavaScript
untuk menjaga HTML dan JavaScript yang saya miliki di sync.
Tidak ada yang otomatis dibuat bahwa representasi JavaScript
atau to-do list tersingkir ke HTML.
Tidak ditegakkan bahwa kecuali aku.
Aku harus menulis imbang to-do daftar fungsi.
Dan yang mungkin tidak-maksudku, itu masuk akal untuk melakukan itu,
tapi mungkin kadang-kadang membosankan.
Jika Anda memiliki proyek yang lebih besar, yang mungkin sulit.
>> Frameworks, salah satu tujuan dari kerangka
adalah untuk menyederhanakan proses dan semacam faktor luar
ini umum-saya kira Anda bisa mengatakan pola-desain
bahwa orang umumnya memiliki beberapa jenis cara untuk mewakili data,
apakah itu daftar teman, apakah itu informasi peta
atau sesuatu atau to-do list.
Beberapa orang umumnya memiliki cara untuk mewakili informasi,
dan mereka umumnya perlu untuk menjaga semacam informasi di sync
antara apa yang pengguna melihat dalam beberapa jenis tampilan,
berbicara dalam hal seperti model view controller yang anda lihat di kuliah,
dan kemudian model, yang dalam hal ini adalah array JavaScript ini.
Kerangka memberi kita cara untuk mengatasi masalah tersebut.
Sekarang mari kita lihat pada pelaksanaan ini to-do list
dalam kerangka disebut angularjs.
Ini dia. Perhatikan cocok pada slide.
Saya tidak harus gulir ke kiri dan kanan.
Itu mungkin bukan alasan yang baik untuk merekomendasikan menggunakan kerangka,
tapi perhatikan saya pernah mengakses elemen HTML individu di sini?
Apakah aku pernah pergi ke DOM?
Apakah Anda melihat document.getElementById atau sesuatu seperti itu?
Tidak, itu hilang.
>> Sudut membantu kita menjaga DOM dan JavaScript representasi kami sesuatu
jenis sinkron, jadi jika tidak dalam file js,
jika tidak ada cara untuk pemrograman mendapatkan untuk semua konten HTML
dari JavaScript bagaimana kita menjaga ini di sync?
Jika tidak dalam file js., Itu harus berada di HTML, kan?
Ini adalah versi baru dari file HTML,
dan perhatikan kami telah menambahkan banyak di sini.
Perhatikan ada atribut-atribut baru yang mengatakan ng-klik dan ng-ulangi.
Pendekatan sudut untuk memecahkan masalah ini kesulitan dalam desain
adalah pada dasarnya membuat HTML jauh lebih kuat.
Angular adalah cara untuk memungkinkan Anda untuk membuat HTML agak lebih ekspresif.
Sebagai contoh, saya dapat mengatakan bahwa aku akan mengikat atau mengikat kotak teks ini
ke variabel dalam kode JavaScript sudut saya.
Ini ng model tidak hanya itu.
Yang pada dasarnya mengatakan bahwa item dalam kotak teks ini,
hanya mengasosiasikan bahwa dengan new_todo_description variabel
dalam kode JavaScript.
Itu sangat kuat karena saya tidak harus secara eksplisit pergi ke
DOM untuk mendapatkan informasi tersebut.
Saya tidak harus mengatakan document.getElementById.
Saya tidak harus menggunakan jQueries seperti akses DOM.
Saya dapat mengasosiasikannya dengan variabel, dan kemudian ketika saya mengubah bahwa variabel
dalam JavaScript itu disimpan di sinkron dengan HTML,
sehingga menyederhanakan proses harus pergi bolak-balik antara keduanya.
Apakah itu masuk akal?
>> Dan perhatikan ada kode akses HTML.
Kami baru saja membuat HTML lebih kuat,
dan sekarang, misalnya, kita dapat melakukan hal-hal seperti ini,
seperti ketika Anda klik ini, memanggil fungsi ini dalam lingkup todos.js,
dan kita bisa melakukan itu sebelumnya, tapi ada hal-hal lain, seperti ini ng model,
dan perhatikan ini ng-ulangi.
Bagaimana menurut Anda ini tidak?
Berikut daftar unordered dari sebelumnya.
Kami memiliki tag ul,
tapi aku pernah render daftar itu dalam kode JavaScript?
Aku tidak pernah secara eksplisit render daftar itu.
Bagaimana cara kerjanya?
Nah, cara sudut menyelesaikan ini adalah ini disebut repeater.
Pada dasarnya ini mengatakan bahwa saya ingin mencetak HTML ini
untuk setiap todo dalam array todos saya.
Di dalam todos.jr ada array todos di sini,
dan ini akan memberitahu sudut pergi melalui array itu, dan untuk setiap elemen yang Anda lihat
Saya ingin Anda cetak HTML ini.
Ini adalah jenis mengagumkan karena saya hanya bisa melakukan ini
tanpa harus menulis untuk loop,
yang untuk to-do list yang hanya 30 baris kode
mungkin tidak menjadi hal yang paling menguntungkan,
tetapi jika Anda memiliki proyek besar, ini bisa sangat nyaman.
>> Ini adalah salah satu solusi untuk masalah ini, membuat HTML lebih kuat,
dan yang memungkinkan kita untuk menjaga JavaScript dan HTML di sync.
Ada cara lain yang mungkin untuk memecahkan masalah ini,
dan tidak setiap kerangka melakukan hal ini.
Tidak setiap kerangka bekerja sepanjang jalur tersebut.
Beberapa kerangka kerja memiliki pendekatan yang berbeda,
dan Anda mungkin menemukan bahwa Anda menikmati coding dalam satu kerangka atas yang lain.
Mari kita lihat satu lagi.
Ini adalah daftar yang harus dilakukan dikodekan dalam kerangka kerja yang disebut Backbone.
Aku akan pergi melalui ini dengan cepat.
Saya akan mulai dengan HTML sebelum kami pergi ke sana.
Satu detik.
Dimulai dengan HTML, seperti Anda perhatikan, HTML kita sangat mirip
apa itu sebelumnya, jadi tidak terlalu banyak yang baru di depan itu.
Tapi file js kami sedikit berbeda.
Backbone jenis memiliki ide ini, atau dibangun di atas ide
bahwa banyak dari apa yang kita lakukan dengan, katakanlah, proyek JavaScript kami
adalah berpikir tentang model dan koleksi dari model ini.
Ini bisa jadi, misalnya, foto dan koleksi foto,
atau gagasan dari seorang teman dan koleksi teman-teman.
Dan seringkali ketika kita pemrograman aplikasi JavaScript
kita akan semacam mewakili gagasan memiliki koleksi teman
entah bagaimana dalam JavaScript, dan Backbone memberikan kita lapisan ini
di atas array existing JavaScript dan benda-benda
untuk melakukan hal-hal yang lebih kuat dengan lebih mudah.
>> Di sini saya telah menetapkan sebuah model untuk-do,
dan Anda tidak perlu khawatir terlalu banyak tentang sintaks,
tapi melihat bahwa apa yang salah satu sifat ini?
Ini memiliki medan default.
Backbone memungkinkan saya untuk menentukan sudah dari kelelawar
setiap baru to-do yang saya buat akan memiliki default ini.
Sekarang saya dapat menyesuaikan ini, tetapi mampu menentukan default
bagus, dan itu agak nyaman karena ini bukan sesuatu yang seperti
melekat dalam JavaScript, dan sekarang saya tidak perlu secara eksplisit
mengatakan bahwa todos tidak lengkap.
Saya bisa mengatakan langsung dari kelelawar bahwa todos akan ditandai sebagai tidak lengkap.
Perhatikan lalu apa ini?
Sekarang aku punya daftar yang harus dilakukan, dan itu koleksi.
Perhatikan bidang yang terkait dengan kata Model todo.
Ini adalah cara saya memberitahu Backbone yang
Aku akan berpikir tentang koleksi ini todos individu.
Ini pada dasarnya adalah struktur model untuk program saya.
Di sini saya punya ide ini koleksi,
dan pada dasarnya barang-barang yang terdapat dalam koleksi yang semuanya akan todos ini,
dan yang sangat alami dalam pengertian ini
karena saya punya todos, dan saya memiliki mereka dalam koleksi.
>> Mari kita lihat sedikit lebih ini.
Berikut ini adalah tampilan Backbone.
Hal lain yang Backbone mengatakan bahwa
banyak model yang Anda pikirkan atau bahkan koleksi
akan perlu memiliki beberapa cara yang ditampilkan.
Kita perlu membuat bahwa daftar yang harus dilakukan,
dan tidak akan lebih baik jika kita bisa menyediakan untuk setiap model
atau mengasosiasikan dengan masing-masing model pandangan ini
yang memungkinkan kita untuk kurasa menghubungkan dua bersama-sama?
Padahal sebelumnya kami harus menggunakan untuk loop yang akan dijalankan melalui
setiap todo dalam daftar kami dan kemudian mencetaknya di sini
pada dasarnya kita dapat menghubungkannya dengan model ini.
Ini adalah tampilan agenda.
Hal ini terkait dengan todo kami temukan sebelumnya.
Sekarang setiap todo yang dapat ditampilkan atau renderable
oleh ini untuk tampilan agenda.
Perhatikan beberapa bidang.
Apa yang Anda pikir TagName ini, TagName: li?
Ingat dari sebelumnya ketika kita ingin membuat sebuah todo
kita harus secara eksplisit memasangkan todos kami dengan tag li ini.
Sekarang kita mengatakan bahwa di mana todo ini akan hidup
akan menjadi dalam sebuah tag li.
Dan sekarang kita juga mengasosiasikan acara dengan todos kami.
>> Setiap todo memiliki acara yang satu ini.
Jika Anda mengklik cukup banyak tombol toggle, itulah yang saya katakan di sana,
maka pada dasarnya menandai todo sebagai kebalikan dari apa itu sebelumnya
dan kemudian kembali membuat aplikasi.
Ini adalah jenis yang mirip dengan kode sebelumnya.
Ingat ketika kita ditandai sebagai salah satu lawan atau
dan kemudian kami kembali diberikan tersebut.
Tapi perhatikan sekarang acara ini digunakan untuk menjadi sesuatu yang dalam HTML.
Itu duduk di sana.
Tombol memiliki klik.
Ketika Anda mengklik tombol, jenis melakukan hal-hal untuk
mengatur bahwa todo tidak lengkap.
Di sini kita telah terkait bahwa hal mengklik tombol togel
dan membalikkan apakah itu aktif atau tidak aktif dengan pandangan ini.
>> Ini adalah cara yang baik untuk menyiapkan acara ini sehingga sangat terikat erat
pandangan ini, dan melihat satu ini lagi.
Saya memiliki metode render, dan kita tidak harus pergi melalui rincian.
Ini sama halnya dengan apa yang kita miliki sebelumnya,
tapi perhatikan aku tidak perulangan melalui apa-apa.
Saya tidak mencetak bahwa tag ul itu semacam mengatakan saya akan mencetak semua elemen.
Saya menyediakan fungsi untuk render yang satu ini harus dilakukan barang.
Ini adalah konsep yang sangat kuat karena pada dasarnya
kami to-do list terdiri dari semua todos ini, dan jika kita pada dasarnya dapat menentukan
cara untuk membuat salah satu dari mereka todos
maka kita dapat memiliki tulang kuat kami per se membuat semua todos
dengan memanggil metode render pada todos individu.
Ini adalah konsep yang berguna di sini.
Sekarang pertanyaan yang baik untuk bertanya adalah bagaimana aplikasi ini sedang disatukan?
Karena kita memiliki kemampuan untuk membuat satu todo,
tapi bagaimana kita mendapatkan ide beberapa todos?
>> Mari kita lihat pada saat itu.
Ini adalah bagian terakhir.
Perhatikan kita memiliki to-do tampilan daftar di sini,
dan perhatikan itu juga pandangan.
Dan untuk pergi ke beberapa hal,
Metode ini initialize akan dipanggil ketika kita pertama kali membuat ini daftar to-do.
Seperti yang Anda lihat, itu seperti membuat to-do list dan mengaitkannya dengan pandangan ini.
Lalu aku menambahkan fungsi di sini jadi pada dasarnya ketika Anda menambahkan item-
ini mirip dengan metode addItem kita lihat sebelumnya-
Aku akan membuat objek todo baru, dan perhatikan aku benar-benar memanggil
ini metode todo baru, jadi ini disediakan oleh Backbone,
dan saya dapat lulus dalam properti saya di sini.
Dan sekarang setiap todo yang saya buat dengan menggunakan ini akan mendapatkan fungsi yang kita lihat sebelumnya.
Perhatikan Aku membersihkan kotak teks sebelum-sedikit kecil rinci-
dan kemudian saya menambahkan koleksi ini.
>> Ini hampir tampaknya aneh karena sebelum kami hanya harus melakukan todos.push itu,
dan kemudian kami selesai, dan ini mungkin tampak lebih rumit untuk proyek khusus ini,
dan Anda mungkin menemukan bahwa Backbone atau bahkan sudut atau kerangka lainnya
tidak sesuai dengan proyek tertentu, tapi saya pikir sangat penting untuk berpikir tentang
apa artinya ini pada skala yang lebih besar untuk proyek-proyek yang lebih besar,
karena jika kita memiliki proyek yang lebih besar di mana kami mewakili
beberapa koleksi benar-benar kompleks, sesuatu yang lebih dari sekedar to-do list,
katakanlah daftar teman atau sesuatu seperti itu, ini bisa berguna
karena kita bisa mengatur kode kami dengan cara yang benar-benar nyaman,
dengan cara yang akan membuat lebih mudah bagi orang lain
yang ingin mengambil sebuah proyek untuk membangun di atas.
Anda dapat melihat bahwa ini menyediakan banyak struktur.
Dan kemudian saya menelepon membuat di addItem ini.
Render, seperti yang Anda lihat, dan Anda tidak perlu memahami sintaks ini penuh,
tetapi pada dasarnya untuk setiap model itu akan memanggil metode render individu.
Itu semacam mana ini berasal dari.
Mari kita hanya menentukan bagaimana menerjemahkan todos individu,
dan kemudian mari kita lem mereka bersama-sama secara keseluruhan.
Tapi ini menyediakan cara abstraksi,
karena saya bisa mengubah cara saya memutuskan untuk membuat todos individu,
dan saya tidak akan mengubah apapun kode ini.
Itu agak dingin.
>> Apakah ada yang memiliki pertanyaan tentang kerangka kerja JavaScript?
[Pertanyaan terdengar Mahasiswa]
Oh, tentu, itu pertanyaan yang bagus.
Pertanyaannya adalah bagaimana saya termasuk kerangka kerja?
Kebanyakan kerangka JavaScript pada dasarnya hanya file js
yang dapat Anda masukkan di atas kode Anda.
Perhatikan di bagian kepala HTML saya, saya memiliki semua tag script,
dan tag akhir script adalah kode yang kami telah menulis.
Dan kemudian kode 3 kerangka hanya juga tag script.
Aku termasuk mereka dari apa yang disebut CDN,
yang memungkinkan saya untuk mendapatkannya dari orang lain pada saat ini
tapi setiap kerangka kerja memiliki ini-Anda dapat cukup banyak menemukan konten
untuk perpustakaan JavaScript tertentu yang tersedia pada beberapa CDN atau sesuatu seperti itu,
dan kemudian Anda dapat menyertakan tag script.
Apakah itu masuk akal?
Keren.
>> Mereka adalah 2 pendekatan yang berbeda.
Itu bukan satu-satunya pendekatan untuk memecahkan masalah ini.
Ada banyak hal yang berbeda yang
seseorang bisa lakukan, dan ada banyak kerangka kerja di luar sana.
Angular dan Backbone tidak menceritakan keseluruhan cerita.
Good luck dengan proyek akhir Anda, dan terima kasih banyak.
[CS50.TV]