1. ภาพรวม
รูปแบบความรับผิดชอบของห่วงโซ่หมายความว่าวัตถุหลายชิ้นมีโอกาสในการประมวลผลคำขอดังนั้นจึงหลีกเลี่ยงความสัมพันธ์ระหว่างผู้ส่งและผู้รับการร้องขอ เชื่อมต่อวัตถุเข้ากับโซ่และส่งคำขอไปตามห่วงโซ่จนกว่าวัตถุจะจัดการกับมัน
ดูเหมือนว่าจะเหมือนกับรายการที่เชื่อมโยงในโครงสร้างข้อมูล
แต่อย่ายุ่งกับห่วงโซ่ความรับผิดชอบไม่เท่ากับรายการที่เชื่อมโยงเนื่องจากห่วงโซ่ความรับผิดชอบสามารถค้นหาได้ที่โหนดใด ๆ ในขณะที่รายการที่เชื่อมโยงจะต้องค้นหาจากโหนดเริ่มต้น
ตัวอย่างเช่นเหตุการณ์เดือดดาลในกลไกเหตุการณ์ DOM เป็นของห่วงโซ่ของความรับผิดชอบในขณะที่เหตุการณ์ที่ถูกจับเป็นรายการที่เชื่อมโยง
2. ใช้ห่วงโซ่ความรับผิดชอบในการจำลองฟองสบู่
สมมติว่าเรามีวัตถุสามอย่าง: li, ul และ div แผนภาพความสัมพันธ์ของทั้งสามมีดังนี้:
ตัวอย่างเช่นเมื่อเราเรียกวัตถุ LI หาก LI ไม่ได้ป้องกันฟองสบู่มันจะถูกส่งผ่านไปยังวัตถุ UL เมื่อถึง UL หากไม่ได้รับการป้องกันฟองสบู่จะถูกส่งผ่านไปยังวัตถุ DIV (สมมติว่า div เป็นโหนดรูท) ในทำนองเดียวกัน ul และ div
เมื่อเห็นสิ่งนี้เป็นที่ชัดเจนว่าเหมาะสำหรับการเขียนความต้องการเช่นนี้โดยใช้โมเดลโซ่ความรับผิดชอบ
แต่จะใช้ JavaScript เพื่อใช้โมเดลโซ่ความรับผิดชอบได้อย่างไร?
ดังนี้เราสามารถสร้างสถาปัตยกรรมพื้นฐานผ่านเครือข่ายต้นแบบ:
ฟังก์ชั่น createDom (obj) {this.next = obj || โมฆะ;}; createDom.prototype = {handle: function () {if (this.next) {this.next.handle (); -เมื่อใดก็ตามที่เราใช้ตัวสร้างที่สร้างขึ้นเพื่อสร้างวัตถุเราจะผ่านวัตถุที่เกี่ยวข้องใน (ดีนี่คือรายการที่เชื่อมโยงกันมาก)
จากนั้นเมื่อเราเรียกวัตถุและดำเนินการวิธีการจัดการเราสามารถติดตามห่วงโซ่นี้และดำเนินต่อไป
อย่างไรก็ตามควรสังเกตว่าเมื่อแอตทริบิวต์การจัดการของวัตถุครอบคลุมที่จับในห่วงโซ่ต้นแบบคุณจะส่งต่อไปได้อย่างไร
เพียงแค่ใช้ createDom.prototype.handle.call (นี่);
ดังนั้นการใช้รหัส LI, UL และ DIV มีดังนี้:
var li = null, ul = null, div = null; div = new createDom (); div.handle = function (stopBubble) {console.log ('div'); if (stopbubble) {return; } else {createDom.prototype.handle.call (นี่); }}; ul = new CreateDom (div); ul.handle = function (shopbubble) {console.log ('ul'); if (stopbubble) {return; } else {createDom.prototype.handle.call (นี่); }}; li = new CreateDom (ul); li.handle = function (stopbubble) {console.log ('li'); if (stopbubble) {return; } else {createDom.prototype.handle.call (นี่); -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น