1. Ikhtisar
Pola rantai tanggung jawab berarti bahwa banyak objek memiliki kesempatan untuk memproses permintaan, sehingga menghindari hubungan kopling antara pengirim dan penerima permintaan. Hubungkan objek ke dalam rantai dan berikan permintaan di sepanjang rantai sampai suatu objek menanganinya.
Tampaknya sama dengan daftar yang ditautkan dalam struktur data.
Tapi jangan mengacaukannya, rantai tanggung jawab tidak sama dengan daftar yang ditautkan, karena rantai tanggung jawab dapat dicari di simpul apa pun, sedangkan daftar yang ditautkan harus dicari dari simpul awal.
Misalnya, peristiwa menggelegak dalam mekanisme acara DOM termasuk dalam rantai tanggung jawab, sedangkan peristiwa yang ditangkap termasuk dalam daftar terkait.
2. Gunakan rantai tanggung jawab untuk mensimulasikan gelembung
Misalkan kita memiliki tiga objek: li, ul, dan div. Diagram hubungan ketiganya adalah sebagai berikut:
Misalnya, ketika kita memicu objek LI, jika Li tidak mencegah gelembung, itu akan diteruskan ke objek UL. Ketika mencapai UL, jika gelembung tidak dicegah, itu akan diteruskan ke objek div (dengan asumsi bahwa div adalah simpul akar). Demikian pula, UL dan Div.
Melihat ini, sangat jelas bahwa itu cocok untuk menulis kebutuhan seperti itu menggunakan model rantai tanggung jawab.
Tapi, bagaimana menggunakan JavaScript untuk mengimplementasikan model rantai tanggung jawab?
Sebagai berikut, kita dapat membangun arsitektur dasar melalui rantai prototipe:
fungsi createdom (obj) {this.next = obj || batal;}; CreateM.prototype = {handle: function () {if (this.next) {this.next.handle (); }}};Setiap kali kami menggunakan konstruktor createdom untuk membuat objek, kami meneruskan objek yang terkait (yah, ini adalah daftar yang sangat terkait).
Kemudian, ketika kita memicu objek dan menjalankan metode pegangan, kita dapat mengikuti rantai ini dan melanjutkan.
Namun, perlu dicatat bahwa ketika atribut pegangan dari suatu objek mencakup pegangan dalam rantai prototipe, bagaimana Anda bisa terus melewatkannya?
Cukup gunakan createdom.prototype.handle.call (ini);
Jadi, menerapkan kode Li, UL dan Div adalah sebagai berikut:
var li = null, ul = null, div = null; div = new createM (); div.handle = fungsi (stopbubble) {console.log ('div'); if (stopBubble) {return; } else {createTom.prototype.handle.call (this); }}; ul = new createdom (div); ul.handle = function (stopBubble) {console.log ('ul'); if (stopBubble) {return; } else {createTom.prototype.handle.call (this); }}; li = new createM (ul); li.handle = function (stopBubble) {console.log ('li'); if (stopBubble) {return; } else {createTom.prototype.handle.call (this); }};Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.