Cara menggunakan javascript untuk melaksanakan fungsi acara tersuai

Ikhtisar

Adakah sukar untuk menggunakan acara tersuai?

Mengapa sukar untuk acara tersuai berguna, kerana js tidak dibangunkan secara modular pada masa lalu, dan terdapat sedikit kerjasama. Kerana intipati peristiwa ialah kaedah komunikasi dan mesej, hanya apabila terdapat berbilang objek dan berbilang modul, adalah mungkin untuk menggunakan peristiwa untuk komunikasi. Kini dengan modularisasi, acara tersuai boleh digunakan untuk bekerjasama antara modul.

Di manakah saya boleh menggunakan acara tersuai?

Intipati sesuatu peristiwa ialah mesej, dan pola peristiwa pada asasnya ialah pelaksanaan pola pemerhati jadi di mana-mana corak pemerhati digunakan, corak peristiwa juga boleh digunakan. Oleh itu, jika:

1 Objek sasaran berubah, memerlukan berbilang pemerhati untuk menyesuaikan diri.

Contohnya: selepas saya mengklik pada elemen A, elemen B memaparkan kedudukan tetikus, elemen C memaparkan gesaan, elemen D...

2 Kerjasama modul perlu dipisahkan

Contohnya: A bertanggungjawab untuk modul A, dan B bertanggungjawab untuk modul B. Modul B perlu dijalankan selepas A selesai sebelum ia boleh dijalankan

Cara penulisan tradisional ialah menulis logik dalam kaedah:

function doSomething(){
  A();
  B();
}

Dengan cara ini, fungsi klik a mesti diubah suai setiap kali ia dikembangkan, yang tidak mudah untuk dikembangkan.

Cara menulis acara tersuai

//1、创建事件
var clickElem = new Event("clickElem");
//2、注册事件监听器
elem.addEventListener("clickElem",function(e){
  //干点事
})
//3、触发事件
elem.dispatchEvent(clickElem);

Seperti yang anda lihat, peristiwa yang dicetuskan oleh elem melalui kaedah dispatchEvent hanya boleh didengari oleh pendengar yang berdaftar di elem. Ini sangat membosankan Hantar mesej kepada diri sendiri untuk memberitahu diri anda apa yang perlu dilakukan.

Untuk membuat acara tersuai, sila rujuk: MDN: Creating_and_triggering_events

Application

Daripada perihalan acara tersuai js sebelumnya: Pas Elemen A dispatchEvent Peristiwa yang dicetuskan oleh kaedah hanya boleh didengari oleh pendengar yang didaftarkan di A.

Kesan yang kami mahukan ialah selepas objek lain melakukan sesuatu, mereka menghantar mesej kepada kami supaya kami boleh membuat perubahan yang sepadan. Tiada cara untuk melakukan ini: kita boleh mendengar dan mencetuskan peristiwa pada objek awam, yang masuk akal.

Contoh 1: Maklumkan berbilang objek

Untuk menyedari bahawa selepas elemen A diklik, elemen B memaparkan kedudukan tetikus dan elemen C memaparkan gesaan, anda boleh menulis seperti ini:

Fail: a.js

import b from "./b"
import c from "./c"
var a = document.getElementById("a");
a.addEventListener("click",function(e){
  var clickA = new Event("clickA");
  document.dispatchEvent(clickA);
});

Nota: Walaupun pembolehubah yang diimport tidak digunakan, mereka tidak boleh ditinggalkan

Fail b.js:

var b = document.getElementById("b");
document.addEventListener("clickA",function(e){
  b.innerHTML = "(128,345)";
})

Fail c .js:

var c = document.getElementById("c");
document.addEventListener("clickA",function(e){
  c.innerHTML = "你点了A";
})

Ditulis dengan cara ini, ketiga-tiga modul tidak perlu mengambil berat tentang objek sama sekali, dan tidak tahu kewujudan satu sama lain rendah, dan ia boleh ditulis secara bebas tanpa menjejaskan satu sama lain. Ini sebenarnya adalah pelaksanaan corak pemerhati.

Contoh 2: Rangka Kerja Permainan

Untuk membangunkan permainan, mulakan permainan, muatkan gambar dan muzik, dan selepas dimuatkan, tunjukkan pemandangan dan kesan bunyi rendering dilakukan oleh orang yang berbeza adalah bertanggungjawab. Anda boleh menulisnya seperti ini:

Fail: index.js

import loadImage from "./loadImage"
import loadMusic from "./loadMusic"
import initScene from "./initScene"  
var start = document.getElementById("start");
start.addEventListener("click",function(e){
  console.log("游戏开始！");
  document.dispatchEvent(new Event("gameStart"));
})

Fail: loadImage.js

// 加载图片
document.addEventListener("gameStart",function(){
  console.log("加载图片...");
  setTimeout(function(){
    console.log("加载图片完成");
    document.dispatchEvent(new Event("loadImageSuccess"));
  },1000);
});

Fail: loadMusic.js

//加载音乐
document.addEventListener("gameStart",function(){
  console.log("加载音乐...");
  setTimeout(function(){
    console.log("加载音乐完成");
    document.dispatchEvent(new Event("loadMusicSuccess"));
  },2000);
});

Fail : initScene. js

//渲染场景
document.addEventListener("loadImageSuccess",function(e){
  console.log("使用图片创建场景...");
  setTimeout(function(){
    console.log("创建场景完成");
  },2000)
});
//渲染音效
document.addEventListener("loadMusicSuccess",function(e){
  console.log("使用音乐创建音效...");
  setTimeout(function(){
    console.log("创建音效完成");
  },500)
});

Modul pemuatan dan modul pemaparan tidak menjejaskan satu sama lain dan mudah dikembangkan.

Membawa maklumat

Selain itu, acara juga boleh menghantar maklumat tersuai:

var event = new CustomEvent('myEvent', { 'dataName': dataContent });
document.dispatchEvent(event);

(Nota: CustomEvent diperlukan untuk menghantar maklumat tersuai , bukannya Acara)

dan kemudian keluarkannya dalam fungsi mendengar:

document.addEventListener("myEvent",function(e){
  console.log(e.dataName);
})

Atas ialah kandungan terperinci Cara menggunakan javascript untuk melaksanakan fungsi acara tersuai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!