โดยส่วนตัวแล้วฉันคิดว่าคุณต้องเข้าใจกลไกการทำงานของ AngularJs อย่างดีเพื่อให้คุณสามารถหลีกเลี่ยงการตกอยู่ในหลุมให้มากที่สุด ในบทความนี้ฉันจะทำการวิเคราะห์ที่ชัดเจนและละเอียดว่า AngularJS ได้ทำอะไรหลังจากเริ่มต้นตามข้อมูลออนไลน์และความเข้าใจของฉันเอง
ก่อนอื่นมาดูว่า Angular ทำอะไรทีละขั้นตอน
<! doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <png-init = "name = 'world'"> สวัสดี {{name}}!เมื่อคุณใช้เบราว์เซอร์เพื่อเข้าถึง index.html เบราว์เซอร์จะทำสิ่งต่อไปนี้:
กระบวนการทั้งหมดสามารถแสดงได้ด้วยภาพนี้:
ตกลงผ่านตัวอย่างข้างต้นเราสามารถเข้าใจได้ว่า AngularJS แสดงหน้าทีละขั้นตอนอย่างไร แล้วมันโต้ตอบกับลูปเหตุการณ์ของเบราว์เซอร์ได้อย่างไร? หรือคุณโต้ตอบกับผู้ใช้ได้อย่างไร? การพูดสั้น ๆ ส่วนใหญ่แบ่งออกเป็นสามขั้นตอน:
1. ลูปเหตุการณ์ของเบราว์เซอร์กำลังรอเหตุการณ์ที่จะถูกเรียกรวมถึงการโต้ตอบของผู้ใช้เหตุการณ์เวลาหรือเหตุการณ์เครือข่าย (เช่นการตอบสนองเซิร์ฟเวอร์ ฯลฯ );
2. เมื่อมีการเรียกเหตุการณ์แล้วมันจะเข้าสู่บริบท JavaScript และโดยทั่วไปจะถูกแก้ไขโดยทั่วไปผ่านฟังก์ชั่นการโทรกลับ
3. หลังจากฟังก์ชั่นการโทรกลับเบราว์เซอร์จะแสดงหน้าใหม่ตาม DOM ใหม่
ดังที่แสดงในรูปด้านล่างกระบวนการปฏิสัมพันธ์ส่วนใหญ่ประกอบด้วยหลายรอบ:
AngularJS ปรับเปลี่ยนเวิร์กโฟลว์ JavaScript ทั่วไปและให้กลไกการจัดการเหตุการณ์ของตัวเอง สิ่งนี้จะแยกบริบทของ JavaScript ออกเป็นสองส่วนหนึ่งคือบริบท JavaScript ดั้งเดิมและอีกส่วนหนึ่งคือบริบท AngularJS เฉพาะการดำเนินงานในบริบท AngularJS เท่านั้นที่สามารถเพลิดเพลินกับการเชื่อมโยงข้อมูลเชิงมุมการจัดการข้อยกเว้นการดูทรัพย์สินและบริการอื่น ๆ อย่างไรก็ตาม Angular ไม่ได้ถูกเพิกเฉยต่อคนนอก (เช่นการดำเนินการ JavaScript ดั้งเดิมการเรียกกลับเหตุการณ์ที่กำหนดเองห้องสมุดบุคคลที่สาม ฯลฯ ) คุณสามารถใช้ฟังก์ชั่น $ appl () ที่จัดทำโดย AngularJs เพื่อห่อบุคคลภายนอกเหล่านี้ลงในบริบท AngularJS เพื่อให้ Angular สามารถรับรู้ถึงการเปลี่ยนแปลงที่พวกเขาทำ
จากนั้นมาดูกันว่าวัฏจักรเหล่านี้ทำงานอย่างไรในระหว่างกระบวนการโต้ตอบ?
1. ก่อนอื่นเบราว์เซอร์จะอยู่ในสถานะการฟัง เมื่อมีการเรียกเหตุการณ์แล้วมันจะถูกเพิ่มเข้าไปในคิวเหตุการณ์และเหตุการณ์ในคิวเหตุการณ์จะถูกดำเนินการทีละคน
2. หากเหตุการณ์ในคิวเหตุการณ์ถูกห่อหุ้มด้วย $ appli () มันจะเข้าสู่บริบทของ AngularJs FN () นี่คือฟังก์ชั่นที่เราต้องการดำเนินการในบริบทของ AngularJS
3. AngularJS จะดำเนินการฟังก์ชัน FN () โดยปกติแล้วฟังก์ชั่นนี้จะเปลี่ยนสถานะของแอปพลิเคชัน
4. จากนั้น AngularJS จะเข้าสู่ $ Digest Loop ที่ประกอบด้วยลูปเล็กสองตัว หนึ่งลูปถูกใช้เพื่อประมวลผลคิว $ evalasync (ใช้เพื่อกำหนดเวลาการดำเนินการบางอย่างที่ต้องดำเนินการก่อนที่จะแสดงมุมมองโดยปกติจะดำเนินการผ่าน settimeout (0) ซึ่งจะช้าลง หนึ่งลูปถูกใช้เพื่อประมวลผลรายการนาฬิกา $ (คอลเลกชันของการแสดงออกบางอย่างเมื่อมีการเปลี่ยนแปลงเกิดขึ้นฟังก์ชัน $ watch จะถูกเรียก) $ Digest Loop จะวนซ้ำเมื่อรู้ว่า $ evalasync คิวว่างเปล่าและรายการนาฬิกา $ ก็ว่างเปล่านั่นคือโมเดลจะไม่เปลี่ยนแปลงอีกต่อไป
5. เมื่อ $ digest loop ของ AngularJs สิ้นสุดลงการดำเนินการทั้งหมดจะออกจากบริบทของ AngularJs และ JavaScript จากนั้นเบราว์เซอร์จะแสดงมุมมองอีกครั้งหลังจากที่ข้อมูลเปลี่ยนไป
ถัดไปให้วิเคราะห์ร่วมกับรหัส:
<! doctype html> <html ng-app> <head> <script src = "angular.js"> </script> </head> <body> <อินพุต ng-model = "name"> <p> สวัสดี {{name}}!ความแตกต่างเพียงอย่างเดียวระหว่างรหัสนี้และรหัสก่อนหน้าคือมีอินพุตเพื่อรับอินพุตของผู้ใช้ เมื่อเข้าถึงไฟล์ HTML นี้ด้วยเบราว์เซอร์คำสั่ง NG-Model บนอินพุตจะเชื่อมโยงเหตุการณ์ keydown กับอินพุตและจะแนะนำ $ watch ไปยังตัวแปรชื่อเพื่อรับการแจ้งเตือนการเปลี่ยนแปลงค่าตัวแปร ในระหว่างขั้นตอนการโต้ตอบเหตุการณ์ต่อไปนี้ส่วนใหญ่เกิดขึ้น:
1. เมื่อผู้ใช้กดปุ่มบนแป้นพิมพ์ (ตัวอย่างเช่น a) เหตุการณ์คีย์ดาวน์บนอินพุตจะถูกทริกเกอร์;
2. คำสั่งเกี่ยวกับอินพุตตรวจจับการเปลี่ยนแปลงของค่าในอินพุตและการโทร $ apple ("name = 'a'") เพื่ออัปเดตโมเดลในบริบท AngularJS;
3. Angularjs กำหนด 'A' เพื่อตั้งชื่อ;
4. $ digest loop เริ่มต้นรายการนาฬิกา $ ตรวจจับการเปลี่ยนแปลงในค่าชื่อจากนั้นจะแจ้งนิพจน์ {{name}} เพื่ออัปเดต DOM;
5. ออกจากบริบทของ AngularJs แล้วออกจากเหตุการณ์ Keydown ในบริบทของ JavaScript;
6. เบราว์เซอร์แสดงความคิดเห็นอีกครั้ง
ข้างต้นคือการรวบรวมข้อมูลเกี่ยวกับหลักการทำงานของ AngularJs เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!