Bubble.js: Penyelesaian 1.6K yang cekap untuk masalah biasa

Salah satu tugas yang paling biasa dalam pembangunan web ialah pengurusan insiden. Kod JavaScript kami biasanya mendengar acara yang dihantar oleh elemen DOM.

Ini adalah cara kami mendapatkan maklumat daripada pengguna: iaitu, dia mengklik, menaip, berinteraksi dengan halaman kami, dan kami perlu tahu jika itu berlaku. Menambah pendengar acara nampaknya mudah, tetapi boleh menjadi proses yang sukar.

Dalam artikel ini, kita akan melihat masalah kes sebenar dan penyelesaian 1.6Knya.

soalan

Seorang kawan saya ialah pembangun junior. Oleh itu, dia tidak mempunyai banyak pengalaman dengan JavaScript biasa, bagaimanapun, dia terpaksa mula menggunakan rangka kerja seperti AngularJS dan Ember tanpa pemahaman asas tentang bagaimana DOM berkaitan dengan JavaScript. Semasa bekerja sebagai pembangun junior, dia mengusahakan projek kecil: tapak web acara satu halaman yang hampir tidak melibatkan JavaScript. Dia mempunyai masalah kecil tetapi sangat menarik yang akhirnya menyebabkan saya menulis Bubble.js.

Andaikan kita mempunyai tetingkap timbul. Elemen yang digayakan dengan cantik: 元素：

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

这是我们用来显示消息的代码：

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

我们还有另一个函数 hideMessage ，它将 display 属性更改为 none 并隐藏弹出窗口。该方法可能适用于最一般的情况，但仍然存在一些问题。

例如，如果问题一一出现，我们需要实现额外的逻辑。假设我们必须向弹出窗口的内容添加两个按钮 - 是和否。

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

那么，我们如何知道用户点击了它们呢？我们必须为每个链接添加事件侦听器。

例如：

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

上面的代码在第一次运行时有效。如果我们需要一个新按钮怎么办，或者更糟糕的是，如果我们需要不同类型的按钮怎么办？也就是说，如果我们继续使用 <a> 元素但使用不同的类名会怎么样？我们不能使用相同的 addListeners 函数，并且为弹出窗口的每个变体创建一个新方法很烦人。

以下是问题显而易见的地方：

• 我们必须一次又一次地添加监听器。事实上，每次弹出窗口的 中的 HTML 发生更改时，我们都必须执行此操作。
• 仅当弹出窗口的内容更新时，我们才能附加事件侦听器。仅在 showMessage 调用之后。我们必须始终考虑这一点并同步两个流程。
• 添加侦听器的代码有一个硬依赖项 - popup 变量。我们需要调用它的 querySelector 函数，而不是 document.querySelector。否则，我们可能会选择错误的元素。
• 一旦我们更改消息中的逻辑，我们就必须更改选择器，并且可能还更改 addEventListener 调用。它一点也不干。

必须有更好的方法来做到这一点。

是的，有更好的方法。不，解决方案不是使用框架。

在揭晓答案之前，我们先来谈谈 DOM 树中的事件。

了解事件处理

事件是网络开发的重要组成部分。它们为我们的应用程序添加了交互性，并充当业务逻辑和用户之间的桥梁。每个 DOM 元素都可以调度事件。我们所要做的就是订阅这些事件并处理接收到的Event对象。

有一个术语“事件传播”，它代表“事件冒泡”和“事件捕获”，这两者都是 DOM 中事件处理的两种方式。让我们使用以下标记来看看它们之间的区别。

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

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

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

按下链接后，我们会在控制台中看到以下输出：

a clicked
.wrapper clicked

因此，这两个元素确实都接收了 click 事件。首先是链接，然后是 。这就是冒泡效果。从最深的元素到它的父母。有一种方法可以阻止冒泡。每个处理程序都会接收一个具有 stopPropagation 方法的事件对象：

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

通过使用 stopPropagation 函数，我们表明该事件不应发送给父级。

有时我们可能需要颠倒顺序并让外部元素捕获事件。为此，我们必须在 addEventListener 中使用第三个参数。如果我们传递 true

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

Ini adalah kod yang kami gunakan untuk memaparkan mesej:

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

Kami mempunyai fungsi lain hideMessage yang menukar atribut display kepada none dan menyembunyikan tetingkap pop timbul. Pendekatan ini mungkin berfungsi untuk kes yang paling umum, tetapi masih terdapat beberapa masalah. #🎜🎜# #🎜🎜#Sebagai contoh, jika masalah timbul satu persatu, kita perlu melaksanakan logik tambahan. Katakan kita perlu menambah dua butang pada kandungan pop timbul - Ya dan Tidak. #🎜🎜#

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

