Beberapa cadangan untuk menggunakan rangka kerja Backbone.js JavaScript_Pengetahuan asas

Backbone menyediakan struktur model, koleksi dan paparan untuk aplikasi Javascript yang kompleks. Model ini digunakan untuk mengikat data nilai kunci dan peristiwa tersuai; koleksi dilengkapi dengan API yang kaya dengan fungsi terbilang;
Apabila membangunkan aplikasi web yang mengandungi banyak JavaScript, salah satu perkara pertama yang perlu anda lakukan ialah berhenti menambahkan data pada objek DOM. Cipta aplikasi Javascript dengan pemilih jQuery yang kompleks dan fungsi panggil balik, termasuk mengekalkan penyegerakan antara UI HTML, logik Javascript dan data, tanpa sebarang kerumitan. Tetapi untuk aplikasi pelanggan, seni bina yang baik selalunya mempunyai banyak faedah.
Backbone membentangkan data sebagai model, dan anda boleh mencipta model, mengesahkan dan memusnahkannya, malah menyimpannya ke pelayan. Apabila perubahan dalam UI menyebabkan sifat model berubah, model akan mencetuskan peristiwa "perubahan" semua paparan yang memaparkan data model akan menerima pemberitahuan acara ini, dan kemudian paparan akan dipaparkan semula. Anda tidak perlu mencari DOM untuk elemen dengan id khusus untuk mengemas kini HTML secara manual. —Setelah model berubah, paparan berubah secara automatik.
backbone.js menyediakan rangka kerja pembangunan web, menggunakan Model untuk mengikat nilai kunci dan pemprosesan acara tersuai, menggunakan Koleksi untuk menyediakan set API yang kaya untuk fungsi penghitungan dan menggunakan Views untuk pemprosesan acara dan penyepaduan dengan Aplikasi sedia ada berinteraksi melalui JSON RESTful antara muka Ia adalah rangka kerja js berdasarkan jquery dan garis bawah.

Tulang belakang tidak berpendirian secara semula jadi. Idea paling asas yang anda dapat daripada dokumentasi ialah: gunakan alatan yang disediakan oleh backbone.js untuk melakukan apa sahaja yang anda mahu.

Ini bagus kerana terdapat begitu banyak kes penggunaan yang berbeza dan sangat mudah untuk mula menulis apl. Pendekatan ini mungkin menghalang kita daripada membuat kesilapan sesedikit mungkin semasa memulakan.

Apabila ada sesuatu yang salah, kita perlu menemuinya dan mencari jalan untuk membetulkannya.

Petua berikut boleh membantu anda mengelakkan ralat yang kami hadapi semasa membangunkan Backbone.js:

1. Paparan Kurang Data

Data adalah milik model (model) bukan pandangan. Lain kali anda mendapati diri anda menyimpan data dalam paparan (atau lebih teruk lagi: dalam DOM), alihkannya ke dalam model dengan segera.

Jika anda tidak mempunyai model, mencipta model adalah sangat mudah:

this.viewState = new Backbone.Model();

Tiada perkara lain yang perlu dilakukan.

Anda boleh mendengar acara perubahan pada data anda dan juga menyegerakkannya dalam talian dengan pelayan anda.

2. Acara DOM hanya menukar model

Apabila peristiwa DOM dicetuskan, seperti mengklik butang, jangan biarkan ia mengubah paparan itu sendiri. Tukar model ini.

Menukar DOM tanpa mengubah keadaan bermakna keadaan anda masih disimpan dalam DOM. Peraturan ini memastikan anda konsisten.

Jika tepi "Muat Lagi" diklik, jangan kembangkan paparan, cuma tukar model:

this.viewState.set('readMore', true);

Baiklah, tetapi bila pandangan berubah? Soalan yang bagus, dijawab oleh peraturan seterusnya.

3.DOM hanya berubah apabila model berubah

Acara yang menakjubkan, sila gunakannya. Cara paling mudah ialah mencetuskannya selepas setiap perubahan.

this.listenTo(this.stateModel, 'change', this.render);

Pendekatan yang lebih baik ialah mencetuskan perubahan hanya apabila diperlukan.

this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

Pandangan ini akan sentiasa konsisten dengan modelnya. Paparan ini akan sentiasa dikemas kini tidak kira bagaimana model berubah: sebagai tindak balas kepada tindakan daripada antara muka perintah atau maklumat penyahpepijatan.

4. Perkara yang terikat mesti tidak terikat

Apabila paparan dialih keluar daripada DOM, menggunakan kaedah 'alih keluar', ia mesti dinyahikat daripada semua peristiwa terikat.

Jika anda menggunakan 'on' untuk mengikat, tanggungjawab anda ialah menggunakan 'off' untuk membuka ikatan. Tanpa menyahikat, pengumpul memori tidak boleh membebaskan memori, menyebabkan prestasi aplikasi anda menurun.

Di sinilah 'listenTo' berasal. Ia menjejaki pengikatan dan pembebasan pandangan. Backbone akan melakukan 'stopListening' sebelum mengalihkannya dari DOM.

// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
 
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);

5. Simpan tulisan berantai

Sentiasa kembalikan 'ini' daripada kaedah render dan alih keluar. Ini membolehkan anda menulis rantai kaedah.

view.render().$el.appendTo(otherElement);

Ini kaedahnya, jangan patahkan.

6 Acara lebih baik daripada panggilan balik

Menunggu acara respons adalah lebih baik daripada menelefon semula

Model tulang belakang mencetuskan peristiwa 'penyegerakan' dan 'ralat' secara lalai, jadi acara ini boleh digunakan dan bukannya panggilan balik. Pertimbangkan dua senario ini.

model.fetch({
 success: handleSuccess,
 error: handleError
});
//这种更好：
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();

Tidak kira bila model diambil, handleSucess/handleError akan dipanggil.

7. Paparan mempunyai skop

Pandangan tidak boleh memanipulasi DOM selain daripada dirinya sendiri.

paparan akan merujuk elemen DOMnya sendiri, seperti 'el' atau objek jquery '$el'

Ini bermakna anda tidak boleh menggunakan jQuery secara langsung:

$('.text').html('Thank you');

Sila hadkan pemilihan elemen DOM kepada domain anda sendiri:

this.$('.text').html('Thank you');
 
// 这等价于
// this.$el.find('.text').html('Thank you');

如果你需要更新一个别的不同的视图，只要触发一个事件，让别的视图去做。你也可以使用Backbone的全局Pub/Sub系统。

例如，我们阻止页面滚动：

var BodyView = Backbone.View.extend({
 initialize: function() {
  this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
 },
 
 preventScroll: function(prevent) {
  // .prevent-scroll 有下面的CSS规则： overflow: hidden;
  this.$el.toggleClass('prevent-scroll', prevent);
 }
});
 
// 现在从任何其他地方调用:
Backbone.trigger('prevent-scroll', true);  // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允许 scrolling

还有一件事

只要读读backbone的源代码，你会学到更多。看一看backbone.js的源代码，然后看看这些神奇的事情是怎么实现的。这个库非常小，而且可读性很好，整个读完不会超过10分钟的。

这些小贴士帮助我们写干净的，更好的可读的代码。