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

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

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

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

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

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

يمكن أن يتغير النموذج في Angular كنتيجة لأي من السيناريوهات التالية:

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

• طلبات AJAX

• الموقتات (setTimer () ، setInterval ())

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

تتكون جميع تطبيقات Angular من شجرة هرمية من المكونات. في وقت التشغيل ، تنشئ Angular فئة منفصلة لكاشف التغيير لكل مكون في الشجرة ، والتي تشكل في النهاية تسلسلاً هرميًا لكاشفات التغيير على غرار شجرة التسلسل الهرمي للمكونات.

عندما يتم تشغيل اكتشاف التغيير ، يمشي Angular أسفل هذه الشجرة من أجهزة الكشف عن التغيير لتحديد ما إذا كان أي منها قد أبلغ عن تغييرات.

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

توفر كاشفات التغيير طريقة لتتبع الحالات السابقة والحالية للمكون بالإضافة إلى هيكلها من أجل الإبلاغ عن التغييرات في Angular.

إذا حصل Angular على التقرير من كاشف التغيير ، فإنه يوجه المكون المقابل لإعادة تصيير DOM وتحديثه وفقًا لذلك.

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

القيمة مقابل أنواع المراجع

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

للبدء ، دعنا نراجع أنواع القيم وأنواع المراجع وتصنيفاتها.

أنواع القيم

• قيمة منطقية

• باطل

• غير معرف

• رقم

• سلسلة

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

أنواع المراجع

• المصفوفات

• أشياء

• المهام

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

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

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

كما ذكرنا سابقًا ، يراقب Angular التغييرات في النموذج للتأكد من أنه يلتقط جميع التغييرات. سيتحقق من وجود أي اختلافات بين الحالة السابقة والحالة الحالية لنموذج التطبيق الكلي.

السؤال الذي يطرحه Angular في الإستراتيجية الافتراضية للكشف عن التغيير هو: هل تغيرت أي قيمة في النموذج؟ لكن بالنسبة لنوع المرجع ، يمكننا تنفيذ الاستراتيجيات حتى نتمكن من طرح سؤال أفضل. هذا هو المكان الذي تأتي فيه استراتيجية اكتشاف التغيير في OnPush.

استراتيجية OnPush

تتجلى الفكرة الرئيسية وراء إستراتيجية OnPush في إدراك أنه إذا تعاملنا مع الأنواع المرجعية ككائنات غير قابلة للتغيير ، فيمكننا اكتشاف ما إذا كانت القيمة قد تغيرت بشكل أسرع. عندما يكون نوع المرجع غير قابل للتغيير ، فهذا يعني أنه في كل مرة يتم تحديثه ، يجب تغيير المرجع الموجود في ذاكرة المكدس. الآن يمكننا ببساطة التحقق مما يلي: هل تغير المرجع (في المكدس) لنوع المرجع؟ إذا كانت الإجابة بنعم ، فحينئذٍ فقط تحقق من جميع القيم (في الكومة). الرجوع إلى المخططات السابقة كومة المكدس إذا كان هذا محيرا.

تطرح إستراتيجية OnPush بشكل أساسي سؤالين بدلاً من سؤال واحد. هل تغير مرجع نوع المرجع؟ إذا كانت الإجابة بنعم ، فهل تغيرت القيم في ذاكرة الكومة؟

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

لذا ، قد تسأل ، ماذا يعني التعامل مع أنواع المراجع على أنها غير قابلة للتغيير؟ هذا يعني أننا لا نعيّن أبدًا خاصية نوع المرجع ، ولكن بدلاً من ذلك نعيد تعيين القيمة معًا. انظر أدناه:

معاملة الأشياء على أنها قابلة للتغيير:

 static mutable() { var before = {foo: "bar"}; var current = before; current.foo = "hello"; console.log(before === current); // => true }

معاملة الأشياء على أنها ثابتة:

 static mutable() { var before = {foo: "bar"}; var current = before; current = {foo "hello"}; console.log(before === current); // => false }

لاحظ أنه في الأمثلة أعلاه ، "نتعامل" مع أنواع المراجع على أنها غير قابلة للتغيير وفقًا للاتفاقية ، لذلك في النهاية ما زلنا نعمل مع كائنات قابلة للتغيير ، ولكن فقط "نتظاهر" بأنها غير قابلة للتغيير.

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

 import {ChangeDetectionStrategy, Component} from '@angular/core'; @Component({ // ... changeDetection: ChangeDetectionStrategy.OnPush }) export class OnPushComponent { // ... }

غير قابل للتغيير

إنها فكرة جيدة لفرض الثبات إذا قرر المرء استخدام إستراتيجية OnPush على مكون Angular. هذا هو المكان الذي يأتي فيه Immutable.js.

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

من أجل إضافة Immutable.js إلى مشاريعك ، يرجى التأكد من الدخول إلى جهازك وتشغيل:

 $ npm install immutable --save

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

 import {Map, List} from 'immutable';

هذه هي الطريقة التي يمكن بها استخدام خريطة Immutable.js:

 var foobar = {foo: "bar"}; var immutableFoobar = Map(foobar); console.log(immutableFooter.get("foo")); // => bar

ويمكن استخدام المصفوفة:

 var helloWorld = ["Hello", "World!"]; var immutableHelloWorld = List(helloWorld); console.log(immutableHelloWorld.first()); // => Hello console.log(immutableHelloWorld.last()); // => World! helloWorld.push("Hello Mars!"); console.log(immutableHelloWorld.last()); // => Hello Mars!

عيوب استخدام Immutable.js

هناك نوعان من العوائق الرئيسية القابلة للجدل لاستخدام Immutable.js.

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

يتم إحتوائه

قد تسأل لماذا لا تعد إستراتيجية OnPush هي الإستراتيجية الافتراضية لـ Angular. أفترض أن السبب في ذلك هو أن Angular لم يرغب في إجبار مطوري JavaScript على العمل مع كائنات غير قابلة للتغيير. لكن هذا لا يعني أنك ممنوع من استخدامه.

إذا كان هذا شيئًا تريد الاستفادة منه في مشروع الويب التالي ، فأنت تعرف الآن مدى سهولة استخدام Angular للتحول إلى استراتيجية مختلفة للكشف عن التغيير.