18 سؤالًا شائعًا في المقابلة الشخصية (مع تحليل الإجابات)

1. ما هي الآلية المستخدمة لربط البيانات في Angular؟

الأساسية التفصيلية

: آلية الفحص القذرة.

التحليل:

يعد ربط البيانات ثنائي الاتجاه أحد الآليات الأساسية لـ AngularJS. عندما تتغير أي بيانات في العرض، سيتم تحديثها إلى النموذج. وعندما تتغير البيانات الموجودة في النموذج، سيتم أيضًا تحديث العرض بشكل متزامن. [توصية تعليمية ذات صلة: "Angular Tutorial"]

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

2. كيف يتم تنفيذ ربط البيانات ثنائي الاتجاه في AngularJS؟

الإجابة:

1. يحتوي كل عنصر مرتبط في اتجاهين على مراقب

2. عند حدوث أحداث معينة، يتم استدعاء اكتشاف البيانات القذرة.

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

3. سيكشف اكتشاف البيانات القذرة جميع عناصر المراقب تحت نطاق الجذر.

وظيفة $digest هي مراقبة البيانات القذرة

3. ما هي المكونات الإضافية للجهات الخارجية التي استخدمتها في تطوير مشروع angularjs؟

الإجابة: AngularUi ui-router oclazyload، وما إلى ذلك. مرفق مقال لإلقاء نظرة فاحصة https://segmentfault. com/a /1190000003858219

4. ما الفرق بين ng-show/ng-hide وng-if؟

الإجابة: نعلم جميعًا أن ng-show/ng-hide يخفي ويعرض من خلال العرض. وng-if يتحكم فعليًا في إضافة وحذف عقد dom. لذلك، إذا قمنا بتحميل عقد dom بناءً على ظروف مختلفة، فإن أداء ng-if أفضل من ng-show.

5. اشرح ما هو root S Crope والفرق بينه وبين rootScrope وrootScrope والنطاق؟

الإجابة: بمصطلحات الشخص العادي، صفحة rootScrope هي الأب لجميع صفحات rootScrope وجميع صفحات rootScrope وجميع النطاقات.

التحليل:

دعونا نلقي نظرة على كيفية إنشاء rootScope وrootScope وrootScope والنطاق.

الخطوة 1: تقوم Angular بتوزيع ng-app وإنشاء $rootScope في الذاكرة.

الخطوة 2: يستمر الزاوي في التحليل، ويبحث عن التعبير {{}}، ويحوله إلى متغير.

الخطوة 3: بعد ذلك سيتم تحليل div مع وحدة التحكم ng والإشارة إلى وظيفة وحدة التحكم. في هذا الوقت، تصبح وظيفة وحدة التحكم مثيل كائن $scope.

6. اذكر ثلاث طرق على الأقل لتنفيذ الاتصال بين الوحدات المختلفة؟

الإجابة:

أحداث
• الخدمة
• ، تحدد الأحداث المرتبطة
• باستخدام
• وحدة التحكم $rootScope، وتستخدم مباشرة $parent و$$childHead وسمات التوجيه الأخرى
• لربط البيانات

7. Expression { كيف يعمل {yourModel}}؟

الجواب:

يعتمد على خدمة الاستيفاء $ بعد تهيئة صفحة html، سيجد هذه التعبيرات ويضع علامة عليها، لذلك في كل مرة يواجه فيها {. {}}، سيتم تعيين $watch. وسيقوم الاستيفاء $ بإرجاع دالة بمعلمات السياق. عندما يتم تنفيذ الوظيفة أخيرًا، يتم تطبيق التعبير $parse على هذا النطاق.

8. $http في الإجابة الزاويّة

: $http هي خدمة أساسية في AngularJS، تُستخدم لقراءة البيانات من الخوادم البعيدة.

يمكننا استخدام خدمة http المضمنة للتواصل مباشرة مع العالم الخارجي. تتواصل خدمة http مباشرة مع العالم الخارجي. تتواصل خدمة http مباشرة مع العالم الخارجي. تقوم خدمة http ببساطة بتغليف كائن XMLHttpRequest الأصلي للمتصفح.

9. عندما يقوم ng-repeat بتكرار مصفوفة، إذا كانت هناك نفس القيم في المصفوفة، فماذا سيحدث وكيفية حلها؟

الإجابة: سيطالبك بعدم السماح بالتكرارات في المكرر. قم بإضافة مسار بواسطة $index لحل المشكلة. بالطبع، يمكنك أيضًا التتبع بأي قيمة عادية، طالما أنه يمكنه تحديد كل عنصر في المصفوفة بشكل فريد (إنشاء ارتباط بين dom والبيانات)

