[Powered by Google Translate] [Seminar] [Rangka Kerja JavaScript: Mengapa dan Bagaimana] [Kevin Schmid] [Universiti Harvard] [Ini adalah CS50.] [CS50.TV] 

Hi, semua orang. Selamat datang ke seminar Rangka Kerja JavaScript. Nama saya Kevin, dan hari ini saya akan bercakap tentang rangka kerja JavaScript, dan matlamat seminar ini bukan untuk anda, katakan, menguasai kerangka tertentu per se tetapi untuk memberikan pengenalan yang luas kepada beberapa rangka kerja dan menunjukkan mengapa kita pernah mahu menggunakan rangka kerja. 

Sebelum saya berbuat demikian, saya akan memberikan sedikit latar belakang dalam JavaScript, dan kemudian kami akan mengambil dari sana. Kami akan bermula dengan melaksanakan senarai to-do. Berikut adalah senarai tugas kita untuk hari ini. Ia adalah jenis lucu. Kami perlu melaksanakannya senarai tugasan dalam JavaScript. Ini adalah apa yang ia akan kelihatan seperti, jadi itulah matlamat pertama kami. Kami tidak akan menggunakan rangka kerja untuk berbuat demikian. Kami akan kod JavaScript dan mendapatkan senarai tugasan untuk bekerja. Kemudian kita akan memperbaiki reka bentuk tanpa menggunakan rangka kerja. Kami akan membincangkan pelbagai perkara yang kita boleh lakukan dengan hanya JavaScript sahaja membuat kami untuk tugasan menyenaraikan sedikit direka lebih baik. Kemudian kita akan membuang dalam beberapa jQuery, dan kemudian kita akan melihat pada masa yang sama untuk senarai tugasan, hanya dilaksanakan dalam rangka kerja yang berbeza, dan kita akan membincangkan  kebaikan dan keburukan di sepanjang jalan. 

Mari kita mula melaksanakan bahawa senarai tugasan. Katakan kita diberikan HTML ini. Saya akan membuat ini lebih kecil sedikit. Seperti yang anda lihat, saya mempunyai tajuk kecil yang mengatakan Todo dan kotak kecil di mana saya boleh memasukkan penerangan mengenai todo dan kemudian butang item baru, jadi mari kita cuba untuk memasukkan todo baru kepada senarai ini. Beri seminar rangka kerja JavaScript, dan saya untuk memukul item baru. Saya mendapat amaran JavaScript ini yang mengatakan melaksanakan saya. Kami telah mendapat untuk melaksanakannya. Mari kita lihat kod untuk ini, kedua-dua HTML dan JavaScript. Berikut adalah HTML kami. Seperti yang anda boleh lihat di sini, di sini Todos tajuk kecil kita. Itu adalah perkara yang berani di atas, dan kemudian kita mempunyai kotak input dengan ruang letak, dan kemudian ada satu sifat yang tertentu butang ini yang menyeru ini addTodo berfungsi. Adakah sesiapa mahu rasa apa yang di klik ini menandakan? [Pelajar balas didengar] Baik, klik di atas adalah jenis seperti acara, seperti klik tetikus hanya satu acara dan apa yang kami lakukan adalah kita mengikat sekiranya klik butang ini untuk melaksanakan fungsi itu. AddTodo ialah pengendali peristiwa untuk menekan butang itu. 

Seperti yang anda boleh lihat, apabila saya klik butang item baru Sekiranya klik pada mendapat dipecat, dan fungsi ini mendapat dipanggil. Mari kita lihat fungsi. Seperti yang anda lihat, di sini kod JavaScript saya setakat ini. Apa yang saya ada di atas adalah satu struktur data global untuk senarai tugasan saya. Ia kelihatan seperti array. Ia hanya pelbagai kosong. Dan kemudian saya mempunyai fungsi addTodo yang kita lihat sebelum ini, dan satu-satunya baris kod di sana adalah amaran ini. Ia melaksanakan amaran saya, dan kemudian saya mempunyai 2 tugas di tangan. Saya perlu menambah todo untuk bahawa struktur data global, dan kemudian saya ingin menarik keluar senarai to-do. Tiada apa-apa terlalu suka sahaja lagi, tetapi JavaScript anda mungkin tidak biasa dengan, jadi saya akan pergi perlahan dan mengkaji asas-asas JavaScript dengan cara itu. 

