Penjelasan terperinci tentang kemahiran Backbone.js_javascript rangka kerja Javascript MVC

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

Salin kod Kod adalah seperti berikut:

Backbone.View

Penggunaan asas

Kaedah Backbone.View digunakan untuk menentukan kelas paparan.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

var Document = Backbone.View.extend({
tagNama: "li",
Nama kelas: "dokumen",
render: function() {
// ...
}
});

kaedah templat

Atribut templat paparan digunakan untuk menentukan templat halaman web.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

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.

Salin kod Kod adalah seperti berikut:

• Analisis mendalam bagi komponen kumpulan senarai Bootstrap
• Penjelasan terperinci tentang fungsi JavaScript kari
• Contoh lengkap penjanaan kata laluan JS dan pengesanan kekuatan (dengan muat turun kod sumber demo)
• Angularjs menyepadukan UI WeChat (weui)
• Cara cepat bertukar antara Cina Tradisional dan Cina Ringkas dengan JavaScript dan helah untuk tapak web menyokong pertukaran antara kemahiran_javascript Cina Ringkas dan Tradisional