MVC
ModelViewController (MVC) adalah model pengembangan antarmuka pengguna komputer yang memisahkan logika presentasi informasi dan interaksi pengguna; Model berisi data aplikasi dan logika bisnis; Controller bertanggung jawab untuk mengubah input pengguna menjadi perintah dan meneruskannya untuk memodelkan dan melihat; Ini adalah penjelasan Wikipedia;
Model ini awalnya dirancang oleh Trygve Reenskaug ketika bekerja dengan SmallTalk-80 (1979), dan pertama kali disebut model-view-controller-editor; Kemudian, melalui pengenalan mendalam dari buku "Pola Desain: Elemen Perangkat Lunak Berorientasi Objek yang Dapat Digunakan kembali", MVC menjadi sangat populer;
Memahami tanggung jawab membentuk tiga bagian MVC dan apa yang diberikan oleh kerangka kerja JavaScript yang ada sehingga kita dapat menggunakan kerangka kerja ini dengan lebih baik. Selanjutnya, pertama -tama kita akan melewati tiga bagian yang membentuk MVC untuk mempelajari apa tanggung jawab masing -masing bagian [diberikan kode demonstrasi dengan tulang punggung sebagai contoh].
Model
Model mengelola data aplikasi. Ketika data model berubah, pendengarnya akan diberitahu [mungkin tampilan]. Setelah menerima pemberitahuan, pendengar akan membuat perubahan yang sesuai.
Melihat
View adalah representasi visual dari model keadaan saat ini. Tampilan akan mengamati perubahan model dan diberitahukan ketika model berubah, dan memungkinkan tampilan untuk memperbarui dirinya sendiri. Secara umum, kami akan menggunakan mesin templat untuk membuat model dalam tampilan;
Pengontrol
Pengontrol adalah mediator antara model dan tampilan. Tugasnya adalah memperbarui tampilan ketika model berubah dan memperbarui model ketika pengguna mengoperasikan tampilan.
Perbandingan Kerangka Javascipt MVC
Orang yang berbeda memiliki metode perbandingan yang berbeda, kuncinya tergantung pada apa yang Anda perhatikan:
1. Jika Anda lebih memperhatikan detail dari routing URL kerangka kerja, penyimpanan data, implementasi melihat, dll., Anda dapat fokus pada ini, JavaScript Throne: Framework Sword;
2. Jika Anda lebih memperhatikan contoh -contoh spesifik dari kerangka kerja, ada proyek open source di sini yang menggunakan kerangka kerja MVC JavaScript yang berbeda untuk demo yang sama. Anda dapat dengan jelas melihat perbedaan dalam aplikasi spesifik dari setiap kerangka kerja. Inilah situs web resmi TODOMVC
Manfaat MVC Dibawa Kepada Kami:
1. Mudah dipertahankan
2. Decoupling tampilan model berarti bahwa logika bisnis dapat diuji dengan lebih baik.
3. Kode ini dapat digunakan kembali dengan lebih baik
4. Pengembangan modular dapat membuat pembagian kerja lebih jelas, beberapa orang fokus pada logika bisnis, dan beberapa orang fokus pada antarmuka pengguna.
5. Setelah meninjau model MVC klasik, kami memahami konsep pelapisan dalam aplikasi dan tanggung jawab masing -masing lapisan. Pada saat yang sama, kita harus dapat mengidentifikasi perbedaan antara semua kerangka kerja MVC JavaScript dan model MVC klasik yang kami jelaskan. Dengan cara ini, ketika memilih kerangka kerja MVC, kita harus fokus pada bagaimana model, tampilan, pengontrol diimplementasikan, dan bahkan bagaimana menerapkan kode tertentu, sehingga membantu kita lebih memilih kerangka kerja MVC JavaScript yang paling cocok.
MVVM
Nama lengkap MVVM adalah model tampilan viewmodel. Model arsitektur ini awalnya diusulkan oleh Microsoft's Martinfowler sebagai spesifikasi model desain lapisan presentasi Microsoft. Ini adalah turunan dari model MVC. Fokus dari model MVVM adalah pada platform pengembangan UI yang dapat mendukung acara yang digerakkan oleh peristiwa, seperti HTML5, [2] [3] Windowspresentation Foundation (WPF), Silverlight dan T ZK Framework, Adobe Flex.
Sebagian besar implementasi model ini dipisahkan dari lapisan lain dengan menyatakan pengikatan data di lapisan tampilan, yang memfasilitasi pembagian kerja antara pengembang front-end dan pengembang back-end. Pengembang front-end menulis data terikat ke ViewModel di tag HTML. Model dan ViewModel adalah pengembang back-end yang mempertahankan kedua lapisan ini melalui logika pengembangan aplikasi.
Dalam beberapa tahun terakhir, model MVVM telah mulai diimplementasikan dalam JavaScript. Saat ini, kerangka kerja yang relatif matang termasuk KnockoutJs, Kendo MVVM dan Knockback.js. Mari kita ambil knockoutjs sebagai contoh untuk melihat tanggung jawab spesifik dan kode contoh dari setiap bagian dari model MVVM, dan pada saat yang sama memahami kelebihan dan kekurangan menggunakan model ini untuk dikembangkan.
Model
Seperti anggota keluarga MV* lainnya, model mewakili data dalam bidang tertentu atau data yang diperlukan untuk aplikasi, data khusus bidang khas seperti informasi pengguna [nama pengguna, avatar, email, nomor telepon], atau informasi musik [nama lagu, tahun rilis, album];
Model hanya berfokus pada informasi data dan tidak peduli dengan perilaku apa pun; Itu tidak memformat data atau mempengaruhi tampilan data di browser, yang bukan tanggung jawabnya; Memformat data adalah tugas lapisan tampilan, dan lapisan logika bisnis dienkapsulasi dalam model tampilan untuk berinteraksi dengan model.
Perilaku yang lebih tidak terduga yang dilakukan di lapisan model adalah untuk memverifikasi data. Misalnya, ketika pengguna memasukkan email, tentukan apakah format email sudah benar.
Dalam KnockoutJS, model pada dasarnya diimplementasikan sesuai dengan definisi di atas, tetapi akan ada layanan server panggilan AJAX untuk membaca dan menulis data model.
Melihat
View mengacu pada bagian dari aplikasi yang berinteraksi langsung dengan pengguna. Ini adalah UI interaktif untuk mewakili keadaan viewmodel. View dianggap aktif daripada pasif? Kalimat ini berarti bahwa pandangan pasif tidak peduli dengan domain model dalam aplikasi, dan domain model dipertahankan dalam pengontrol; Tampilan aktif MVVM meliputi pengikatan data, peristiwa dan perilaku model dan viewmodel perlu dipahami. Meskipun perilaku ini dapat sesuai dengan atribut, pandangan masih perlu menanggapi kejadian viewmodel, dan pandangan tidak bertanggung jawab untuk mengendalikan negara.
Lapisan tampilan KnockoutJS adalah dokumen HTML sederhana, yang akan dikaitkan dengan deklarasi data viewmodel. Pada saat yang sama, lapisan tampilan KnockoutJs menampilkan data yang diperoleh dari ViewModel, meneruskan perintah ke ViewModel, dan memperbarui keadaan yang berubah dari ViewModel.
ViewModel
Dapat dipertimbangkan bahwa ViewModel adalah pengontrol yang digunakan khusus untuk konversi data. Itu dapat mengonversi informasi dalam model menjadi informasi dalam tampilan, dan pada saat yang sama perintah pass dari tampilan ke model;
Dalam hal ini, ViewModel terlihat lebih seperti model, tetapi mengontrol banyak logika tampilan tampilan. Pada saat yang sama, ViewModel juga memaparkan beberapa metode untuk mempertahankan keadaan tampilan dan memperbarui model sesuai dengan perilaku dan peristiwa tampilan;
Singkatnya, viewmodel terletak di belakang lapisan UI, dan mengekspos data ke tampilan dapat dianggap sebagai sumber data dan perilaku lapisan tampilan;
KnockoutJS menafsirkan ViewModels sebagai tampilan data dan perilaku yang diekspresikan pada UI. Ini bukan model data yang perlu bertahan, tetapi dapat menyimpan data yang disimpan oleh pengguna. ViewModels Knockout diimplementasikan menggunakan objek JavaScript, dan tidak perlu peduli dengan tag HTML. Metode abstrak ini dapat membuat implementasinya tetap sederhana.
keuntungan:
1.MVVM membuat pengembangan paralel lebih mudah, sehingga pengembangan front-end dan pengembang back-end tidak saling mempengaruhi.
2. Abstrak Lapisan Tampilan, Mengurangi Logika Bisnis dalam Kode
3.ViewModel lebih mudah diuji daripada yang didorong oleh peristiwa
4. Tes ViewModel tidak perlu peduli tentang otomatisasi dan interaksi UI
kekurangan:
1. Untuk UI sederhana, menggunakan MVVM agak terlalu berat
2. Ikatan data deklaratif tidak kondusif untuk debugging, karena kode imperatif dapat dengan mudah mengatur breakpoint, dan mode ini tidak kondusif untuk mengatur breakpoint tersebut.
3. Ikatan data dapat membuat banyak pembukuan dalam aplikasi non-sepele. Anda juga tidak ingin berakhir dengan situasi yang lebih kompleks di mana ikatan lebih rumit daripada objek terikat.
4. Dalam aplikasi besar, sulit untuk merancang lapisan model tampilan sebelum mendapatkan sejumlah besar generalisasi.