Mari kita memberikan ini pukulan. Katakan pengguna memasukkan sesuatu di dalam kotak ini. Saya hanya menaip sesuatu di sini, teks. Bagaimana saya menyusun akses bahawa teks melalui JavaScript? Ingatlah bahawa JavaScript, salah satu ciri-ciri asas adalah bahawa ia memberikan kita ini akses kepada perancangan DOM. Ia membolehkan kita untuk mengakses unsur-unsur dan sifat-sifat mereka HTML ini yang sebenar. Cara kita melakukannya dengan kosong tulang JavaScript ialah kita sebenarnya boleh menggunakan fungsi dalam JavaScript dipanggil getElementByID. Saya mahu menyimpan teks yang ditaip yang terdapat dalam beberapa berubah-ubah, jadi saya akan mengatakan yang berubah-ubah baru yang dipanggil new_todo, dan saya akan mendapat elemen itu. Ini adalah fungsi,. GetElementByID. Dan kini saya mendapat satu elemen dengan ID, jadi saya memerlukan ID kotak teks, jadi saya telah diberikan new_todo_description ID. Itulah bagaimana saya akan mendapatkan unsur. Itulah hujah saya untuk fungsi ini, untuk menentukan yang ID untuk mendapatkan. Dan supaya satu elemen dalam HTML, dan ia mempunyai ciri-ciri. Anda telah melihat ini. Mereka sifat. Sifat elemen teks yang menyimpan input pengguna dipanggil nilai. Saya disimpan nilai yang kotak teks kini dalam pembolehubah ini dipanggil new_todo. Sekarang saya mempunyai akses perancangan untuk berubah-ubah ini, yang jenis sejuk kerana sekarang apa yang boleh saya lakukan ialah saya boleh menambah ke senarai tugasan saya. 

Cara kami akan melakukan ini dalam JavaScript dan jangan bimbang jika anda tidak biasa dengan ini, tetapi hanya akan melaluinya adalah todos.push kerana itulah nama struktur data global saya di sini, dan saya akan menolak new_todo. Ini bagus kerana sekarang saya telah menambah kepada saya JavaScript perwakilan bahawa senarai tugasan. Tetapi sekarang bagaimana saya boleh mendapatkan kembali ke HTML? Saya perlu mencari jalan untuk menyelesaikan daripada menolak kembali. Dalam erti kata lain, saya jenis perlu menarik ini. Apa yang kita akan lakukan ialah kita akan membuat senarai tugasan. Saya perlu mengemaskinikan HTML yang lain pada laman tersebut, dan seperti yang anda boleh lihat, saya telah meninggalkan bekas kecil di sini, pembahagi ini halaman yang ID todos, dan saya akan meletakkan senarai tugasan di sana. Pertama saya akan jelas ia keluar kerana, berkata, terdapat lama senarai tugasan di sana. Saya mendapat bahawa dengan elemen ID lagi, dan saya mengakses HTML dalaman elemen itu, dan saya akan menjelaskan bahawa. Jika kita meninggalkan kod ini, kita akan melihat apa-apa yang kosong di sana, dan sekarang saya ingin memulakan senarai baru menjadikan tugasan saya. Saya pada dasarnya akan menghapuskan senarai tugasan saya. 

Kini di dalam dalaman HTML itu div todos benar-benar jelas, dan sekarang saya perlu mula menambah senarai saya. Perkara pertama yang saya ingin menambah kembali adalah tidak tertib senarai tag, yang pada asasnya menunjukkan bahawa ini adalah permulaan senarai tidak tertib. Sekarang untuk setiap elemen dalam array todos saya, saya ingin mencetak dalam HTML itu. Saya mahu menambah ia ke bawah senarai ini. Sama seperti dalam C, saya boleh menggunakan untuk gelung, dan saya akan bermula pada awal senarai saya elemen di 0, dan saya akan pergi sepanjang jalan dengan panjang senarai. Kami benar-benar boleh mendapatkan panjang pelbagai dalam JavaScript menggunakan harta panjang. Pada asasnya saya akan melakukan sesuatu yang hampir sama dalam sini untuk mencetak unsur itu. Saya sekali lagi boleh mengakses div todos, harta HTML dalaman itu, dan saya akan menambah pada item senarai baru ini, dan itu akan dikelilingi oleh ini tag li, dan saya akan concatenate dengan operator + yang, dan itulah unsur-i daripada pelbagai todos saya, dan kemudian saya akan menutup tag itu. Sekarang untuk setiap elemen yang kita akan menambah kemasukan senarai baru. Dan kemudian semua yang kita benar-benar perlu lakukan ialah menutup tag itu. Saya hanya perlu untuk menutup bahawa tidak tertib senarai tag. 

