Bubble.js : solutions 1,6K efficaces aux problèmes courants

L'une des tâches les plus courantes dans le développement Web est la gestion des incidents. Notre code JavaScript écoute généralement les événements envoyés par les éléments DOM.

C'est ainsi que nous obtenons des informations de l'utilisateur : c'est-à-dire qu'il a cliqué, tapé, interagi avec notre page, et nous avons besoin de savoir si cela s'est produit. L'ajout d'écouteurs d'événements semble simple, mais peut s'avérer un processus difficile.

Dans cet article, nous verrons un cas réel de problème et sa solution 1,6K.

Question

Un de mes amis est un développeur junior. En tant que tel, il n'avait pas beaucoup d'expérience avec le JavaScript simple ; cependant, il a dû commencer à utiliser des frameworks comme AngularJS et Ember sans avoir une compréhension de base de la relation entre le DOM et JavaScript. Tout en travaillant en tant que développeur junior, il a travaillé sur un petit projet : un site Web événementiel d'une seule page qui n'impliquait presque aucun JavaScript. Il est tombé sur un problème petit mais très intéressant qui m'a finalement amené à écrire Bubble.js.

Supposons que nous ayons une fenêtre contextuelle. Un élément magnifiquement stylé :

<div class="popup"> ... </div>

Voici le code que nous utilisons pour afficher le message :

var popup = document.querySelector('.popup');
var showMessage = function(msg) {
    popup.style.display = 'block';
    popup.innerHTML = msg;
}
...
showMessage('Loading. Please wait.');

Nous avons une autre fonction hideMessage ，它将 display 属性更改为 none et cachons le popup. Cette approche peut fonctionner pour les cas les plus généraux, mais certains problèmes subsistent.

Par exemple, si des problèmes surviennent un par un, nous devons mettre en œuvre une logique supplémentaire. Supposons que nous devions ajouter deux boutons au contenu de la fenêtre contextuelle : Oui et Non.

var content = 'Are you sure?<br />';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="popup--yes">Yes</a>';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="popup--no">No</a>';
showMessage(content);

Alors, comment savons-nous que l'utilisateur a cliqué dessus ? Nous devons ajouter des écouteurs d'événements pour chaque lien.

Par exemple :

var addListeners = function(yesCB, noCB) {
    popup.querySelector('.popup--yes').addEventListener('click', yesCB);
    popup.querySelector('.popup--no').addEventListener('click', noCB);
}
showMessage(content);
addListeners(function() {
    console.log('Yes button clicked');
}, function() {
    console.log('No button clicked');
});

Le code ci-dessus fonctionne la première fois qu'il est exécuté. Et si nous avons besoin d’un nouveau bouton, ou pire, si nous avons besoin d’un autre type de bouton ? Autrement dit, si nous continuons à utiliser la fonction <a></a> 元素但使用不同的类名会怎么样？我们不能使用相同的 addListeners, il serait ennuyeux de créer une nouvelle méthode pour chaque variation du popup.

Voici où le problème devient évident :

• Nous devons ajouter des auditeurs encore et encore. En fait, nous devons le faire à chaque fois que le code HTML de la popup change.
• Nous pouvons attacher un écouteur d'événement uniquement lorsque le contenu de la popup est mis à jour. Seulement après showMessageappel. Nous devons toujours en tenir compte et synchroniser les deux processus.
• Le code qui ajoute l'auditeur a une dépendance dure - popup 变量。我们需要调用它的 querySelector 函数，而不是 document.querySelector. Sinon, nous pourrions sélectionner le mauvais élément.
• Une fois que nous avons changé la logique du message, nous devons changer le sélecteur et probablement l'appel addEventListener aussi. Ce n'est pas sec du tout.

Il doit y avoir une meilleure façon de procéder.

Oui, il existe une meilleure façon. Non, la solution n'est pas d'utiliser un framework.

Avant de révéler la réponse, parlons d’abord des événements dans l’arborescence DOM.

Comprendre la gestion des événements

Les événements sont une partie importante du développement Web. Ils ajoutent de l'interactivité à nos applications et servent de pont entre la logique métier et les utilisateurs. Chaque élément du DOM peut distribuer des événements. Il suffit de s'abonner à ces événements et de gérer les objets Event reçus.

Il existe un terme « propagation d'événements » qui signifie « bullage d'événements » et « capture d'événements », qui sont tous deux deux manières de gérer les événements dans le DOM. Voyons la différence entre eux en utilisant les notations suivantes.

<div class="wrapper">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">click me</a>
</div>

Nous mettrons click 事件处理程序附加到这两个元素。不过，因为互相嵌套，所以他们都会收到 click événements.

document.querySelector('.wrapper').addEventListener('click', function(e) {
    console.log('.wrapper clicked');
});
document.querySelector('a').addEventListener('click', function(e) {
    console.log('a clicked');
});

Après avoir appuyé sur le lien, nous verrons le résultat suivant dans la console :

a clicked
.wrapper clicked

Ainsi, les deux éléments reçoivent des événements click. D'abord le lien, puis le click 事件。首先是链接，然后是 。这就是冒泡效果。从最深的元素到它的父母。有一种方法可以阻止冒泡。每个处理程序都会接收一个具有 stopPropagation. C'est l'effet bouillonnant. De l'élément le plus profond à son parent. Il existe un moyen d'arrêter de bouillonner. Chaque gestionnaire reçoit un objet événement avec une méthode

 :

document.querySelector('a').addEventListener('click', function(e) {
    e.stopPropagation();
    console.log('a clicked');
});

stopPropagationEn utilisant la fonction

