เมื่อใดที่จะชอบ ng-if vs. ng-show / ng-hide?

ฉันเข้าใจng-showและng-hideส่งผลต่อคลาสที่ตั้งค่าไว้บนองค์ประกอบและng-ifควบคุมว่าจะให้องค์ประกอบแสดงผลเป็นส่วนหนึ่งของ DOM หรือไม่

จะมีแนวทางในการเลือกng-ifมากกว่าng-show/ ng-hideหรือในทางกลับกัน?

ขึ้นอยู่กับกรณีการใช้งานของคุณ แต่เพื่อสรุปความแตกต่าง:

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ตัวอย่างสำหรับทั้งในเอกสารประกอบเชิงมุม

ท้ายที่สุดคำถามที่คุณต้องตอบคือคุณสามารถลบองค์ประกอบออกจาก DOM หรือไม่?

ดูที่นี่สำหรับ CodePen ที่แสดงให้เห็นถึงความแตกต่างในการทำงานของ ng-if / ng-show, DOM-wise

@markovuksanovic ตอบคำถามได้ดี แต่ฉันมาจากมุมมองอื่น: ฉันมักจะใช้ng-ifและนำองค์ประกอบเหล่านั้นออกจาก DOM ยกเว้น:

1. ด้วยเหตุผลบางอย่างคุณจำเป็นต้องมี data-bindings และ$watch-es ในองค์ประกอบของคุณเพื่อให้สามารถใช้งานได้ในขณะที่มองไม่เห็น แบบฟอร์มอาจเป็นกรณีที่ดีสำหรับสิ่งนี้ถ้าคุณต้องการตรวจสอบความถูกต้องของอินพุตที่ไม่สามารถมองเห็นได้ในปัจจุบันเพื่อตรวจสอบว่าแบบฟอร์มทั้งหมดนั้นถูกต้องหรือไม่
2. คุณกำลังใช้ตรรกะ stateful ที่ซับซ้อนอย่างแท้จริงกับตัวจัดการเหตุการณ์แบบมีเงื่อนไขตามที่กล่าวไว้ข้างต้น ที่กล่าวว่าหากคุณพบว่าตัวเองติดและแยกตัวจัดการด้วยตนเองเช่นคุณกำลังสูญเสียสถานะที่สำคัญเมื่อคุณใช้ ng-if ถามตัวเองว่าสถานะนั้นจะเป็นตัวแทนที่ดีขึ้นในแบบจำลองข้อมูลหรือไม่และตัวจัดการใช้เงื่อนไขตามคำสั่งทุกครั้ง องค์ประกอบมีการแสดงผล ใส่อีกวิธีหนึ่งการมี / ไม่มีตัวจัดการเป็นรูปแบบของข้อมูลสถานะ นำข้อมูลนั้นออกจาก DOM และเข้าสู่โมเดล การมี / ไม่มีตัวจัดการควรถูกกำหนดโดยข้อมูลและทำให้ง่ายต่อการสร้างใหม่

เชิงมุมเขียนได้ดีมาก มันรวดเร็วโดยพิจารณาว่ามันทำอะไร แต่สิ่งที่ทำคือกลุ่มของเวทมนตร์ที่ทำให้สิ่งที่ยาก (เช่นการผูกข้อมูลแบบสองทาง) ดูง่ายเล็กน้อย การทำให้ทุกสิ่งดูง่ายทำให้เกิดประสิทธิภาพการทำงานสูง คุณอาจตกใจเมื่อรู้ว่ามีหลายร้อยหรือหลายพันเท่าที่ฟังก์ชั่นเซทเทอร์ได้รับการประเมินในระหว่าง$digestรอบของ DOM ที่ก้อนใหญ่ไม่มีใครดู แล้วคุณก็รู้ว่าคุณมีองค์ประกอบที่มองไม่เห็นนับร้อยหรือร้อยทั้งหมดทำสิ่งเดียวกัน ...

เดสก์ท็อปอาจมีประสิทธิภาพเพียงพอที่จะแสดงผลปัญหาการประมวลผลความเร็ว JS ส่วนใหญ่ แต่ถ้าคุณพัฒนามือถือให้ใช้ ng-if ทุกครั้งที่เป็นไปได้อย่างมนุษย์ปุถุชน ความเร็วของ JS ยังมีความสำคัญกับโปรเซสเซอร์มือถือ การใช้ ng-if เป็นวิธีที่ง่ายมากในการเพิ่มประสิทธิภาพที่สำคัญซึ่งอาจมีค่าใช้จ่ายต่ำมาก

จากประสบการณ์ของฉัน:

1) หากหน้าของคุณมีการสลับที่ใช้ ng-if / ng-show เพื่อแสดง / ซ่อนบางสิ่ง ng-if ทำให้เบราว์เซอร์ล่าช้ามากขึ้น (ช้าลง) ตัวอย่างเช่น: หากคุณมีปุ่มที่ใช้ในการสลับระหว่างสองมุมมอง ng-show น่าจะเร็วกว่า

2) ng-if จะสร้าง / ทำลายขอบเขตเมื่อประเมินเป็นจริง / เท็จ หากคุณมีคอนโทรลเลอร์ติดอยู่กับ ng-if รหัสคอนโทรลเลอร์นั้นจะถูกเรียกใช้งานทุกครั้งที่ ng-if ประเมินผลเป็นจริง หากคุณใช้ ng-show รหัสคอนโทรลเลอร์จะได้รับการดำเนินการเพียงครั้งเดียว ดังนั้นหากคุณมีปุ่มที่สลับระหว่างมุมมองหลายมุมมองการใช้ ng-if และ ng-show จะสร้างความแตกต่างอย่างมากในวิธีที่คุณเขียนรหัสคอนโทรลเลอร์ของคุณ