Adakah anda mendapatkan rasa untuk bagaimana bahawa kerja-kerja? Ini membuka senarai keseluruhan. Ini menambah unsur-unsur individu dari senarai todos untuk senarai, dan kemudian yang menutup seluruh senarai, dan ini adalah fungsi addTodo saya. Saya pada dasarnya bermula dengan mendapat todo dari kotak teks. Saya menambah bahawa untuk pelbagai todos, dan kemudian I-menyebabkan semula senarai tugasan. Sekarang saya boleh menambah item ke senarai saya. Ini adalah jenis yang menarik kerana dalam hanya beberapa baris kod kita pada dasarnya membuat senarai tugasan di mana kita boleh menambah item. Besar. Itulah jenis pengenalan asas kepada JavaScript. Jangan bimbang terlalu banyak tentang sintaks untuk sekarang, tetapi berfikir tentang konsep ini. Kami mempunyai beberapa HTML. Kami mempunyai kotak teks pada halaman yang pada dasarnya membolehkan pengguna untuk input item tugasan untuk menambah. Dan kemudian kita digunakan JavaScript untuk mengambil todo bahawa dari kotak teks. Kami yang disimpan di dalam pelbagai JavaScript, yang pada asasnya seperti perwakilan perancangan kami bahawa untuk senarai tugasan, dan kemudian kita dicetak keluar. Ini adalah todos.js. 

Ini adalah jenis sejuk, tetapi bagaimana kita boleh mengambil ini dengan lebih lanjut? Well, seperti yang anda boleh lihat, ini tidak seperti senarai tugasan yang lengkap. Sebagai contoh, saya tidak boleh menyekat mana-mana barang-barang ini sebagai tidak lengkap, suka jika saya mahu menyusun keutamaan barang-barang atau memadam item. Ini adalah baik-baik saja, tetapi kita boleh mengambil ini dengan lebih lanjut. Saya tidak akan bercakap terlalu banyak tentang menambah ciri-ciri tambahan, tetapi kita boleh mengambil yang jauh. Mari kita bercakap tentang menambah satu lagi ciri ini untuk senarai tugasan, yang akan dapat untuk memeriksa individu untuk melakukan perkara dan ia menyeberang keluar, jadi pada dasarnya mengatakan yang saya lakukan ini. Mari kita lihat beberapa kod yang boleh mencapai itu. Perhatikan apa yang saya lakukan di atas adalah saya telah menambah pelbagai global baru yang dikenali sebagai lengkap. Saya pada dasarnya menggunakan ini untuk menyimpan sama ada perkara-perkara yang pada senarai untuk-do lengkap atau tidak. Ini adalah satu cara untuk melakukan ini. Jika saya melihat pelaksanaan ini, paparan, pada dasarnya jika saya memasuki todo dan saya tekan butang ini toggle ia melintasi keluar, jadi setiap item di dalam senarai ini mempunyai sama ada lengkap atau keadaan yang tidak lengkap, dan saya menggunakan pelbagai lain untuk mewakili. 

Pada asasnya bagi setiap todo kerana pelbagai todos ada satu perkara di dalam pelbagai lengkap yang pada asasnya menunjukkan sama ada lengkap atau tidak. Saya mempunyai untuk membuat perubahan yang agak minimum kepada kod ini, jadi di sini adalah fungsi addTodo kami. Perhatikan bahawa di sini saya menolak ia ke pelbagai, dan kemudian saya menolak 0 a dengan pelbagai lengkap, asasnya selari dengan yang menolak todo baru untuk mengatakan Saya menambah perkara ini, dan ia ditambah pula dengan nilai ini, yang bermaksud bahawa ia adalah tidak lengkap. Dan kemudian saya persempadanan semula senarai untuk-do. Sekarang, melihat saya telah menambah fungsi ini drawTodoList. Ini mengambil banyak kod yang kami sebelum ini, pada dasarnya hilang keluar kotak dan kemudian menarik baru untuk senarai tugasan. Tetapi melihat bahawa di dalam ini untuk gelung yang kita lakukan lebih sedikit sekarang. Kami pada dasarnya memeriksa sama ada perkara yang sama untuk todo ke-i di sini selesai, dan kami berkelakuan berbeza dalam 2 keadaan. Jika ia lengkap, kami menambah tag del ini, yang pada asasnya cara yang anda boleh mendapatkan mogok yang melalui kesan melintas keluar senarai tugasan jika ia lengkap, dan jika tidak, kita tidak termasuk ia. Dan sebagainya yang jenis menjaga itu, 

