ก่อนที่จะใช้แท็บสไตล์ MVVM ของ AngularJs เราจะย้ายการใช้งาน jQuery ที่ใช้กันทั่วไปของเราก่อน
1. jQuery บรรลุเอฟเฟกต์แท็บที่เรียบง่ายและดิบ
var nav = $ (". tabs"); // แท็บสวิตช์สวิตช์ var box = $ (". box"); // container nav.on ("คลิก", ฟังก์ชัน () {// คลิกเหตุการณ์ var this_index = $ (this) .index (); $ (นี้) .addclass ("active") box.eq (this_index). show (). พี่น้อง (). ซ่อน ();});เฉพาะส่วนหลักของ JS เท่านั้นที่ได้รับที่นี่และ HTML และ CSS ไม่ได้มีรายละเอียด
รหัสด้านบนง่ายและคร่าวๆใช้เอฟเฟกต์แท็บและใช้เหตุการณ์คลิกเพื่อรับ elem.index() , สตริงดัชนีและคอนเทนเนอร์เข้าด้วยกันเพื่อควบคุมการแสดงผลและซ่อน
2. AngularJS ใช้เอฟเฟกต์แท็บอย่างง่าย
ส่วน HTML
<ส่วน ng-app = "myapp"> <div ng-controller = "tabcontroller เป็นแท็บ"> <av> <ul> <li ng-class = "{'current': tab.isset (1)}"> <a href = "#" ng-click = "tab.setcurrent (1)" ng-class = "{'current': tab.isset (2)}"> <a href = "#" ng-click = "tab.setCurrent (2)"> <span> งาน </span> </a> </li> <li ng-class = "current ': tab.isset (3) ng-click = "tab.setCurrent (3)"> <span> บล็อก </span> </a> </li> <li ng-class = "{'current': tab.isset (4)}"> <a href = "#" ng-click = "tab.setCurrent (4)" ng-class = "{'current': tab.isset (5)}"> <a href = "#" ng-click = "tab.setCurrent (5)"> <pan> ติดต่อ </span> </a> </li> </av> <div> ng-show = "tab.isset (2)"> <p> 2 </p> </section> <ส่วน id = "ส่วนที่ 3" ng-show = "tab.isset (3)"> <p> 3 </p> </ส่วน> <ส่วน ID = "ส่วนที่ 4" ng-show = "แท็บ ng-show = "tab.isset (5)"> <p> 5 </p> </section> </div> </section> ส่วน CSS (เพื่ออำนวยความสะดวกให้เราใช้ไวยากรณ์ Less รองเท้าเด็กสามารถปรับแต่ง CSS เพื่อให้ได้เอฟเฟกต์ส่วนบุคคล)
* {มาร์จิ้น: 0; Padding: 0;} body {พื้นหลัง: #e7ecea; Font-Weight: 600; Font-Family: 'Raleway', Arial, Sans-Serif; TEXT-ALGING: CENTER;} A {color: #2CC185; การตกแต่งข้อความ: ไม่มี; โครงร่าง: ไม่มี; &: โฮเวอร์ {สี: #74777B; }}. แท็บ {ตำแหน่ง: ญาติ; ความกว้าง: 100%; มาร์จิ้น: 30px auto 0 อัตโนมัติ; Nav {ul {ตำแหน่ง: ญาติ; จอแสดงผล: Flex; ความกว้างสูงสุด: 1200px; มาร์จิ้น: 0 อัตโนมัติ; รายการสไตล์: ไม่มี; Flex-Flow: Row Wrap; Justify-Content: Center; Li {Flex: 1; & .current a {color: #74777b; }}}}} a {display: block; ตำแหน่ง: ญาติ; ล้น: ซ่อน; ความสูงของสาย: 2.5; ช่วง {แนวตั้ง-จัดตำแหน่ง: กลาง; ขนาดตัวอักษร: 1.5em; }}}. เนื้อหา {ตำแหน่ง: ญาติ; ส่วน { /* แสดง: ไม่มี; */ มาร์จิ้น: 0 อัตโนมัติ; ความกว้างสูงสุด: 1200px; & .content-current { /* display: block; */} p {สี: rgba (40,44,42, 0.4); มาร์จิ้น: 0; Padding: 1.75EM 0; Font-Weight: 900; ขนาดตัวอักษร: 5em; ความสูงบรรทัด: 1; }}}. แท็บสไตล์ {nav { /* พื้นหลัง: rgba (255,255,255,0.4); */ ul li {a {overflow: มองเห็นได้; ด้านล่างด้านล่าง: 1px Solid RGBA (0,0,0,0.2); -webkit-transition: สี 0.2s; การเปลี่ยนแปลง: สี 0.2s; }} ul li li.current a {&: หลังจาก &: ก่อน {เนื้อหา: ''; ตำแหน่ง: สัมบูรณ์; ด้านบน: 100%; ซ้าย: 50%; ความกว้าง: 0; ความสูง: 0; ชายแดน: โปร่งใสของแข็ง; } &: หลังจาก {margin -left: -10px; ความกว้างของชายแดน: 10px; สีชายแดนด้านบน: #e7ecea; } &: ก่อน {margin -left: -11px; ความกว้างของชายแดน: 11px; ชายแดนสีด้านบน: RGBA (0,0,0,0.2); -ส่วน JS
Angular.module ('myapp', []) .controller ('tabcontroller', ฟังก์ชัน () {this.current = 1; this.setCurrent = ฟังก์ชั่น (แท็บ) {this.current = tab;}; this.isset = function (แท็บ)เอฟเฟกต์สุดท้ายจะแสดงในรูปด้านล่าง:
ผ่านรหัสข้างต้นเราสามารถพบได้ว่าแกนกลางของการใช้งานคือ ng-class และ ng-click และ ng-show Directives ที่สร้างขึ้นใน AngularJS
ในแง่ง่าย: คอนโทรลเลอร์กำหนดข้อมูลปัจจุบัน ค่าเริ่มต้นของข้อมูลคือ 1. ng-click ปรับแต่งฟังก์ชั่นของเหตุการณ์คลิกและเปลี่ยนข้อมูล current ng-class ได้รับเงื่อนไขการเชื่อมโยงค่า current และเพิ่มสไตล์ current ให้กับดัชนีที่เลือกในปัจจุบัน คอนเทนเนอร์ยังได้รับข้อมูล current ใน controller และแสดงที่ซ่อนอยู่ผ่านการควบคุม ng-show
3. AngularJS บรรลุเอฟเฟกต์แท็บมือถือที่ซับซ้อนเล็กน้อย
ส่วน HTML
<script src = "http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"> </script> <script src = "http://cdn.bootcss.com/angular.js/1.3 ng-app = 'myapp' ng-controller = "myController"> <div> <div ng-repeat = "รายการใน [1,2,3,4]" ng-click = "ChangeIndex ($ index)"> แท็บ {{item} ng-swipe-right = "swiperight ()" ng-swipe-left = "swipeleft ()"> <div style = "left: {{-100*activeIndex}}%"> <div ng-repeat = "ใน [1,2,3,4]"> <br /> <br /> </h1> </div> </div> </div> </div> </div> </div> </div>ส่วน CSS
*{padding: 0; มาร์จิ้น: 0; Font-Family: 'Arial';}. Type-Tabs {Width: 100%; ความสูง: 40px;}. Type-Tabs Div {Float: ซ้าย; ความกว้าง: 25%; สายไฟ: 40px; TEXT-ALIGN: CENTER; เคอร์เซอร์: ตัวชี้; ผู้ใช้เลือก: ไม่มี; -webkit-user-select: none;}. guid-bar {ตำแหน่ง: ญาติ; ขอบด้านบน: -3px;}. Guid-Bar-content {Width: 25%; ความสูง: 3px; พื้นหลังสี: #345; ตำแหน่ง: สัมบูรณ์; ซ้าย: 50%; การเปลี่ยนแปลง: ความสะดวก 400ms ทั้งหมด;}. แท็บเนื้อหา {ความกว้าง: 100%; ความสูง: 500px; พื้นหลังสี: #CCC; Overflow: Hidden;}. tab-content-inner {width: 400%; ตำแหน่ง: ญาติ; การเปลี่ยนแปลง: ทั้งหมด 400ms;}. tab-content-item {width: 25%; ลอย: ซ้าย; TEXT-ALIGING: CENTRE;}ส่วน JS
var myapp = angular.module ('myapp', ['ngtouch']); myapp.controller ('myController', ฟังก์ชั่น ($ scope) {$ scope.activeIndex = 0; $ scope.changeindex = ฟังก์ชั่น (ดัชนี) $ SCOPE.ACTIONINGENTEX = ++ $ SCOPE.ACTIONINGENTEX; if ($ scope.activeIndex <0) $ scope.activeIndex = 3;}})ผลกระทบมีดังนี้:
โอเควันนี้เราจะยกตัวอย่างทั้งสองนี้ คุณสามารถเข้าใจรองเท้าเด็กที่คุณได้เรียนรู้เกี่ยวกับ AngularJs อย่างรวดเร็วโดยดูที่รหัสโดยตรง รองเท้าเด็กที่คุณไม่เคยเข้าใจสามารถเรียนรู้เกี่ยวกับเวทมนตร์ดำของ MVVM และโครงสร้างองค์กรรหัสผ่านตัวอย่างทั้งสองนี้
4. อะไรจะดีไปกว่าโหมด MVVM ของ AngularJs มากกว่าการทำงานของ DOM ของ jQuery?
1. จากมุมมองของแมโครหนึ่งคือการใช้งานข้อมูลและข้อมูลกระบวนการและอื่น ๆ คือการทำงานปฏิสัมพันธ์ DOM และ UI
กระบวนการของโครงการเว็บทั่วไปสามารถสรุปได้เป็นสามกระบวนการ: 1) คุณต้องการรับข้อมูลบนอินเทอร์เฟซ 2) ข้อมูลการแลกเปลี่ยนในพื้นหลัง 3) หลังจากได้รับข้อมูลให้เรนเดอร์อินเทอร์เฟซอีกครั้ง ในกระบวนการนี้คุณจะใช้การแลกเปลี่ยนข้อมูลกับแบ็กเอนด์ได้อย่างไร Ajax ของ JQuery หาก Data Exchange API ถือว่ามากกว่า 20 คุณต้องมี $. get หรือ $. ajax จำนวนเท่าใดที่จะเขียนเพื่อรวมทั้งหมด? ยิ่งกว่านั้นลิงก์ API ทั้งหมดไม่ได้อยู่ในสถานที่เดียวกันซึ่งค่อนข้างลำบากในการจัดการ และ AngularJs เพียงกำหนดค่า route
หลังจากได้รับข้อมูลคุณจะจัดการข้อมูลนี้อย่างไรและคุณจะแสดงข้อมูลไปยังอินเทอร์เฟซได้อย่างไร
วิธีจัดการกิจกรรมต่าง ๆ ? jQuery นั้นมีลักษณะโดยการกระตุ้นเหตุการณ์ หลายครั้งที่คุณเขียนกระบวนการสำหรับการเรียกเหตุการณ์-> ข้อมูลการประมวลผล เห็นได้ชัดว่าเมื่อมีฟังก์ชั่นมากขึ้นรหัสจะพันกันเหมือนก๋วยเตี๋ยว มี jquery front-ends ดั้งเดิมมากมายรอบตัวฉันเป็นเวลาสองหรือสามปี ฉันยังไม่ได้ศึกษาการวิจัยเชิงลึกเกี่ยวกับการมอบหมายกิจกรรมการดำเนินงาน DOM กระบวนการเรนเดอร์เบราว์เซอร์บรรจุภัณฑ์ส่วนประกอบปลั๊กอิน ฯลฯ ดังนั้นคุณสามารถจินตนาการได้ว่าคุณภาพของรหัสแย่แค่ไหน ในความเป็นจริง jQuery เป็นห้องสมุดคลาสไม่ใช่กรอบการพัฒนา JQ เป็น encapsulation เพิ่มเติมของ JS Native APIs ช่วยให้คุณสามารถดำเนินการ DOM การดำเนินการแอนิเมชันและ Ajax ได้อย่างมีความสุขมากขึ้น มันเป็นเพราะมันยืดหยุ่นเกินไปที่จะเขียนโค้ดที่ยากต่อการพิทักษ์ได้ง่ายขึ้น
2. ประสิทธิภาพ: การทำงานของ DOM ช้าและวัตถุ DOM เองก็เป็นวัตถุ JS ดังนั้นการพูดอย่างเคร่งครัดมันไม่ใช่การใช้งานวัตถุนี้ช้า แต่หลังจากใช้งานวัตถุนี้พฤติกรรมของเบราว์เซอร์บางอย่างจะถูกกระตุ้นเช่นเค้าโครงและการวาดภาพ
สรุป
เมื่อผลิตภัณฑ์เว็บมีความซับซ้อนมากขึ้นเรื่อย ๆ สถาปัตยกรรมลำดับชั้นจึงเป็นสิ่งจำเป็น ดังนั้นการผูกสองทางจึงใช้เป็นยาแก้พิษรวมกับกรอบ MVC ที่ได้รับความนิยมมาเป็นเวลานานสิ่งประดิษฐ์ MVVM จึงได้รับมา บล็อกเกอร์เชื่อมั่นว่า MVVM จะเป็นทางออกที่ดีที่สุดสำหรับส่วนหน้า จากการดำเนินการ DOM ไปจนถึงการทำงานของข้อมูลจะต้องใช้กระบวนการในการปรับตัว แต่ตราบใดที่ผลลัพธ์ก็ดีความพยายามเหล่านี้ก็คุ้มค่า ในกระบวนการนี้มันยังเป็นการปรับปรุงความสามารถในการทำงานของคุณ มาเถอะเพื่อนของฉัน! - -