دروس AngularJS: تبسيط التوجيهات المخصصة

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

ما هو التوجيه؟ ببساطة ، التوجيهات هي وظائف JavaScript التي تعالج وتضيف السلوكيات إلى عناصر HTML DOM. يمكن أن تكون التوجيهات مبسطة للغاية أو معقدة للغاية. لذلك ، فإن الحصول على فهم قوي لخياراتها ووظائفها العديدة التي تتعامل معها أمر بالغ الأهمية.

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

أربع وظائف لدورة حياة توجيه AngularJS

هناك العديد من الخيارات التي يمكن تهيئتها ومن المهم كيفية ارتباط هذه الخيارات ببعضها البعض. يخضع كل توجيه لشيء مشابه لدورة الحياة حيث يقوم AngularJS بتجميع وربط DOM. تبدأ دورة حياة التوجيه وتنتهي في عملية AngularJS bootstrapping ، قبل أن يتم تقديم الصفحة. في دورة حياة التوجيه ، هناك أربع وظائف مميزة يمكن تنفيذها إذا تم تحديدها. يتيح كل منها للمطور التحكم في التوجيه وتخصيصه في نقاط مختلفة من دورة الحياة.

الوظائف الأربع هي: التحويل البرمجي ، والتحكم ، والرابط المسبق ، والرابط اللاحق .

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

تسهل وظيفة التحكم الاتصال التوجيهي. يمكن أن تطلب توجيهات الأخوة والأطفال من المراقب على أشقائهم وأولياء أمورهم توصيل المعلومات.

تسمح وظيفة ما قبل الارتباط بمعالجة نطاق $ الخاص قبل أن تبدأ عملية ما بعد الارتباط.

طريقة ما بعد الارتباط هي طريقة العمود الفقري الأساسية للتوجيه.