dan itulah salah satu cara untuk mencapai ini. Dan kemudian notis apabila pengguna klik salah satu daripada kita bertukar-tukar status siap itu. Apabila pengguna klik, kami akan mengubah sama ada ia telah selesai atau tidak, dan kemudian kita akan melukis itu. Ini jenis kerja-kerja. Kami mempunyai fungsi-fungsi yang menjalankan tugas-tugas mereka sendiri, dan ini adalah okay. Adakah apa-apa yang kita boleh lakukan yang lebih baik tentang perkara ini, walaupun? Notis ini kita mempunyai 2 barisan global. Jika ini adalah C, dan kami mempunyai 2 barisan yang jenis diwakili data yang telah jenis yang berkaitan dalam beberapa cara apa yang kita akan gunakan dalam C untuk menggabungkan ini 2 bidang menjadi sesuatu yang merangkumi kedua-dua keping maklumat? Sesiapa yang ingin membuat cadangan? [Pelajar balas didengar] 

Tepat sekali, jadi kita boleh menggunakan beberapa jenis struct, dan jika anda berfikir kembali, katakan, pset 3, ingat kita mempunyai kamus, dan kemudian kita mempunyai sama ada perkataan adalah di dalam kamus, dan semua maklumat yang telah meletakkan bersama-sama dalam struktur data tertentu. Satu perkara yang boleh saya lakukan dengan kod ini untuk mengelakkan ini 2 array berbeza untuk buah yang sama maklumat adalah saya boleh menggabungkan mereka ke dalam objek JavaScript. Mari kita lihat pada itu. Notis saya hanya mempunyai satu array di atas kini dan apa yang saya lakukan adalah-dan ini hanya sintaks JavaScript untuk jenis mewujudkan versi literal objek, dan notis terdapat 2 sifat, jadi kita perlu todo itu, dan ia disimpan bersama-sama dengan sama ada lengkap atau tidak lengkap. Ini adalah kod yang sama. Kami menggunakan objek JavaScript. Ini jenis perkara yang ditambah baik. Seperti sekarang, semua bidang yang berkaitan maklumat yang disimpan bersama-sama. Apabila kita pergi ke mencetak, kita boleh mengakses bidang. 

Perhatikan bagaimana kami lakukan todos [i]. Lengkap bukannya menyemak pelbagai lengkap secara berasingan, dan notis apabila kita mahu mendapatkan tali untuk tugasan kami mendapat harta tugasan itu todo, jadi seperti ini masuk akal kerana setiap item mempunyai sifat-sifat intrinsik mengenainya. Ia mempunyai todo, dan ia mempunyai sama ada lengkap atau tidak. Tidak terlalu banyak perubahan ada fungsi, hanya menambah beberapa lebih kepada kod. Ini adalah satu peningkatan di beberapa bidang, betul? Maksud saya, kami mengambil kira daripada reka bentuk sedikit. Sekarang kita mempunyai objek pada dasarnya merangkumi data ini. Adakah terdapat apa-apa lagi yang boleh kita lakukan daripada sini dari segi JavaScript? Seperti notis bahawa kod ini di sini untuk mendapatkan HTML dalaman div a adalah sedikit, saya rasa, panjang. Ada document.getElementByID ("todos"). InnerHTML. Satu perkara yang kita boleh lakukan untuk membuat kod ini kelihatan sedikit mesra jadi saya tidak perlu menyimpan menatal ke kiri dan kanan, belakang dan sebagainya, adalah saya boleh menggunakan perpustakaan seperti jQuery. 

Mari kita lihat Seminar 2, dan ini adalah kod yang sama, tetapi ia dilakukan dengan jQuery. Anda mungkin tidak terlalu biasa dengan jQuery, tetapi hanya tahu bahawa jQuery adalah jenis perpustakaan untuk JavaScript yang menjadikan ia lebih mudah untuk melakukan perkara-perkara seperti unsur-unsur individu akses yang DOM. Di sini bukannya mengatakan document.getElementByID ("todos"). InnerHTML Saya boleh menggunakan cara yang lebih bersih dalam jQuery, yang hanya untuk menggunakan pemilih. Seperti yang anda boleh lihat, kod ini tidak mendapatkan yang lebih bersih kecil, hampir sama fungsi, tetapi itu idea. Kami telah melihat beberapa perkara yang setakat ini, jadi kita bermula dengan pelaksanaan JavaScript hanya mentah. Kami telah menambah ciri-ciri baru dan menunjukkan bagaimana kita boleh meningkatkan dengan hanya apa yang kita ada dalam JavaScript. 

Adakah sesiapa nampak apa-apa masalah dengan reka bentuk ini? Iaitu, saya rasa-atau tidak semestinya masalah tetapi katakan kami tidak melakukan projek senarai tugasan, dan esok kami memutuskan kita mahu membuat senarai kedai runcit atau senarai projek membeli-belah. Banyak ciri-ciri ini adalah sama. Banyak perkara yang kita mahu keluar JavaScript yang sangat biasa, dan ini menekankan keperluan untuk beberapa jenis cara membuat ini lebih mudah untuk dilakukan. Saya terpaksa untuk membina semua akses HTML ini, semua akses DOM ini, seperti saya akan mewakili senarai to-do dengan model ini. Dan sedar saya bertanggungjawab sebagai pemaju JavaScript untuk menjaga HTML dan JavaScript yang saya perlu selari. Tiada apa-apa yang dibuat secara automatik bahawa perwakilan JavaScript atau senarai tugasan mendapatkan ditolak keluar ke HTML. Tiada apa-apa yang dikuatkuasakan kecuali bagi saya. Saya terpaksa menulis seri tugasan fungsi senarai. Dan itu tidak mungkin-saya maksudkan, ia adalah munasabah untuk berbuat demikian, tetapi ia mungkin membosankan kadang-kadang. Jika anda mempunyai projek yang lebih besar, yang boleh menjadi sukar. 

Rangka kerja, salah satu tujuan rangka kerja adalah untuk memudahkan proses dan jenis daripada faktor ini biasa-Saya rasa anda boleh mengatakan corak reka bentuk bahawa rakyat umumnya mempunyai beberapa jenis cara yang mewakili data, sama ada yang adalah senarai rakan-rakan, sama ada itu maklumat peta atau sesuatu atau senarai tugasan. Sesetengah orang mempunyai umumnya cara yang mewakili maklumat, dan mereka biasanya perlu untuk memastikan bahawa jenis maklumat selari antara apa yang pengguna melihat dalam beberapa jenis pandangan, bercakap dari segi seperti pengawal pandangan model yang anda lihat dalam kuliah, dan kemudian model, yang dalam kes ini adalah pelbagai JavaScript ini. Rangka Kerja memberikan kita satu cara untuk menyelesaikan masalah itu. Sekarang mari kita lihat pelaksanaan ini senarai tugasan dalam rangka kerja yang dipanggil angularjs. Ini adalah ia. Notis ia sesuai pada slaid. Saya tidak mempunyai untuk menatal ke kiri dan kanan. Ini mungkin bukan alasan yang baik untuk mengesyorkan menggunakan rangka kerja, tetapi notis saya pernah mengakses elemen HTML individu di sini? Saya pernah pergi ke DOM? Adakah anda melihat apa-apa document.getElementByID atau sesuatu seperti itu? Tidak, itu hilang. 

Sudut membantu kita menyimpan DOM dan perwakilan JavaScript kami sesuatu jenis selari, jadi jika ia tidak dalam fail js itu, jika tidak ada cara programatik mendapat kepada semua bahawa kandungan HTML daripada JavaScript bagaimana kita menjaga ini selari? Jika ia bukan dalam fail js., Ia mendapat menjadi dalam HTML, bukan? Ini adalah versi baru fail HTML, dan notis kami telah menambah banyak di sini. Notis ada sifat-sifat baru yang mengatakan ng-klik dan ng-ulang. Pendekatan sudut untuk menyelesaikan masalah ini kesukaran dalam reka bentuk adalah pada dasarnya membuat HTML lebih kuat. Sudut adalah satu cara yang membolehkan anda untuk membuat HTML agak lebih ekspresif. Sebagai contoh, saya boleh mengatakan bahawa saya akan mengikat atau mengikat kotak teks ini untuk berubah-ubah dalam kod JavaScript sudut saya. Ini ng-model tidak hanya itu. Yang pada dasarnya mengatakan bahawa perkara itu di dalam kotak teks ini, hanya mengaitkan dengan new_todo_description berubah-ubah dalam kod JavaScript. Itulah yang sangat kuat kerana saya tidak perlu jelas pergi ke DOM untuk mendapatkan maklumat tersebut. Saya tidak perlu mengatakan document.getElementByID. Saya tidak perlu menggunakan jQueries seperti akses DOM. Saya boleh mengaitkannya dengan berubah-ubah, dan kemudian apabila saya menukar yang berubah-ubah dalam JavaScript ia disimpan dalam selari dengan HTML, supaya memudahkan proses perlu pergi berulang-alik antara kedua-dua. Adakah ini masuk akal? 

Dan notis tidak ada kod akses HTML. Kami hanya membuat HTML yang lebih kuat, dan kini, sebagai contoh, kita boleh melakukan perkara-perkara seperti ini, seperti apabila anda klik pada ini, memanggil fungsi ini dalam skop todos.js, dan kita boleh berbuat demikian sebelum ini, tetapi ada perkara-perkara lain, seperti ini ng-model, dan notis ini ng-ulang. Apa yang anda fikir ini tidak? Berikut adalah senarai tidak tertib dari sebelum ini. Kami mempunyai tag ul, tetapi saya pernah memberikan senarai itu dalam kod JavaScript? Saya tidak pernah jelas memberikan senarai itu. Bagaimanakah ini berfungsi? Nah, sudut cara melakukan ini adalah ini dipanggil pengulang. Pada asasnya ini mengatakan bahawa saya ingin mencetak HTML ini bagi tiap-tiap dalam todo array todos saya. Di dalam todos.jr terdapat pelbagai todos di sini, dan ini akan memberitahu pergi melalui pelbagai sudut itu, dan bagi setiap elemen yang anda lihat Saya mahu anda untuk mencetak HTML ini. Ini adalah jenis hebat kerana saya hanya boleh melakukan ini tanpa perlu menulis untuk gelung, yang untuk senarai tugasan yang hanya 30 baris kod tidak mungkin perkara yang paling bermanfaat, tetapi jika anda mempunyai satu projek yang besar, ini boleh menjadi sangat mudah. 

Ini adalah salah satu penyelesaian kepada masalah ini, membuat HTML yang lebih kuat, dan yang membolehkan kita untuk menjaga JavaScript dan HTML selari. Terdapat cara lain yang mungkin untuk menyelesaikan masalah ini, dan bukan setiap rangka melakukan ini. Bukan semua rangka kerja-kerja bersama-sama ayat-ayat ini. Beberapa rangka kerja mempunyai pendekatan yang berbeza, dan anda mungkin mendapati bahawa anda menikmati kod dalam satu rangka kerja berbanding dengan yang lain. Mari kita lihat satu lagi. Ini adalah senarai tugasan dikodkan dalam rangka kerja yang dipanggil Tulang Belakang. Saya akan pergi melalui ini dengan cepat. Saya akan mulakan dengan HTML sebelum kita pergi ke sana. Yang kedua. Bermula dengan HTML, seperti yang anda notis, HTML kami adalah amat serupa kepada apa yang ia sebelum ini, jadi tidak terlalu banyak baru di hadapan itu. Tetapi fail js kami adalah sedikit berbeza. Jenis tulang belakang mempunyai idea ini, atau membina idea bahawa banyak daripada apa yang kita lakukan dengan, berkata, projek-projek JavaScript kami sedang berfikir tentang model dan koleksi model ini. Ini boleh menjadi, contohnya, gambar dan koleksi gambar, atau idea rakan dan koleksi rakan-rakan. Dan acap kali apabila kita pengaturcaraan aplikasi JavaScript kami akan menyusun daripada mewakili idea yang mempunyai koleksi kawan-kawan entah bagaimana dalam JavaScript, Tulang Belakang dan memberikan kita lapisan ini di atas barisan yang sedia ada dan objek JavaScript ini melakukan perkara-perkara yang lebih kuat dengan lebih mudah. 

