تستكشف هذه المقالة الاختلافات في تنفيذ AngularJS و JavaScript Control DOM التقليدية من خلال تنفيذ متطلبات عمل بسيطة ، وتحاول فهم أفكار البرمجة للأطر مثل MVW في تطوير الواجهة الأمامية الشهيرة.
هذا الشرط شائع جدا. على سبيل المثال ، قائمة من مستويين ، عند النقر فوق عنصر القائمة من المستوى الأول ، يجب عرض أو إخفاء عنصر القائمة الفرعية المقابلة.
تنفيذ jQuery:
نسخة الكود كما يلي:
<!-HTML->
<ul>
<li>
البند 1
<ul>
<li> البند الطفل 1 </li>
</ul>
</li>
</ul>
// JavaScript
$ ('li.parent_item'). انقر فوق (function () {
$ (هذا).
})
تطبيق AngularJS:
نسخة الكود كما يلي:
<!-HTML->
<ul>
<li ng click = "hide_child =! hide_child">
البند 1
<ul ng-hide = "hide_child">
<li> البند الطفل 1 </li>
</ul>
</li>
</ul>
لن يتم وصف الطريقة التقليدية لتشغيل DOM بالتفصيل. يتطلب تنفيذ AngularJS تحسين الكثير من الكود ، فقط إصدار HTML يكفي. يستخدم الرمز أعلاه نقاط المعرفة هذه من AngularJS:
1. أدوات
2. المعايرة
NG-Click و NG-Hide هما كلا من التوجيهات (التعليمات) التي تأتي مع الإطار. السابق يعادل توفير معالج الحدث لعلامة LI. عند النقر فوق عنصر HTML (LI) ، سيتم تنفيذ التعبير Hide_Child =! Hide_child. دعونا أولاً نلقي نظرة على توجيه NG-Hide ، والذي سيتحكم في ما إذا كان سيتم عرض عنصر HTML (يتم تنفيذه من خلال CSS) بناءً على نتيجة التعبير عن المهمة (قيمة BOLEAN). وهذا يعني ، إذا كان متغير Hide_Child صحيحًا ، فسيتم إخفاء UL ، وإلا فإن النتيجة ستكون عكس ذلك.
هنا Hide_child هو في الواقع متغير في نطاق $. يمكن أيضًا تنفيذ التغييرات في قيمتها باستخدام وحدة التحكم في وحدة التحكم للف طريقة ، ولكن البيان الحالي بسيط نسبيًا ويتم كتابته مباشرة في مهمة التعليمات.
من خلال تحليل الكود البسيط أعلاه ، يمكننا أن نرى ميزتين أكثر وضوحًا لـ AngularJS:
1. يتم حظر عمليات DOM من خلال التعليمات والتعبيرات ، ويتم حفظ رمز JavaScript الإضافي عن طريق استخدام رمز بسيط.
2. إن تطبيق التوجيهات والتعبيرات متداخلة مباشرة في HTML ، وهو ما يتعارض إلى حد ما لأسلوب الكود لجافا سكريبت غير مزعج الذي يدفعه jQuery.
دعونا أولاً نلقي نظرة على متطلبات أخرى ثم شرح الاستنتاج أعلاه بالتفصيل.
الشرط 2: من خلال النقر على DIV ، مما يؤدي إلى اختيار زر الراديو في النموذج
عنصر نموذج HTML التقليدي ليس صديقًا للغاية للعمل على الأجهزة المحمولة اليوم. على سبيل المثال ، يتطلب مربع راديو زر الراديو تحديدًا دقيقًا على شاشة اللمس للتحكم في هذا المكون ، ولكن الموضع المخصص اليدوي خشن للغاية. تتمثل الممارسة الشائعة في إضافة عنصر تحكم في الملصقات المقابل ، لكن نسبة شغل الشاشة للنص نفسه ليست مثالية ، وليس لها تأثير واضح على اتصال المعلومات. لذلك ، عادة ما يتم تشغيل علامة div أو li مع مساحة أكبر بشكل غير مباشر.
تنفيذ jQuery:
نسخة الكود كما يلي:
<!-HTML->
<ul>
<li>
<نوع الإدخال = "الراديو"
id = "Option1" />
<label for = "Option1"> الخيار 1 </billy>
</li>
</ul>
// JavaScript
$ ('li.selection'). انقر فوق (function () {
$ (هذا).
})
تطبيق AngularJS:
نسخة الكود كما يلي:
<!-HTML->
<ul>
<li ng-repeat = "الخيار في الخيارات"
ng-click = "model.option = Option.value"
ng-class = "{Active: model.option == Option.Value}">
<نوع الإدخال = "الراديو"
ng-model = "model.option"
value = "{{ortive.value}}"
id = "Option1" />
<label for = "Option1"> الخيار 1 </billy>
</li>
</ul>
في هذا الحل ، لم نتضمن أيضًا رمز JavaScript إضافي واستخدمنا عدة إرشادات إضافية. للمقارنة والمرجع ، نحن نهتم فقط بتعبيرات الإرشادات ng-click و ng-model.
دعونا أولاً نلقي نظرة على توجيه نموذج NG لعنصر الإدخال. المهمة هنا تعني أننا نربط المدخلات على القالب مع سمة الخيار لكائن $ scope.model. لفهم أعمق لربط البيانات ، يمكنك الرجوع إلى ربط البيانات. هذا الارتباط المحدد يجعل التحكم في القالب يرتبط مباشرة بنموذج البيانات ، وهذا الربط ثنائي الاتجاه. هذا يعني أنه بمجرد تعديل المستخدم القيمة في عنصر التحكم (تحقق من إدخال الراديو) ، سيتم إعادة تعيين كائن النموذج المقابل (model.option) ؛ في الوقت نفسه ، إذا تغيرت قيمة كائن النموذج ، فإن التحكم في الإدخال في القالب سيعكس أيضًا التغييرات وفقًا لذلك. وهذا في الواقع لم يتحقق في التنفيذ المذكور أعلاه من jQuery.
لذلك ، من خلال ربط بيانات AngularJS ، فإن النقر فوق عنصر LI لإكمال عملية تشغيل الإدخال بشكل غير مباشر على النحو التالي:
1. انقر فوق علامة LI لتعيين قيمة إلى Model.option ؛
2. قم بتعديل كائن النموذج وتحديد التحكم في الإدخال المقابل (قيمة القيمة هي النموذج. option) ؛
3. قم بتنشيط الخاصية التي تم فحصها من التحكم في الإدخال
من خلال حالتين أعلاه ، لدينا فهم جديد لتشغيل الواجهة الأمامية على الويب.
بادئ ذي بدء ، من حيث التنفيذ الفني ، من خلال إدخال مفاهيم جديدة مثل التعليمات والتعبيرات وربط البيانات وما إلى ذلك ، يمكننا تشغيل DOM بطريقة جديدة تمامًا ، بدلاً من مجرد تنفيذ رمز JavaScript الذي يمكن تشغيله مع مستخدمي المستخدمين ومكونات HTML. هذا النوع من التغيير في التفكير ضخم.
منذ بداية هذا القرن ، صعود برمجة الويب الديناميكية ، تحسن تقنية البرمجة من جانب الخادم. من البداية ، أنتجت CGI/PHP/ASP .NET مقابل Java من اللغة والمنصة. عززت كفاءة التطوير وعمليات البرمجيات MVC Framework/ORM/AOP ، وما إلى ذلك ، والأداء والبيانات الكبيرة جلبت NodeJS/NOSQL/Hadoop ، وما إلى ذلك ، في حين أن المتطلبات التقنية للواجهة الأمامية للمتصفح لا تبدو جذرية للغاية. من ناحية ، من خلال جانب الخادم وقاعدة البيانات ، يمكن تلبية معظم احتياجات العمل لنموذج B/S ؛ من ناحية أخرى ، فإن المتصفح نفسه لديه اختلافات بين منصات مختلفة ، وعدم التوافق مع معايير لغة البرمجة النصية وتقنية تقديم ، وكذلك عدم وجود قوة حوسبة واعتبارات أمنية.
في هذه الحالة ، في معظم الوقت ، يحتاج المتصفح إلى التفكير في تقديم الصفحات وتفاعل المستخدم البسيط. HTML/DOM Plus Javasript/CSS وبالتالي ينجز العمل الرئيسي للواجهة الأمامية. لذلك ، لم يكن هناك عمال أماميون في الماضي ، ولم يكن هناك حاجة إلى مصممي الويب فقط. تدريجيا ، زادت متطلبات الواجهة الأمامية ، وأصبحت jQuery هي مكتبة الحزمة الأكثر استخدامًا لـ JavaScript Operating DOM. في هذه المرحلة ، لا تزال المهمة الرئيسية لـ JQuery/JavaScript مجرد أداة لتقديم وتفاعل مع محطة متصفح المستخدم.
بعد فهم أصل jQuery ، ليس من الصعب العثور على أن بعض القواعد التي تم متابعتها في الماضي ، مثل JavaScript غير المزعجة ، كانت تقتصر على وسائل وأساليب التنفيذ في ذلك الوقت. من أجل فصل منطق رمز DOM و JavaScript ، فضلنا الطريقة بصيانة أعلى. بعد زيادة الطلب على الواجهة الأمامية على JavaScript ، ظهرت العديد من الأطر الأمامية لـ MVC/MVP ، وكذلك ما يسمى MVW (عرض الطراز-أي شيء) من AngularJs ، ونهج واحد يناسب كل شيء لجافاسريبت ودوم DOM. في الأصل ، نظرنا في التشغيل المباشر لعرض الواجهة وتفاعل المستخدم ، ولكن لدينا الآن ربط بيانات العميل ، وتعليمات غنية ، وحقن التبعية. ما ينتظرنا سيكون نموذجًا جديدًا للبرمجة وطريقة التفكير.