Mulai dari bab hari ini, saya akan fokus memperkenalkan konten manajemen acara KITJS, dan mencoba untuk mengekspos kepada Anda dalam bahasa sederhana bagaimana kerangka kerja JS utama mengimplementasikan fungsi manajemen acara independennya sendiri secara internal.
(I) Acara DOM biasa
Kami umumnya dapat menulis acara dalam HTML dengan mendukung
<a onClick = ”alert (1)”> tes </a>
Atau mengikat setelah mendapatkan objek DOM
document.geteLementById ('a'). onclick = function () {waspada (1)}
Atau acara sekunder
document.geteLementById ('a'). addeventListener ('click', function () {waspada (1)}, flase)
Atau melalui tag skrip
<Script for = "a" event = "ontClick"> alert (1) </script>
Standar W3C merekomendasikan metode pengikatan ketiga di atas, yang merupakan metode peristiwa sekunder, dengan tujuan memisahkan ketergantungan yang kuat dari HTML dan JS
(Ii) Pertanyaan
Namun, jika kita hanya menggunakan mode 3 untuk secara langsung melakukan pemrograman JS kita, itu tidak cukup, karena kita akan menghadapi masalah berikut
1. Kompatibilitas browser. Parameter browser yang didukung oleh IE Series dan W3C tidak konsisten untuk nama dan parameter metode pengikatan acara tingkat kedua.
2. Setelah mengikat melalui acara Level 2, Anda tidak dapat mengetahui apakah orang lain telah mengikat peristiwa dengan elemen yang sama, acara mana yang telah terikat, dan apa konten acara tersebut?
3. Setelah metode pengikatan peristiwa Level 2 dipicu, pesanan tidak ada dalam urutan sebelum pengikatan, tetapi dieksekusi secara acak. Namun, kadang -kadang, kita perlu memesan metode yang dipicu.
4. Ketika peristiwa elemen yang sama dipicu, API standar W3C tidak mendukung berhenti dan terus memicu peristiwa lain yang terikat pada elemen yang sama, W3C mendukung penghentian gelembung.
5. Berkali -kali, kami mendaftarkan acara Level 2 melalui metode fungsi anonim, dan tidak ada pegangan untuk mendaftarkan metode pelaksanaan acara yang tersisa, sehingga sulit untuk membatalkan acara melalui RemestEventListener.
(Iii) Cara memecahkan masalah kit
Oke, kerangka kerja JS ada untuk menyelesaikan masalah di atas. Mari kita lihat bagaimana kit menangani masalah di atas.
Di API Kit.js, ada metode EV (config)
Metode ini menerima objek tipe peta, yang berisi 4 parameter penting.
elemen el yang perlu diikat
Jenis acara string
FN memicu metode eksekusi
Lingkup dapat dihilangkan, apakah penunjuk ini perlu ditentukan, jika tidak ada, EL pada saat pendaftaran dilewati sebagai penunjuk ini
(Iv) Analisis Kode
Mari kita lihat implementasi kode lebih lanjut
Mulailah langsung dari bagian inti
Jika parameter yang masuk tidak kosong, suatu objek dibuat pada parameter yang masuk El untuk menyimpan pendaftaran acara Kitjs evreg
Ada dua objek anak di objek EVREG, satu disebut Evregev, yang menyimpan acara terdaftar
Dalam objek EVREGEV, simpan kunci sebagai acara terdaftar saat ini, dan nilainya adalah array. Di array, letakkan parameter konfigurasi yang dilewati dalam metode EV dalam urutan kedatangan pertama dan kemudian. Perhatikan bahwa ini adalah array! Lai Lai Karena array dapat menghemat pesanan, ini sangat penting
Ada juga metode anonim yang disebut evregfn, yang menghemat pemicu acara.
Kita dapat melihat bahwa EVREGFN adalah peristiwa anonim. Pada awalnya, itu akan menentukan apakah jendela variabel global [me.constants.kit_event_stopimmediatePropagation] adalah == true. Jika benar, itu akan kembali dan tidak akan terus mengeksekusi.
Kemudian lihat ke bawah, itu akan menerima objek EV yang dipicu oleh peristiwa dan melampirkan banyak objek ke EV menggunakan MergeIF, seperti Target, CurrentTarget, Terkait Target, untuk menyelesaikan masalah kompatibilitas browser.
StopNow, StopDefault, penghenti adalah metode yang dibuat untuk mencegah peristiwa terus memicu.
Paragraf berikut adalah kunci untuk EVREGFN. Kami akan mengulangi array acara di evregev yang dibuat sebelumnya, mengeluarkan parameter konfigurasi yang dilewati dalam metode EV sebelumnya secara berurutan, dan menjalankan metode dalam parameter konfigurasi. Jika nilai pengembalian metode ini tidak kosong, ia akan mengembalikan nilai pengembaliannya.
Akhirnya, kami membuat browser kompatibel dan mengikat metode anonim EVREGFN kami menggunakan metode acara Level 2.
(V) Ringkasan
Sederhananya, Kit menggunakan metode anonimnya sendiri untuk menyimpan pegangan pendaftaran acara dan memasukkan array, sehingga dapat mengingat urutan peristiwa, serta menyediakan entri untuk mengetahui peristiwa, parameter, metode, dll., Dan pada saat yang sama kompatibel dengan kompatibilitas browser.
(Vi) acara logout
Dengan pegangan acara cache bantuan kit, logging out menjadi sederhana
Anda dapat melihat bahwa kit menemukan konfigurasi acara yang sesuai melalui perbandingan langsung, atau perbandingan fn.tostring, dan perbandingan fn.tostring (). Trim (), dan menghapusnya dari array
(Vii) Peningkatan acara
Anda seharusnya memperhatikan sekarang bahwa Kit telah melakukan operasi mergeif pada objek acara sistem. Pertama -tama, mengapa Anda perlu melakukan megerif? Karena properti objek dari objek acara sistem hanya dibaca dan tidak dapat ditimpa, Anda hanya dapat menambahkan properti yang tidak dimiliki.
Jadi kit hanya bisa megerif. Kita semua tahu bahwa ada ketidakcocokan objek peristiwa dari objek acara masing -masing browser, jadi Kit perlu memperbaiki ketidakcocokan ini. Misalnya, IE tidak memiliki atribut target, hanya srcelement. Kami dapat menambahkan atribut target ke dalamnya untuk mencapai kompatibilitas standar W3C
Tentu saja, hanya perbaikan tidak dapat memenuhi kebutuhan kita. Sering kali, kita masih perlu membuat sedikit kenaikan berat badan untuk objek acara.
Misalnya, ketika mengembangkan touchdown dan touchmove di iPhone, kita sering perlu mendapatkan offset jari tunggal, dan untuk mendapatkan offset jari tunggal, EV.TargetTouches [0] .ClientX, kode seperti itu, tetapi begitu fungsi anonim seperti ini, itu akan tidak sesuai pada PC.
Apa yang harus dilakukan? Tidak masalah, kita bisa memberikan objek acara mergeif atribut kita sendiri
FirstFingerClientX, dll., Sehingga kami dapat dengan mudah mengimplementasikan kode terpadu yang dikembangkan oleh seluler dan PC.
Termasuk, artikel berikutnya akan berbicara tentang html5 drag and drop, dan acara gerakan canggih didasarkan atas dasar ini.
Tambahkan ke ini, mengapa bukan acara baru sendiri seperti extjs adalah karena
1. Sistem objek asli memiliki hubungan warisan tertentu dan tidak ingin dihancurkan.
2. Jika Anda menggunakan objek baru Anda sendiri, kode tersebut mungkin tidak dapat dipsortasi setelah keluar dari kerangka kerja, dan konten kode perlu diubah lagi.