ใน javasript พร็อกซีและผู้แทน มักจะปรากฏขึ้น
ดังนั้นภายใต้สถานการณ์ใดที่ใช้จริง? หลักการของมันคืออะไร?
ที่นี่เราแนะนำการใช้งานและหลักการของ JavaScript Delegate รวมถึงอินเทอร์เฟซของผู้ได้รับมอบหมายในกรอบงานเช่น Dojo, JQuery ฯลฯ
พร็อกซีเหตุการณ์ JavaScript
พร็อกซีการจัดงานเป็นคุณลักษณะที่มีประโยชน์และน่าสนใจมากใน JS World เมื่อเราต้องการเพิ่มเหตุการณ์ในองค์ประกอบหลายอย่างเราสามารถเรียกใช้ฟังก์ชั่นการประมวลผลโดยการเพิ่มเหตุการณ์ในโหนดพาเรนต์ของพวกเขาและการมอบหมายเหตุการณ์ไปยังโหนดพาเรนต์
ส่วนใหญ่เป็นเพราะกลไกฟองสบู่ของเบราว์เซอร์ ลองยกตัวอย่างที่เฉพาะเจาะจงเพื่ออธิบายวิธีการใช้คุณสมบัตินี้
ตัวอย่างนี้ส่วนใหญ่มาจากบทความที่เกี่ยวข้องของ David Walsh (การมอบหมายงาน JavaScript Event Works)
สมมติว่ามีโหนดหลักของ UL ที่มีเด็ก LI จำนวนมาก:
<ul id = "list"> <li id = "li-1"> li 1 </li> <li id = "li-2"> li 2 </li> <li id = "li-3"> li 3 </li> <li id = "li-4"> li 4 </li> <li id = "li-5"> li 5 </li>
เมื่อเมาส์ของเราย้ายไปที่ LI เราจำเป็นต้องได้รับข้อมูลที่เกี่ยวข้องเกี่ยวกับ LI นี้และลอยออกจากหน้าต่างลอยเพื่อแสดงข้อมูลโดยละเอียดหรือเมื่อมีการคลิก LI เหตุการณ์การประมวลผลที่สอดคล้องกันจะต้องถูกเรียกใช้
วิธีการเขียนตามปกติของเราคือการเพิ่มการตรวจสอบเหตุการณ์เช่น OnMouseOver หรือ onclick ให้กับ LI แต่ละตัว
ฟังก์ชั่น addListenersli (lielement) {lielement.onclick = function clickhandler () {// toDo}; lielement.onmouseover = function mouseOverhandler () {// toDo}} window.onload = function () {var ulelement = document.getElementById ("รายการ"); var lielements = ulelement.getElementByTagname ("li"); สำหรับ (var i = lielements.length-1; i> = 0; i--) {addListenersli (lielements [i]); -หากองค์ประกอบของเด็ก LI ใน UL นี้จะถูกเพิ่มหรือลบบ่อย ๆ เราจำเป็นต้องเรียกใช้วิธี addListenersli ทุกครั้งที่เราเพิ่ม LI เพื่อเพิ่มฟังก์ชั่นการจัดการเหตุการณ์สำหรับแต่ละโหนด LI
สิ่งนี้สามารถสร้างความซับซ้อนและความเป็นไปได้ของข้อผิดพลาดในกระบวนการเพิ่มหรือการกำจัด
การแก้ปัญหาคือการใช้กลไกพร็อกซีของเหตุการณ์ เมื่อเหตุการณ์ถูกโยนลงไปที่โหนดพาเรนต์ของระดับที่สูงขึ้นเราตัดสินและรับแหล่งที่มาของเหตุการณ์ LI โดยการตรวจสอบวัตถุเป้าหมายของเหตุการณ์
รหัสต่อไปนี้สามารถบรรลุเอฟเฟกต์ที่ต้องการ:
/รับโหนดพาเรนต์และเพิ่มเหตุการณ์คลิกลงในเอกสาร. getElementById ("รายการ"). addEventListener ("คลิก" ฟังก์ชั่น (e) {// ตรวจสอบว่าแหล่งที่มาของเหตุการณ์ e.targe เป็น li ถ้า (e.target && e.target.nodename.touppercase == "li") คลิก! ");}});เพิ่มเหตุการณ์คลิกไปยังโหนดพาเรนต์ เมื่อคลิกโหนดเด็กเหตุการณ์คลิกจะเพิ่มขึ้นจากโหนดลูก หลังจากโหนดพาเรนต์จับเหตุการณ์จะกำหนดว่าเป็นโหนดที่เราต้องดำเนินการหรือไม่โดยการตัดสิน e.target.nodename และโหนด Li ที่คลิกผ่าน E.Target ดังนั้นข้อมูลที่เกี่ยวข้องสามารถรับและประมวลผลได้
ฟองสบู่และการจับภาพ
กลไกฟองสบู่ของเบราว์เซอร์ผู้ผลิตเบราว์เซอร์ที่แตกต่างกันมีกลไกการประมวลผลที่แตกต่างกันสำหรับการจับและจัดการเหตุการณ์ ที่นี่เราแนะนำกิจกรรมมาตรฐานที่กำหนดโดย W3C สำหรับ DOM2.0
โมเดล DOM2.0 แบ่งกระบวนการประมวลผลเหตุการณ์ออกเป็นสามขั้นตอน:
1. เวทีจับเหตุการณ์
2. ขั้นตอนเป้าหมายเหตุการณ์
3. ขั้นตอนการเดือดดาลของเหตุการณ์
ดังที่แสดงในรูปด้านล่าง:
การจับเหตุการณ์: เมื่อองค์ประกอบทริกเกอร์เหตุการณ์ (เช่น onClick) เอกสารวัตถุระดับบนจะปล่อยกระแสเหตุการณ์ไหลไปยังโหนดองค์ประกอบเป้าหมายด้วยโหนดของทรี DOM จนกระทั่งองค์ประกอบเป้าหมายที่เกิดขึ้นจริง ในกระบวนการนี้ฟังก์ชั่นการฟังที่สอดคล้องกันของเหตุการณ์จะไม่ถูกเรียกใช้
เป้าหมายเหตุการณ์: หลังจากถึงองค์ประกอบเป้าหมายแล้วฟังก์ชั่นการประมวลผลที่สอดคล้องกันของเหตุการณ์ขององค์ประกอบเป้าหมายจะถูกดำเนินการ หากไม่มีฟังก์ชั่นผู้ฟังที่ถูกผูกไว้ก็จะไม่ถูกเรียกใช้งาน
Event Bubbles: เริ่มต้นด้วยองค์ประกอบเป้าหมายและเผยแพร่ไปยังองค์ประกอบด้านบน หากโหนดเชื่อมโยงฟังก์ชั่นการจัดการเหตุการณ์ที่สอดคล้องกันระหว่างทางฟังก์ชั่นเหล่านี้จะถูกทริกเกอร์ในครั้งเดียว หากคุณต้องการป้องกันเหตุการณ์จาก Bubbled คุณสามารถใช้ E.StopPropagation () (Firefox) หรือ E.CancelBubble = TRUE (เช่น) เพื่อจัดระเบียบการแพร่กระจายของฟองสบู่ของเหตุการณ์
ฟังก์ชั่นตัวแทนใน jQuery และ dojo
ลองมาดูวิธีการใช้อินเทอร์เฟซพร็อกซีกิจกรรมที่มีให้ใน Dojo และ JQuery
jQuery:
$ ("#list"). มอบหมาย ("li", "คลิก", function () {// "$ (นี่)" เป็นโหนดที่คลิก console.log ("คุณคลิกลิงก์!", $ (นี่));});วิธีการมอบหมาย jQuery ต้องใช้พารามิเตอร์สามตัวเลือกชื่อเวลาและตัวจัดการเหตุการณ์
ความคล้ายคลึงกันของ Dojo กับ jQuery เป็นเพียงความแตกต่างในรูปแบบการเขียนโปรแกรมระหว่างสอง:
ต้องการ (["dojo/query", "dojox/nodelist/delegate"], ฟังก์ชั่น (คำถาม, ตัวแทน) {query ("#list"). มอบหมาย ("li", "onclick", ฟังก์ชั่น (เหตุการณ์) {// "นี่คือโหนด");โมดูลผู้แทนของ Dojo อยู่ใน dojox.nodelist และอินเทอร์เฟซที่ให้นั้นเหมือนกับ jQuery และพารามิเตอร์เหมือนกัน
ผ่านการมอบหมายคุณสามารถชื่นชมประโยชน์หลายประการของการใช้การมอบหมายงานเพื่อการพัฒนา:
1. มีการจัดการฟังก์ชั่นน้อยลง ไม่จำเป็นต้องเพิ่มฟังก์ชั่นฟังสำหรับแต่ละองค์ประกอบ สำหรับองค์ประกอบเด็กที่คล้ายกันภายใต้โหนดพาเรนต์เดียวกันเหตุการณ์สามารถจัดการได้ผ่านฟังก์ชั่นการฟังที่มอบหมายให้กับองค์ประกอบหลัก
2. เป็นเรื่องง่ายที่จะเพิ่มและแก้ไของค์ประกอบแบบไดนามิกและไม่จำเป็นต้องแก้ไขการเชื่อมโยงเหตุการณ์เนื่องจากการเปลี่ยนแปลงองค์ประกอบ
3. ความสัมพันธ์ระหว่าง JavaScript และ DOM โหนดจะลดลงซึ่งจะช่วยลดความน่าจะเป็นของการรั่วไหลของหน่วยความจำที่เกิดจากการอ้างอิงแบบวงกลม
การใช้พร็อกซีในการเขียนโปรแกรม JavaScript
ข้างต้นแนะนำการใช้กลไกฟองเบราว์เซอร์เพื่อเพิ่มพร็อกซีเหตุการณ์ในองค์ประกอบ DOM เมื่อประมวลผลเหตุการณ์ DOM ในความเป็นจริงในการเขียนโปรแกรม JS บริสุทธิ์เรายังสามารถใช้รูปแบบการเขียนโปรแกรมนี้เพื่อสร้างวัตถุพร็อกซีเพื่อใช้งานวัตถุเป้าหมาย
var delegate = function (ไคลเอนต์, clientMethod) {return function () {return clientMethod.apply (ไคลเอนต์, อาร์กิวเมนต์); }} var apple = function () {var _color = "red"; return {getColor: function () {console.log ("สี:" + _Color); }, setColor: ฟังก์ชั่น (สี) {_Color = สี; - - var a = apple ใหม่ (); var b = apple ใหม่ (); A.getColor (); A.SetColor ("สีเขียว"); A.getColor (); // การเรียกพร็อกซี var d = มอบหมาย (a, a.setcolor); D ("Blue"); // Execution Proxy A.getColor (); //b.getColor ();ในตัวอย่างข้างต้นการปรับเปลี่ยนของ A ดำเนินการโดยเรียกฟังก์ชันพร็อกซี D ที่สร้างโดยฟังก์ชัน Delegate ()
แม้ว่าวิธีนี้จะใช้ (สามารถใช้การโทรได้) เพื่อถ่ายโอนวัตถุการโทร แต่มันใช้การซ่อนวัตถุบางอย่างจากโหมดการเขียนโปรแกรมซึ่งสามารถป้องกันวัตถุเหล่านี้จากการเข้าถึงและแก้ไขตามความประสงค์
แนวคิดของผู้แทนมีการอ้างอิงในหลาย ๆ เฟรมเวิร์กเพื่อระบุขอบเขตการดำเนินงานของวิธีการ
ตัวอย่างทั่วไปคือ dojo.hitch (ขอบเขต, วิธี) และ createLegate (obj, args) ของ extjs
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript