Backbone adalah ...
... pustaka komponen yang sangat kecil yang dapat Anda gunakan untuk membantu mengatur kode Anda. Itu datang dikemas sebagai file JavaScript tunggal. Tidak termasuk komentar, ia memiliki kurang dari 1000 baris JavaScript yang sebenarnya. Ini ditulis dengan bijaksana dan Anda dapat membaca semuanya dalam beberapa jam.
Ini adalah perpustakaan front-end, Anda memasukkannya di halaman web Anda dengan tag skrip. Ini hanya memengaruhi browser, dan sedikit berbicara tentang server Anda, kecuali bahwa itu idealnya mengekspos API yang tenang.
Jika Anda memiliki API, Backbone memiliki beberapa fitur bermanfaat yang akan membantu Anda berbicara dengannya, tetapi Anda dapat menggunakan Backbone untuk menambahkan interaktivitas ke halaman HTML statis apa pun.
Backbone adalah untuk ...
... menambahkan struktur ke JavaScript.
Karena JavaScript tidak menerapkan pola tertentu, aplikasi JavaScript dapat menjadi sangat berantakan dengan sangat cepat. Siapa pun yang telah membangun sesuatu di luar hal-hal sepele dalam JavaScript kemungkinan akan menghadapi pertanyaan seperti:
- Di mana saya akan menyimpan data saya?
- Di mana saya akan meletakkan fungsi saya?
- Bagaimana saya menghubungkan fungsi saya bersama-sama, sehingga mereka dipanggil dengan cara yang masuk akal dan tidak beralih ke spageti?
- Bagaimana saya bisa membuat kode ini dapat dikelola oleh pengembang yang berbeda?
Backbone berusaha menjawab pertanyaan-pertanyaan ini dengan memberi Anda:
- Model dan Koleksi untuk membantu Anda mewakili data dan koleksi data.
- Tampilan, untuk membantu Anda memperbarui DOM Anda ketika data Anda berubah.
- Sistem acara sehingga komponen dapat saling mendengarkan. Ini menjaga komponen Anda tetap tidak terpasang dan mencegah spagettifikasi.
- Satu set minimal konvensi yang masuk akal, sehingga pengembang dapat bekerja bersama pada basis kode yang sama.
Kami menyebutnya pola MV *. Model, Tampilan, dan tambahan opsional.
Tulang punggung ringan
Meskipun penampilan awal, Backbone sangat ringan, hampir tidak melakukan apa-apa. Apa yang dilakukannya sangat membantu.
Ini memberi Anda satu set objek kecil yang dapat Anda buat, dan yang dapat memancarkan acara dan mendengarkan satu sama lain. Anda dapat membuat objek kecil untuk mewakili komentar misalnya, dan kemudian objek commentView kecil untuk mewakili tampilan komentar di tempat tertentu di browser.
Anda dapat memberi tahu commentView untuk mendengarkan komentar dan menggambar ulang sendiri ketika komentar berubah. Bahkan jika Anda memiliki komentar yang sama ditampilkan di beberapa tempat di halaman Anda, semua pandangan ini dapat mendengarkan model komentar yang sama dan tetap sinkron.
Cara penyusunan kode ini membantu Anda agar tidak terjerat bahkan jika basis kode Anda menjadi sangat besar dengan banyak interaksi.
Model
Saat memulai, sangat umum untuk menyimpan data Anda baik dalam variabel global, atau dalam DOM sebagai atribut data . Keduanya memiliki masalah. Variabel global dapat saling bertentangan, dan umumnya merupakan bentuk yang buruk. Atribut data yang disimpan dalam DOM hanya dapat berupa string, Anda harus menguraikannya masuk dan keluar lagi. Sulit untuk menyimpan hal-hal seperti array, tanggal atau objek, dan mengurai data Anda dalam bentuk terstruktur.
Atribut data terlihat seperti ini:
<p data-username="derek" data-age="42"></p>Backbone memecahkan ini dengan menyediakan objek Model untuk mewakili data Anda dan metode terkait . Katakanlah Anda memiliki daftar todo, Anda akan memiliki model yang mewakili setiap item pada daftar itu.
Ketika model Anda diperbarui, itu akan menyalakan suatu peristiwa. Anda mungkin memiliki pandangan yang terkait dengan objek tertentu. Tampilan mendengarkan acara perubahan model dan membuat ulang itu sendiri.
Tampilan
Backbone memberi Anda objek View yang berbicara dengan DOM. Semua fungsi yang memanipulasi DOM atau mendengarkan acara DOM pergi di sini.
Tampilan biasanya mengimplementasikan fungsi render yang menggambar ulang seluruh tampilan, atau mungkin bagian dari tampilan. Tidak ada kewajiban untuk mengimplementasikan fungsi render, tetapi itu adalah konvensi umum.
Setiap tampilan terikat ke bagian tertentu dari DOM, jadi Anda mungkin memiliki searchFormView, yang hanya mendengarkan formulir pencarian, dan shoppingCartView, yang hanya menampilkan keranjang belanja.
Tampilan biasanya juga terikat dengan Model atau Koleksi tertentu. Ketika Model diperbarui, ia akan menyalakan suatu acara yang dilihat oleh pendengarnya. Tampilan mungkin mereka sebut render untuk menggambar ulang sendiri.
Demikian juga, ketika Anda mengetik ke formulir, tampilan Anda dapat memperbarui objek model. Setiap tampilan lain yang mendengarkan model itu akan memanggil fungsi rendernya sendiri.
Ini memberi kita pemisahan keprihatinan yang bersih yang menjaga kode kita tetap rapi dan rapi.
Fungsi render
Anda dapat menerapkan fungsi render dengan cara apa pun yang Anda inginkan. Anda mungkin hanya memasukkan beberapa jQuery di sini untuk memperbarui DOM secara manual.
Anda mungkin juga mengkompilasi template dan menggunakannya. Templat hanyalah string dengan titik penyisipan. Anda meneruskannya ke fungsi kompilasi bersama dengan objek JSON dan mendapatkan kembali string yang dikompilasi yang dapat Anda masukkan ke DOM Anda.
Koleksi
Anda juga memiliki akses ke koleksi yang menyimpan daftar model, jadi todoCollection akan menjadi daftar model todo. Ketika sebuah koleksi mendapatkan atau kehilangan suatu model, mengubah urutannya, atau suatu model dalam suatu pembaruan koleksi, seluruh koleksi meluncurkan suatu peristiwa.
Tampilan dapat mendengarkan koleksi dan memperbarui dirinya sendiri setiap kali koleksi diperbarui.
Anda dapat menambahkan metode pengurutan dan filter ke koleksi Anda, dan membuatnya mengurutkan sendiri secara otomatis misalnya.
Dan Acara untuk Mengikat Semuanya
Sebisa mungkin, komponen aplikasi dipisahkan satu sama lain. Mereka berkomunikasi menggunakan acara, sehingga shoppingCartView dapat mendengarkan koleksi ShoppingCart, dan menggambar ulang sendiri ketika keranjang ditambahkan.
shoppingCartView.listenTo(shoppingCart, "add", shoppingCartView.render);Tentu saja, objek lain mungkin juga mendengarkan shoppingCart, dan mungkin melakukan hal-hal lain seperti memperbarui total, atau menyimpan keadaan di penyimpanan lokal.
- Tampilan mendengarkan Model dan menampilkan ketika model berubah.
- Tampilan mendengarkan koleksi dan merender daftar (atau kisi, atau peta, dll.) Saat item dalam koleksi berubah.
- Model mendengarkan Tampilan sehingga mereka dapat mengubah status, mungkin ketika formulir diedit.
Memisahkan objek Anda seperti ini dan berkomunikasi menggunakan acara berarti Anda tidak akan pernah tersimpul dalam simpul, dan menambahkan komponen dan perilaku baru itu mudah. Komponen baru Anda hanya perlu mendengarkan objek lain yang sudah ada di sistem.
Konvensi
Kode yang ditulis untuk Backbone mengikuti serangkaian konvensi yang longgar. Kode DOM termasuk dalam Tampilan. Kode koleksi termasuk dalam Koleksi. Logika bisnis masuk dalam model. Pengembang lain yang mengambil basis kode Anda akan dapat mulai bekerja.
Untuk menyimpulkan
Backbone adalah pustaka ringan yang memberikan struktur pada kode Anda. Komponen dipisahkan dan berkomunikasi melalui acara sehingga Anda tidak akan berakhir berantakan. Anda dapat memperluas basis kode dengan mudah, cukup dengan membuat objek baru dan mendengarkan objek yang ada dengan tepat. Kode Anda akan lebih bersih, lebih bagus, dan lebih mudah dikelola.
Buku kecilku
Saya sangat menyukai Backbone sehingga saya menulis sedikit buku intro tentang itu. Anda dapat membacanya online di sini: //nicholasjohnson.com/backbone-book/
Saya juga membagi materi menjadi kursus online singkat, yang dapat Anda temukan di sini: //www.forwardadvance.com/course/backbone . Anda dapat menyelesaikan kursus dalam waktu sekitar satu hari.