Tiga kerangka kerja front-end web utama: 1. Angular, kerangka kerja front-end yang digunakan untuk membuat antarmuka aplikasi tunggal, dengan fungsi modul yang kuat dan perintah khusus; 2. React, JavaScript yang digunakan untuk membangun kerangka pengembangan antarmuka pengguna, terutama digunakan untuk build UI; 3. vue, merupakan kerangka kerja JavaScript progresif untuk membangun antarmuka pengguna. Pustaka inti Vue hanya berfokus pada lapisan tampilan, dan sangat mudah dipelajari dan diintegrasikan dengan pustaka lain atau proyek yang sudah ada.
Lingkungan pengoperasian tutorial ini: sistem Windows 7, komputer Dell G3.
Dalam sepuluh tahun terakhir, industri TI telah berkembang pesat dan banyak profesi baru bermunculan, seperti perancang UI, insinyur pengembangan, insinyur pengujian perangkat lunak, dll. Di antara banyak profesi baru yang terkenal, insinyur front-end Web adalah salah satu dari banyak profesi baru yang terkenal. mereka. Jadi apa saja tiga framework utama untuk web front-end?
Tiga kerangka web front-end utama adalah Angular, React, dan Vue.
1. Sudut
AngularJS dibuat pada tahun 2009 oleh Misko Hevery dan lainnya, dan kemudian diakuisisi oleh Google. Ini adalah kerangka kerja JS front-end luar biasa yang digunakan di banyak produk. Ini bukan hanya kerangka pengembangan front-end dengan konsep-konsep canggih, tetapi juga solusi end-to-end. Ini mengikuti pola MVC dalam desain arsitektur dan menganjurkan penggabungan data dan komponen pemrosesan logis secara longgar. AngularJS mewujudkan perluasan alami HTML melalui teknologi instruksi, dan mewujudkan sinkronisasi otomatis dua arah model data dan tampilan tampilan melalui teknologi kompilasi, sehingga mengurangi operasi DOM yang kompleks. Selain itu, ini juga memberikan dukungan yang baik untuk teknologi pengujian otomatis front-end.
Angular adalah kerangka kerja front-end untuk membuat antarmuka aplikasi tunggal. Ia memiliki banyak fitur inti seperti pengikatan data, layanan, arahan, injeksi ketergantungan, dll. Ini memiliki fungsi modul yang kuat dan memiliki keunggulan perintah khusus
ciri:
1. Struktur aplikasi yang baik
2. Pengikatan data dua arah
3.Instruksi
4. Templat HTML
5. Dapat ditanamkan, disuntikkan dan diuji
keuntungan:
1. Templat ini kuat dan kaya akan fungsi, serta dilengkapi dengan serangkaian instruksi sudut yang sangat kaya.
2. Ini adalah kerangka kerja front-end yang relatif lengkap, termasuk layanan, templat, pengikatan data dua arah, modularisasi, perutean, filter, injeksi ketergantungan, dan fungsi lainnya;
3. Sesuaikan instruksi. Setelah menyesuaikan instruksi, Anda dapat menggunakannya beberapa kali dalam proyek.
4. Modulasi ng dengan berani memperkenalkan beberapa hal dari Java (injeksi ketergantungan), yang memudahkan penulisan kode yang dapat digunakan kembali, yang sangat membantu tim pengembangan tangkas.
5.angularjs dikembangkan oleh raksasa Internet Google, yang juga berarti memiliki dasar yang kuat dan dukungan komunitas.
kekurangan:
1. Memulai dengan sudut itu mudah, tetapi setelah Anda mendalaminya lebih dalam, ada banyak konsep yang sulit dipahami selama pembelajaran.
2. Ada sangat sedikit contoh dalam dokumentasi. Dokumentasi resmi pada dasarnya hanya membahas tentang API tanpa contoh apa pun. Dalam banyak kasus, Anda bisa mendapatkan instruksi spesifik dari Google, atau langsung bertanya kepada Misko, penulis Angular.
3. Kompatibilitas dengan IE6/7 tidak terlalu bagus, tetapi Anda dapat menggunakan jQuery untuk menulis kode Anda sendiri untuk menyelesaikan beberapa masalah.
4. Ada beberapa tutorial praktik terbaik tentang penerapan instruksi. Angular sebenarnya sangat fleksibel. Jika Anda tidak mengikuti prinsip penggunaan beberapa penulis, mudah untuk menulis kode yang berbeda yang mirip dengan jQuery.
5. Injeksi ketergantungan DI memerlukan deklarasi eksplisit jika kompresi kode diperlukan.
2. Bereaksi
React, yang diproduksi oleh Facebook, secara resmi diluncurkan pada tahun 2013, 4 tahun lebih lambat dari Angular. Namun, berkat VirtualDOM yang inovatif, kinerjanya melampaui AngularJS. Ini memiliki banyak fitur, termasuk VirtualDOM, JSX, algoritma Diff, dll., mendukung sintaks ES6, dan menggunakan pemrograman fungsional. Ambang batasnya sedikit lebih tinggi, tetapi juga lebih fleksibel, memungkinkan lebih banyak kemungkinan pengembangan.
ciri
1. Desain deklaratif: React mengadopsi paradigma deklaratif, yang membuatnya mudah untuk mendeskripsikan aplikasi.
2. Efisien: React meminimalkan interaksi dengan DOM dengan melakukan simulasi DOM.
3. Fleksibel: React bekerja dengan baik dengan perpustakaan atau kerangka kerja yang dikenal.
keuntungan:
1. Kecepatan tinggi: Selama proses rendering UI, React mengimplementasikan pembaruan parsial pada DOM sebenarnya melalui operasi mikro di DOM virtual.
2. Kompatibilitas lintas-browser: Virtual DOM membantu kita memecahkan masalah lintas-browser. Ini memberi kita API standar, yang tidak menjadi masalah bahkan di IE8.
3. Modularisasi: Tulis komponen UI modular independen untuk program Anda, sehingga ketika ada masalah dengan satu atau beberapa komponen, Anda dapat dengan mudah mengisolasinya.
4. Aliran data satu arah: Flux adalah arsitektur untuk membuat lapisan data satu arah dalam aplikasi JavaScript 5. Isomorfik, JavaScript murni: Karena perayap mesin telusur mengandalkan respons sisi server daripada eksekusi JavaScript, lakukan Pra-render aplikasi Anda membantu dengan SEO. 6. Kompatibilitas yang baik: Misalnya, RequireJS digunakan untuk memuat dan mengemas, sedangkan Browserify dan Webpack cocok untuk membangun aplikasi besar. Mereka membuat tugas-tugas sulit itu menjadi tidak terlalu menakutkan. Kekurangan: React sendiri hanyalah sebuah V, bukan framework yang lengkap, jadi jika Anda menginginkan framework yang lengkap untuk proyek besar, pada dasarnya Anda perlu menambahkan ReactRouter dan Flux untuk menulis aplikasi besar.
3.Vue
Saat kerangka kerja terakhir diluncurkan (2014), Vue memanfaatkan fitur-fitur pendahulunya yang bersudut dan bereaksi (seperti VirtualDOM, pengikatan data dua arah, algoritma diff, properti responsif, pengembangan komponen, dll.) dan membuat optimasi yang relevan untuk menjadikannya dapat digunakan. Lebih nyaman, lebih mudah untuk memulai, dan kurang cocok untuk pemula.
ciri:
1. Kerangka ringan
2. Pengikatan data dua arah
3.Instruksi
4. Pengaya
keuntungan:
1. Sederhana: Dokumentasi resminya sangat jelas dan lebih mudah dipelajari dibandingkan Angular.
2. Cepat: Perbarui DOM dalam pemrosesan batch asinkron.
3. Komposisi: Susun aplikasi Anda dengan komponen yang dipisahkan dan dapat digunakan kembali.
4. Ringkas: ~18kbmin+gzip, dan tidak ada ketergantungan.
5. Kuat: ekspresi tidak perlu mendeklarasikan properti yang dapat dikurangkan (computedproperties).
6. Ramah modul: Dapat diinstal melalui NPM, Bower atau Duo. Ini tidak memaksa semua kode Anda untuk mengikuti berbagai peraturan Angular, dan skenario penggunaannya lebih fleksibel.
kekurangan:
1. Baru Lahir: Vue.js adalah proyek baru, belum matang seperti Angular.
2. Pengaruhnya tidak terlalu besar: Saya mencari di Google dan menemukan bahwa keragaman atau kekayaan Vue.js kurang dibandingkan beberapa perpustakaan terkenal lainnya.
3. Tidak mendukung IE8.
Pengetahuan yang diperluas: Apa perbedaan antara Vue.js dan framework lainnya?
1. Perbedaan dari AngularJS
Poin serupa:
Kedua instruksi dukungan: instruksi bawaan dan instruksi khusus.
Keduanya mendukung filter: filter bawaan dan filter khusus.
Keduanya mendukung pengikatan data dua arah.
Tidak ada yang mendukung browser kelas bawah.
Perbedaan:
1. Biaya pembelajaran AngularJS tinggi, seperti penambahan fitur Dependency Injection, sedangkan API yang disediakan oleh Vue.js sendiri relatif sederhana dan intuitif.
2. Dari segi performa, AngularJS mengandalkan pengecekan data yang kotor, jadi semakin banyak Watchers, semakin lambat jadinya.
Vue.js menggunakan observasi berbasis pelacakan ketergantungan dan menggunakan pembaruan antrian asinkron. Semua data dipicu secara independen.
Untuk aplikasi besar, perbedaan optimasi ini cukup jelas.
2. Perbedaan dengan React
Poin serupa:
React menggunakan sintaks JSX khusus, dan Vue.js juga merekomendasikan penulisan format file khusus .vue dalam pengembangan komponen. Ada beberapa konvensi pada konten file, dan keduanya perlu dikompilasi untuk digunakan.
Ide utamanya sama: semuanya adalah sebuah komponen, dan instance komponen dapat disarangkan.
Semuanya menyediakan fungsi pengait yang masuk akal, memungkinkan pengembang untuk menyesuaikan kebutuhan mereka.
Kolom AJAX, Rute, dan fungsi lainnya tidak dimasukkan ke dalam paket inti, tetapi dimuat sebagai plug-in.
Fitur mixin didukung dalam pengembangan komponen.
Perbedaan:
React mengandalkan Virtual DOM, sedangkan Vue.js menggunakan template DOM. Virtual DOM yang digunakan oleh React akan melakukan pemeriksaan kotor pada hasil yang dirender.
Vue.js menyediakan instruksi, filter, dll. dalam template, yang dapat mengoperasikan DOM dengan sangat mudah dan cepat.
Di atas adalah detail isi dari tiga framework front-end web mainstream. Untuk informasi lebih lanjut, harap perhatikan artikel terkait lainnya di situs ini!