คำตอบนั้นไม่ง่าย:

มันขึ้นอยู่กับเครื่องเป้าหมาย (มือถือเทียบกับเดสก์ท็อป) มันขึ้นอยู่กับลักษณะของข้อมูลเบราว์เซอร์ระบบปฏิบัติการฮาร์ดแวร์ที่ทำงานบน ... คุณจะต้องสร้างมาตรฐานหากคุณต้องการรู้จริง ๆ

มันเป็นปัญหาการคำนวณหน่วยความจำส่วนใหญ่ ... เช่นเดียวกับปัญหาด้านประสิทธิภาพส่วนใหญ่ความแตกต่างอาจมีความสำคัญกับองค์ประกอบที่ซ้ำ ๆ (n) เช่นรายการโดยเฉพาะอย่างยิ่งเมื่อซ้อน (nxn หรือแย่กว่า) และการคำนวณที่คุณใช้ในองค์ประกอบเหล่านี้ :

• ng-show : หากองค์ประกอบทางเลือกเหล่านั้นมักมีอยู่ (หนาแน่น) เช่นพูดว่า 90% ของเวลามันอาจจะเร็วกว่าที่จะให้พวกเขาพร้อมและแสดง / ซ่อนเฉพาะโดยเฉพาะอย่างยิ่งถ้าเนื้อหาของพวกเขาราคาถูก (แค่ข้อความธรรมดาไม่มีอะไรเลย เพื่อคำนวณหรือโหลด) วิธีนี้ใช้หน่วยความจำเมื่อเติม DOM ด้วยองค์ประกอบที่ซ่อนอยู่ แต่เพียงแสดง / ซ่อนบางสิ่งที่มีอยู่แล้วน่าจะเป็นการใช้งานที่ถูกสำหรับเบราว์เซอร์

• ng-if : หากองค์ประกอบที่ตรงกันข้ามมีแนวโน้มว่าจะไม่แสดง (กระจัดกระจาย) เพียงแค่สร้างและทำลายพวกเขาแบบเรียลไทม์โดยเฉพาะอย่างยิ่งหากเนื้อหาของพวกเขามีราคาแพงที่จะได้รับ (การคำนวณ / เรียง / กรอง / กรองภาพสร้างภาพ) เหมาะสำหรับองค์ประกอบที่หายากหรือ 'ตามคำขอ' ช่วยประหยัดหน่วยความจำในแง่ของการไม่เติม DOM แต่สามารถใช้การคำนวณจำนวนมาก (การสร้าง / ทำลายองค์ประกอบ) และแบนด์วิดท์ (รับเนื้อหาจากระยะไกล) นอกจากนี้ยังขึ้นอยู่กับจำนวนที่คุณคำนวณในมุมมอง (การกรอง / การเรียงลำดับ) เทียบกับสิ่งที่คุณมีในโมเดล (ข้อมูลที่เรียงลำดับล่วงหน้า / กรองล่วงหน้า)

หมายเหตุสำคัญหนึ่ง:

ngIf (ไม่เหมือน ngShow) มักจะสร้างขอบเขตของเด็กที่อาจให้ผลลัพธ์ที่ไม่คาดคิด

ฉันมีปัญหาเกี่ยวกับสิ่งนี้และฉันใช้เวลามากในการคิดว่าเกิดอะไรขึ้น

(คำสั่งของฉันกำลังเขียนค่ารุ่นไปยังขอบเขตที่ไม่ถูกต้อง)

ดังนั้นเพื่อประหยัดผมของคุณเพียงใช้ ngShow จนกว่าคุณจะทำงานช้าเกินไป

ความแตกต่างของการทำงานนั้นแทบจะไม่น่าสังเกตเลยและฉันก็ยังไม่แน่ใจว่าใครที่ชอบคือมันโดยไม่ต้องทดสอบ ...

ng-if บน ng-include และ ng-controller จะมีผลกระทบอย่างมากกับ ng-include มันจะไม่โหลดบางส่วนที่ต้องการและไม่ดำเนินการจนกว่าการตั้งค่าสถานะเป็นจริงบน ng-controller มันจะไม่โหลดตัวควบคุมเว้นแต่จะตั้งค่าสถานะ จริง แต่ปัญหาคือเมื่อแฟล็กได้รับ false ใน ng-if มันจะลบออกจาก DOM เมื่อแฟล็กได้รับจริงมันจะรีโหลด DOM ในกรณีนี้ ng-show ดีกว่าสำหรับการแสดงครั้งเดียว ng-if ดีกว่า

ถ้าคุณใช้ ng-show or ng-hideเนื้อหา (เช่นรูปขนาดย่อจากเซิร์ฟเวอร์) จะโหลดโดยไม่คำนึงถึงค่าของนิพจน์ แต่จะแสดงตามค่าของนิพจน์

หากคุณใช้ng-ifเนื้อหาจะถูกโหลดเฉพาะในกรณีที่การแสดงออกของ ng-if ประเมินว่าเป็นความจริง

การใช้ ng-if เป็นความคิดที่ดีในสถานการณ์ที่คุณกำลังจะโหลดข้อมูลหรือภาพจากเซิร์ฟเวอร์และแสดงเฉพาะขึ้นอยู่กับการโต้ตอบของผู้ใช้ วิธีนี้การโหลดหน้าเว็บของคุณจะไม่ถูกบล็อกโดยงานที่ไม่จำเป็นซึ่งไม่จำเป็น