#🎜🎜#Jadi, bagaimana kita tahu pengguna mengklik padanya? Kami perlu menambah pendengar acara untuk setiap pautan. #🎜🎜# #🎜🎜#Contohnya: #🎜🎜#

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

#🎜🎜#Kod di atas berfungsi pada kali pertama ia dijalankan. Bagaimana jika kita memerlukan butang baharu, atau lebih teruk, bagaimana jika kita memerlukan jenis butang yang berbeza? Iaitu, bagaimana jika kita terus menggunakan elemen <a> tetapi menggunakan nama kelas yang berbeza? Kami tidak boleh menggunakan fungsi addListeners yang sama, dan ia akan menjengkelkan untuk mencipta kaedah baharu untuk setiap variasi pop timbul. #🎜🎜# #🎜🎜#Di sinilah masalahnya menjadi jelas: #🎜🎜#

• Kami perlu menambah pendengar lagi dan lagi. Sebenarnya, kita perlu melakukan ini setiap kali HTML dalam pop timbul berubah.
• Kami boleh melampirkan pendengar acara hanya apabila kandungan pop timbul dikemas kini. Hanya selepas showMessage dipanggil. Kita mesti sentiasa mempertimbangkan ini dan menyegerakkan kedua-dua proses.
• Kod yang menambah pendengar mempunyai kebergantungan keras - pembolehubah popup. Kita perlu memanggil fungsi querySelector dan bukannya document.querySelector. Jika tidak, kami mungkin memilih elemen yang salah.
• Sebaik sahaja kami menukar logik dalam mesej, kami perlu menukar pemilih dan mungkin panggilan addEventListener. Ia tidak kering sama sekali.

#🎜🎜#Mesti ada cara yang lebih baik untuk melakukan ini. #🎜🎜# #🎜🎜#Ya, ada cara yang lebih baik. Tidak, penyelesaiannya adalah dengan tidak menggunakan rangka kerja. #🎜🎜# #🎜🎜#Sebelum mendedahkan jawapan, mari kita bincangkan dahulu tentang peristiwa dalam pokok DOM. #🎜🎜# #🎜🎜#Fahami pengendalian acara#🎜🎜# #🎜🎜#Acara adalah bahagian penting dalam pembangunan web. Mereka menambah interaktiviti pada aplikasi kami dan bertindak sebagai jambatan antara logik perniagaan dan pengguna. Setiap elemen DOM boleh menghantar acara. Apa yang perlu kita lakukan ialah melanggan acara ini dan mengendalikan objek Acara yang diterima. #🎜🎜# #🎜🎜#Terdapat istilah "penyebaran peristiwa" yang bermaksud "event bubbling" dan "event captured", kedua-duanya ialah dua cara mengendalikan acara dalam DOM. Mari lihat perbezaan antara mereka menggunakan tatatanda berikut. #🎜🎜#

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

#🎜🎜#Kami akan melampirkan pengendali acara klik pada dua elemen ini. Walau bagaimanapun, kerana mereka bersarang antara satu sama lain, mereka semua akan menerima acara klik. #🎜🎜#

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

#🎜🎜#Selepas menekan pautan, kita akan melihat output berikut dalam konsol: #🎜🎜#

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

#🎜🎜#Jadi, kedua-dua elemen sememangnya menerima acara klik. Mula-mula pautan, kemudian . Ini adalah kesan menggelegak. Daripada unsur yang paling dalam kepada induknya. Terdapat cara untuk berhenti menggelegak. Setiap pengendali menerima objek acara dengan kaedah stopPropagation: #🎜🎜#

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

#🎜🎜#Dengan menggunakan fungsi stopPropagation, kami menunjukkan bahawa acara itu tidak boleh dihantar kepada induk. #🎜🎜# #🎜🎜#Kadangkala kita mungkin perlu membalikkan susunan dan membiarkan elemen luaran menangkap acara tersebut. Untuk melakukan ini, kita perlu menggunakan parameter ketiga dalam addEventListener. Jika kami memberikan true sebagai nilai, kami akan melakukan tangkapan acara. Contohnya: #🎜🎜#

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

#🎜🎜#Beginilah cara penyemak imbas mengendalikan acara apabila kami berinteraksi dengan halaman tersebut. #🎜🎜#

解决方案

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

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 解决方案。

Atas ialah kandungan terperinci Bubble.js: Penyelesaian 1.6K yang cekap untuk masalah biasa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!