it-swarm.asia

متى تفضل ng-if مقابل ng-show/ng-hide؟

أدرك أن ng-show و ng-hide تؤثران على الفصل الدراسي المعين في عنصر وأن ng-if يتحكم في ما إذا كان سيتم تقديم عنصر كجزء من DOM.

هل هناك إرشادات حول اختيار ng-if على ng-show/ng-hide أو العكس؟

502
Patrice Chalin

يعتمد على حالة الاستخدام الخاصة بك ولكن لتلخيص الفرق:

  1. ng-if ستزيل العناصر من DOM. هذا يعني أنه سيتم فقد جميع معالجاتك أو أي شيء آخر ملحق بهذه العناصر. على سبيل المثال ، إذا قمت بربط معالج النقرات بأحد العناصر الفرعية ، فعند تقييم ng-if لخطأ ، ستتم إزالة هذا العنصر من DOM ولن يعمل معالج النقرات بعد الآن ، حتى بعد تقييم ng-if لاحقًا إلى صواب ويعرض العنصر. سوف تحتاج إلى إعادة معالج.
  2. ng-show/ng-hide لا يزيل العناصر من DOM. يستخدم أنماط CSS لإخفاء/إظهار العناصر (ملاحظة: قد تحتاج إلى إضافة فئاتك الخاصة). بهذه الطريقة لن تضيع معالجاتك المرتبطة بالأطفال.
  3. ng-if تنشئ نطاقًا فرعيًا بينما ng-show/ng-hide لا

العناصر غير الموجودة في DOM لها تأثير أقل في الأداء وقد يبدو تطبيق الويب الخاص بك أسرع عند استخدام ng-if مقارنة بـ ng-show/ng-hide. في تجربتي ، والفرق لا يكاد يذكر. تكون الرسوم المتحركة ممكنة عند استخدام كل من ng-show/ng-hide و ng-if ، مع أمثلة لكل منهما في وثائق Angular.

في النهاية ، فإن السؤال الذي تحتاج إلى إجابته هو ما إذا كان يمكنك إزالة عنصر من DOM أم لا؟

683
markovuksanovic

راجع هنا للحصول على CodePen الذي يوضح الفرق في كيفية عمل ng-if/ng-show ، DOM-wise.

قامmarkovuksanovic بالإجابة على السؤال جيدًا. لكنني جئت إليها من منظور آخر: سأكون دائمًا استخدم ng-if وأخرج هذه العناصر من DOM ، إلا إذا:

  1. تحتاج لسبب ما إلى ربط البيانات و $watch- العناصر الموجودة في عناصرك لتبقى نشطة في حين أنها غير مرئية. قد تكون النماذج مناسبة لذلك ، إذا كنت تريد أن تكون قادرًا على التحقق من صلاحية المدخلات غير المرئية حاليًا ، لتحديد ما إذا كان النموذج بأكمله صالحًا أم لا.
  2. إنك تستخدم بعض منطق الحالة المعقول مع معالجات الأحداث الشرطية ، كما ذكر أعلاه. يقال ، إذا وجدت نفسك تعلق معالجات وتفصلها يدويًا ، بحيث تفقد حالتك المهمة عند استخدام ng-if ، اسأل نفسك عما إذا كان سيتم تمثيل هذه الحالة بشكل أفضل في نموذج البيانات ، و يتم تطبيق المعالجات بشكل مشروط بواسطة التوجيهات كلما تم تقديم العنصر. وبعبارة أخرى ، فإن وجود/عدم وجود معالجات هو شكل من أشكال بيانات الحالة. الحصول على تلك البيانات من DOM ، وإلى نموذج. يجب تحديد وجود/عدم وجود معالجات بواسطة البيانات ، وبالتالي من السهل إعادة.

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

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

129
XML

من تجربتي:

1) إذا كانت صفحتك تحتوي على تبديل يستخدم ng-if/ng-show لإظهار/إخفاء شيء ما ، يؤدي ng-if إلى مزيد من التأخير في المتصفح (أبطأ). على سبيل المثال: إذا كان لديك زر يستخدم للتبديل بين عرضين ، فيبدو أن ng-show يكون أسرع.

