ส่วนหน้าของเว็บ

AngularJS บทช่วยสอน: ทำให้เข้าใจคำสั่งที่กำหนดเอง

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

คำสั่งคืออะไร? พูดง่ายๆคือคำสั่งคือฟังก์ชัน JavaScript ที่จัดการและเพิ่มพฤติกรรมให้กับองค์ประกอบ HTML DOM คำสั่งอาจเรียบง่ายหรือซับซ้อนมาก ดังนั้นการเข้าใจตัวเลือกและฟังก์ชั่นมากมายที่จัดการกับตัวเลือกเหล่านี้จึงเป็นสิ่งสำคัญ

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

สี่ฟังก์ชั่นของ AngularJS Directive Life Cycle

มีตัวเลือกมากมายที่สามารถกำหนดค่าได้และความสำคัญของตัวเลือกเหล่านั้นเกี่ยวข้องกันอย่างไร คำสั่งแต่ละคำผ่านสิ่งที่คล้ายกับวงจรชีวิตเมื่อ AngularJS รวบรวมและเชื่อมโยง DOM วงจรชีวิตคำสั่งเริ่มต้นและสิ้นสุดภายในกระบวนการบูต AngularJS ก่อนที่เพจจะแสดงผล ในวงจรชีวิตของคำสั่งมีฟังก์ชันที่แตกต่างกันสี่ฟังก์ชันที่สามารถดำเนินการได้หากมีการกำหนดไว้ แต่ละตัวช่วยให้นักพัฒนาสามารถควบคุมและปรับแต่งคำสั่งตามจุดต่างๆของวงจรชีวิตได้

สี่ฟังก์ชั่นคือ: รวบรวม , ตัวควบคุม , ลิงก์ล่วงหน้า และ โพสต์ลิงค์ .

รวบรวม ฟังก์ชั่นอนุญาตให้คำสั่งจัดการ DOM ก่อนที่จะคอมไพล์และเชื่อมโยงดังนั้นจึงอนุญาตให้เพิ่ม / ลบ / เปลี่ยนคำสั่งรวมทั้งเพิ่ม / ลบ / เปลี่ยนแปลงองค์ประกอบ DOM อื่น ๆ

ตัวควบคุม ฟังก์ชันอำนวยความสะดวกในการสื่อสารโดยตรง คำสั่งพี่น้องและบุตรสามารถขอให้ผู้ควบคุมพี่น้องและผู้ปกครองสื่อสารข้อมูลได้

ลิงก์ล่วงหน้า ฟังก์ชันช่วยให้เป็นส่วนตัว ขอบเขต $ การจัดการก่อนที่กระบวนการโพสต์ลิงก์จะเริ่มขึ้น

วิธีเขียนเอกสารซอฟต์แวร์

