Di Javasript, proxy dan delegasi sering muncul.
Jadi dalam keadaan apa yang sebenarnya digunakannya? Apa prinsipnya?
Di sini kami memperkenalkan penggunaan dan prinsip -prinsip delegasi Javascript, serta antarmuka delegasi dalam kerangka kerja seperti dojo, jQuery, dll.
Proxy Acara Javascript
Event Proxying adalah fitur yang sangat berguna dan menarik di dunia JS. Ketika kita perlu menambahkan acara ke banyak elemen, kita dapat memicu fungsi pemrosesan dengan menambahkan peristiwa ke node induknya dan mendelegasikan acara ke node induk.
Ini terutama karena mekanisme gelembung acara browser. Mari kita berikan contoh spesifik untuk menjelaskan cara menggunakan fitur ini.
Contoh ini terutama diambil dari artikel terkait David Walsh (bagaimana cara kerja delegasi acara JavaScript).
Misalkan ada simpul induk UL yang berisi banyak anak -anak 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> </ul>
Ketika mouse kami pindah ke LI, kami perlu mendapatkan informasi yang relevan tentang LI ini dan mengambang keluar dari jendela mengambang untuk menampilkan informasi terperinci, atau ketika LI diklik, acara pemrosesan yang sesuai perlu dipicu.
Cara menulis kami yang biasa adalah menambahkan beberapa pemantauan acara seperti Onmouseover atau Onclick ke masing -masing LI.
function addListenersli (lielement) {lielement.onClick = fungsi clickHandler () {// todo}; lielement.onMouseOver = function mouseOverhandler () {// tODO}} window.onload = function () {var ulelement = document.getElementById ("list"); var lielements = ulelement.getElementByTagname ("li"); untuk (var i = lielements.length-1; i> = 0; i--) {addListenersli (lielements [i]); }}Jika elemen anak LI dalam UL ini akan ditambahkan atau dihapus sering, kita perlu memanggil metode AddListenersli setiap kali kita menambahkan Li untuk menambahkan fungsi penanganan acara untuk setiap node LI.
Ini dapat menciptakan kompleksitas dan kemungkinan kesalahan dalam proses penambahan atau penghapusan.
Solusi untuk masalah ini adalah menggunakan mekanisme proxy acara. Ketika acara dilemparkan ke simpul induk dari tingkat yang lebih tinggi, kami menilai dan mendapatkan sumber acara dengan memeriksa objek target acara.
Kode berikut dapat mencapai efek yang diinginkan:
/Dapatkan node induk dan tambahkan acara klik untuk dokumen.getElementById ("Daftar"). AddEventListener ("klik", fungsi (e) {// Periksa apakah sumber acara E.Targe adalah li if (e.target && e.target.nodename.touppercase == "LiN") {// / /toDo doo console. " diklik! ");}});Tambahkan acara klik ke node induk. Ketika simpul anak diklik, acara klik akan menggelembung ke atas dari simpul anak. Setelah simpul induk menangkap peristiwa, itu menentukan apakah itu simpul yang perlu kita proses dengan menilai e.target.nodename. Dan simpul Li yang diklik diperoleh melalui E.Target. Oleh karena itu, informasi yang sesuai dapat diperoleh dan diproses.
Gelembung dan menangkap acara
Mekanisme gelembung acara browser, produsen browser yang berbeda memiliki mekanisme pemrosesan yang berbeda untuk penangkapan dan penanganan peristiwa. Di sini kami memperkenalkan acara standar yang ditentukan oleh W3C untuk DOM2.0.
Model DOM2.0 membagi proses pemrosesan acara menjadi tiga tahap:
1. Tahap penangkapan acara,
2. Target Target Acara,
3. Tahap peristiwa yang menggelegak.
Seperti yang ditunjukkan pada gambar di bawah ini:
Acara Pengambilan: Ketika suatu elemen memicu acara (seperti OnClick), dokumen objek tingkat atas akan memancarkan aliran acara, mengalir ke simpul elemen target dengan simpul pohon DOM hingga elemen target di mana peristiwa tersebut benar-benar terjadi tercapai. Dalam proses ini, fungsi mendengarkan yang sesuai dari acara tidak akan dipicu.
Target acara: Setelah elemen target tercapai, fungsi pemrosesan yang sesuai dari peristiwa elemen target dijalankan. Jika tidak ada fungsi pendengar yang terikat, maka itu tidak akan dieksekusi.
Gelembung Acara: Mulailah dengan elemen target dan menyebar ke elemen teratas. Jika sebuah node mengikat fungsi penanganan acara yang sesuai di jalan, fungsi -fungsi ini akan dipicu sekaligus. Jika Anda ingin mencegah acara tersebut tidak menggelegak, Anda dapat menggunakan E.Stoppropagation () (Firefox) atau E.CancelBubble = true (yaitu) untuk mengatur penyebaran gelembung acara tersebut.
Fungsi Delegasi di JQuery dan Dojo
Mari kita lihat cara menggunakan antarmuka proxy acara yang disediakan di dojo dan jQuery.
JQuery:
$ ("#list"). Delegate ("li", "click", function () {// "$ (this)" adalah simpul yang diklik console.log ("Anda mengklik tautan!", $ (ini));});Metode Delegasi JQuery membutuhkan tiga parameter, pemilih, nama waktu, dan penangan acara.
Kesamaan Dojo dengan jQuery hanyalah perbedaan dalam gaya pemrograman antara keduanya:
membutuhkan (["dojo/kueri", "dojox/nodelist/delegate"], function (kueri, delegasi) {kueri ("#daftar"). Delegasi ("li", "ontClick", function (event) {// "this.node" adalah node yang diklik konsol.log ("Anda mengklik tautan!"Modul delegasi Dojo ada di dojox.nodelist, dan antarmuka yang disediakan sama dengan jQuery dan parameternya sama.
Melalui delegasi, Anda dapat menghargai beberapa manfaat menggunakan delegasi acara untuk pengembangan:
1. Ada lebih sedikit fungsi yang dikelola. Tidak perlu menambahkan fungsi pendengar untuk setiap elemen. Untuk elemen anak yang sama di bawah simpul induk yang sama, peristiwa dapat ditangani melalui fungsi mendengarkan yang didelegasikan ke elemen induk.
2. Sangat mudah untuk menambah dan memodifikasi elemen secara dinamis, dan tidak perlu memodifikasi ikatan acara karena perubahan elemen.
3. Korelasi antara javascript dan node DOM berkurang, yang mengurangi probabilitas kebocoran memori yang disebabkan oleh referensi melingkar.
Menggunakan proxy dalam pemrograman JavaScript
Di atas memperkenalkan penggunaan mekanisme gelembung browser untuk menambahkan proxy peristiwa ke elemen DOM saat memproses peristiwa DOM. Bahkan, dalam pemrograman JS murni, kita juga dapat menggunakan pola pemrograman ini untuk membuat objek proxy untuk mengoperasikan objek target.
var delegate = function (client, clientMethod) {return function () {return clientMethod.apply (klien, argumen); }} var apple = function () {var _color = "red"; return {getColor: function () {console.log ("color:" + _color); }, setColor: function (color) {_color = color; }}; }; var a = new apple (); var b = Apple baru (); a.getColor (); a.setColor ("hijau"); a.getColor (); // Memanggil proxy var d = delegasi (a, a.setColor); d ("biru"); // eksekusi proxy a.getColor (); //b.getColor ();Dalam contoh di atas, modifikasi A dioperasikan dengan memanggil fungsi proxy D yang dibuat oleh fungsi delegate ().
Meskipun metode ini menggunakan Apply (panggilan juga dapat digunakan) untuk mentransfer objek panggilan, ia mengimplementasikan menyembunyikan objek tertentu dari mode pemrograman, yang dapat melindungi objek ini dari diakses dan dimodifikasi sesuka hati.
Konsep delegasi dirujuk dalam banyak kerangka kerja untuk menentukan ruang lingkup operasi suatu metode.
Contoh khas adalah dojo.hitch (ruang lingkup, metode) dan createdelegate (obj, args) dari extjs.
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.