1. Pendahuluan
Baru-baru ini, saya melakukan optimalisasi front-end proyek perbankan online yang besar. Saya perlu menggunakan optimasi klien yang gemuk. Gagasan umum adalah bahwa front-end menggunakan permintaan AJAX untuk mendapatkan data dari back-end, mengembalikannya dalam format Jason, dan kemudian menampilkannya di halaman. Karena sistem ini sangat besar, solusi klien lemak pasti membutuhkan menulis banyak kode JS pada klien. Saya pikir sangat tidak nyaman bagi tim mana pun untuk mempertahankan sejumlah besar kode tidak terstruktur. Jadi tulang punggung datang ke pandangan saya.
Ini menyediakan cara untuk menyusun kode JS Anda, memungkinkan Anda untuk mengatur kode JS front-end Anda dengan cara yang berorientasi objek. Ini seperti kami menerapkan desain yang digerakkan domain di ujung depan. Kami dapat membagi proyek dengan modul yang sangat besar. Setiap modul dapat dibagi menjadi tampilan, model, dan router sesuai dengan persyaratan tulang punggung.
Dengan tulang punggung, Anda dapat memperlakukan data Anda sebagai model. Dengan model, Anda dapat membuat data, memverifikasi data, menghancurkan atau menyimpannya ke server. Ketika operasi pada antarmuka menyebabkan perubahan dalam properti dalam model, model akan memicu peristiwa perubahan; Tampilan yang digunakan untuk menampilkan status model akan menerima pesan bahwa model memicu perubahan, dan kemudian mengeluarkan respons yang sesuai, dan merender ulang data baru ke antarmuka. Dalam aplikasi backbone yang lengkap, Anda tidak perlu menulis kode lem untuk mendapatkan node melalui ID khusus dari DOM, atau memperbarui halaman HTML secara manual, karena ketika model berubah, tampilan akan diperbarui dengan mudah.
2. Fitur
Backbone adalah kerangka kerja front-end ringan yang digunakan untuk menyusun manajemen sejumlah besar JS di halaman, membangun koneksi yang mulus dengan server dan pandangan, dan memberikan kerangka kerja dasar untuk membangun aplikasi yang kompleks.
Izinkan saya menjelaskan secara singkat fitur dan karakteristik tulang punggung:
2.1 Ringan
Kode sumber backbone hanya sekitar 1000 baris (setelah decommenting dan garis kosong), ukuran file hanya 16kb, dan perpustakaan ketergantungan hanya 29kb.
Anda hanya perlu menghabiskan sedikit waktu untuk dengan mudah memahami implementasi internal tulang punggung; atau menulis sejumlah kecil kode untuk membebani beberapa mekanisme tulang punggung; Jika Anda ingin melakukan pengembangan sekunder berdasarkan tulang punggung, itu bukan hal yang rumit.
2.2 terstruktur
Backbone dapat dengan mudah memisahkan data, logika, dan tampilan di halaman, dan mengatur struktur kode sesuai dengan tulang punggung. Anda dapat menetapkan interaksi data, logika bisnis, antarmuka pengguna dan pekerjaan lain dalam proyek untuk beberapa kolega untuk mengembangkan secara bersamaan, dan mengaturnya bersama secara tertib. Pada saat yang sama, ini sangat membantu untuk pemeliharaan dan pengembangan proyek besar dan kompleks.
2.3 Mekanisme Warisan
Di tulang punggung, modul dapat diwarisi. Anda dapat mengatur model data, koleksi, dan tampilan dalam aplikasi Anda dengan cara yang berorientasi objek untuk membuat seluruh arsitektur lebih jelas; Anda juga dapat dengan mudah kelebihan beban dan memperluas metode khusus.
2.4 Menetapkan koneksi yang mulus dengan server
Backbone memiliki aturan interaksi bawaan dengan data server (jika Anda memahami arsitektur REST, Anda dapat dengan mudah memahaminya), dan sinkronisasi data akan secara otomatis dilakukan dalam model. Pengembang front-end hanya perlu beroperasi pada data klien, dan backbone akan secara otomatis menyinkronkan data operasi ke server.
Ini adalah hal yang sangat menarik karena antarmuka data server transparan untuk pengembang front-end dan mereka tidak perlu lagi peduli tentang cara berinteraksi dengan server.
Namun, antarmuka data yang disediakan oleh server juga harus kompatibel dengan aturan backbone. Untuk proyek baru, kami dapat mencoba menggunakan set aturan ini untuk membangun antarmuka. Tetapi jika Anda sudah memiliki serangkaian antarmuka yang stabil dalam proyek Anda, Anda mungkin khawatir tentang risiko modifikasi antarmuka.
Tidak masalah, kita dapat beradaptasi dengan antarmuka data yang ada dengan berlebihan metode backbone.sync. Untuk lingkungan klien yang berbeda, kami juga dapat menerapkan metode interaksi data yang berbeda. Misalnya: Ketika pengguna menggunakan layanan melalui browser PC, data akan disinkronkan ke server secara real time; Ketika pengguna menggunakan layanan melalui terminal seluler, mengingat masalah lingkungan jaringan, pertama -tama kami dapat menyinkronkan data ke database lokal dan kemudian menyinkronkannya ke server jika perlu. Dan ini dapat dicapai dengan hanya membebani satu metode.
2.5 Manajemen Acara Antarmuka
Dalam MVC, kami berharap dapat sepenuhnya memisahkan presentasi antarmuka dan logika bisnis, tetapi untuk acara interaktif yang dihasilkan oleh pengguna (seperti acara klik), kami sering mendapatkan dan mengikatnya melalui metode BIND yang mirip dengan yang ada di jQuery.
Tampilan di Backbone membantu kami mengatur acara pengguna dan metode eksekusi secara tertib, yang hanya mengharuskan kami untuk menyatakan ekspresi sederhana, seperti:
Acara: {// Saat mengklik elemen dengan ID "simpan", jalankan metode tambah tampilan 'klik #save': 'add', 'mousedown .button': 'show', 'mouseover .button': 'hide'}Dalam sebuah ekspresi, nama acara dapat berupa acara DOM apa pun (seperti klik, mouseover, keypress, dll.), Dan elemen dapat berupa pemilih yang didukung oleh jQuery (seperti pemilih tag, pemilih ID, pemilih kelas, dll.).
Tampilan akan secara otomatis mengikat peristiwa dalam ekspresi ke elemen pemilih. Ketika peristiwa elemen dipicu, tampilan akan secara otomatis memanggil metode terikat dalam ekspresi.
2.6 Analisis Template Ringan
Parsing template adalah metode yang disediakan di garis bawah. Mengapa saya memperkenalkan metode ini di bawah saat memperkenalkan fitur -fitur backbone? Karena metode ini dapat membantu kita memisahkan struktur dan logika tampilan, dan menggarisbawahi adalah perpustakaan yang harus diandalkan oleh tulang punggung.
Metode parsing template memungkinkan kami untuk mencampur dan menanamkan kode JS dalam struktur HTML, seperti kode java embed di halaman JSP:
<ul> <%untuk (var i = 0; i <len; i ++) {%> <li> <%= data [i] .title%> </li> <%}%> </li>Melalui penguraian template, kita tidak perlu menyambungkan string saat secara dinamis menghasilkan struktur HTML. Lebih penting lagi, kita dapat mengelola struktur HTML dalam tampilan secara independen (misalnya: keadaan yang berbeda dapat menampilkan struktur HTML yang berbeda, kita dapat menentukan beberapa file templat terpisah, memuat dan merender sesuai kebutuhan).
2.7 Manajemen Acara Kustom
Di tulang punggung, Anda dapat menggunakan metode ON atau OFF untuk mengikat dan menghapus acara khusus. Di mana saja, Anda dapat menggunakan metode pemicu untuk memicu peristiwa terikat ini, dan semua metode yang telah mengikat acara akan dieksekusi, seperti:
var model = backbone.model () baru; // ikat dua fungsi untuk kustom kustom kustom di model model model.on ('custom', function (p1, p2) {// todo}); model.on ('custom', function (p1, p2) {// todo}); // memicu acara khusus, dan dua fungsi yang diikat di atas akan disebut model.trigger ('custom', 'value1', 'value2'); // Hapus semua metode yang terikat dalam model acara khusus.off ('custom'); // Memicu acara khusus, tetapi tidak ada fungsi yang akan dieksekusi. Fungsi -fungsi dalam acara telah dihapus di langkah sebelumnya model.trigger ('custom');Jika Anda terbiasa dengan jQuery, Anda akan menemukan bahwa mereka sangat mirip dengan metode ikatan, lepas dan pemicu di jQuery.
Selain itu, Backbone mendukung acara khusus "All". Ketika suatu peristiwa bernama "All" terikat pada suatu objek, metode yang terikat dalam acara "All" juga akan dipicu ketika peristiwa apa pun dipicu. Terkadang metode ini bisa sangat berguna, misalnya, kita dapat mendengarkan perubahan keadaan objek melalui peristiwa "semua".
3. Router
Dalam satu aplikasi halaman, kami mengontrol switching dan presentasi antarmuka melalui JavaScript, dan memperoleh data dari server melalui AJAX.
Masalah yang mungkin timbul adalah bahwa ketika pengguna ingin kembali ke operasi sebelumnya, ia mungkin terbiasa menggunakan tombol "kembali" dan "maju" browser, tetapi hasilnya adalah bahwa seluruh halaman dialihkan karena pengguna tidak tahu bahwa ia berada di halaman yang sama.
Untuk masalah ini, kami sering menggunakan hash (Anchor Point) untuk merekam lokasi pengguna saat ini dan mendengarkan tindakan pengguna "maju" dan "mengembalikan" melalui acara OnHashChange, tetapi kami menemukan bahwa beberapa versi browser yang lebih rendah (seperti IE6) tidak mendukung acara OnHashChange.
Backbone menyediakan fungsi kontrol perutean. Melalui router yang disediakan oleh Backbone, kita dapat mengikat alamat routing dan fungsi acara bersama melalui ekspresi sederhana, misalnya:
var CustomRouter = Backbone.Router.extend({ routes : { '' : 'index', // Execute index method when URL Hash is in the root directory: url# 'list' : 'getList', // Execute getList method when URL Hash is in the list node: url#list 'detail/:id' : 'query', // Execute query method when URL Hash is in the detail node, and Lewati data terperinci sebagai parameter ke kueri: URL#Daftar/1001 '*Kesalahan': 'Showerror' // Eksekusi Metode Kesalahan Ketika URL Hash tidak cocok dengan aturan di atas}, indeks: function () {ware ('index'); function (error) {alert ('error hash:' + error); var custom = new CustomRouter (); Backbone.history.start ();Silakan coba menyalin kode ini ke halaman Anda dan mengakses alamat berikut secara bergantian (di mana URL menunjukkan alamat halaman Anda):
Urlurl#listUrl#detail/1001Url#hash1url#hash2
Silakan coba gunakan tombol "kembali" dan "maju" browser untuk beralih bolak -balik ke alamat yang baru saja Anda masukkan.
Anda dapat melihat bahwa ketika URL hash berubah, metode terikat akan dieksekusi. Ketika hash yang tidak terdefinisi ditemui, metode showerror akan dieksekusi dan hash yang tidak ditentukan diteruskan ke metode ini.
Backbone akan merekam perubahan alamat melalui hash secara default. Untuk browser versi yang lebih rendah yang tidak mendukung OnHashChange, perubahan hash akan dipantau melalui HeartBeat SetInterval, jadi Anda tidak perlu khawatir tentang masalah kompatibilitas browser.
Untuk browser yang mendukung fitur HTML5 PushState, Backbone juga memungkinkan Anda untuk membuat URL yang dipersonalisasi melalui pushstate, tetapi ini memerlukan beberapa adaptasi dari server web Anda.
3. Penerapan tulang punggung
Backbone tidak berlaku seperti jQuery, dan jika Anda berencana untuk membangun aplikasi web halaman tunggal yang besar atau kompleks, tulang punggung lebih cocok.
Jika Anda ingin menerapkan tulang punggung ke halaman situs web Anda, dan tidak ada logika dan struktur yang kompleks di halaman, maka ini hanya akan membuat halaman Anda lebih rumit dan sulit dipertahankan.
Jika proyek Anda tidak rumit, tetapi Anda sangat menyukai fitur tertentu (mungkin model data, manajemen tampilan atau router), maka Anda dapat mengekstrak bagian kode sumber ini dari tulang punggung karena di tulang punggung, ketergantungan antara modul tidak terlalu kuat, dan Anda dapat dengan mudah mendapatkan dan menggunakan salah satunya.
4. Perpustakaan Ketergantungan
Anda tidak dapat menggunakan tulang punggung secara mandiri karena fungsi dasarnya, operasi DOM, dan AJAX semuanya bergantung pada perpustakaan pihak ketiga.
4.1 Garis bawah
(Diperlukan)
Underscore adalah pustaka fungsi dasar untuk meningkatkan efisiensi pengembangan. Ini merangkum operasi umum pada set, array, objek, dan fungsi. Sama seperti jQuery merangkum objek DOM, Anda dapat dengan mudah mengakses dan memanipulasi objek internal JavaScript melalui garis bawah.
Underscore juga menyediakan beberapa metode fungsi yang sangat praktis, seperti pelambatan fungsi, analisis templat, dll.
Saya akan membahas beberapa metode utama dalam garis bawah di bab berikutnya, tetapi sebelum itu Anda harus mengerti: garis bawah adalah perpustakaan yang harus diandalkan oleh tulang punggung, karena banyak implementasi di tulang punggung didasarkan pada garis bawah.
4.2 JQuery dan Zepto
(Opsional)
Saya yakin Anda pasti akan terbiasa dengan jQuery, itu adalah kerangka kerja DOM dan AJAX lintas-browser.
Untuk Zepto Anda dapat memahaminya sebagai "versi seluler jQuery", karena lebih kecil, lebih cepat, dan lebih cocok untuk berjalan di browser perangkat seluler, itu adalah sintaks yang sama dengan jQuery, sehingga Anda dapat menggunakannya seperti Anda dengan jQuery.
Zepto saat ini hanya mendukung browser dengan kernel webkit, sehingga kompatibel dengan sebagian besar sistem seluler seperti iOS, adnroid, simbian, blackberry, dan meego, sedangkan untuk windows phone atau firefox OS, itu belum didukung.
Karena sintaks JQuery dan Zepto adalah sama, untuk tulang punggung, Anda tidak memiliki masalah menggunakan jQuery atau Zepto (tentu saja, Anda tidak dapat menggunakan keduanya pada saat yang sama).
Di Backbone, pemilih DOM, acara DOM dan AJAX semuanya menggunakan metode jQuery. Alasan mengapa mereka opsional di sini adalah karena Anda tidak menggunakan fungsi Sinkronisasi Data View dan AJAX di tulang punggung, maka Anda tidak perlu mengimpornya.
Jika Anda tidak ingin menggunakan jQuery atau Zepto, tetapi gunakan perpustakaan lain, atau khusus, selama perpustakaan Anda mengimplementasikan pemilih DOM yang sama, manajemen acara, dan metode AJAX sebagai sintaks jQuery, maka tidak akan ada masalah.
Backbone memungkinkan Anda untuk mengkonfigurasi secara dinamis perpustakaan pihak ketiga yang perlu Anda gunakan melalui metode setDomLibrary, yang sering digunakan untuk:
Meskipun perpustakaan khusus Anda berisi metode dengan sintaks yang sama dengan jQuery, variabel global bukan $, dan Anda ingin menyimpan nama yang ada. Pada saat ini, Anda dapat mengaturnya ke objek yang dirujuk secara internal dengan metode setDomLibrary.
Anda ingin memeriksa lingkungan pengguna untuk memutuskan perpustakaan mana yang lebih cocok untuk digunakan. Misalnya: Jika pengguna mengakses menggunakan browser PC, muat jQuery, dan jika pengguna mengakses melalui terminal seluler, muat zepto.