Dalam proses pembangunan pengaturcaraan berorientasikan objek , model-view-controller (MVC) adalah metodologi atau corak reka bentuk yang membantu anda dalam menghubungkan antara muka pengguna dengan model data yang mendasari dengan cekap dan berjaya. Dalam artikel ini, kita akan belajar mengenai Senibina MVC mengikut urutan berikut:
Senibina MVC JavaScript
Sejak kebelakangan ini, corak MVC diterapkan pada pelbagai bahasa pengaturcaraan, termasuk . JavaScript terdiri daripada sejumlah kerangka kerja untuk menyokong seni bina MVC atau variasinya. Ini membolehkan para pembangun menambah struktur aplikasi mereka dengan mudah dan tanpa banyak usaha.
MVC terdiri daripada tiga komponen:
- Model
- Pandangan
- Pengawal
Sekarang, mari kita lanjutkan dan masuk ke kedalaman ketiga komponen JavaScript MVC ini.
menyediakan hadoop di ubuntu
Model
Model digunakan untuk menguruskan data untuk aplikasi. Mereka tidak mementingkan lapisan antara muka pengguna atau persembahan. Sebaliknya, mereka mewakili bentuk data yang unik yang mungkin diperlukan oleh aplikasi. Apabila model diubah atau diperbarui, biasanya akan memberi tahu para pemerhati tentang perubahan yang telah terjadi sehingga mereka dapat bertindak sesuai.
Mari kita ambil contoh model sederhana yang dilaksanakan menggunakan Backbone:
var Photo = Backbone.Model.extend ({// Atribut lalai untuk lalai foto: {src: 'placeholder.jpg', kapsyen: 'Gambar lalai', dilihat: false}, // Pastikan setiap foto yang dibuat mempunyai `src`. initialize: function () {this.set ({'src': this.defaults.src})}})Dalam galeri foto, konsep foto akan sesuai dengan modelnya sendiri, kerana ia mewakili jenis data khusus domain yang unik. Model sedemikian mungkin mengandungi atribut yang berkaitan seperti kapsyen, sumber gambar, dan metadata tambahan. Dalam contoh di atas, foto tertentu akan disimpan dalam contoh model.
Pandangan
Pandangan adalah gambaran visual model yang memberikan pandangan yang difilter mengenai keadaannya sekarang. Paparan JavaScript digunakan untuk membangun dan mengekalkan elemen DOM. Pandangan biasanya memerhatikan model dan diberitahu ketika model berubah, yang membolehkan pandangan memperbaharui dirinya dengan sewajarnya. Sebagai contoh:
cara keluar program di java
var buildPhotoView = function (photoModel, photoController) {var base = document.createElement ('div'), photoEl = document.createElement ('div') base.appendChild (photoEl) var render = function () {// Kami menggunakan perpustakaan templat seperti Underscore // templating yang menghasilkan HTML untuk // photo entry photoEl.innerHTML = _.template kami ('#photoTemplate', {src: photoModel.getSrc ()})} photoModel.addSubscriber (render) photoEl. addEventListener ('klik', function () {photoController.handleEvent ('click', photoModel)}) var show = function () {photoEl.style.display = '} var hide = function () {photoEl.style.display = 'none'} kembali {showView: show, hideView: hide}}Manfaat seni bina ini adalah bahawa setiap komponen memainkan peranan tersendiri dalam membuat aplikasi berfungsi seperti yang diperlukan.
Pengawal
Pengawal bertindak seperti perantara antara model dan pandangan, yang bertanggungjawab untuk mengemas kini model ketika pengguna memanipulasi pandangan. Dalam contoh aplikasi galeri foto kami di atas, pengawal bertanggungjawab untuk menangani perubahan yang dibuat pengguna pada paparan suntingan untuk foto tertentu, mengemas kini model foto tertentu ketika pengguna selesai mengedit.
var PhotosController = Spine.Controller.sub ({init: function () {this.item.bind ('update', this.proxy (this.render)) this.item.bind ('hancurkan', this.proxy (ini .remove))}, render: function () {// Handle templating this.replace ($ ('#photoTemplate') .tmpl (this.item)) kembali ini}, remove: function () {this.el.remove () ini.rilis ()}})Contoh ini akan memberi anda kaedah yang sangat ringan dan sederhana untuk menguruskan perubahan antara model dan pandangan.
php buat susunan dari rentetan
Rangka Kerja MVC JavaScript
Dalam beberapa tahun kebelakangan ini, satu siri JavaScript MVC telah dibangunkan. Setiap kerangka ini mengikuti beberapa bentuk corak MVC dengan tujuan mendorong pembangun untuk menulis kod JavaScript yang lebih tersusun. Beberapa Kerangka Kerja adalah:
- tulang belakang.js
- Ember.js
- SudutJS
- Sencha
- Kendo UI
Dengan ini, kita telah sampai pada akhir artikel JavaScript MVC. Saya harap anda memahami tiga komponen yang terlibat dalam seni bina MVC.
Sekarang setelah anda mengetahui tentang JavaScript MVC, lihat oleh Edureka. Latihan Pengesahan Pembangunan Web akan membantu anda belajar bagaimana membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).
Ada soalan untuk kami? Sila sebutkan di bahagian komen 'JavaScript MVC' dan kami akan menghubungi anda.