ข้อผิดพลาดที่ต้องให้ความสนใจเมื่อเรียนรู้ขอบเขตในเชิงมุม

ขอบเขตเชิงมุม

ในเว็บแอปพลิเคชันที่สร้างขึ้นด้วย Angular แนวคิดของขอบเขตอยู่ตลอด คำแนะนำมากมายในมุมมองเชิงมุมจะสร้างขอบเขตเช่น NG-APP, NG-Controller ฯลฯ ขอบเขตนี้คือ $scope (เวอร์ชันก่อน Angular1.2) เราฉีดเมื่อเขียนคอนโทรลเลอร์คอนโทรลเลอร์ มันเป็นแนวคิดในรูปแบบมุมมอง รูปแบบข้อมูลของเราถูกกำหนดไว้ในขอบเขต

หลุม

คนที่ใช้ Angular ควรผ่านกระบวนการนั่นคือเมื่อพวกเขาเป็นมือใหม่ในตอนแรกพวกเขาเพิ่งเห็นการเชื่อมโยงสองทาง

ขอบเขตหลุม 1 ในเชิงมุม

ไม่ว่าเขาจะเริ่มใช้มันโดยตรงเขาจะผูกมันในครั้งเดียว หลังจากมีผลผูกพันถ้าคุณโชคดี (นกตัวเก่าที่เข้าใจหลักการของขอบเขตเชิงมุมไม่สนใจมัน) การผูกสองทางจะเริ่มทำงานตามที่คาดไว้ ในเวลานี้เรายังรู้สึกว่าเรามีพลังมากจนเราสามารถตระหนักถึง "การผูกสองทาง" อย่างรวดเร็วซึ่งเป็นคุณสมบัติใหม่ที่ไม่เคยได้ยิน

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

หลังจากพูดมากลองดูที่สถานการณ์ที่สามเณรเริ่มระบุรูปแบบข้อมูลในขอบเขตและผูกมันไปในทิศทางสองทาง ในกรณีนี้คุณจะพบกับข้อผิดพลาดที่กล่าวถึงข้างต้น มาดูรหัสก่อน

 // html <div ng-controller = "outerctrl"> <span ng-bind = "a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "a"> </span> <button ng-click = "a = a+1"> OUTERCTRL ($ scope) {$ scope.a = 1;} ฟังก์ชั่น innerCtrl () {}

รหัสด้านบนเป็นตัวอย่างที่ง่ายมากของการเชื่อมโยงสองทาง หลังจากโหลดหน้าเว็บแล้ว 1 จะแสดงใน div ภายนอกและ div ภายใน เมื่อกดปุ่มเพิ่มขึ้นคุณจะพบว่ามีเพียงภายใน 1 เท่านั้นที่จะกลายเป็น 2 สิ่งเดียวกันนั้นเป็นจริงสำหรับการกดต่อไปเฉพาะหมายเลขภายในเท่านั้นที่จะเพิ่มขึ้น ดังนั้นในเวลานี้สามเณรมักจะตื่นตระหนก สิ่งที่เกี่ยวกับการเชื่อมโยงสองทางที่มีมนต์ขลังที่ตกลงกัน?

ขอบเขตหลุม 2 ในเชิงมุม

ในเวลานี้ทารกมีอารมณ์เล็กน้อย เขาเดินขึ้น stackoverflow และเอกสารอย่างเป็นทางการ ในที่สุดเขาก็พบว่ามีวิธีแก้ปัญหาเช่นการเขียนเป็น data.a แอตทริบิวต์ของวัตถุ:

 // html <div ng-controller = "outerctrl"> <span ng-bind = "data.a"> </span> <div ng-controller = "innerctrl"> <span ng-bind = "data.a"> </span> OUTERCTRL ($ scope) {$ scope.data = {a: 1};} ฟังก์ชั่น innerctrl () {}

จากนั้นฉันก็พบว่ามันสามารถใช้งานได้และตัวเลขทั้งสองก็เพิ่มขึ้น ฉันเป็นราชาแห่งการผูกสองทาง ... จากนั้นฉันก็โยนมันทิ้งและเรียนรู้ต่อไปในส่วนต่อไปของการสอนโดยไม่สนใจหลักการเฉพาะ นี่คือการเดินทางทางจิตของฉันเมื่อฉันเรียนรู้เชิงมุมเป็นครั้งแรก ฉันรู้สึกละอายใจที่จะทำแอปพลิเคชันและนำไปใช้กับสภาพแวดล้อมการผลิตก่อนที่ฉันจะจำได้ว่าจะศึกษาหลักการภายใน

หลุมจะต้องเติมเต็มเสมอ

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

ในระยะสั้นที่นี่เราสามารถดูตัวอย่างแรกดังนี้:

 ฟังก์ชั่น outerctrl () {this.a = 1;} ฟังก์ชั่น innerctrl () {} var outer = new outerctrl (); innerctrl.prototype = ด้านนอก; var inner = new innerctrl (); inner.a = inner.a + 1;

ที่นี่เราตั้งค่าวัตถุต้นแบบของตัวสร้างของคอนโทรลเลอร์ภายในเป็นวัตถุขอบเขตภายนอกเพื่อให้วัตถุขอบเขตภายในที่สร้างมานั้นสืบทอดคุณสมบัติ A ในวัตถุภายนอกด้านนอก คุณสมบัตินี้เป็นค่าประเภทพื้นฐาน เมื่อเข้าถึงคุณสมบัติ A ของวัตถุภายในเนื่องจากวัตถุภายในตัวเองไม่มีคุณลักษณะดังกล่าวมันจะค้นหาจากวัตถุต้นแบบ มีแอตทริบิวต์ดังกล่าวในวัตถุต้นแบบด้านนอกดังนั้นค่าส่งคืนจึงไม่มีปัญหา แต่ถ้าเรากำหนดค่าให้กับคุณสมบัติ A ของวัตถุขอบเขตภายในปัญหาจะเกิดขึ้น inner.a = inner.a + 1; คำสั่งนี้ดำเนินการจริงกระบวนการที่กล่าวถึงข้างต้นเพื่อค้นหาค่าของคุณสมบัติ A จากนั้นกำหนดค่าที่ส่งคืนให้กับคุณสมบัติ A ของวัตถุขอบเขตภายใน เนื่องจากคุณสมบัติ A ไม่มีอยู่คุณสมบัติค่าประเภทพื้นฐานของ A ถูกสร้างขึ้นการปิดกั้นคุณสมบัติ A ในวัตถุขอบเขตด้านนอกด้านนอกและหลุมนี้ออกมา

ดังนั้นหากเราแทนที่แอตทริบิวต์ค่าประเภทพื้นฐานด้วยแอตทริบิวต์ค่าประเภทอ้างอิงปัญหาสามารถแก้ไขได้เนื่องจากแอตทริบิวต์ที่สอดคล้องกันของวัตถุทั้งสองเป็นค่าประเภทอ้างอิงที่อ้างอิงและไม่ว่าจะมีการแก้ไขที่ไหนมันจะสะท้อนให้เห็นในวัตถุทั้งหมดที่อ้างถึง

สรุป

ข้างต้นคือทั้งหมดที่เกี่ยวกับข้อผิดพลาดที่ต้องให้ความสนใจในเชิงมุม ฉันหวังว่าเนื้อหาของบทความนี้จะเป็นประโยชน์กับทุกคนในการเรียนรู้เกี่ยวกับขอบเขตใน Angular