قبل تنفيذ علامة التبويب على غرار MVVM لـ AngularJS ، نخرج أولاً من تطبيق jQuery شائع الاستخدام.
1. jQuery يحقق تأثير علامة التبويب بسيطة وخام
var nav = $ (". tabs") ؛ // تبديل التبديل var box = $ (". box") ؛ // container nav.on ("click" ، function () {// click event var this_index = $ (this) .index () ؛ $ (this) .addClass ("Active"). Siblings (). refoveclass ("" Active ") ؛ box.eq (this_index) .show (). Siblings (). Hide () ؛}) ؛يتم تقديم الجزء الأساسي فقط من JS هنا ، و HTML و CSS غير مفصلين.
يقوم الرمز أعلاه ببساطة بتنفيذ تأثير علامة التبويب ، ويستخدم حدث Click للحصول على elem.index() ، وربط الفهرس والحاوية معًا للتحكم في الشاشة وإخفائه.
2. AngularJS ينفذ تأثير علامة تبويب بسيطة
جزء HTML
<القسم ng-app = "myapp"> <div ng-controller = "tabController as tab"> <nav> <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> work </af> </a> </li> <li ng-class = "{'current': tab.isset (3)}"> <a href = "#" ng-click = "tab.setCurrent (3)"> <span> blog </af> </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)"> <span> contact </span> </a> </li> </nav> <div> <div> section id = "section-1" ng-show = "tab.isset (1) <p> 1 1 </p> </p> ng-show = "tab.isset (2)"> <p> 2 </p> </p section> <section id = "section-3" ng-show = "tab.isset (3)"> <p> 3 </p> </p> </pection> section id = "section-4" ng-show = "tab.isset (4)"> <p> </p> ng-show = "tab.isset (5)"> <p> 5 </p> </p> </plist جزء CSS (لتسهيلنا لاستخدام بناء جملة Less ، يمكن لأحذية الأطفال تخصيص CSS لتحقيق تأثيرات شخصية)
* {الهامش: 0 ؛ Padding: 0 ؛} body {background: #e7ecea ؛ خط الرصيف: 600 ؛ Font-Family: 'Raleway' ، arial ، sans-serif ؛ text-align: center ؛} a {color: #2CC185 ؛ تدمير النص: لا شيء ؛ الخطوط العريضة: لا شيء ؛ &: Hover {color: #74777b ؛ }}. علامات التبويب {الموضع: النسبية ؛ العرض: 100 ٪ ؛ الهامش: 30px Auto 0 Auto ؛ Nav {ul {position: النسبية ؛ العرض: فليكس. Max-Width: 1200px ؛ الهامش: 0 Auto ؛ على غرار القائمة: لا شيء ؛ Flex-Flow: Row Wrap ؛ تبرير المحتوى: المركز ؛ li {flex: 1 ؛ & .current a {color: #74777b ؛ }}}}} a {display: block ؛ الموقف: قريب الفائض: مخفي. خط الارتفاع: 2.5 ؛ span {allign align: middle ؛ حجم الخط: 1.5. }}}. المحتوى {الموضع: النسبي ؛ القسم { /* display: none ؛ */ الهامش: 0 Auto ؛ Max-Width: 1200px ؛ & .-Content-Current { /* display: block ؛ */} p {color: rgba (40،44،42 ، 0.4) ؛ الهامش: 0 ؛ الحشو: 1.75em 0 ؛ خط الرصيف: 900 ؛ حجم الخط: 5EM ؛ ارتفاع الخط: 1 ؛ }}. */ ul li {a {overflow: visible ؛ Border-Bottom: 1PX Solid RGBA (0،0،0،0.2) ؛ -بكيت ترانس: اللون 0.2S ؛ الانتقال: اللون 0.2S ؛ }} ul li. الموقف: مطلق ؛ أعلى: 100 ٪ ؛ اليسار: 50 ٪ ؛ العرض: 0 ؛ الارتفاع: 0 ؛ الحدود: شفافة صلبة. } &: بعد {margin -left: -10px ؛ عرض الحدود: 10 بكسل ؛ بلون الحدود: #e7ecea ؛ } &: قبل {margin -left: -11px ؛ عرض الحدود: 11px ؛ اللون الحدود: RGBA (0،0،0،0.2) ؛ }}}}JS جزء
Angular.Module ('myapp' ، []) .Controller ('tabController' ، function () {this.current = 1 ؛ this.setCurrent = function (tab) {this.current = tab ؛} ؛ this.isset = function (tab) {this.current == tab ؛} ؛} ؛}) ؛يظهر التأثير النهائي في الشكل أدناه:
من خلال الكود أعلاه ، يمكننا أن نجد أن جوهر التنفيذ هو توجيهات ng-class و ng-click و ng-show المدمجة في 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.8/angular-souch.min AngularJs <div ng-app = 'myapp' ng-controller = "myController"> <viv> <div ng-repeat = "item in [1،2،3،4] </viv> <div ng-swipe-right = "swiperight ()" ng-swipe-left = "swipeleft ()"> <div style = "left: {{-100*ActiveIndex}}} ٪"> <div ng-repeat = "item في [1،2،3،4]" <H1> علامة التبويب {{item}} </h1> </viv> </viv> </viv> </viv> </viv> </viv> </viv>جزء CSS
*{padding: 0 ؛ الهامش: 0 ؛ font-family: 'arial' ؛}. type-tabs {width: 100 ٪ ؛ الارتفاع: 40px ؛}. type-tabs div {float: left ؛ العرض: 25 ٪ ؛ رفع الخط: 40 بكسل ؛ محاذاة النص: المركز ؛ المؤشر: مؤشر. تخطي المستخدم: لا شيء ؛ -webkit-user-select: none ؛}. الهامش: -3px ؛}. Guid-Bar-Content {Width: 25 ٪ ؛ الارتفاع: 3px ؛ خلفية اللون: #345 ؛ الموقف: مطلق ؛ اليسار: 50 ٪ ؛ الانتقال: جميع 400 مللي ثانية سهولة ؛}. علامة التبويب {العرض: 100 ٪ ؛ الارتفاع: 500 بكسل ؛ خلفية اللون: #CCC ؛ الفائض: Hidden ؛}. Tab-Content Inner {Width: 400 ٪ ؛ الموقف: قريب الانتقال: All 400ms ؛}. Tab-Content-Item {Width: 25 ٪ ؛ تعويم: اليسار. محاذاة النص: المركز ؛}JS جزء
var myapp = Angular.module ('myapp' ، ['ngtouch']) ؛ myapp.controller ('myController' ، function ($ scope) {$ $ scopeend. $ scope.aving if ($ scope.activeIndex <0) $ scope.activeIndex = 3 ؛الآثار هي كما يلي:
حسنًا ، اليوم سنقدم هذين المثالين. يمكنك أن تفهم بسرعة أحذية الأطفال التي تعلمتها عن AngularJS من خلال النظر إلى الكود مباشرة. يمكن لأحذية الأطفال التي لم تفهمها أبدًا أن تتعلم أيضًا عن MVVM من السحر الأسود وهيكل تنظيم الكود من خلال هذين المثالين.
4. ما هو أفضل في وضع MVVM لـ AngularJs من تشغيل DOM لـ jQuery؟
1. من منظور الماكرو ، يتمثل أحدهما في تشغيل البيانات والمعالجة ، والآخر هو تشغيل تفاعل DOM و UI.
يمكن تلخيص عملية مشروع الويب العام إلى ثلاث عمليات: 1) تريد الحصول على البيانات الواردة في الواجهة 2) تبادل البيانات في الخلفية 3) بعد الحصول على البيانات ، وإعادة تقديم الواجهة. في هذه العملية ، كيف يمكنك تنفيذ تبادل البيانات مع الواجهة الخلفية؟ jQuery's Ajax. إذا كانت واجهة برمجة تطبيقات تبادل البيانات تتولى أكثر من 20 ، فكم عدد $ .get أو. علاوة على ذلك ، فإن جميع روابط API ليست في نفس المكان ، وهو أمر مزعج للغاية لإدارته. و AngularJS فقط تكوين route .
بعد الحصول على البيانات ، كيف يمكنك إدارة هذه البيانات وكيف تقوم بتقديم البيانات إلى الواجهة؟
كيفية إدارة الأحداث المختلفة؟ يتميز jQuery نفسها بالحدث الذي يثير. في كثير من الأحيان ، عندما تكتب عملية لإطلاق الأحداث-> معالجة البيانات. من الواضح ، بمجرد وجود المزيد من الوظائف ، سيتم ربط الكود مثل المعكرونة. هناك العديد من الواجهة الأمامية التقليدية من حولي لمدة عامين أو ثلاث سنوات. لم أدرس البحث المتعمق حول تفويض الأحداث ، وعمليات DOM ، وعمليات عرض المتصفح ، وتغليف المكونات الإضافية ، وما إلى ذلك ، حتى تتخيل مدى سوء جودة الكود. في الواقع ، jQuery هي مكتبة صفية ، وليس إطارًا للتطوير. JQ عبارة عن تغليف إضافي لواجهة برمجة التطبيقات الأصلية JS ، مما يتيح لك إجراء عمليات DOM وعمليات الرسوم المتحركة و Ajax بسعادة أكبر. إنه على وجه التحديد لأنه من السهل جدًا كتابة التعليمات البرمجية الصعبة.
2. الأداء: عملية DOM بطيئة ، وكائن DOM نفسه هو أيضًا كائن JS. بالمعنى الدقيق للكلمة ، ليس أن تشغيل هذا الكائن بطيء ، ولكن بعد تشغيل هذا الكائن ، سيتم تشغيل بعض سلوكيات المتصفح ، مثل التصميم والرسم.
لخص
عندما تصبح منتجات الويب أكثر تعقيدًا ، فإن الهندسة المعمارية الهرمية ضرورية. لذلك ، يتم استخدام الربط ثنائي الاتجاه باعتباره الترياق ، جنبا إلى جنب مع إطار MVC الذي كان شائعا لفترة طويلة ، تم اشتقاق قطعة القطع الأثرية MVVM. يعتقد المدون بشدة أن MVVM سيكون الحل النهائي للواجهة الأمامية. من تشغيل DOM إلى تشغيل البيانات ، يتطلب الأمر عملية للتكيف ، ولكن طالما كانت النتيجة جيدة ، فإن هذه الجهود تستحق ذلك. في هذه العملية ، إنه أيضًا تحسن لقدراتك المهنية. تعال يا أصدقائي! ! !