มีเคล็ดลับง่ายๆ ที่จะทำให้แอปพลิเคชัน AngularJS ของคุณทำงานได้ดีขึ้น
แนวคิดนี้ยืมมาจากกรอบงาน Ionic และจะทำให้เราสามารถยกเลิกการเชื่อมต่อขอบเขตที่เลือกได้ ดังนั้นการทำซ้ำการแยกย่อยครั้งถัดไปจะไม่ทริกเกอร์ผู้เฝ้าดู
มันทำงานอย่างไร:
- Angular สร้างลำดับชั้นของวัตถุ
$scope
โดยมี$rootScope
อยู่ด้านบน - ขอบเขตย่อยเชื่อมต่อกันและใช้งานโครงสร้างข้อมูลรายการแบบเชื่อมโยงคู่ โดยจะอ้างอิงถึงขอบเขตก่อนหน้าและถัดไปในรายการ
- จากนั้นการเปลี่ยนแปลงจะเกิดขึ้น
$digest
digest ดำเนินการผู้เฝ้าดูทั้งหมดใน$scope
ตรวจสอบว่าจำเป็นต้องอัปเดตค่าหรือไม่ นี่เป็นการดำเนินการที่มีราคาแพง - จากนั้นการเปลี่ยนแปลงจะเกิดขึ้น $digest ดำเนินการเฝ้าดูทั้งหมดใน $scope ตรวจสอบว่าค่าจำเป็นต้องได้รับการอัปเดตหรือไม่ นี้มีราคาแพงมาก
- เราสามารถตัดการเชื่อมต่อของheavy
$scope
เพื่อลดจำนวน$$watchers
ที่จะเริ่มทำงานในการวนซ้ำ $digest ครั้งถัดไป
เราต้องการเพียงสองฟังก์ชันเท่านั้นที่จะทำทั้งหมดนั้น
การใช้งานที่นำมาจาก "อิออน"
ในโค้ดด้านบน เราต้องเรียก disconnectScope
ด้วย $scope
เราต้องการตัดการเชื่อมต่อเป็นอาร์กิวเมนต์: disconnectScope($scopeToBeDisconnected)
การรัน $digest
ครั้งถัดไปจะละเว้นผู้ดูในขอบเขตที่ไม่ได้เชื่อมต่อ เนื่องจากขอบเขตนั้นไม่อยู่ในรายการอีกต่อไป
เราสามารถใช้เมธอด build-in $rootScope.countWatchers
เพื่อติดตามว่าจำนวนผู้ดูเปลี่ยนแปลงไปอย่างไรหลังจากขอบเขตการขาดการเชื่อมต่อ
กรณีการใช้งาน
กรณีการใช้งานที่ดีที่สุดสำหรับเทคนิคนี้คือส่วนประกอบที่มีเนื้อหาที่ซ่อนอยู่: แท็บ หีบเพลง วิซาร์ด การแบ่งหน้า ฯลฯ
ดูแท็บเป็นตัวอย่าง เราไม่ต้องการเรียกผู้ดูบนแท็บที่ไม่ได้ใช้งานเสมอไป การมีส่วนประกอบที่ซับซ้อนอาจใช้เวลานาน เราสามารถยกเลิกการเชื่อมต่อขอบเขตของส่วนประกอบที่ซ่อนอยู่ และเชื่อมต่อกลับเข้าไปใหม่เมื่อแท็บกลับมาทำงานอีกครั้ง
หมายเหตุ:
- ตัดการเชื่อมต่อ
$scope
จะไม่ได้รับการออกอากาศหรือกิจกรรมที่ปล่อยออกมา - หลังจากเชื่อมต่อใหม่ ขอบเขตจะกลายเป็นโหนดท้ายในรายการ
- ในบางกรณี หลังจากเชื่อมต่อใหม่แล้ว เราอาจจำเป็นต้องเรียกใช้
$digest
ด้วยตนเองเพื่อซิงค์ขอบเขต ปรับปรุงประสิทธิภาพของ AngularJS โดยการยกเลิกการเชื่อมต่อขอบเขต