10. هل إجابة إطار عمل angularjs mvc أو mvvm

تحليل

mvvm

التفصيل أولاً، إليك فهم mvc وmvvm:

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

مزايا mvvm

هي اقتران منخفض: يمكن تغيير العرض وتعديله بشكل مستقل عن النموذج، ويمكن إعادة استخدام نفس ViewModel بواسطة طرق عرض متعددة، ويمكن إجراء التغييرات في العرض والنموذج بشكل مستقل عن بعضها البعض:

يمكن أن يكون بعض منطق العرض في ViewModel، يمكن إعادة استخدام طرق عرض متعددة

بشكل مستقل: يمكن للمطورين التركيز على تطوير منطق الأعمال والبيانات (ViewModemvvmdi؛ يمكن للمصممين التركيز على تصميم واجهة المستخدم (العرض)؛

وقابلية الاختبار: تتيح طبقات العرض الواضحة ذلك) من الأسهل والأبسط اختبار منطق الأعمال لطبقة العرض التقديمي،

وينقسم نمط MVVM بشكل أساسي إلى أربعة أجزاء:

العرض

:

القوالب

: هي الغراء بين العرض والنموذج، وهي المسؤولة عن التفاعل والتعاون بين العرض والنموذج، وهي مسؤولة عن توفير البيانات المعروضة للعرض، وتوفير طريقة لحدث الأمر في العرض لتشغيل النموذج. يخدم كائن $scope دور نموذج ViewModel

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

وحدة التحكم: هذا ليس العنصر الأساسي لنمط MVVM، ولكنه مسؤول عن تهيئة كائن ViewModel. سيتم دمج خدمة واحدة أو أكثر للحصول على كائن ViewModel الخاص بمجال الأعمال، بحيث تصل واجهة التطبيق إلى حالة قابلة للاستخدام عند بدء التحميل.

ترتبط واجهة mvc ارتباطًا وثيقًا بالمنطق، وتتم قراءة البيانات مباشرة منها تقترن واجهة mvvm بشكل فضفاض بوضع العرض، ويتم الحصول على بيانات الواجهة من نموذج العرض، لذا تفضل angularjs mvvm

11. ما هي الأدوار التي يلعبها النطاق $ ووحدة التحكم والتوجيه والخدمة في mvvm في angularjs

؟ إذا كنت لا تعرف، فإن تحليل السؤال الأول واضح جدًا، فاقرأه بعناية مرة أخرى

12. بالزاوية كيف تتحكم في التحميل المعقول للموارد الثابتة في المشروع

الإجابة: لا شيء

13. ما الذي يتعين عليك دفعه؟ الانتباه إلى عند كتابة منطق تحكم؟

الإجابة:

1. تبسيط التعليمات البرمجية (هذا ما يجب أن يمتلكه جميع المطورين)

2. لا يمكنك بالتأكيد تشغيل عقدة dom في هذا الوقت، وقد تتساءل لماذا لا،

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

ما هو التطوير القائم على الاختبار؟ لتعميمها:

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

14.

إجابات حول كيفية التواصل بين وحدات التحكم:

1.

هناك طريقتان للحدث هنا: إحداهما هيscope.scope.scope.emit، ثم تحصل على المعلمات من خلال الاستماع إلى حدث root S، والأخرى هي حدث rootScope للحصول على المعلمات؛ والآخر هو حدث rootScope للحصول على المعلمات؛ والآخر هو rootScope.broadcast، الذي يحصل على المعلمات من خلال الاستماع إلى البث والاستماع إلى أحداث النطاق.

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

2. يمكن للخدمة

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

3.

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

4. استخدم النطاق مباشرة .scope.scope.$nextSibling والخصائص المشابهة

للنطاق .scope.scope.parent. هذه الطريقة لها عيوب أكثر رسميًا، لا يُنصح باستخدام أي سمات تبدأ بـ $$، الأمر الذي لا يؤدي إلى زيادة الاقتران فحسب، بل يتطلب أيضًا التعامل مع المشكلات غير المتزامنة، كما أن ترتيب النطاقات غير ثابت. لا يُنصح

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

15. عدة معلمات للتعليمات المخصصة

الإجابة:

دعنا نتحدث عن بعض المعلمات شائعة الاستخدام، مثل:

تقييد: نموذج إعلان للتعليمة في قالب dom E (عنصر) A (سمة) C (اسم الفئة) M (تعليق)

