มีเคล็ดลับง่ายๆ ที่จะทำให้แอปพลิเคชัน 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 โดยการยกเลิกการเชื่อมต่อขอบเขต