Dalam proses pengembangan pemrograman berorientasi objek , model-view-controller (MVC) adalah metodologi atau pola desain yang membantu Anda menghubungkan antarmuka pengguna dengan model data yang mendasarinya secara efisien dan berhasil. Pada artikel ini, kita akan mempelajari tentang Arsitektur MVC dalam urutan berikut:
Arsitektur MVC JavaScript
Belakangan ini, pola MVC diterapkan pada beragam bahasa pemrograman, termasuk . JavaScript terdiri dari sejumlah kerangka kerja untuk mendukung arsitektur MVC atau variasinya. Ini memungkinkan pengembang untuk menambahkan struktur ke aplikasi mereka dengan mudah dan tanpa banyak usaha.
MVC terdiri dari tiga komponen:
- Model
- Melihat
- Kontroler
Sekarang, mari kita lanjutkan dan bahas lebih dalam dari ketiga komponen MVC JavaScript ini.
apa filter konteks di tablo
Model
Model digunakan untuk mengelola data untuk aplikasi. Mereka tidak peduli dengan antarmuka pengguna atau lapisan presentasi. Sebaliknya, mereka mewakili bentuk data unik yang mungkin diperlukan aplikasi. Saat model diubah atau diperbarui, model tersebut biasanya akan memberi tahu pengamatnya tentang perubahan yang telah terjadi sehingga mereka dapat bertindak sesuai.
Mari kita ambil contoh model sederhana yang diimplementasikan menggunakan Backbone:
var Photo = Backbone.Model.extend ({// Atribut default untuk default foto: {src: 'placeholder.jpg', keterangan: 'Gambar default', dilihat: false}, // Pastikan setiap foto yang dibuat memiliki `src`. inisialisasi: function () {this.set ({'src': this.defaults.src})}})Dalam galeri foto, konsep foto akan mendapatkan modelnya sendiri, karena ini mewakili jenis data khusus domain yang unik. Model seperti itu dapat berisi atribut terkait seperti keterangan, sumber gambar, dan metadata tambahan. Dalam contoh di atas, foto tertentu akan disimpan dalam contoh model.
Tampilan
Tampilan adalah representasi visual model yang memberikan tampilan terfilter dari statusnya saat ini. Tampilan JavaScript digunakan untuk membangun dan memelihara elemen DOM. Sebuah tampilan biasanya mengamati model dan diberi tahu saat model berubah, yang memungkinkan tampilan untuk memperbarui dirinya sendiri. Sebagai contoh:
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Kami menggunakan pustaka template seperti Underscore // templating yang menghasilkan HTML untuk // entri foto photoEl.innerHTML = _.template ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('click', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = ''} var hide = function () {photoEl.style.display = 'none'} return {showView: show, hideView: hide}}Manfaat dari arsitektur ini adalah setiap komponen memainkan perannya sendiri-sendiri dalam membuat fungsi aplikasi sesuai kebutuhan.
bagaimana menggunakan python spyder
Pengontrol
Pengontrol bertindak seperti perantara antara model dan tampilan, yang bertanggung jawab untuk memperbarui model saat pengguna memanipulasi tampilan. Dalam contoh aplikasi galeri foto di atas, pengontrol akan bertanggung jawab untuk menangani perubahan yang dibuat pengguna pada tampilan edit untuk foto tertentu, memperbarui model foto tertentu ketika pengguna telah selesai mengedit.
bagaimana mencegah kebuntuan di java
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('destroy', this.proxy (this .remove))}, render: function () {// Tangani templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) kembalikan ini}, hapus: function () {this.el.remove () this.release ()}})Contoh ini akan memberi Anda cara yang sangat ringan dan sederhana untuk mengelola perubahan antara model dan tampilan.
Kerangka MVC JavaScript
Dalam beberapa tahun terakhir, serangkaian MVC JavaScript telah dikembangkan. Masing-masing kerangka kerja ini mengikuti beberapa bentuk pola MVC dengan tujuan mendorong pengembang untuk menulis kode JavaScript yang lebih terstruktur. Beberapa Kerangka tersebut adalah:
- backbone.js
- Ember.js
- AngularJS
- Sencha
- Kendo UI
Dengan ini, kita sampai pada bagian akhir artikel JavaScript MVC. Saya harap Anda memahami tiga komponen yang terlibat dalam arsitektur MVC.
Sekarang setelah Anda mengetahui tentang JavaScript MVC, lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'JavaScript MVC' dan kami akan menghubungi Anda kembali.