: نموذجان، نوع نص HTML؛ دالة تقبل معلمتين، tElemetn وtAttrs، وترجع سلسلة تمثل القالب. يجب أن تحتوي سلسلة القالب على عنصر DOM جذري

templateUrl: نموذجان، أحدهما عبارة عن سلسلة تمثل مسار ملف HTML الخارجي؛ وهي وظيفة يمكنها قبول معلمتين، المعلمات هي tElement وtAttrs، وتقوم بإرجاع أحرف HTML الخارجية مسار الملف

ترجمة السلسلة (كائن أو وظيفة): يمكن لخيار الترجمة إرجاع كائن أو وظيفة. إذا تم تعيين وظيفة الترجمة، فهذا يعني أننا نريد تنفيذ عمليات DOM قبل وضع التعليمات والبيانات في الوقت الفعلي في DOM، ومن الآمن إجراء عمليات DOM مثل إضافة العقد وحذفها في هذه الوظيفة. بشكل أساسي، عندما نقوم بتعيين خيار الارتباط، فإننا نقوم فعليًا بإنشاء وظيفة رابط postLink() بحيث يمكن لوظيفة التحويل البرمجي () تحديد وظيفة الارتباط.

ثم هناك البوابة: http://www.cnblogs.com/mliudong/p/4180680.html

الفرق بين الترجمة والارتباط:

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

16. إجابة الفرق بين angular و jquery

:

تعتمد angular على البيانات، لذا فإن angular مناسبة للمشاريع ذات عمليات البيانات المعقدة (هنا يمكنك ذكر التطبيقات ذات الصفحة الواحدة مرة أخرى، إذا كنت لا تعرف كيفية القيام بذلك) هذه هي الفوائد هنا مرة أخرى http://www.zhihu .com/question/20792064)

يعتمد jquery على dom driver jquery مناسب للمشاريع التي تحتوي على العديد من عمليات dom

17. ما مدى معرفتك بالنموذج الموجود في

الإجابة:

Angular

بتوسيع نوع عناصر الإدخال وتوفر إجماليًا من الأنواع العشرة التالية:

• رقم

• النص

،

• عنوان URL

• ،

• مربع اختيار

• الراديو،

• الزر

• المخفي

• ، إرسال

• إعادة التعيين

، يحتوي Angular على 4 أنماط CSS مدمجة للنموذج.

• ng-valid يتحقق من الحالة القانونية

• ng-invalid يتحقق من الحالة غير القانونية

• ng-pristine إذا كنت ترغب في استخدام النموذج الأصلي، فأنت بحاجة إلى تعيين هذه القيمة

• ng-dirty النموذج في حالة البيانات القذرة

سوف يتحقق Angular من النموذج التحقق تلقائيًا من النموذج إذا لم يتم تعيين ng-model، فلا يمكن لـ Angular معرفة ما إذا كانت قيمة myForm.$invalid صحيحة.

المحتوى المطلوب للتحقق

• إلى ما إذا كان سيتم إدخال المحتوى

• ng-maxlength، الحد الأقصى للطول

• ng-minlength، الحد الأدنى للطول

مثال: Portal https://github.com/18500047564/clutter

18. ما هو مقدار ما تعرفه؟ قم بتنفيذ إجابة مرشح مخصص

:

• التاريخ (التاريخ)

• العملة (العملة)

• LimitTo (الحد من طول مصفوفة أو سلسلة)

• orderBy (فرز)

• أحرف صغيرة (أحرف صغيرة)

• أحرف كبيرة (أحرف كبيرة)

• رقم (تنسيق رقم، وإضافة فاصل الآلاف، واستلام المعلمات تحد من عدد النقاط العشرية)

• عامل التصفية (معالجة مصفوفة، تصفية العناصر التي تحتوي على سلسلة فرعية معينة)

• json (تنسيق كائن json)

هناك طريقتان لاستخدام عامل التصفية،

إحداهما مباشرة على الصفحة:

<p>{{now | date : 'yyyy-MM-dd'}}</p>

والآخر هو استخدامه في js:

$filter('filter name')(object to be filter، المعلمة 1، المعلمة 2،...)
$filter('date')(now, 'yyyy-MM-dd hh:mm:ss');

تخصيص مصفوفة إلغاء البيانات المكررة

app.filter("unique", function() {
  وظيفة الإرجاع (آر) {
    فار ن = [];
    فار obj = {};

    لـ (var i = 0; i < arr.length; i++) {
      إذا (!obj[arr[i]]) {
        n.push(arr[i]);
        obj[arr[i]] = 1;
      }
    }

    العودة ن؛
  };
});