Bubble.js: Effiziente 1.6K-Lösungen für häufige Probleme

Eine der häufigsten Aufgaben in der Webentwicklung ist das Incident Management. Unser JavaScript-Code lauscht normalerweise auf Ereignisse, die von DOM-Elementen ausgelöst werden.

Auf diese Weise erhalten wir Informationen vom Benutzer: Das heißt, er oder sie hat auf unsere Seite geklickt, getippt oder mit ihr interagiert, und wir müssen wissen, ob das passiert ist. Das Hinzufügen von Ereignis-Listenern scheint einfach zu sein, kann jedoch ein schwieriger Prozess sein.

In diesem Artikel werden wir ein echtes Fallproblem und seine 1,6K-Lösung sehen.

Frage

Ein Freund von mir ist ein Junior-Entwickler. Daher hatte er nicht viel Erfahrung mit einfachem JavaScript; er musste jedoch mit der Verwendung von Frameworks wie AngularJS und Ember beginnen, ohne ein grundlegendes Verständnis dafür zu haben, wie das DOM mit JavaScript zusammenhängt. Als Junior-Entwickler arbeitete er an einem kleinen Projekt: einer einseitigen Event-Website, die fast ohne JavaScript auskam. Er hatte ein kleines, aber sehr interessantes Problem, das mich letztendlich dazu brachte, Bubble.js zu schreiben.

Angenommen, wir haben ein Popup-Fenster. Ein wunderschön gestyltes Element:

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

Dies ist der Code, den wir verwenden, um die Nachricht anzuzeigen:

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

Wir haben eine weitere Funktion hideMessage ，它将 display 属性更改为 none und blenden das Popup aus. Dieser Ansatz mag für die allgemeinsten Fälle funktionieren, es gibt jedoch immer noch einige Probleme.

Wenn beispielsweise Probleme einzeln auftreten, müssen wir zusätzliche Logik implementieren. Angenommen, wir müssen dem Inhalt des Popups zwei Schaltflächen hinzufügen – Ja und Nein.

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);

Woher wissen wir also, dass der Benutzer darauf geklickt hat? Wir müssen für jeden Link Ereignis-Listener hinzufügen.

Zum Beispiel:

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');
});

Der obige Code funktioniert beim ersten Ausführen. Was ist, wenn wir einen neuen Knopf brauchen, oder schlimmer noch, wenn wir einen anderen Knopftyp brauchen? Das heißt, wenn wir weiterhin die Funktion <a> 元素但使用不同的类名会怎么样？我们不能使用相同的 addListeners verwenden, wäre es lästig, für jede Variante des Popups eine neue Methode zu erstellen.

Hier wird das Problem offensichtlich:

• Wir müssen immer wieder Zuhörer hinzufügen. Tatsächlich müssen wir dies jedes Mal tun, wenn sich der HTML-Code im ​​des Popups ändert.
• Wir können einen Ereignis-Listener nur anhängen, wenn der Inhalt des Popups aktualisiert wird. Erst nach showMessage Anruf. Wir müssen dies immer berücksichtigen und beide Prozesse synchronisieren.
• Der Code, der den Listener hinzufügt, hat eine harte Abhängigkeit – popup 变量。我们需要调用它的 querySelector 函数，而不是 document.querySelector. Andernfalls wählen wir möglicherweise das falsche Element aus.
• Sobald wir die Logik in der Nachricht ändern, müssen wir den Selektor und möglicherweise auch den addEventListener-Aufruf ändern. Es ist überhaupt nicht trocken.

Es muss einen besseren Weg geben, dies zu tun.

Ja, es gibt einen besseren Weg. Nein, die Lösung besteht nicht darin, ein Framework zu verwenden.

Bevor wir die Antwort verraten, sprechen wir zunächst über Ereignisse im DOM-Baum.

Ereignisbehandlung verstehen

Events sind ein wichtiger Teil der Webentwicklung. Sie verleihen unseren Anwendungen Interaktivität und fungieren als Brücke zwischen Geschäftslogik und Benutzern. Jedes DOM-Element kann Ereignisse auslösen. Wir müssen lediglich diese Ereignisse abonnieren und die empfangenen Ereignisobjekte verarbeiten.

Es gibt einen Begriff „Ereignisausbreitung“, der für „Ereignisblasen“ und „Ereigniserfassung“ steht. Beides sind zwei Möglichkeiten, Ereignisse im DOM zu verarbeiten. Lassen Sie uns den Unterschied zwischen ihnen anhand der folgenden Notationen sehen.

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

Wir werden click 事件处理程序附加到这两个元素。不过，因为互相嵌套，所以他们都会收到 click Ereignisse veranstalten.

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

Nachdem Sie auf den Link geklickt haben, sehen wir in der Konsole die folgende Ausgabe:

a clicked
.wrapper clicked

Beide Elemente empfangen also click-Ereignisse. Erst der Link, dann das click 事件。首先是链接，然后是 。这就是冒泡效果。从最深的元素到它的父母。有一种方法可以阻止冒泡。每个处理程序都会接收一个具有 stopPropagation. Das ist der Blaseneffekt. Vom tiefsten Element bis zu seinem übergeordneten Element. Es gibt eine Möglichkeit, das Sprudeln zu stoppen. Jeder Handler erhält ein Ereignisobjekt mit einer

-Methode:

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

stopPropagationDurch die Verwendung der

-Funktion geben wir an, dass das Ereignis nicht an den Elternteil gesendet werden soll.

addEventListener 中使用第三个参数。如果我们传递 trueManchmal müssen wir möglicherweise die Reihenfolge umkehren und ein externes Element das Ereignis erfassen lassen. Dazu müssen wir das dritte Argument in

verwenden. Wenn wir true als Wert übergeben, führen wir eine Ereigniserfassung durch. Zum Beispiel:

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

So verarbeitet der Browser Ereignisse, wenn wir mit der Seite interagieren. 🎜

解决方案

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

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> 标签。因此，我们将使用它来区分是和否按钮。

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> 标记，而是 span 元素。

摘要

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

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

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

Das obige ist der detaillierte Inhalt vonBubble.js: Effiziente 1.6K-Lösungen für häufige Probleme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!