Rangka kerja bahagian hadapan web termasuk: 1. Sudut, rangka kerja bahagian hadapan untuk mencipta antara muka aplikasi tunggal 2. bertindak balas, rangka kerja pembangunan JavaScript untuk membina antara muka pengguna; rangka kerja JavaScript progresif untuk membina antara muka pengguna; -pustaka komponen akhir.

Persekitaran pengendalian tutorial ini: sistem Windows 7, komputer Dell G3.

Halaman hadapan web, juga dikenali sebagai "klien", adalah mengenai aspek visual tapak web yang boleh dilihat dan dialami oleh pengguna, iaitu semua yang pengguna lihat dan apa yang dipaparkan oleh pelayar web, melibatkan apa yang pengguna boleh lihat , semua yang anda sentuh dan alami iaitu, bahagian hadapan web termasuk struktur halaman web, penampilan visual web dan pelaksanaan interaksi di peringkat web.

Apakah rangka kerja bahagian hadapan web Ditubuhkan pada tahun 2009 dan kemudiannya diperoleh oleh Google. Ia merupakan rangka kerja JS bahagian hadapan yang sangat baik yang digunakan dalam banyak produk. Ia bukan sahaja rangka kerja pembangunan bahagian hadapan dengan konsep lanjutan, tetapi juga penyelesaian hujung ke hujung. Ia mengikuti corak MVC dalam reka bentuk seni bina dan menyokong gandingan longgar data dan komponen pemprosesan logik. AngularJS merealisasikan lanjutan semula jadi HTML melalui teknologi arahan, dan merealisasikan penyegerakan automatik dua hala model data dan paparan paparan melalui teknologi kompilasi, mengurangkan operasi DOM yang kompleks. Selain itu, ia juga menyediakan sokongan yang baik untuk teknologi ujian automatik bahagian hadapan.

Angular ialah rangka kerja bahagian hadapan untuk mencipta antara muka aplikasi tunggal Ia mempunyai banyak ciri teras seperti pengikatan data, perkhidmatan, arahan, suntikan pergantungan, dll. Ia mempunyai fungsi modul yang berkuasa dan mempunyai kelebihan arahan tersuai

Ciri:

Struktur aplikasi yang baik

2. Pengikatan data dua hala

• 3 Arahan

• 4.Templat HTML
  <.>
5. Boleh dibenamkan, disuntik dan diuji
• Kelebihan:

• 1 Berkuasa dan kaya, ia datang dengan set arahan sudut yang sangat kaya.

2. Ia adalah rangka kerja bahagian hadapan yang agak lengkap, termasuk perkhidmatan, templat, pengikatan data dua hala, pemodulatan, penghalaan, penapis, suntikan kebergantungan dan semua fungsi lain

3 Sesuaikan arahan Selepas menyesuaikan arahan, anda boleh menggunakannya beberapa kali dalam projek.
4.ng modulariti dengan berani memperkenalkan beberapa perkara daripada Java (suntikan kebergantungan), yang boleh menulis kod boleh guna semula dengan mudah, untuk pasukan pembangunan tangkas Sangat membantu.
5.angularjs dibangunkan oleh gergasi Internet Google, yang juga bermakna ia mempunyai asas yang kukuh dan sokongan komuniti.
• Kelemahan:

• 1 Sudut mudah untuk dimulakan tetapi terdapat banyak konsep apabila anda mendalami dan ia lebih sukar untuk difahami semasa pembelajaran.

2. Terdapat sangat sedikit contoh dokumentasi rasmi pada asasnya hanya bercakap tentang API, dan tidak ada contoh langsung daripada Google, atau tanya terus misko, pengarang sudut.

3. Keserasian dengan IE6/7 tidak begitu baik, tetapi anda boleh menggunakan jQuery untuk menulis kod anda sendiri untuk menyelesaikan beberapa masalah.
4. Terdapat beberapa tutorial amalan terbaik untuk penggunaan arahan Angular sebenarnya sangat fleksibel kod, seperti dalam js atau Berfikir seperti jQuery terdapat banyak operasi dom.
5. Suntikan pergantungan DI memerlukan pengisytiharan yang jelas jika pemampatan kod diperlukan.