Di sini saya telah ditakrifkan model untuk-do, dan anda tidak perlu bimbang terlalu banyak tentang sintaks, tetapi notis bahawa apa yang salah satu daripada ciri-ciri ini? Ia mempunyai bidang lalai. Tulang belakang membolehkan saya nyatakan sudah off kelawar apa-apa yang baru untuk tugasan yang saya buat akan mempunyai ini mungkir. Sekarang saya boleh menyesuaikan ini, tetapi dapat menentukan mungkir adalah baik, dan ia adalah jenis yang mudah kerana ini bukan sesuatu yang seperti wujud dalam JavaScript, dan sekarang saya tidak perlu jelas mengatakan bahawa todos tidak lengkap. Saya boleh katakan hak off kelawar yang todos akan ditandakan sebagai tidak lengkap. Notis maka apakah ini? Sekarang saya mempunyai senarai tugasan, dan itulah koleksi. Notis bidang yang berkaitan dengan yang mengatakan model todo. Ini adalah cara saya memberitahu bahawa Tulang Belakang Saya akan berfikir tentang koleksi ini todos individu. Ini adalah pada asasnya struktur model bagi program saya. Di sini saya mempunyai idea ini koleksi, dan pada dasarnya perkara yang terkandung dalam koleksi yang semuanya akan menjadi ini todos, dan yang sangat semula jadi dalam hal ini kerana saya mempunyai todos, dan saya mempunyai mereka dalam koleksi. 

Mari kita lihat sedikit lebih daripada ini. Berikut adalah pandangan Tulang Belakang. Perkara lain yang Tulang Belakang mengatakan adalah bahawa banyak model yang anda berfikir tentang atau koleksi akan perlu mempunyai beberapa cara yang dipaparkan. Kita perlu menjadikan bahawa senarai tugasan, dan ia tidak akan lebih baik jika kita boleh mengadakan peruntukan bagi setiap model atau bersekutu dengan setiap model pandangan ini yang membolehkan kita untuk menyambung saya rasa kedua-dua bersama-sama? Sedangkan sebelum kita terpaksa menggunakan untuk gelung yang akan dijalankan melalui setiap todo dalam senarai kami dan kemudian mencetak di sini kita pada dasarnya boleh menyambung dengan model ini. Ini adalah satu pandangan tugasan. Ini dikaitkan dengan todo kami mendapati lebih awal. Sekarang setiap todo adalah dapat dipaparkan atau renderable oleh tugasan ini pandangan. Notis beberapa bidang. Apa yang anda fikir tagName ini, tagName: li? Ingat dari sebelum ini apabila kita mahu untuk memberi a todo kita perlu jelas berpasangan todos kami dengan ini tag li. Sekarang kita katakan bahawa jika todo ini akan hidup akan berada di dalam sebuah tag li. Dan sekarang kita juga sedang mengaitkan peristiwa dengan todos kami. 

Setiap todo mempunyai acara yang satu ini. Jika anda klik cukup banyak butang togol, itulah yang saya katakan di sana, maka pada dasarnya menandakan todo sebagai bertentangan dengan apa yang ia adalah sebelum dan kemudian semula menyebabkan permohonan. Ini adalah jenis yang sama dengan kod sebelum ini. Ingatlah apabila kita ditandakan sebagai sama ada bertentangan atau- dan kemudian kita-diberikan semula. Tetapi notis kini acara ini digunakan untuk menjadi sesuatu yang berada di dalam HTML. Ia duduk di sana. Butang mempunyai klik pada. Apabila anda klik butang, ia jenis tidak barangan untuk ditubuhkan yang todo tidak lengkap. Di sini kita telah dikaitkan peristiwa yang mengklik butang yang toggle dan menterbalikkan sama ada pada atau di luar dengan pandangan ini. 

Ini adalah cara yang baik untuk menubuhkan peristiwa ini supaya ia sangat ketat terikat pandangan ini, dan notis yang satu ini lagi. Saya mempunyai kaedah render ini, dan kita tidak perlu untuk pergi melalui butir-butir. Ia adalah jenis yang sama dengan apa yang kita ada sebelum ini, tetapi notis Saya tidak gelung melalui apa-apa. Saya tidak mencetak bahawa tag ul itulah jenis mengatakan saya akan mencetak semua unsur-unsur. Saya memberikan fungsi untuk memberikan satu tugasan ini item. Ini adalah satu konsep yang sangat kuat kerana pada dasarnya kami senarai tugasan terdiri daripada semua todos, dan jika kita pada dasarnya boleh menentukan cara untuk menyebabkan salah seorang daripada mereka todos maka kita boleh mempunyai tulang belakang yang kuat kami per se menyebabkan semua todos dengan memanggil kaedah render pada todos individu. Ini adalah satu konsep yang berguna di sini. Sekarang soalan yang baik untuk ditanya ialah bagaimana permohonan ini diletakkan bersama-sama? Kerana kita mempunyai keupayaan untuk menyebabkan satu todo, tetapi bagaimana kita mendapat idea pelbagai todos? 

