إستراتيجية الكشف عن التغيير الزاوي: الإستراتيجيات المباشرة والافتراضية

يُشار إلى اكتشاف التغيير على أنه الآلية التي تتحقق من الحالة الحالية إلى الحالة الجديدة. يشير أي اختلاف بين الحالتين إلى أن هناك تغييرات يجب تحديثها. هذا يعني أنه يجب تحديث العرض بالتغيير في البيانات.

يتم اكتشاف أي تغيير يحدث في المكونات أثناء تغيير التطبيق من خلال Angular 2+. عندما يتم تغيير نموذج ، يتم الكشف عن التغييرات المرتبطة به الزاوية ويتم تحديث العروض على الفور. يشار إلى هذا التغيير باسم اكتشاف التغيير في الزاوية.

يمكن أن يكون التغيير نتيجة للبيانات المستلمة من طلبات الشبكة أو يحدث من خلال حدث مستخدم. مع زيادة حجم التطبيق ، يجب إجراء المزيد من العمل من خلال طريقة اكتشاف التغيير. يعد الكشف الزاوي ضروريًا للحفاظ على التزامن بين العروض الأساسية والنماذج المقابلة.

قد يكون التغيير في النموذج الزاوي بسبب أي مما يلي:

• أحداث DOM (النقر ، التمرير فوقها ، وما إلى ذلك)
• طلبات AJAX
• الموقتات (setTimer () ، setInterval ())

المتطلبات الأساسية

للحصول على هذه المقالة ، قد يتعين عليك أن تكون على دراية بمفاهيم المكونات الزاويّة. أيضًا ، قد تكون مفاهيم أنواع القيم وأنواع المراجع مفيدة في فهم المقالة.

كشف التغيير في الزاوية

يتم الكشف عن التغيير في الزاوية في خطوتين ، الأولى هي تحديث نموذج التطبيق من خلال المطور. يمكن أن يسبقه إما من خلال إصدار حدث أو من خلال التغيير في خاصية المكون. الخطوة الثانية أي وظيفة الزاوية لعكس النموذج. يكتشف ما إذا تم دفع أي بيانات جديدة إلى المكون بشكل صريح. يمكن القيام بذلك إما من خلال أحد المكونات أو أحد العناصر المرصودة التي تم الاشتراك فيها باستخدام أنبوب غير متزامن.

لذلك فإن الخطوتين هما:

• تحديث نموذج التطبيق (المطور) ؛
• تعكس حالة النموذج في العرض (الزاوي).

يكتشف اكتشاف التغيير في الزاوية التغييرات في أحداث المستعرض الشائعة مثل نقرات الماوس وطلبات HTTP وأنواع الأحداث الأخرى. بمجرد اكتشاف التغيير ، يتم تحديد ما إذا كان تحديث العرض مطلوبًا أم لا.

تغيير استراتيجيات الكشف

توجد استراتيجيتان للكشف عن التغيير الزاوي وهما الإستراتيجية الافتراضية و onPush.

الاستراتيجية الافتراضية

• تتم مراقبة التغييرات على النموذج بواسطة الزاوية للتأكد من التقاط جميع التغييرات في النموذج. يتم فحص الفروق بين الحالة الجديدة والسابقة بالزاوية.
• لكي يتم تحديث العرض ، يجب أن يكون للزاوية حق الوصول إلى القيمة الجديدة التي تتم مقارنتها بعد ذلك بالقيمة القديمة. بناءً على ذلك ، يتم اتخاذ القرار بشأن تحديث العرض أم لا.
• لذلك ، في الإستراتيجية الافتراضية ، تدور الزاوية حول مسألة ما إذا كانت هناك أي تغييرات في القيمة.
• لا يوجد افتراض حول المكان الذي تعتمد عليه المكونات. إنها استراتيجية متحفظة ستتحقق في أي وقت من وجود تغيير مرتبط. سيتم إجراء عمليات التحقق على أي أحداث وأوقات ووعود و XHR في المتصفح.
• قد تكون الإستراتيجية مشكلة عندما يتم النظر في التطبيقات الكبيرة مع العديد من المكونات.
• بشكل افتراضي ، يستخدم إستراتيجية ChangeDetectionStrategy.Default .

تجاوز الآليات الافتراضية للمتصفح

