Eine kurze Analyse des Ereignisdelegierungsmechanismus und des tiefen und flachen Kopierens in JavaScript

Heute sprechen wir über Event-Delegation und Deep und Shallow Copy in JavaScript

1. Veranstaltungsdelegation

Lassen Sie uns zunächst die Ereignisbindung einführen

//Methode 1: per onclick
<button onclick="clickEvent()">Klick</button>

<Skript>
Funktion KlickEreignis(){
   alert("Klickereignis");
}
</Skript>

//Methode 2: über addEventListener
<button id="btn_button">Klick</button>

<Skript>
var btn = document.getElementById("btn_button");
btn.addEventListener("klicken", Funktion () {
  Alarm("Klick");
}, FALSCH);
</Skript>

Erklär mir den Unterschied
onclick kann nur ein Ereignis binden, während addEventListener mehrere Ereignisse gleichzeitig binden kann

[Funktion Methode1() {
  console.log("Methode1");
}
Funktion Methode2() {
  console.log("Methode2");
}
Funktion Methode3() {
  console.log("Methode3");
}
var btn = document.getElementById("btn_button");
btn.addEventListener("click", method1, false); //Der dritte Parameter ist der Standardwert, der standardmäßig „bubbling“ ist. Wenn er auf „true“ gesetzt ist, wird er erfasst. btn.addEventListener("click", method2, false);
btn.addEventListener("click", Methode3, false);
//Schließlich wird es in der Reihenfolge ausgeführt: Methode1 -> Methode2 -> Methode3 
btn.removeEventListener("click", method1, false); // wird zum Entfernen von Ereignissen verwendet btn.onclick = method1;
btn.onclick = Methode2;
btn.onclick = Methode3;
//Zuletzt wird nur Methode3 ausgeführt
btn.onclick = null; // wird verwendet, um das Ereignis zu entfernen

Ereignissprudeln

<ul id="Container" style="Anzeige: Inline-Block;">
  <li id="title1">123456</li>
  <li id="title2">qwert</li>
  <li id="Titel3">
    <ul>
      <li id="title3inner">Text innerhalb von Titel3</li>
    </ul>
  </li>
</ul>

<Skript>
  var Container = document.getElementById("Container");
  var Titel1 = document.getElementById("Titel1");
  var Titel2 = document.getElementById("Titel2");
  var Titel3 = document.getElementById("Titel3");
  var title3inner = document.getElementById("title3inner");

  container.onclick = Funktion (e) {
    Alarm("Container");
  }
  title1.onclick = Funktion (e) {
    Alarm("Titel1");
  }
  title2.onclick = Funktion (e) {
    Alarm("Titel2");
  }
  title3.onclick = Funktion (e) {
    Alarm("Titel3");
  }
  title3inner.onclick = Funktion (e) {
    Warnung("title3inner");
  }
</Skript>

Wenn Sie auf den Text in Titel3 klicken, werden drei Ereignisse ausgelöst, wobei jeweils „title3inner“ -> „title3“ -> „Container“ angezeigt wird.

Ereigniserfassung

Beim Event-Bubbling ist die Event-Erfassung das Gegenteil, d. h., wenn Sie auf „Text in Titel3“ klicken, werden drei Ereignisse ausgelöst, die jeweils „Container“ -> „Titel3“ -> „Titel3inner“ anzeigen.

Sublimation des Event-Blubberns

Verwendung der Ereignisdelegierung

<ul id="Container" style="Anzeige: Inline-Block;">
  <li id="title1">123456</li>
  <li id="title2">qwert</li>
  <li id="title3">QWE123</li>
</ul>

<Skript>
var Container = document.getElementById("Container");
container.onclick = Funktion (e) {
  //console.log(e);
  if (e.target.id = "title1") {
    Alarm (e.target.innerText);
  }
  sonst wenn (e.target.id = "title2") {
    Alarm (e.target.innerText);
  }
  sonst wenn (e.target.id = "title3") {
    Alarm (e.target.innerText);
  }
}
</Skript>

Der Vorteil besteht darin, dass Sie nur ein Klickereignis registrieren müssen und dann anhand des Ziels das konkrete angeklickte Element bestimmen können. Das currentTarget bezieht sich auf das Element, das das Ereignis registriert hat.
Ziel ist das Element, auf das Sie tatsächlich geklickt haben
currentTarget ist das an das Ereignis gebundene Element. Wenn keine Ereignisdelegierung verwendet wird, fügen Sie in einer Liste nach jedem Datum eine Schaltfläche hinzu und registrieren Sie dann für jede Schaltfläche ein Ereignis. Wenn jedes Element an ein Ereignis gebunden ist, beeinträchtigen so viele Schaltflächen definitiv die Front-End-Leistung. Zu diesem Zeitpunkt ist der Delegierte definitiv die beste Wahl, schließlich muss der Delegierte nur eine Veranstaltung registrieren.

denken

Theoretisch stellt die Verwendung der Ereignisdelegierung tatsächlich eine Optimierung dar. Sie müssen lediglich ein Ereignis registrieren und dann die entsprechende Funktion durch Ereignisblasen implementieren.
Sollte für das Vue-Projekt Ereignisdelegation verwendet werden? Hier scheint es eine Kontroverse zu geben.
Einige Leute sagen, dass dies in Vue bereits für Sie erledigt wurde, andere sagen, dass dies nicht der Fall ist. Ich habe den Quellcode nicht gelesen, daher weiß ich es nicht.

Ich habe es jedenfalls so gemacht, indem ich an jede Schaltfläche ein Ereignis gebunden und dann das Aufsteigen verhindert habe. In der Praxis halte ich persönlich die Delegation von Veranstaltungen nicht für sehr wichtig. Ich halte sie auch nicht für notwendig. Schließlich gibt es nicht so viele Veranstaltungen.

2. Tiefe und oberflächliche Kopie

Was das Wissen über tiefes und oberflächliches Kopieren betrifft, werde ich es kurz machen und mit einem Schlag töten!

sei a = 3;
sei b = a;
ein = 4;
konsole.log(a); //4
console.log(b); //3
console.log(a === b); //Dies ist eine vollständige Kopie. A und B sind völlig unterschiedliche Variablen, die jeweils einen Wert speichern.

sei arr = [1, 2, 3, 4, 5];
sei brr = arr;
arr[1] = 8;
konsole.log(arr[1]); //8
console.log(brr[1]); //8 Warum? Dies ist eine oberflächliche Kopie. Der Array-Typ ist ein Referenztyp. Die Variablen arr und brr speichern nur Referenzadressen. Sie zeigen gemeinsam auf das Array [1,2,3,4,5]. console.log(arr === brr); //true

Wenn Sie eine Deep Copy implementieren möchten, wie gehen Sie in der Praxis vor?
Die Hauptmethode besteht darin, Werte durch Rekursion zuzuweisen, und die andere besteht darin, dies durch die beiden Methoden JSON.stringify und JSON.parse zu implementieren.
Die Anwendung der zweiten Methode ist hier die einfachste, nämlich die einfachste und gewaltsamste und oft auch die wirksamste Lösung.

sei arr = [1, 2, 3, 4, 5];
Lassen Sie brr = JSON.parse(JSON.stringify(arr));
arr[1] = 8;
console.log(brr[1]); //2, dies implementiert die sogenannte Deep Copy

Abschluss

Wie der Interviewer sagte, müssen Sie die oben genannten Kenntnisse, auch wenn sie bei Ihrer tatsächlichen Arbeit möglicherweise nicht von Nutzen sind, trotzdem kennen! Muss man noch wissen! ! Muss man noch wissen! ! !

Damit ist dieser Artikel über den Ereignisdelegierungsmechanismus und das tiefe und oberflächliche Kopieren in JavaScript abgeschlossen. Weitere relevante Inhalte zu Ereignisdelegierung und tiefem und oberflächlichem Kopieren in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!