Apabila program JavaScript menjadi semakin kompleks, mereka sering memerlukan satu pasukan untuk bekerjasama dan membangun Pada masa ini, spesifikasi modularisasi dan organisasi kod menjadi sangat penting. Corak MVC ialah corak klasik organisasi kod.
(…Pengenalan kepada MVC.)
（1）Model
Model mewakili lapisan data, iaitu sumber data yang diperlukan oleh program, biasanya dinyatakan dalam format JSON.
（2）Lihat
Paparan mewakili lapisan pembentangan, iaitu antara muka pengguna Untuk halaman web, ia adalah kod HTML halaman web yang dilihat oleh pengguna.
(3)Pengawal
Pengawal mewakili lapisan kawalan, yang digunakan untuk memproses data asal (Model) dan menghantarnya ke Paparan.
Memandangkan pengaturcaraan web berbeza daripada pengaturcaraan klien, berdasarkan MVC, komuniti JavaScript telah menghasilkan pelbagai rangka kerja varian MVP (Model-View-Presenter), MVVM (Model-View-ViewModel), dll. Sesetengah orang mempunyai Semua pelbagai mod rangka kerja jenis ini secara kolektif dipanggil MV*.
Kelebihan rangka kerja ialah ia menyusun kod dengan munasabah, memudahkan kerja berpasukan dan penyelenggaraan masa hadapan, tetapi kelemahannya ialah ia mempunyai kos pembelajaran tertentu dan menghadkan anda kepada kaedah penulisannya.
Pemuatan tulang belakang
Backbone.View
Penggunaan asas
Kaedah Backbone.View digunakan untuk menentukan kelas paparan.
var AppView = Backbone.View.extend({
render: function(){
$('utama').append('
Tajuk peringkat pertama
');
}
});
Kod di atas mentakrifkan kelas paparan AppView melalui kaedah lanjutan Backbone.View. Terdapat kaedah render di dalam kelas ini yang digunakan untuk meletakkan paparan pada halaman web.
Apabila menggunakannya, anda perlu mencipta tika baharu kelas paparan dahulu, dan kemudian panggil kaedah pemaparan melalui tika itu untuk memaparkan paparan pada halaman web.
var appView = new AppView();
appView.render();
Kod di atas mencipta appView contoh baharu bagi kelas paparan AppView, dan kemudian memanggil appView.render, dan kandungan yang ditentukan akan dipaparkan pada halaman web.
Apabila membuat contoh paparan baharu, anda biasanya perlu menentukan Model.
var document = Dokumen baharu({
Model: doc
});
memulakan kaedah
Paparan juga boleh mentakrifkan kaedah permulaan Apabila tika dijana, kaedah ini akan dipanggil secara automatik untuk memulakan tika.
var AppView = Backbone.View.extend({
mulakan: function(){
This.render();
},
render: function(){
$('utama').append('
Tajuk peringkat pertama
');
}
});
var appView = new AppView();
Selepas kaedah permulaan ditakrifkan dalam kod di atas, langkah memanggil appView.render() secara manual selepas menjana tika akan ditinggalkan.
sifat el, atribut $el
Selain menentukan elemen halaman web yang terikat pada "pandangan" secara langsung dalam kaedah pemaparan, anda juga boleh menentukan elemen halaman web menggunakan atribut el bagi paparan.
var AppView = Backbone.View.extend({
el: $('utama'),
render: function(){
This.$el.append('
Tajuk peringkat pertama
');
}
});
Kod di atas secara langsung mengikat elemen halaman web kepada kaedah pemaparan, dan kesannya adalah sama. Dalam kod di atas, sebagai tambahan kepada atribut el, terdapat juga atribut $el Yang pertama mewakili elemen DOM yang ditentukan, dan yang kedua mewakili objek jQuery yang sepadan dengan elemen DOM.
atribut tagName, atribut className
Jika atribut el tidak ditentukan, ia juga boleh ditentukan melalui atribut tagName dan atribut className.
var Document = Backbone.View.extend({
tagNama: "li",
Nama kelas: "dokumen",
render: function() {
// ...
}
});
kaedah templat
Atribut templat paparan digunakan untuk menentukan templat halaman web.
var AppView = Backbone.View.extend({
Templat: _.template("
Hello <%= siapa %>"),
});
Dalam kod di atas, fungsi templat pustaka fungsi garis bawah menerima rentetan templat sebagai parameter dan mengembalikan fungsi templat yang sepadan. Dengan fungsi templat ini, kod halaman web boleh dijana selagi nilai tertentu disediakan.
var AppView = Backbone.View.extend({
el: $('#container'),
Templat: _.template("
Hello <%= siapa %>"),
mulakan: function(){
This.render();
},
render: function(){
This.$el.html(this.template({who: 'world!'}));
}
});
Paparan kod di atas memanggil kaedah templat untuk menjana kod halaman web tertentu.
Dalam aplikasi sebenar, templat biasanya diletakkan dalam teg skrip Untuk mengelakkan penyemak imbas daripada menghuraikan mengikut kod JavaScript, atribut jenis ditetapkan kepada teks/templat.
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