โพสต์ลิงค์ method เป็นวิธีการทำงานหลักของคำสั่ง

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

 .directive('directiveName',function () { return { controller: function() { // controller code here... }, compile: { // compile code here... return { pre: function() { // pre-link code here... }, post: function() { // post-link code here... } }; } } })

โดยทั่วไปไม่จำเป็นต้องใช้ฟังก์ชันทั้งหมด ในสถานการณ์ส่วนใหญ่นักพัฒนาจะสร้างไฟล์ ตัวควบคุม และ โพสต์ลิงค์ ฟังก์ชันตามรูปแบบด้านล่าง

 .directive('directiveName',function () { return { controller: function() { // controller code here... }, link: function() { // post-link code here... } } })

ในการกำหนดค่านี้ ลิงค์ หมายถึง โพสต์ลิงค์ ฟังก์ชัน

ไม่ว่าจะมีการกำหนดฟังก์ชันทั้งหมดหรือบางส่วนลำดับการดำเนินการก็มีความสำคัญโดยเฉพาะการดำเนินการที่สัมพันธ์กับแอปพลิเคชัน AngularJS ที่เหลือ

AngularJS Directive Function Execution เทียบกับ Directives อื่น ๆ

พิจารณาข้อมูลโค้ด HTML ต่อไปนี้พร้อมคำสั่ง parentDir , เด็ก และ grandChildDir นำไปใช้กับส่วน HTML

element.html(element.html());

ลำดับการดำเนินการของฟังก์ชันภายในคำสั่งและสัมพันธ์กับคำสั่งอื่น ๆ มีดังนี้:

คอมไพล์เฟส
- ฟังก์ชันคอมไพล์ : parentDir
- ฟังก์ชันคอมไพล์ : childDir
- ฟังก์ชันคอมไพล์ : grandChildDir
Controller & Pre-Link เฟส
- ฟังก์ชันคอนโทรลเลอร์ : parentDir
- ฟังก์ชัน Pre-Link : parentDir
- ฟังก์ชันคอนโทรลเลอร์ : childDir
- ฟังก์ชัน Pre-Link : childDir
- ฟังก์ชันคอนโทรลเลอร์ : grandChildDir
- ฟังก์ชัน Pre-Link : grandChildDir
โพสต์ลิงค์เฟส
- ฟังก์ชัน Post-Link : grandChildDir
- ฟังก์ชัน Post-Link : childDir
- ฟังก์ชัน Post-Link : parentDir

บทช่วยสอนฟังก์ชันคำสั่ง AngularJS - ลำดับการดำเนินการที่สัมพันธ์กับคำสั่งอื่น ๆ

AngularJS Directive Function คำอธิบาย: Deep Dive

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

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

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

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

บาง นักพัฒนา AngularJS ที่มีประสบการณ์ จะพูดแบบนี้ เอกชน ยังคงสามารถวางโค้ดไว้ในตัวควบคุมและไม่ถูกเรียกโดยคำสั่งเด็ก อาร์กิวเมนต์นั้นจะเป็นจริงหากคำสั่งจะถูกใช้โดยนักพัฒนาดั้งเดิมที่เขียนโค้ดเท่านั้น แต่หากคำสั่งนั้นจะถูกแจกจ่ายและนำกลับมาใช้โดยนักพัฒนารายอื่นการห่อหุ้มโค้ดส่วนตัวในฟังก์ชันพรีลิงค์อาจเป็นประโยชน์อย่างมาก เนื่องจากนักพัฒนาไม่เคยรู้ว่าคำสั่งของพวกเขาจะถูกนำกลับมาใช้อย่างไรในช่วงเวลาหนึ่งการป้องกันโค้ดส่วนตัวจากการดำเนินการโดยคำสั่งเด็กเป็นแนวทางที่ดีในการห่อหุ้มโค้ดคำสั่ง ฉันคิดว่าเป็นแนวทางปฏิบัติที่ดีในการวางรหัสสาธารณะของการสื่อสารคำสั่งในฟังก์ชันคอนโทรลเลอร์และรหัสส่วนตัวในฟังก์ชันพรีลิงค์ เช่นเดียวกับคอนโทรลเลอร์ pre-link ไม่ควรทำการจัดการ DOM หรือเรียกใช้ฟังก์ชัน transclude เนื่องจากยังไม่ได้เชื่อมโยงเนื้อหาสำหรับคำสั่งย่อย

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

ฟังก์ชันโพสต์ลิงก์เป็นฟังก์ชันที่ใช้บ่อยที่สุดในคำสั่ง AngularJS แบบกำหนดเอง ในฟังก์ชั่นนี้สามารถทำได้เกือบทุกอย่างที่สมเหตุสมผล DOM สามารถจัดการได้ (สำหรับตัวมันเองและองค์ประกอบลูกเท่านั้น) ไฟล์ ขอบเขต $ พร้อมใช้งานสามารถใช้อ็อบเจ็กต์คอนโทรลเลอร์สำหรับคำสั่งพาเรนต์ฟังก์ชัน transclude สามารถเรียกใช้ ฯลฯ อย่างไรก็ตามมีข้อ จำกัด บางประการ ไม่สามารถเพิ่มคำสั่งใหม่ใน DOM ได้เนื่องจากจะไม่ถูกคอมไพล์ นอกจากนี้การปรับแต่ง DOM ทั้งหมดจะต้องทำโดยใช้ฟังก์ชัน DOM เพียงแค่โทร html ฟังก์ชันบนองค์ประกอบ DOM และการส่งผ่าน HTML ใหม่จะลบตัวจัดการเหตุการณ์ทั้งหมดที่เพิ่มเข้ามาระหว่างกระบวนการคอมไพล์ ตัวอย่างเช่นสิ่งเหล่านี้จะไม่ทำงานตามที่คาดไว้:

element.html(element.html() + ' new content ');

หรือ

องค์ประกอบเชิงมุมคืออะไร

|_+_|

โค้ดจะไม่ทำให้ HTML เปลี่ยนแปลง แต่การกำหนดเวอร์ชันสตริงขององค์ประกอบ DOM ใหม่จะลบตัวจัดการเหตุการณ์ทั้งหมดที่สร้างขึ้นในระหว่างกระบวนการคอมไพล์ โดยทั่วไปแล้วฟังก์ชันโพสต์ลิงก์จะใช้เพื่อวางสายตัวจัดการเหตุการณ์ $ ชม คือและ $ สังเกต เอส.

เมื่อเรียกใช้ฟังก์ชันโพสต์ลิงก์ทั้งหมดแล้วไฟล์ ขอบเขต $ ถูกนำไปใช้กับโครงสร้าง DOM ที่คอมไพล์และเชื่อมโยงและเพจ AngularJS ก็มีชีวิตชีวา