nous indiquons que l'événement ne doit pas être envoyé au parent.

addEventListener 中使用第三个参数。如果我们传递 trueParfois, nous devrons inverser l'ordre et laisser un élément externe capturer l'événement. Pour ce faire, nous devons utiliser le troisième argument de

. Si nous passons true comme valeur, nous effectuerons une capture d'événement. Par exemple :

document.querySelector('.wrapper').addEventListener('click', function(e) {
    console.log('.wrapper clicked');
}, true);
document.querySelector('a').addEventListener('click', function(e) {
    console.log('a clicked');
}, true);

C'est ainsi que le navigateur gère les événements lorsque nous interagissons avec la page. 🎜

解决方案

好吧，那么我们为什么要在文章中花一部分时间讨论冒泡和捕获呢？我们提到它们是因为冒泡是弹出窗口问题的答案。我们不应该将事件监听器设置为链接，而是直接设置为 。

var content = 'Are you sure?<br />';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="popup--yes">Yes</a>';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" class="popup--no">No</a>';

var addListeners = function() {
    popup.addEventListener('click', function(e) {
        var link = e.target;
    });
}

showMessage(content);
addListeners();

通过遵循这种方法，我们消除了开头列出的问题。

• 只有一个事件监听器，我们只添加一次。无论我们在弹出窗口中放入什么，事件的捕获都会在其父级中发生。
• 我们不受附加内容的约束。换句话说，我们不关心 showMessage 何时被调用。只要 popup 变量处于活动状态，我们就会捕获事件。
• 因为我们调用了 addListeners 一次，所以我们也使用了 popup 变量一次。我们不必保留它或在方法之间传递它。
• 我们的代码变得灵活，因为我们选择不关心传递给 showMessage 的 HTML。我们可以访问被点击的锚点，因为 e.target 指向被按下的元素。

上面的代码比我们一开始的代码要好。然而，仍然无法以同样的方式发挥作用。正如我们所说， e.target 指向点击的 <a></a> 标签。因此，我们将使用它来区分是和否按钮。

var addListeners = function(callbacks) {
    popup.addEventListener('click', function(e) {
        var link = e.target;
        var buttonType = link.getAttribute('class');
        if(callbacks[buttonType]) {
            callbacks[buttonType](e);
        }
    });
}
...
addListeners({
    'popup--yes': function() {
        console.log('Yes');
    },
    'popup--no': function() {
        console.log('No');
    }
});

我们获取了 class 属性的值并将其用作键。不同的类指向不同的回调。

但是，使用 class 属性并不是一个好主意。它保留用于将视觉样式应用于元素，并且其值可能随时更改。作为 JavaScript 开发人员，我们应该使用 data 属性。

var content = 'Are you sure?<br />';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-action="yes" class="popup--yes">Yes</a>';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-action="no" class="popup--no">No</a>';

我们的代码也变得更好了。我们可以删除 addListeners 函数中使用的引号：

addListeners({
    yes: function() {
        console.log('Yes');
    },
    no: function() {
        console.log('No');
    }
});

结果可以在这个 JSBin 中看到。

泡泡.js

我在几个项目中应用了上面的解决方案，因此将其包装为一个库是有意义的。它称为 Bubble.js，可在 GitHub 中找到。这是一个 1.6K 的文件，它的作用与我们上面所做的完全一样。

让我们将弹出示例转换为使用 Bubble.js。我们必须更改的第一件事是使用的标记：

var content = 'Are you sure?<br />';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-bubble-action="yes" class="popup--yes">Yes</a>';
content += '<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-bubble-action="no" class="popup--no">No</a>';

我们应该使用 data-bubble-action 而不是 data-action。

一旦我们在页面中包含 bubble.min.js ，我们就有了一个全局 bubble 函数。它接受 DOM 元素选择器并返回库的 API。 on 方法是添加监听器的方法：

bubble('.popup')
.on('yes', function() {
    console.log('Yes');
})
.on('no', function() {
    console.log('No');
});

还有一种替代语法：

bubble('.popup').on({
    yes: function() {
        console.log('Yes');
    },
    no: function() {
        console.log('No');
    }
});

默认情况下，Bubble.js 侦听 click 事件，但有一个选项可以更改该设置。让我们添加一个输入字段并监听其 keyup 事件：

<input type="text" data-bubble-action="keyup:input"/>

JavaScript 处理程序仍然接收 Event 对象。因此，在这种情况下，我们可以显示字段的文本：

bubble('.popup').on({
    ...
    input: function(e) {
        console.log('New value: ' + e.target.value);
    }
});

有时我们需要捕获同一元素发出的多个事件而不是一个。 data-bubble-action 接受以逗号分隔的多个值：

<input type="text" data-bubble-action="keyup:input, blur:inputBlurred"/>

在此处查找 JSBin 中的最终变体。

后备

本文提供的解决方案完全依赖于事件冒泡。在某些情况下 e.target 可能不会指向我们需要的元素。

例如：

<div class="wrapper">
    <a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Please, <span>choose</span> me!</a>
</div>

如果我们将鼠标放在“choose”上并执行单击，则调度事件的元素不是 <a></a> 标记，而是 span 元素。

摘要

诚然，与 DOM 的通信是我们应用程序开发的重要组成部分，但我们使用框架只是为了绕过这种通信是一种常见的做法。

我们不喜欢一次又一次地添加监听器。我们不喜欢调试奇怪的双事件触发错误。事实上，如果我们了解浏览器的工作原理，我们就能够消除这些问题。

Bubble.js 只是几个小时阅读和一小时编码的结果 - 它是我们针对最常见问题之一的 1.6K 解决方案。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!