2) ng-if سيؤدي إلى إنشاء/إتلاف النطاق عندما يتم تقييمه إلى صواب/خطأ. إذا كان لديك وحدة تحكم متصلة بـ ng-if ، فسيتم تنفيذ رمز وحدة التحكم هذا في كل مرة يتم فيها تقييم ng-if إلى true. إذا كنت تستخدم ng-show ، فيتم تنفيذ رمز التحكم مرة واحدة فقط. لذلك إذا كان لديك زر يقوم بالتبديل بين طرق عرض متعددة ، فإن استخدام ng-if و ng-show سيحدث فرقًا كبيرًا في كيفية كتابة رمز وحدة التحكم الخاصة بك.

52
Yi Z

الإجابة ليست بسيطة:

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

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

  • ng-show : في حالة وجود هذه العناصر الاختيارية غالبًا (كثيفة) ، مثل 90٪ من الوقت ، فقد يكون إعدادها جاهزًا وإظهارها/إخفائها بشكل أسرع ، خاصة إذا كان محتواها رخيصًا (فقط نص عادي ، لا شيء لحساب أو تحميل). هذا يستهلك الذاكرة لأنه يملأ DOM بعناصر مخفية ، ولكن مجرد إظهار/إخفاء شيء موجود بالفعل من المرجح أن يكون عملية رخيصة للمتصفح.

  • ng-if : إذا كان من غير المحتمل أن تظهر العناصر (متفرقة) على العكس ، فقم ببنائها وتدميرها في الوقت الفعلي ، خاصة إذا كان محتواها مكلفًا للحصول على (حسابات/مصنفة/مصفاة ، صور ، تم إنشاؤها) الصور). هذا مثالي للعناصر النادرة أو "حسب الطلب" ، فهو يحفظ الذاكرة من حيث عدم ملء DOM ولكن يمكن أن يكلف الكثير من الحساب (إنشاء/تدمير العناصر) وعرض النطاق الترددي (الحصول على محتوى عن بُعد). يعتمد ذلك أيضًا على مقدار حسابك في العرض (تصفية/فرز) مقابل ما لديك بالفعل في النموذج (بيانات مرتبة مسبقًا/مصفاة مسبقًا).

33
Christophe Roussy

ملاحظة مهمة واحدة:

عادةً ما ينشئ ngIf (على عكس ngShow) نطاقات تابعة قد ينتج عنها نتائج غير متوقعة.

كانت لدي مشكلة متعلقة بهذا الأمر وقضيت وقتًا كثيرًا في اكتشاف ما يجري.

(كان توجيهي يكتب قيم النموذج الخاصة به إلى النطاق الخاطئ.)

لذلك ، لحفظ شعرك فقط استخدم ngShow إلا إذا كنت تعمل ببطء شديد.

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

11
user2173353

إذا استخدمت ng-show or ng-hide ، فسيتم تحميل المحتوى (على سبيل المثال ، الصور المصغرة من الخادم) بغض النظر عن قيمة التعبير ولكن سيتم عرضه استنادًا إلى قيمة التعبير.

إذا استخدمت ng-if ، فسيتم تحميل المحتوى فقط إذا تم تقييم تعبير ng-if على صدق.

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

4
appdroid

ng-if على ng-include وعلى ng-controller سيكون لها تأثير كبير على ng-include ، لن يتم تحميل الجزء المطلوب ولن تتم معالجته إلا إذا كانت العلامة صحيحة على ng-controller ، فلن يتم تحميل وحدة التحكم إلا إذا كانت العلامة صحيح ولكن المشكلة هي عندما تصبح العلامة خاطئة في ng- إذا كانت ستتم إزالتها من DOM عندما تصبح الإشارة صحيحة مرة أخرى ، فسيتم إعادة تحميل DOM في هذه الحالة ، يكون ng-show أفضل ، لمرة واحدة تظهر ng-if أفضل

4
Saad Ahmed