• 2. React

• React, dihasilkan oleh Facebook, versi rasmi dilancarkan pada 2013, lewat daripada sudut Ia mengambil masa 4 tahun, tetapi terima kasih kepada VirtualDOM yang inovatif, ia mengatasi angularJS dari segi prestasi Setelah ia dilancarkan, ia menjadi sangat popular. Ia mempunyai banyak ciri, termasuk VirtualDOM, JSX, algoritma Diff, dll., menyokong sintaks ES6, dan menggunakan pengaturcaraan berfungsi Ambangnya lebih tinggi sedikit, tetapi ia juga lebih fleksibel, membenarkan lebih banyak kemungkinan pembangunan.

Ciri

1. Reka bentuk deklaratif: React mengamalkan paradigma deklaratif, yang boleh menerangkan aplikasi dengan mudah.

2. Kecekapan: React meminimumkan interaksi dengan DOM dengan mensimulasikan DOM.

3. Fleksibel: React berfungsi dengan baik dengan perpustakaan atau rangka kerja yang diketahui.
• Kelebihan:

• 1 Pantas: Semasa proses pemaparan UI, React lulus operasi Mikro untuk dilaksanakan kemas kini tempatan kepada DOM sebenar.

2. Keserasian merentas penyemak imbas: DOM Maya membantu kami menyelesaikan masalah merentas penyemak imbas. Ia memberikan kami API piawai, yang tiada masalah walaupun dalam IE8.

3. Modularisasi: Tulis komponen UI modular bebas untuk program anda, supaya apabila terdapat masalah dengan satu atau beberapa komponen, anda boleh mengasingkannya dengan mudah.

• 4. Aliran data sehala: Fluks ialah seni bina untuk mencipta lapisan data sehala dalam aplikasi JavaScript 5. Isomorphic, JavaScript tulen: Kerana perangkak enjin carian bergantung pada Dengan menyediakan bahagian pelayan respons daripada melaksanakan JavaScript, pra-pemarahan apl anda membantu dengan SEO. 6. Keserasian yang baik: Contohnya, RequireJS digunakan untuk memuatkan dan membungkus, manakala Browserify dan Webpack sesuai untuk membina aplikasi yang besar. Mereka menjadikan tugas yang sukar itu kurang menakutkan. Kelemahan: React itu sendiri hanyalah sebuah V, bukan rangka kerja yang lengkap, jadi jika anda mahukan rangka kerja yang lengkap untuk projek besar, anda pada asasnya perlu menambah ReactRouter dan Flux untuk menulis aplikasi yang besar.

3 Vue

Vue, sebagai rangka kerja terakhir yang dilancarkan (2014), menggunakan sudut dan sudut sebelumnya. React Ciri (seperti VirtualDOM, pengikatan data dua hala, algoritma perbezaan, atribut responsif, pembangunan komponen, dll.) dan pengoptimuman yang berkaitan telah dibuat untuk menjadikannya lebih mudah digunakan, lebih mudah untuk bermula dan kurang sesuai untuk pemula.

Ciri:

• 1 Rangka kerja ringan

• 2

• 3. Perintah

• 4. Plug-in

Kelebihan:

• 1 Mudah: Dokumentasi rasmi sangat jelas dan lebih mudah dipelajari daripada Angular.

• 2. Cepat: Kemas kini DOM dalam pemprosesan kelompok tak segerak.

• 3. Komposisi: Karang aplikasi anda dengan komponen boleh diguna semula yang dipisahkan.

• 4. Padat: ~18kbmin gzip, dan tiada kebergantungan.

• 5. Berkuasa: ungkapan tidak perlu mengisytiharkan sifat boleh ditolak bergantung (sifat dikira).

• 6. Mesra modul: Ia boleh dipasang melalui NPM, Bower atau Duo Ia tidak memaksa semua kod anda untuk mengikut pelbagai peraturan Angular, dan senario penggunaan adalah lebih fleksibel.

Kelemahan:

• 1 Bayi Baru Lahir: Vue.js ialah projek baharu, tidak matang seperti sudut .