Mari kita lihat pada itu. Ini adalah bahagian yang lalu. Notis kita mempunyai pandangan senarai tugasan di sini, dan notis ia juga pandangan. Dan untuk pergi ke atas beberapa perkara, memulakan kaedah ini akan dipanggil apabila kita mula-mula membuat senarai to-do ini. Seperti yang anda lihat, ia seperti mewujudkan senarai tugasan dan mengaitkannya dengan pandangan ini. Dan kemudian saya menambah fungsi di sini, supaya pada asasnya apabila anda menambah item- ini adalah sama dengan kaedah yang addItem kita lihat sebelum- Saya akan membuat objek todo baru, dan notis Saya sebenarnya memanggil kaedah ini todo baru, jadi ini disediakan oleh Tulang Belakang, dan saya boleh lulus dalam hartanah saya di sini. Dan kini setiap todo yang saya cipta dengan menggunakan ini akan mendapat bahawa fungsi yang kita lihat sebelum ini. Notis saya penjelasan daripada kotak teks detail-sebelum-sedikit kecil dan kemudian saya menambah koleksi ini. 

Ini hampir seolah-olah pelik kerana sebelum kita terpaksa melakukan todos.push itu, dan kemudian kami telah dilakukan, dan ini mungkin kelihatan lebih rumit untuk projek ini khususnya, dan anda mungkin mendapati bahawa Tulang Belakang atau sudut atau mana-mana rangka kerja lain tidak sesuai dengan projek tertentu anda, tetapi saya fikir ia adalah penting untuk berfikir tentang apa ini bermakna pada skala yang lebih besar untuk projek-projek yang lebih besar, kerana jika kita mempunyai projek yang lebih besar di mana kita telah mewakili beberapa koleksi benar-benar kompleks, sesuatu yang lebih mendalam daripada hanya satu senarai tugasan, katakan senarai rakan-rakan atau sesuatu seperti itu, ini boleh datang dalam berguna kerana kita boleh menganjurkan kod kami dengan cara yang benar-benar mudah, dengan cara yang akan membuat ia lebih mudah untuk orang lain yang mahu mengambil satu projek untuk membina. Anda boleh melihat bahawa ini memberikan banyak struktur. Dan kemudian saya menyeru menyebabkan pada addItem ini. Menyebabkan, seperti yang anda lihat, dan anda tidak perlu memahami sintaks ini penuh, tetapi pada dasarnya untuk setiap model ia akan memanggil kaedah render individu. Itulah jenis di mana ini datang dari. Mari kita menentukan bagaimana untuk menyebabkan todos individu, dan kemudian mari kita gam mereka bersama-sama secara keseluruhan. Tetapi ini menyediakan satu cara pengambilan, kerana saya dapat mengubah cara saya membuat keputusan untuk menjadikan todos individu, dan saya tidak akan mempunyai untuk menukar mana-mana kod ini. Itulah jenis sejuk. 

Adakah sesiapa mempunyai apa-apa soalan mengenai rangka kerja JavaScript? [Pelajar soalan didengar] Oh, pasti, itu adalah satu soalan yang besar. Persoalannya ialah bagaimana saya termasuk rangka kerja? Rangka kerja JavaScript yang pada dasarnya hanya fail js yang boleh anda termasuk di bahagian atas kod anda. Notis di bahagian kepala HTML saya, saya mempunyai semua tag skrip, dan tag skrip akhir adalah kod yang kita tulis. Dan kemudian 3 kod rangka kerja hanya juga tag skrip. Saya termasuk mereka daripada apa yang dipanggil CDN a, yang membolehkan saya untuk mendapatkannya dari orang lain pada ketika ini tetapi setiap mempunyai rangka kerja ini-anda cukup banyak boleh mencari kandungan yang untuk perpustakaan JavaScript tertentu boleh didapati di beberapa CDN atau sesuatu seperti itu, dan kemudian anda boleh memasukkan tag skrip. Adakah ini masuk akal? Sejuk. 

Mereka adalah 2 pendekatan yang berbeza. Mereka bukan sahaja pendekatan untuk menyelesaikan masalah ini. Terdapat banyak perkara yang berbeza yang seseorang boleh lakukan, dan terdapat banyak rangka kerja di luar sana. Sudut dan tulang belakang tidak memberitahu seluruh kisah. Nasib baik dengan projek-projek akhir anda, dan terima kasih sangat. [CS50.TV]