Bonjour,

Voici un composant vuejs qui affiche une modal avec un gif quand on tape le konami code dans le navigateur (haut haut bas bas gauche droite gauche droite BA ENTER)

Il y a une fuite mémoire dans ce code, quelqu'un pourrait m'éclairer ? Je crois que c'est lié au getElementById dans la méthode handleKeydown. Mais j'aimerais bien une explication éclairée.

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<template>
  <div id="myModal" class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <img alt="Hey" src="../assets/sold.gif">
      <p>{{ message }}</p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: "KonamiCode",
  data() {
    return {
      showGif: false,
      konamiCode: [38, 38, 40, 40, 37, 39, 37, 39, 66, 65, 13],
      enteredCode: [],
      modal:null,
      message: "Bravo pour avoir tapé le Konami Code Secret !"
    };
  },
  methods: {
    closeModal(){
      this.modal.style.display = "none";
    },
    handleKeydown(event) {
      this.enteredCode.push(event.keyCode);
      if (this.enteredCode.toString().indexOf(this.konamiCode) >= 0) {
        console.log("Konami Code entered!");
        this.showGif = true;
        this.modal = document.getElementById("myModal");
        this.modal.style.display = "block";
        this.enteredCode = [];
      }
    }
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeydown);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.handleKeydown);
  }
}
</script>
 
<style scoped>
img{
  margin:auto;
}
</style>

En vous remerciant