في التوجيه ، تتم معالجة DOM بعد التجميع ، ويتم تكوين معالجات الأحداث ، وكذلك الساعات وأشياء أخرى. في إعلان التوجيه ، يتم تعريف الوظائف الأربع على هذا النحو.

 .directive("directiveName",function () { return { controller: function() { // controller code here... }, compile: { // compile code here... return { pre: function() { // pre-link code here... }, post: function() { // post-link code here... } }; } } })

بشكل عام ، ليست كل الوظائف مطلوبة. في معظم الحالات ، سيقوم المطورون ببساطة بإنشاء وحدة تحكم ووظيفة ما بعد الارتباط باتباع النمط أدناه.

 .directive("directiveName",function () { return { controller: function() { // controller code here... }, link: function() { // post-link code here... } } })

في هذا التكوين ، يشير الارتباط إلى وظيفة ما بعد الارتباط .

سواء تم تعريف جميع الوظائف أو بعضها ، فإن ترتيب تنفيذها مهم ، لا سيما تنفيذها بالنسبة لبقية تطبيق AngularJS.

تنفيذ وظيفة توجيه AngularJS المتعلقة بالتوجيهات الأخرى

ضع في اعتبارك مقتطف HTML التالي مع التوجيهات parentDir و childDir و grandChildDir المطبقة على جزء HTML.

 <div parentDir> <div childDir> <div grandChildDir> </div> </div> </div>

يكون ترتيب تنفيذ الوظائف ضمن التوجيه ، والمرتبط بالتوجيهات الأخرى ، على النحو التالي:

• مرحلة التجميع
  • ترجمة الوظيفة : parentDir
  • ترجمة الوظيفة : childDir
  • ترجمة الوظيفة : grandChildDir
• مرحلة التحكم والوصلة المسبقة
  • وظيفة التحكم : parentDir
  • وظيفة ما قبل الارتباط : parentDir
  • وظيفة التحكم : childDir
  • وظيفة ما قبل الارتباط : childDir
  • وظيفة التحكم : grandChildDir
  • وظيفة ما قبل الارتباط : grandChildDir
• مرحلة ما بعد الارتباط
  • وظيفة ما بعد الارتباط : grandChildDir
  • وظيفة ما بعد الارتباط : childDir
  • وظيفة ما بعد الارتباط : parentDir

شرح وظيفة توجيه AngularJS: الغوص العميق

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

بمجرد اكتمال التجميع ، لا يمكن إضافة التوجيهات أو إزالتها من DOM (على الرغم من وجود طريقة للتغلب على ذلك باستخدام خدمة الترجمة مباشرة. المرحلة التالية هي استدعاء وحدات التحكم ووظائف الارتباط المسبق لجميع التوجيهات. عندما تكون وحدة التحكم يسمى النطاق $ متاح ويمكن استخدامه. يحتوي العنصر $ الذي تم حقنه في وحدة التحكم على القالب المترجم ولكنه لا يتضمن المحتوى الفرعي المتضمن (المحتوى المتضمن هو المحتوى بين علامتي HTML للبدء والنهاية حيث يكون التوجيه بالتعريف ، فإن وحدات التحكم في نمط MVC تقوم ببساطة بتمرير النموذج إلى العرض وتحديد وظائف لمعالجة الأحداث. لذلك ، يجب ألا يقوم المتحكم في التوجيه بتعديل DOM الخاص بالتوجيه لسببين: إنه ينتهك الغرض من المتحكم ، ولم تتم إضافة محتوى الطفل المشتمل إلى DOM. إذن ما الذي تفعله وحدة التحكم بخلاف تعديل النطاق $ ؟ تسمح وحدة التحكم لتوجيهات الطفل بالتواصل مع توجيهات الوالدين. يجب اعتبار وظيفة وحدة التحكم نفسها ككائن تحكم سيتم تمريره إلى وظيفة ما بعد الارتباط للتوجيه الفرعي إذا طلب التوجيه الفرعي ذلك. لذلك ، تُستخدم وحدة التحكم عادةً لتسهيل الاتصال التوجيهي عن طريق إنشاء كائن بخصائص وطرق يمكن استخدامها بواسطة توجيهات الأشقاء والطفل. لا يمكن للتوجيه الرئيسي تحديد ما إذا كان التوجيه الفرعي يمكن أن يتطلب وحدة التحكم الخاصة به ، لذلك من الأفضل قصر التعليمات البرمجية في هذه الطريقة على الوظائف والخصائص التي يمكن للتوجيهات التابعة استخدامها بأمان.

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

إن وظيفة الربط المسبق ليست معقدة على الإطلاق. أولاً ، إذا قمت بمراجعة شفرة مصدر AngularJS ، فستجد مثالاً ممتازًا لوظيفة الارتباط المسبق: يستخدمها التوجيه ng-init . لماذا ا؟ إنها ببساطة طريقة رائعة لتنفيذ التعليمات البرمجية الخاصة التي تتضمن النطاق $ ؛ رمز لا يمكن استدعاؤه عن طريق توجيهات الأشقاء والأطفال. على عكس وظيفة التحكم ، لا يتم تمرير وظيفة الربط المسبق إلى التوجيهات. لذلك ، يمكن استخدامه لتنفيذ التعليمات البرمجية التي تعدل النطاق $ لتوجيهاتها. يقوم التوجيه ng-init بعمل هذا بالضبط. عندما يتم تنفيذ وظيفة الربط المسبق لـ ng-init ، فإنها تقوم ببساطة بتنفيذ JavaScript الذي تم تمريره إلى التوجيه مقابل النطاق $ للتوجيه. تكون نتيجة التنفيذ متاحة من خلال توريث النموذج الأولي لـ $ domain لتوجيهات الأطفال أثناء عمليات تنفيذ وظائف وحدة التحكم والرابط المسبق والرابط اللاحق ، ولكن دون إتاحة الوصول إلى توجيهات الأطفال هذه لإعادة تنفيذ التعليمات البرمجية في التعليمات السابقة للوالد وظيفة الارتباط. أيضًا ، قد يحتاج التوجيه إلى تنفيذ تعليمات برمجية أخرى غير مرتبطة بنطاق $ الذي يرغب في إبقائه خاصًا.

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

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

وظيفة ما بعد الارتباط هي الوظيفة الأكثر شيوعًا التي يتم تنفيذها في توجيهات AngularJS المخصصة. في هذه الوظيفة ، يمكن فعل أي شيء معقول تقريبًا. يمكن معالجة DOM (لنفسه والعناصر الفرعية فقط) ، ويتوفر نطاق $ ، ويمكن استخدام كائن وحدة التحكم للتوجيهات الرئيسية ، ويمكن تشغيل وظائف transclude ، وما إلى ذلك ، ومع ذلك ، هناك بعض القيود. لا يمكن إضافة توجيهات جديدة إلى DOM لأنه لن يتم تجميعها. بالإضافة إلى ذلك ، يجب إجراء جميع معالجات DOM باستخدام وظائف DOM. ببساطة استدعاء دالة html على عنصر DOM وتمرير HTML جديد سيزيل كل معالجات الأحداث المضافة أثناء عملية الترجمة. على سبيل المثال ، لن تعمل هذه كما هو متوقع:

 element.html(element.html());

أو

 element.html(element.html() + "<div>new content</div>");

لن يتسبب الرمز في تغيير HTML ، ولكن إعادة تعيين إصدار السلسلة لعناصر DOM سيؤدي إلى إزالة جميع معالجات الأحداث التي تم إنشاؤها أثناء عملية الترجمة. عادةً ما يتم استخدام وظيفة ما بعد الارتباط لتوصيل معالجات الأحداث و $ watch es و $ note s.

بمجرد تنفيذ جميع وظائف ما بعد الارتباط ، يتم تطبيق النطاق $ على بنية DOM المترجمة والمرتبطة ، وتصبح صفحة AngularJS حية.

مخطط وظيفة التوجيه

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

ملخص

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