Sebelum mengimplementasikan tab Gaya MVVM dari AngularJS, pertama-tama kami memindahkan implementasi jQuery yang umum digunakan.
1. JQuery mencapai efek tab yang sederhana dan kasar
var nav = $ (". Tabs"); // tab switch var box = $ (". box"); // container nav.on ("click", function () {// klik event var this_index = $ (this) .index (); $ (ini) .addclass ("aktif"). Si kibling (). Removeclass ("Active"; box.eq (this_index) .show (). Siblings (). hide ();});Hanya bagian inti dari JS yang diberikan di sini, dan HTML dan CSS tidak terperinci.
Kode di atas secara sederhana dan secara kasar mengimplementasikan efek tab, dan menggunakan acara klik untuk mendapatkan elem.index() , string indeks dan wadah bersama -sama untuk mengontrol tampilan dan menyembunyikannya.
2. AngularJS mengimplementasikan efek tab sederhana
Bagian html
<bagian ng-app = "myapp"> <div ng-controller = "tabController sebagai tab"> <av> <ul> <li ng-class = "{'saat ini': tab.isset (1)}"> <a href = "#" ng-klick = "tab.setCurrent (1)"> <a href = "#" ng-click = "tab.setCurrent (1)"> <a span = "#" ng-click = "tab ng-class = "{'saat ini': tab.isset (2)}"> <a href = "#" ng-click = "tab.setCurrent (2)"> <span> work </span> </a> </li> <li ng-class = "{'saat ini': tab.isset (3)}"> <a href = "{" saat ini ': tab.isset (3)} "> <a href =" {"saat ini': tab.isset (3)}"> <a href = " ng-click = "tab.setCurrent (3)"> <span> Blog </span> </a> </li> <li ng-class = "{'saat ini': tab.isset (4)}"> <a href = "#" ng-click = "tab.setCurrent (4)"> <pan> tentang/span> </a> ng-class = "{'saat ini': tab.isset (5)}"> <a href = "#" ng-click = "tab.setCurrent (5)"> <span> Kontak </span> </a> </li> </sp> <Div> Bagian ID = "PITE-1" NG-SHOW = "Tab.isset (1) = Bagian Pot> </Pet/" PITIP-1 "PIT/PERTICE" NG-SHOW = "tab NG-show = "tab.isset (2)"> <p> 2 </p> </sticle> <bagian id = "bagian-3" ng-show = "tab.isset (3)"> <p> 3 </p> </section> <section id = "bagian-4" bagian-show = "Tab.isset (4)"> <p> 4 </Pection "Pection =" Tab.isset (4) "> <p> 4 </p detsion" pection = "Tab.isset (4)"> <p> 4 </p> p> bagian = "tab.isset (4)"> <p> 4 </p> p> bagian = "Tab.isset (4)"> <p> 4 </p> p> bagian = "bagian <" ng-show = "tab.isset (5)"> <p> 5 </p> </sticing> </div> </siction> Bagian CSS (untuk memfasilitasi kami menggunakan Less sintaks, sepatu anak -anak dapat menyesuaikan CSS untuk mencapai efek yang dipersonalisasi)
* {margin: 0; padding: 0;} body {latar belakang: #e7ecea; Font-Weight: 600; Font-Family: 'Raleway', Arial, Sans-Serif; text-align: center;} a {color: #2cc185; Dekorasi Teks: Tidak Ada; Garis Besar: Tidak Ada; &: hover {color: #74777b; }}. Tab {position: relatif; Lebar: 100%; Margin: 30px Auto 0 Auto; nav {ul {position: relatif; Tampilan: Flex; Max-Width: 1200px; margin: 0 otomatis; List-style: tidak ada; fleksibel: bungkus baris; Justify-Content: Center; li {flex: 1; & .current a {color: #74777b; }}}}} a {display: block; Posisi: kerabat; meluap: tersembunyi; Line-Height: 2.5; span {vertikal-align: tengah; Ukuran font: 1.5em; }}}. Content {position: relatif; bagian { /* display: tidak ada; */ margin: 0 otomatis; Max-Width: 1200px; & .Content-Current { /* display: block; */} p {warna: rgba (40,44,42, 0,4); Margin: 0; Padding: 1.75em 0; Font-Weight: 900; font-size: 5em; Line-Height: 1; }}}. Tabs-style {nav { /* latar belakang: rgba (255.255.255.0.4); */ ul li {a {overflow: visible; Border-Bottom: 1px RGBA solid (0,0,0,0,2); -webkit-transisi: warna 0.2s; Transisi: Warna 0.2S; }} ul li li.current a {&: after, &: before {content: ''; Posisi: Absolute; Atas: 100%; Kiri: 50%; Lebar: 0; Tinggi: 0; Perbatasan: Transparan Solid; } &: setelah {margin -left: -10px; Perbatasan-lebar: 10px; Border-Top-Color: #E7ecea; } &: sebelum {margin -left: -11px; Perbatasan-lebar: 11px; Border-Top-Color: RGBA (0,0,0,0,2); }}}}Bagian JS
angular.module ('myapp', []) .controller ('tabController', function () {this.current = 1; this.setCurrent = function (tab) {this.current = tab;}; this.isset = function (tab) {return this.current = tab;};};Efek akhir ditunjukkan pada gambar di bawah ini:
Melalui kode di atas, kita dapat menemukan bahwa inti dari implementasi adalah arahan ng-class dan ng-click dan ng-show yang dibangun di AngularJS.
Secara sederhana: Pengontrol mendefinisikan data saat ini. Nilai default data adalah 1. ng-click menyesuaikan fungsi Klik Event dan mengubah data current . ng-class memperoleh kondisi ikatan nilai current dan menambahkan gaya current ke indeks yang saat ini dipilih. Wadah juga memperoleh data current dalam controller dan menampilkannya tersembunyi melalui kontrol ng-show .
3. AngularJS mencapai efek tab seluler yang sedikit kompleks
bagian html
<script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </script> <skrip src = "http://cdn.bootcss.com/angular" ng-app = 'myapp' ng-controller = "mycontroller"> <verv> <div ng-repeat = "item dalam [1,2,3,4]" ng-klick = "changeIndex ($ index)"> </{{{{{25} {div> </Div> </Div> </Div> <Div> <Div> <Div> <Div> <Div style = "Left: {{{{{25 NG-SWIPE-RIGHT = "swiPeright ()" ng-swipe-left = "swipeleft ()"> <div style = "left: {{-100*ActiveIndex}}%"> <Div Ng-Repeat = "item dalam [1,2,3,4]"> <bR /br /<br /<br /{br /> <> {br /> <> {br /> <br /> <br /> <br /> <br /> </h1> </div> </div> </div> </div> </div> </div> </div>Bagian CSS
*{padding: 0; Margin: 0; font-family: 'Arial';}. Type-tabs {lebar: 100%; Tinggi: 40px;}. Type-Tabs Div {float: kiri; Lebar: 25%; Line-Height: 40px; Teks-Align: tengah; kursor: pointer; Pilihan Pengguna: Tidak Ada; -webkit-user-select: none;}. Guid-bar {position: relatif; margin-top: -3px;}. Guid-bar-content {width: 25%; Tinggi: 3px; Latar Belakang-Color: #345; Posisi: Absolute; Kiri: 50%; Transisi: semua kemudahan 400ms;}. Tab-Content {width: 100%; Tinggi: 500px; Latar Belakang-Color: #CCC; overflow: tersembunyi;}. tab-content-inner {width: 400%; Posisi: kerabat; Transisi: semua 400ms;}. Tab-Content-item {Lebar: 25%; float: kiri; Teks-Align: tengah;}Bagian JS
var myApp = angular.module ('myapp', ['ngTouch']); myapp.controller ('mycontroller', function ($ scope) {$ scope.activeIndex = 0; $ scope.changeIndex = function (index) {$ scope.activeIndex = index;}; $ scope = scope = index) {$ scope.activeIndex = index;}; $ scope.swip = index) {$ scope.activeIndex = index;}; $ scope.swip = {$ scope.active {function {{{{{{{{{}; $ scope.activeIndex = ++ $ scope.activeIndex; if ($ scope.activeIndex <0) $ scope.activeIndex = 3;Efeknya adalah sebagai berikut:
Oke, hari ini kami akan memberikan dua contoh ini. Anda dapat dengan cepat memahami sepatu anak -anak yang telah Anda pelajari tentang AngularJS dengan melihat kode secara langsung. Sepatu anak -anak yang tidak pernah Anda pahami juga dapat belajar tentang sihir hitam MVVM dan struktur organisasi kode melalui dua contoh ini.
4. Apa yang lebih baik tentang mode MVVM AngularJS daripada operasi DOM jQuery?
1. Dari perspektif makro, satu adalah untuk mengoperasikan data dan memproses data, dan yang lainnya adalah mengoperasikan interaksi DOM dan UI.
Proses proyek web umum dapat diringkas menjadi tiga proses: 1) Anda ingin mendapatkan data pada antarmuka 2) pertukaran data di latar belakang 3) Setelah mendapatkan data, render ulang antarmuka. Dalam proses ini, bagaimana Anda menerapkan pertukaran data dengan backend? Ajax JQuery. Jika API pertukaran data mengasumsikan lebih dari 20, berapa banyak $ .get atau $. AJAX yang perlu Anda tulis untuk memasukkan semuanya? Selain itu, semua tautan API tidak berada di tempat yang sama, yang cukup merepotkan untuk dikelola. Dan AngularJS hanya mengkonfigurasi route .
Setelah mendapatkan data, bagaimana Anda mengelola data ini dan bagaimana Anda membuat data ke antarmuka?
Bagaimana cara mengelola berbagai acara? JQuery sendiri ditandai dengan pemicu peristiwa. Sering kali, saat Anda menulis proses untuk memicu peristiwa-> memproses data. Jelas, begitu ada lebih banyak fungsi, kode akan terjalin seperti mie. Ada banyak front-end tradisional di sekitar saya selama dua atau tiga tahun. Saya belum mempelajari penelitian mendalam tentang delegasi acara, operasi DOM, proses rendering browser, kemasan komponen plug-in, dll., Jadi Anda dapat membayangkan seberapa buruk kualitas kode tersebut. Faktanya, JQuery adalah perpustakaan kelas, bukan kerangka kerja pengembangan. JQ adalah enkapsulasi lebih lanjut dari JS Native API, memungkinkan Anda untuk melakukan operasi DOM, operasi animasi dan AJAX lebih bahagia. Justru karena terlalu fleksibel sehingga lebih mudah untuk menulis kode yang sulit diatasi.
2. Kinerja: Operasi DOM lambat, dan objek DOM itu sendiri juga merupakan objek JS. Jadi secara tegas, bukan bahwa mengoperasikan objek ini lambat, tetapi setelah mengoperasikan objek ini, beberapa perilaku browser akan dipicu, seperti tata letak dan lukisan.
Meringkaskan
Ketika produk web menjadi semakin kompleks, arsitektur hierarkis sangat penting. Oleh karena itu, pengikatan dua arah digunakan sebagai penangkal, dikombinasikan dengan kerangka kerja MVC yang telah lama populer, artefak MVVM diturunkan. Blogger dengan kuat percaya bahwa MVVM akan menjadi solusi utama untuk front-end. Dari operasi DOM ke operasi data, dibutuhkan proses untuk beradaptasi, tetapi selama hasilnya baik, upaya ini sepadan. Dalam proses ini, ini juga merupakan peningkatan kemampuan profesional Anda. Ayo, teman -teman! Lai Lai