• سيتم تصحيح العديد من واجهات برمجة التطبيقات منخفضة المستوى عن طريق الزاوي في وقت بدء التشغيل. قد يكون addEventListener واجهات برمجة التطبيقات هذه؛ وظيفة متصفح تُستخدم لتسجيل أحداث التصفح.
• سيتم استبدال addEventListener بـ angular بإصدار أحدث يعمل مثل الإصدار السابق.
• تتم إضافة المزيد من الوظائف إلى معالج الأحداث بواسطة الإصدار الجديد addEventListener . يتم تحديث واجهة المستخدم بعد تشغيل فحص الأداء بواسطة الزاوية.

عمل

تقوم المكتبة التي يتم شحنها مع Zone.js بالتصحيح منخفض المستوى لواجهة برمجة تطبيقات المتصفح.

• يتم تعريف المنطقة على أنها محتوى التنفيذ تحت عدة دورات تنفيذ JVM. يمكن إضافة وظائف إضافية إلى المتصفح من خلال هذه الآلية. يتم استخدام المناطق داخليًا بواسطة الزاوي لاكتشاف أي تغييرات وتحريك الاكتشاف.
• عادة ما تكون هناك ثلاث مراحل في المنطقة ، أي أنها مستقرة في البداية ، وتصبح غير مستقرة إذا تم تشغيل أي مهمة في المنطقة ، وتصبح مستقرة بمجرد اكتمال المهمة.
• آلية المتصفح المصححة لدعم الاكتشاف أثناء التغيير هي:

1. أحداث المتصفح مثل النقر وما إلى ذلك.
2. setInterval () و setTimeout ()
3. طلبات Ajax HTTP

• لبدء الكشف عن التغيير في الزاوية ، يتم استخدام Zone.js لتصحيح العديد من واجهات برمجة التطبيقات لمتصفح آخر مثل Websockets.
• أحد القيود على هذه الطريقة هو: إذا كان Zone.js لا يدعم واجهة برمجة تطبيقات المتصفح ، فلن يكون هناك مشغل أثناء اكتشاف التغيير.

كيف يعمل اكتشاف التغيير الزاوي عند بدء اكتشاف التغيير؟

يتم الكشف عن التغييرات التي تم تشغيلها من خلال كاشف التغيير. يتم إنشاء كاشف التغيير هذا أثناء وقت بدء تشغيل التطبيق. يمكن اعتبار مثال على مكون TodoItem . سيتم إصدار حدث عند تلقي كائن Todo بواسطة المكون إذا تم تبديل حالة todo. تعرف على المزيد حول كيفية تشغيل المشاريع الزاوية.

عمل آلية الكشف عن التغيير الافتراضي

آلية الكشف عن التغيير بسيطة. في كل تعبير ، تتم مقارنة القيمة الحالية للخاصية بقيمة تلك الخاصية في الحالة السابقة في التعبير.

• سيؤدي وجود اختلاف في قيمة الخاصية إلى تعيين القيمة على صواب isChanged .

2. استراتيجية OnPush

• عند استخدام إستراتيجية onPush ، لا يلزم إجراء أي تخمين على الزاوية عند إجراء الفحص.
• بناءً على التغيير في مرجع الإدخال ، أو الأحداث التي يتم تشغيلها بواسطة المكونات نفسها ، ستقوم الزاوية بإجراء فحص للتغييرات.
• أيضًا ، يمكن أن يُطلب من الزاوي صراحة إجراء فحص للتغييرات. يتم ذلك من خلال طريقة componentRef.markForCheck ().
• ستعتمد المكونات خلال هذه الاستراتيجية على مدخلاتها فقط. سيتم تنفيذ استراتيجية الكشف عن التغيير فقط عندما:

• هناك تغيير في مرجع الإدخال.
• هناك تغييرات مرتبطة في مكونات النموذج أو أي من العناصر التابعة له.
• عندما يتعين إجراء الكشف الصريح عن التغيير.
• عند استخدام أنبوب غير متزامن في العرض.

• بالمقارنة مع الإستراتيجية الافتراضية ، فإن إستراتيجية onpush تدور بشكل أساسي حول سؤالين هما:

• هل هناك تغيير في نوع المرجع؟
• إذا كانت هناك تغييرات في مرجع نوع المرجع ، فهل هناك أي تغييرات في قيم ذاكرة الكومة؟

• يمنع عمليات الفحص غير الضرورية للمكونات وكذلك على المكونات الفرعية.

تنفيذ إستراتيجية onPush لأحد المكونات

