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



Answers

شاهد here لـ CodePen يوضح الفرق في طريقة عمل ng-if / ng-show ، DOM-wise.

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

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

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

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

Question

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

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




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

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

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

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

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




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

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

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






Related