أنا شخصياً أعتقد أنك بحاجة إلى فهم آلية التشغيل لـ AngularJs جيدًا حتى تتمكن من تجنب الوقوع في الحفرة قدر الإمكان. في هذه المقالة ، سأقوم بتحليل أوضح ومفصل لما فعله AngularJS بعد البدء بناءً على المعلومات عبر الإنترنت وفهمي الخاص.
أولاً ، دعونا نلقي نظرة على ما فعله Angular خطوة بخطوة.
<! doctype html> <html ng-app> <head> <script src = "Angular.js"> </script> </head> <body> <png-init = "name = 'world'"> hello {{name}}!عند استخدام المتصفح الخاص بك للوصول إلى index.html ، يقوم المتصفح بالأشياء التالية بدورها:
يمكن تمثيل العملية برمتها بهذه الصورة:
حسنًا ، من خلال المثال أعلاه ، يمكننا أن نفهم كيف يجعل AngularJS صفحة خطوة بخطوة. فكيف تتفاعل مع حلقة حدث المتصفح؟ أو كيف تتفاعل مع المستخدمين؟ باختصار ، ينقسم بشكل رئيسي إلى ثلاث مراحل:
1. حلقة حدث المتصفح تنتظر تشغيل الحدث ، بما في ذلك تفاعل المستخدم أو أحداث التوقيت أو أحداث الشبكة (مثل استجابات الخادم ، إلخ) ؛
2. بمجرد تشغيل الحدث ، سيدخل سياق JavaScript ، ويتم تعديل DOM بشكل عام من خلال وظائف رد الاتصال ؛
3. بعد تنفيذ وظيفة رد الاتصال ، يقوم المتصفح بإعداد الصفحة الجديدة وفقًا لـ DOM الجديد.
كما هو مبين في الشكل أدناه ، تتكون عملية التفاعل بشكل أساسي من عدة دورات:
يقوم AngularJS بتعديل مهام سير عمل JavaScript العامة ويوفر آلية معالجة الأحداث الخاصة بها. هذا يفصل سياق JavaScript إلى جزأين ، أحدهما سياق JavaScript الأصلي ، والآخر هو سياق AngularJS. يمكن للعمليات فقط في سياق AngularJS أن تتمتع بربط البيانات الزاوي ، ومعالجة الاستثناءات ، ومشاهدة الممتلكات وغيرها من الخدمات. ومع ذلك ، لا يتم تجاهل Angular بالنسبة للأجانب (مثل عمليات JavaScript الأصلية ، وعمليات استدعاء الأحداث المخصصة ، ومكتبات الطرف الثالث ، إلخ). يمكنك استخدام وظيفة $ application () التي توفرها AngularJS لالتفاف هؤلاء الغرباء في سياق AngularJS ، بحيث يمكن أن يشعر الزاوي بالتغييرات التي أجراها.
بعد ذلك ، دعونا نلقي نظرة على كيفية عمل هذه الدورات أثناء عملية التفاعل؟
1. أولاً وقبل كل شيء ، سيكون المتصفح في حالة الاستماع. بمجرد تشغيل الحدث ، سيتم إضافته إلى قائمة انتظار الحدث ، وسيتم تنفيذ الأحداث في قائمة انتظار الحدث واحدة تلو الأخرى.
2. إذا كان الحدث في قائمة انتظار الحدث ملفوفًا بواسطة $ application () ، فسوف يدخل سياق AngularJS. FN () هنا هي الوظيفة التي نريد تنفيذها في سياق AngularJs.
3. سوف ينفذ AngularJS وظيفة FN (). عادة ، ستغير هذه الوظيفة بعض حالات التطبيق.
4. ثم سوف يدخل AngularJs حلقة $ Digest التي تتكون من حلقتين صغيرتين. يتم استخدام حلقة واحدة لمعالجة قائمة انتظار $ evalasync (تستخدم لجدولة بعض العمليات التي تحتاج إلى معالجتها قبل تقديم العرض ، وعادة ما يتم تنفيذها من خلال setTimeout (0) ، والتي ستكون أبطأ وقد تتسبب في ارتعاش العرض). يتم استخدام حلقة واحدة لمعالجة قائمة المراقبة $ (مجموعة من بعض التعبيرات. بمجرد حدوث تغيير ، سيتم استدعاء وظيفة ساعة $). ستستمر حلقة $ Digest في التكرار عندما تعرف أن قائمة انتظار $ evalasync فارغة وأن قائمة مراقبة $ فارغة أيضًا ، أي أن النموذج لن يتغير.
5. بمجرد انتهاء حلقة $ digest من AngularJS ، سيترك التنفيذ بأكمله سياق AngularJs و JavaScript ، ثم سيعيد المستعرض عرض العرض بعد تغيير البيانات.
بعد ذلك ، دعنا نحلله مع الكود:
<! doctype html> <html ng-app> <head> <script src = "Angular.js"> </script> </head> <body> <input ng-model = "name"> <p> hello {{name}}!الفرق الوحيد بين هذا الرمز والرمز السابق هو أن هناك إدخال لتلقي إدخال المستخدم. عند الوصول إلى ملف HTML هذا مع متصفح ، فإن توجيه NG-Model على الإدخال سيربط حدث KeyDown بالمدخلات ، وسيوصي بمشاهدة $ إلى متغير الاسم لتلقي إشعار بتغيير القيمة المتغيرة. خلال المرحلة التفاعلية ، تحدث سلسلة الأحداث التالية بشكل أساسي:
1. عندما يضغط المستخدم على مفتاح على لوحة المفاتيح (على سبيل المثال ، أ) ، يتم تشغيل حدث keydown في الإدخال ؛
2. تعليميات الإدخال تكتشف التغيير في القيمة في الإدخال والمكالمات $ تطبيق ("name = 'a'") لتحديث النموذج في سياق AngularJS ؛
3. AngularJS يعين "A" إلى الاسم ؛
4. تبدأ حلقة $ Digest ، تكتشف قائمة المراقبة $ تغييرًا في قيمة الاسم ، ثم تقوم بإعلام التعبير {{name}} لتحديث DOM ؛
5. الخروج من سياق AngularJs ، ثم الخروج من حدث Keydown في سياق JavaScript ؛
6. المتصفح يعيد عرض الرأي.
ما سبق هو ملخص لمبدأ العمل من AngularJS. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!