فقط عندما يتم تمرير مرجع جديد كقيمة Input () ، فإنه يقوم بتشغيل اكتشاف التغيير. قد تكون القيم أنواعًا أولية مثل الأرقام والمنطقية والسلسلة والقيمة الخالية. يمكن أيضًا استخدام المصفوفات والأشياء. لا يمكن استخدام الكائنات أو المصفوفات المعدلة لبدء اكتشاف التغيير في أحد مكونات onPush حيث لا يتم إنشاء مرجع جديد لهم. لذلك ، يجب تمرير كائن جديد أو مرجع مصفوفة لتشغيل الكاشف الذي يكتشف التغيير.

لتجنب الأخطاء في طريقة طرق اكتشاف التغيير ، يمكن إنشاء التطبيق باستخدام اكتشاف التغيير onPush في كل مكان من خلال استخدام الكائنات والقوائم الثابتة. يمكن تعديل الكائنات غير القابلة للتغيير من خلال إنشاء مرجع كائن جديد وبالتالي:

• لكل تغيير ، يتم تشغيل اكتشاف تغيير onPush .
• يتم دائمًا إنشاء مرجع كائن جديد يمنع سبب الأخطاء.

في مثل هذه الحالات ، يمكن استخدام Immutable.js لأنه يحتوي على هياكل بيانات ثابتة للكائنات (خريطة) وقوائم (قائمة).

• ستؤدي إضافة المعامل changeDetection في التعليق التوضيحي للمكون إلى تنفيذ استراتيجية onPush. بدلاً من تمرير مراجع جديدة في كل مرة ، يمكن أيضًا استخدام ChangeDetectorRef للتحكم الكامل.

ChangeDetectorRef.detectChanges ()

• يمكن إرفاق طريقة اكتشاف التغيير أو فصلها يدويًا باستخدام طرق الفصل وإعادة التثبيت في جهاز كشف التغيير.

ChangeDetectorRef.detach () و غير قابل للتغيير

عند استخدام إستراتيجية onPush لاكتشاف التغيير ، من الجيد دائمًا فرض الثبات. في مثل هذه الحالات ، يتم استخدام Immutable.js.

إن immutable.js عبارة عن مكتبة تم إنشاؤها لدمج الثبات في JavaScript جنبًا إلى جنب مع هياكل البيانات غير القابلة للتغيير مثل List و Stack و Map.

لإضافة Immutable.js في المشاريع ، يجب استخدام الأمر التالي في المحطة. تعرف على المزيد حول المشاريع الزاوية.

$ npm تثبيت غير قابل للتغيير

لاستيراد هياكل البيانات من Immutable.js ، يجب استخدام الأمر التالي. يعرض الأمر استيراد هياكل بيانات القائمة والخريطة فقط في هذه الحالة.

استيراد {خريطة ، قائمة} من "ثابت" يمكن أيضًا استخدام المصفوفة.

أيضًا إذا تم استخدام Immutable.js ، فهناك بعض العيوب المرتبطة به.

• استخدام API مرهق بعض الشيء.
• لا يمكن تطبيق الواجهات على نموذج البيانات لأن مكتبة Imutable.js لا تدعم أي واجهات.

تعلم دورات البرمجيات عبر الإنترنت من أفضل الجامعات في العالم. اربح برامج PG التنفيذية أو برامج الشهادات المتقدمة أو برامج الماجستير لتتبع حياتك المهنية بشكل سريع.

ملخص

قدم لك المقال إلى آلية الكشف عن التغيير والاستراتيجيات. سوف يقوم Angular باكتشاف التغيير على جميع المكونات بشكل افتراضي. أيضًا ، يمكن تطبيق ChangeDetectorRef لاكتشاف التغييرات في المراجع الجديدة عندما يتم تحوير البيانات. يستمر الطلب على التطوير الزاوي في الزيادة مما يؤدي إلى راتب المطور الزاوي في الهند.

إذا كنت ترغب في معرفة المزيد عن تكنولوجيا البرمجيات ، وتطويرها ، والآلية الكامنة وراءها ، يمكنك التحقق من الدورة التدريبية Executive PG Program in Software Development - التخصص في Full Stack Development الذي تقدمه upGrad. دورة التخصص عبارة عن برنامج عبر الإنترنت مدته 23 أسبوعًا يقدم أكثر من 300 دراسة حالة لتعزيز معرفتك والأدوات المتاحة ولغة البرمجة لتعزيز مهاراتك العملية. إذا كان لديك المزيد من الاستفسارات المتعلقة بالدورة ، فأرسل لنا رسالة. سيقوم فريقنا بالاتصال بك.