Ketika program JavaScript menjadi semakin kompleks, mereka sering membutuhkan tim untuk berkembang dalam kolaborasi, dan modularisasi kode dan spesifikasi organisasi menjadi sangat penting. Pola MVC adalah model klasik organisasi kode.
(... Pengantar MVC.)
(1) Model
Model mewakili lapisan data, yaitu, sumber data yang diperlukan oleh program, dan biasanya diwakili dalam format JSON.
(2) Lihat
View mewakili lapisan presentasi, yang merupakan antarmuka pengguna. Untuk halaman web, ini adalah kode HTML halaman web yang dilihat oleh pengguna.
(3) Pengontrol
Pengontrol mewakili lapisan kontrol, yang digunakan untuk memproses data asli (model) dan mentransfernya ke tampilan.
Karena pemrograman Web berbeda dari pemrograman klien, berdasarkan MVC, komunitas JavaScript telah menghasilkan berbagai varian kerangka kerja MVP (model-view-presenter), MVVM (model-view-viewModel), dll. Beberapa orang secara kolektif menyebut semua mode dari jenis kerangka kerja MV*.
Keuntungan dari suatu kerangka kerja adalah bahwa ia mengatur kode secara wajar, memfasilitasi kerja tim dan pemeliharaan di masa depan, dan kerugiannya adalah bahwa ia memiliki biaya belajar tertentu dan membatasi Anda untuk menulisnya.
Backbone Loading
Salinan kode adalah sebagai berikut:
<skrip src = "/javascripts/lib/jQuery.js"> </script>
<skrip src = "/javascripts/lib/underscore.js"> </script>
<skrip src = "/javascripts/lib/backbone.js"> </script>
<skrip src = "/javascripts/jst.js"> </ptript>
<skrip src = "/javascripts/router.js"> </ptript>
<Script src = "/javascripts/init.js"> </script>
Backbone.view
Penggunaan dasar
Metode backbone.view digunakan untuk menentukan kelas tampilan.
Salinan kode adalah sebagai berikut:
var appview = backbone.view.extend ({
render: function () {
$ ('main'). append ('<h1> judul tingkat pertama </h1>');
}
});
Kode di atas mendefinisikan APPVIEW kelas View melalui metode Extand Backbone.view. Ada metode render di dalam kelas ini untuk menempatkan tampilan di halaman web.
Saat menggunakannya, Anda perlu membuat instance baru dari kelas tampilan, dan kemudian memanggil metode render melalui instance, sehingga tampilan dapat ditampilkan di halaman web.
Salinan kode adalah sebagai berikut:
var appview = appview baru ();
appview.render ();
Kode di atas membuat instance baru AppView dari View Class AppView, dan kemudian hubungi AppView.Render, dan konten yang ditentukan akan ditampilkan di halaman Web.
Saat membuat instance tampilan baru, Anda biasanya perlu menentukan model.
Salinan kode adalah sebagai berikut:
var document = dokumen baru ({
Model: Doc
});
Inisialisasi metode
Tampilan juga dapat menentukan metode inisialisasi. Saat menghasilkan instance, metode ini akan secara otomatis dipanggil untuk menginisialisasi instance.
Salinan kode adalah sebagai berikut:
var appview = backbone.view.extend ({
inisialisasi: function () {
this.render ();
},
render: function () {
$ ('main'). append ('<h1> judul tingkat pertama </h1>');
}
});
var appview = appview baru ();
Setelah kode di atas mendefinisikan metode inisialisasi, ia menghilangkan langkah memanggil appview.render () secara manual setelah menghasilkan instance.
Atribut El, $ EL Atribut
Selain menentukan elemen halaman web yang terikat untuk "melihat" langsung dalam metode render, Anda juga dapat menentukan elemen halaman web menggunakan atribut EL dari tampilan.
Salinan kode adalah sebagai berikut:
var appview = backbone.view.extend ({
EL: $ ('Main'),
render: function () {
ini. $ el.Append ('<h1> Judul tingkat pertama </h1>');
}
});
Kode di atas secara langsung mengikat elemen halaman web dengan metode render, dan efeknya persis sama. Dalam kode di atas, selain atribut EL, itu juga merupakan atribut $ EL. Yang pertama mewakili elemen DOM yang ditentukan, dan yang terakhir mewakili objek jQuery yang sesuai dengan elemen DOM.
Atribut TagName, Atribut ClassName
Jika atribut EL tidak ditentukan, itu juga dapat ditentukan melalui atribut tagname dan atribut ClassName.
Salinan kode adalah sebagai berikut:
var document = backbone.view.extend ({
Tagname: "Li",
ClassName: "Dokumen",
render: function () {
// ...
}
});
metode template
Properti Template dari tampilan digunakan untuk menentukan templat halaman web.
Salinan kode adalah sebagai berikut:
var appview = backbone.view.extend ({
Template: _.template ("<h3> halo < %= who %> <h3>"),
});
Dalam kode di atas, fungsi template dari pustaka fungsi underscore menerima string templat sebagai parameter dan mengembalikan fungsi template yang sesuai. Dengan fungsi template ini, selama nilai spesifik disediakan, kode halaman web dapat dihasilkan.
Salinan kode adalah sebagai berikut:
var appview = backbone.view.extend ({
EL: $ ('#container'),
Template: _.template ("<h3> halo < %= who %> <h3>"),
inisialisasi: function () {
this.render ();
},
render: function () {
ini. $ el.html (this.template ({Who: 'world!'}));
}
});
Render kode di atas memanggil metode template untuk menghasilkan kode halaman web tertentu.
Dalam aplikasi praktis, templat umumnya ditempatkan dalam tag skrip. Untuk mencegah browser parsing sesuai dengan kode JavaScript, atribut Type diatur ke teks/templat.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/Template"-Name = "Templatename">
<!-Konten template pergi ke sini->
</script>
Anda dapat menggunakan kode berikut untuk mengkompilasi templat.
Salinan kode adalah sebagai berikut:
window.templates = {};
var $ sumber = $ ('skrip [type = "text/template"]');
$ Sources.each (function (index, el) {
var $ el = $ (el);
templat [$ el.data ('name')] = _.template ($ el.html ());
});
Atribut Acara
Atribut acara digunakan untuk menentukan peristiwa tampilan dan fungsi penanganan yang sesuai.
Salinan kode adalah sebagai berikut:
var document = backbone.view.extend ({
Acara: {
"klik .icon": "buka",
"Klik. Button.Edit": "OpenEditDialog",
"Klik .button.delete": "hancurkan"
}
});
Salah satu kode di atas menentukan acara klik tiga pemilih CSS dan tiga fungsi penanganan yang sesuai.
Metode Listento
Metode Listento digunakan untuk menentukan fungsi panggilan balik untuk acara tertentu.
Salinan kode adalah sebagai berikut:
var document = backbone.view.extend ({
inisialisasi: function () {
this.listento (this.model, "ubah", this.render);
}
});
Kode di atas adalah peristiwa perubahan model, dan fungsi callback ditentukan sebagai render.
Hapus metode
Metode Hapus digunakan untuk menghapus tampilan.
Salinan kode adalah sebagai berikut:
UpdateView: function () {
view.remove ();
view.render ();
};
Subview
Tampilan anak dapat dipanggil dalam tampilan orang tua. Berikut ini adalah cara menulis.
Salinan kode adalah sebagai berikut:
render: function () {
ini. $ el.html (this.template ());
this.child = anak baru ();
this.child.appendto ($. ('. Container-placeHolder'). render ();
}
Backbone.Router
Router adalah objek perutean yang disediakan oleh Backbone, yang digunakan untuk sesuai dengan URL yang diminta oleh pengguna dengan fungsi pemrosesan backend satu per satu.
Pertama, kelas router baru didefinisikan.
Salinan kode adalah sebagai berikut:
Router = backbone.router.extend ({
Rute: {
}
});
atribut rute
Hal terpenting di tulang punggung. Objek Router adalah properti rute. Ini digunakan untuk mengatur metode pemrosesan jalur.
Atribut rute adalah objek, dan masing -masing anggota itu mewakili aturan pemrosesan jalur. Nama kunci adalah aturan jalur dan nilai kunci adalah metode pemrosesan.
Jika nama kunci adalah string kosong, itu mewakili jalur root.
Salinan kode adalah sebagai berikut:
Rute: {
'': 'phonesIndex',
},
phonesIndex: function () {
PhonesIndExView baru ({el: 'Bagian#main'});
}
Tanda bintang mewakili jalur apa pun, dan Anda dapat mengatur parameter jalur untuk menangkap nilai jalur tertentu.
Salinan kode adalah sebagai berikut:
var approUrt = backbone.router.extend ({
Rute: {
"*Tindakan": "DeFaultroute"
}
});
var app_router = Penyedaran baru;
app_routter.on ('route: defaultroute', function (action) {
console.log (tindakan);
})
Dalam kode di atas, parameter di belakang jalur root akan ditangkap dan fungsi callback akan diteruskan.
Bagaimana menulis aturan jalur.
Salinan kode adalah sebagai berikut:
var myRouter = backbone.Router.extend ({
Rute: {
"tolong tolong",
"Cari/: Query": "Cari"
},
Help: function () {
...
},
Cari: function (kueri) {
...
}
});
Rute: {
"Help/: Page": "Help",
"Unduh/*Path": "Unduh",
"Folder/: Name": "OpenFolder",
"Folder/: Nama-: Mode": "OpenFolder"
}
router.on ("rute: help", function (page) {
...
});
Backbone.History
Setelah menyiapkan router, Anda dapat memulai aplikasi. Objek Backbone.History digunakan untuk memantau perubahan URL.
Salinan kode adalah sebagai berikut:
App = router baru ();
$ (dokumen) .ready (function () {
Backbone.history.start ({pushstate: true});
});
Buka metode PushState. Jika aplikasi tidak ada di direktori root, Anda perlu menentukan direktori root.
Salinan kode adalah sebagai berikut:
Backbone.history.start ({pushstate: true, root: "/public/search/"})
Backbone.model
Model mewakili entitas objek tunggal.
Salinan kode adalah sebagai berikut:
var user = backbone.model.extend ({
default: {
Nama: '',
Email: ''
}
});
var user = pengguna baru ();
Kode di atas menggunakan metode Extand untuk menghasilkan kelas pengguna, yang mewakili templat model. Kemudian, gunakan perintah baru untuk menghasilkan contoh model. Atribut default digunakan untuk mengatur atribut default. Kode di atas menunjukkan bahwa objek pengguna memiliki dua nama atribut dan email secara default, dan nilainya sama dengan string kosong.
Saat menghasilkan instance, Anda dapat memberikan nilai spesifik untuk setiap atribut.
Salinan kode adalah sebagai berikut:
var user = pengguna baru ({
ID: 1,
Nama: 'Nama',
Email: '[email protected]'
});
Kode di atas memberikan nilai spesifik dari setiap atribut saat menghasilkan instance.
Atribut Idattribute
Contoh model harus memiliki properti yang berfungsi sebagai kunci utama untuk membedakan contoh lain. Nama atribut ini ditetapkan oleh atribut Idattribute, dan umumnya diatur ke ID.
Salinan kode adalah sebagai berikut:
var music = backbone.model.extend ({
Idattribute: 'ID'
});
Dapatkan metode
Metode GET digunakan untuk mengembalikan nilai properti tertentu dari contoh model.
Salinan kode adalah sebagai berikut:
var user = pengguna baru ({name: "name", usia: 24});
var usia = user.get ("usia"); // 24
var name = user.get ("name"); // "Nama"
Setel metode
Metode set digunakan untuk mengatur nilai properti tertentu dari contoh model.
Salinan kode adalah sebagai berikut:
var user = backbone.model.extend ({
beli: function (newCarsname) {
this.set ({mobil: newCarsName});
}
});
var user = pengguna baru ({name: 'bmw', model: 'i8', type: 'car'});
user.buy ('porsche');
var car = user.get ("mobil"); // 'Porsche'
pada metode
Metode ON digunakan untuk mendengarkan perubahan objek.
Salinan kode adalah sebagai berikut:
var user = pengguna baru ({name: 'bmw', model: 'i8'});
user.on ("ubah: name", function (model) {
var name = model.get ("name"); // "Porsche"
console.log ("Mengubah nama mobil saya menjadi" + nama);
});
user.set ({name: 'porsche'});
// Mengubah nama mobil saya menjadi Porsche
Metode ON dalam kode di atas digunakan untuk mendengarkan acara, dan "Ubah: Nama" berarti bahwa atribut nama telah berubah.
Atribut Urlroot
Properti ini digunakan untuk menentukan jalur untuk beroperasi pada model di sisi server.
Salinan kode adalah sebagai berikut:
var user = backbone.model.extend ({
Urlroot: '/pengguna'
});
Kode di atas menentukan bahwa jalur ke server yang sesuai dengan model adalah /pengguna.
ambil acara
Acara fetch digunakan untuk mengambil model dari server.
Salinan kode adalah sebagai berikut:
var user = pengguna baru ({id: 1});
user.fetch ({
Sukses: function (user) {
console.log (user.toJson ());
}
})
Dalam kode di atas, instance pengguna berisi atribut ID (nilai adalah 1). Metode fetch menggunakan kata kerja http dapat mengeluarkan permintaan ke url "/user/1" dan mengambil instance dari server.
Simpan metode
Metode Simpan digunakan untuk memberi tahu server untuk membuat atau memperbarui model.
Jika instance model tidak berisi atribut ID, metode Simpan akan membuat instance menggunakan metode POST.
Salinan kode adalah sebagai berikut:
var user = backbone.model.extend ({
Urlroot: '/pengguna'
});
var user = pengguna baru ();
var userDetails = {
Nama: 'Nama',
Email: '[email protected]'
};
user.save (userDetails, {
Sukses: function (user) {
console.log (user.toJson ());
}
})
Kode di atas pertama -tama menentukan bahwa URL model yang sesuai adalah /pengguna di kelas, kemudian membuat instance baru, dan akhirnya memanggil metode Simpan. Ini memiliki dua parameter. Yang pertama adalah atribut spesifik dari objek instan, dan yang kedua adalah objek fungsi callback, yang menetapkan fungsi callback untuk acara sukses (simpan berhasil). Secara khusus, metode simpan akan mengeluarkan permintaan pos ke /pengguna dan menyediakan {name: 'name', email: '[email protected]'} sebagai data.
Jika instance model berisi atribut ID, metode Simpan akan memperbarui instance menggunakan metode put.
Salinan kode adalah sebagai berikut:
var user = pengguna baru ({
ID: 1,
Nama: 'Zhang San',
Email: '[email protected]'
});
user.save ({name: 'li si'}, {
Sukses: function (model) {
console.log (user.toJson ());
}
});
Dalam kode di atas, instance objek berisi atribut ID (nilai adalah 1), simpan akan menggunakan metode put untuk membuat permintaan ke URL "/user/1" untuk memperbarui instance.
Hancurkan metode
Metode Destroy digunakan untuk menghapus instance di server.
Salinan kode adalah sebagai berikut:
var user = pengguna baru ({
ID: 1,
Nama: 'Nama',
Email: '[email protected]'
});
user.destroy ({
Sukses: function () {
console.log ('hancur');
}
});
Metode Hancurkan dalam kode di atas akan menggunakan HTTP Verb Delete untuk mengeluarkan permintaan ke URL "/user/1" dan hapus contoh model yang sesuai.
Backbone.collection
Koleksi adalah kumpulan jenis model yang sama. Misalnya, model adalah hewan, koleksi adalah kebun binatang; Model adalah satu orang, Collection adalah perusahaan.
Salinan kode adalah sebagai berikut:
var song = backbone.model.extend ({});
var album = backbone.collection.extend ({
Model: Lagu
});
Dalam kode di atas, lagu adalah model, album adalah koleksi, dan album memiliki atribut model yang sama dengan lagu, jadi itu berarti album adalah koleksi lagu.
Tambahkan metode, hapus metode
Contoh model dapat ditempatkan langsung ke instance koleksi, atau ditambahkan menggunakan metode Tambah.
Salinan kode adalah sebagai berikut:
var song1 = lagu baru ({id: 1, nama: "judul lagu 1", artis: "zhang san"});
var song2 = musik baru ({id: 2, nama: "judul lagu 2", artis: "li si"});
var myalbum = album baru ([Song1, Song2]);
var song3 = musik baru ({id: 3, nama: "judul lagu 3", artis: "zhao wu"});
myalbum.add (Song3);
Metode Hapus digunakan untuk menghapus instance model dari instance koleksi.
Salinan kode adalah sebagai berikut:
myalbum.remove (1);
Kode di atas menunjukkan bahwa parameter metode hapus adalah atribut ID dari contoh model.
Dapatkan metode set metode
Metode GET digunakan untuk mendapatkan contoh model ID yang ditentukan dari koleksi.
Salinan kode adalah sebagai berikut:
myalbum.get (2))
Metode pengambilan
Metode fetch digunakan untuk mengambil data pengumpulan dari server.
Salinan kode adalah sebagai berikut:
var songs = new Backbone.collection;
songs.url = '/lagu';
songs.fetch ();
Backbone.events
Salinan kode adalah sebagai berikut:
var obj = {};
_.Extend (obj, backbone.events);
obj.on ("show-message", function (msg) {
$ ('#display'). Teks (msg);
});
Obj.trigger ("pameran-pesan", "halo dunia");