• 2 Kesannya tidak begitu besar: Saya melayari google dan mendapati bahawa kepelbagaian atau kekayaan Vue.js adalah kurang daripada beberapa perpustakaan terkenal yang lain

• 3. IE8 tidak disokong.

4. . Ia adalah kit alat bahagian hadapan yang direka untuk pembangunan pesat aplikasi web. Ia menyokong reka letak responsif dan mematuhi keutamaan peranti mudah alih selepas versi V3. Bootstrap menyediakan spesifikasi HTML dan CSS yang elegan, yang ditulis dalam bahasa CSS dinamik Less. Bootstrap telah menjadi sangat popular sejak dilancarkan dan telah menjadi projek sumber terbuka yang popular di GitHub, termasuk Berita Terkini MSNBC (Microsoft National Broadcasting Company) NASA. Beberapa rangka kerja yang biasa kepada pembangun mudah alih domestik, seperti rangka kerja sumber terbuka bahagian hadapan hadapan WeX5, juga dioptimumkan prestasi berdasarkan kod sumber Bootstrap.

Alamat rasmi: https://getbootstrap.com

Alamat Cina: http://www.bootcss.com/

Ciri Bootstrap

Bootstrap sangat popular kerana fungsi dan cirinya yang sangat berguna. Ciri teras utama adalah seperti berikut: 1) Peranti silang dan penyemak imbas silang

Boleh serasi dengan semua penyemak imbas moden, termasuk IE7 dan 8 yang lebih dikritik. Sudah tentu, kursus ini tidak lagi menganggap pelayar di bawah IE9.

2) Reka letak responsif

Bukan sahaja boleh menyokong paparan pelbagai resolusi pada PC, tetapi juga menyokong paparan pensuisan responsif PAD mudah alih, telefon mudah alih dan skrin lain.

3) Komponen komprehensif disediakan

Bootstrap menyediakan komponen yang sangat praktikal, termasuk: navigasi, label, bar alat, butang dan satu siri komponen, yang mudah untuk dipanggil oleh pembangun.

4) Pemalam jQuery terbina dalam

Bootstrap menyediakan banyak pemalam jquery praktikal, yang memudahkan pembangun melaksanakan pelbagai kesan khas biasa di Web.

5) Sokong HTML5, CSS3

Teg semantik HTML5 dan atribut CSS3 disokong dengan baik.

6) Menyokong gaya dinamik KURANG

Kurang menggunakan pembolehubah, sarang dan pengekodan bercampur operasi untuk menulis CSS yang lebih pantas dan lebih fleksibel. Ia boleh dibangunkan dengan baik dengan Bootstrap.

5. UI PANTAS

UI PANTAS ialah penyelesaian pembangunan bahagian hadapan web peringkat perusahaan yang lengkap, yang terdiri daripada rangka kerja asas, komponen UI perpustakaan, Ia terdiri daripada pakej kulit, projek sampel dan dokumentasi. Pembangun yang menggunakan QUICKUI boleh mengurangkan beban kerja mereka dan meningkatkan kecekapan pembangunan serta membina sistem aplikasi web yang berkuasa, cantik dan serasi dengan cepat.

6. MDC Web

Komponen Bahan untuk web (MDC Web), rangka kerja hadapan baharu yang direka oleh Google untuk Web . MDC Web membantu pembangun melaksanakan Reka Bentuk Bahan dan komponen dibangunkan oleh pasukan teras jurutera dan pereka UX Google. Komponen ini membolehkan aliran kerja pembangunan yang boleh dipercayai untuk membina projek web yang cantik dan berfungsi.

7. Tulen

Bootstrap, Patternfly dan MDC Web ialah rangka kerja CSS yang sangat berkuasa, tetapi sangat membosankan dan kompleks. Jika anda mahukan rangka kerja CSS yang ringan, disyorkan untuk mencuba Pure.css Ia lebih dekat dengan pengaturcaraan CSS, tetapi ia juga boleh membantu membina halaman web yang baik. Pure ialah rangka kerja CSS yang ringan dengan jejak minimum Ia dibangunkan oleh Yahoo dan sumber terbuka di bawah lesen BSD.

8. Yayasan

Yayasan mendakwa sebagai rangka kerja bahagian hadapan responsif paling maju di dunia. Ia menyediakan ciri dan tutorial lanjutan untuk membina tapak web profesional. Rangka kerja ini digunakan oleh banyak syarikat, organisasi dan mempunyai dokumentasi yang luas tersedia.

9 Bulma

Rangka kerja sumber terbuka Bulma berdasarkan Flexbox ialah sumber terbuka di bawah lesen MIT. Rangka kerja yang sangat ringan yang hanya memerlukan satu fail CSS. Bulma mempunyai dokumentasi yang ringkas dan jelas menjadikannya mudah untuk memilih tema yang anda inginkan. Terdapat juga banyak komponen web yang tersedia untuk menggunakannya dalam reka bentuk anda.

10. Rangka

Rangka kerja ringan. Pustaka Skeleton hanya sepanjang kira-kira 400 baris, dan rangka kerja hanya menyediakan beberapa komponen rangka kerja CSS asas. Skeleton masih menyediakan dokumentasi terperinci untuk membantu anda bermula dengan cepat.

11. Materialize

Materialize ialah rangka kerja bahagian hadapan responsif moden berdasarkan gaya Reka Bentuk Bahan, yang menyelesaikan kerja yang paling sukar komponen tersuai menyediakan gaya lalai. Halaman dokumentasi Materialize sangat komprehensif dan mudah diikuti. Halaman komponennya termasuk butang, kad, navigasi, dsb.

12. Bootflat

Bootflat ialah rangka kerja CSS sumber terbuka yang diperoleh daripada Bootstrap Twitter. Bootflat lebih ringkas dan lebih ringan daripada Bootstrap. Kebanyakan imej tanpa banyak teks.

13 PatternFly

PatternFly ialah rangka kerja CSS sumber terbuka Red Hat Tidak seperti Bootstrap, Bootstrap adalah untuk mereka yang ingin mencipta tapak web yang cantik. Direka bentuk untuk pembangun, PatternFly tertumpu terutamanya pada pembangun aplikasi perusahaan yang menyediakan komponen seperti carta bar, carta, navigasi, dll. Malah, Red Hat menggunakannya untuk mencipta OpenShift. Selain HTML statik, PatternFly juga menyokong rangka kerja ReactJS, rangka kerja JavaScript popular yang dibangunkan oleh Facebook. PatternFly mempunyai banyak komponen lanjutan seperti carta bar, carta, corak dan reka letak yang sesuai untuk aplikasi peringkat perusahaan.

14 flex

Flex masih dalam peringkat inkubasi dan belum lagi merupakan projek Apache rasmi Projek Apache sama ada. , versi ini menandakan permulaan era baharu untuk Flex, di mana masa depan Flex akan didorong oleh komuniti dan bukannya oleh satu syarikat. Pembangun boleh membantu meningkatkan Flex dengan menyumbang kod, seperti membetulkan pepijat, menambah ciri, dsb.

Di atas ialah beberapa rangka kerja yang biasa digunakan untuk pembangunan bahagian hadapan Web yang dikongsi oleh Xiaoqian. Pengaturcara boleh memilih rangka kerja pembangunan bahagian hadapan yang ringkas, intuitif dan berkuasa berdasarkan keperluan perniagaan mereka untuk menjadikan kerja mereka lebih pantas dan lebih mudah serta meningkatkan kecekapan pembangunan.

15. SUI

"SUI ialah perpustakaan komponen bahagian hadapan yang dibangunkan berdasarkan bootstrap, dan ia juga merupakan satu set spesifikasi reka bentuk . Melalui SUI menjadikannya sangat mudah untuk mereka bentuk dan melaksanakan halaman yang indah." Sudah tentu, adalah lebih baik untuk memetik iklan rasmi yang membosankan untuk menyelamatkan sel otak anda sendiri (囧...). jadilah apa yang Taobao berikan kepada mereka yang rugi. .

Github: https://github.com/sdc-alibaba/sui

Tapak web rasmi: http://sui.taobao.org/sui/docs/index.html

(Belajar perkongsian video: bahagian hadapan web)

Atas ialah kandungan terperinci Apakah rangka kerja yang ada untuk bahagian hadapan web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!