Bubble.js：針對常見問題的高效 1.6K 解決方案

Web 開發中最常見的任務之一是事件管理。我們的 JavaScript 程式碼通常監聽 DOM 元素調度的事件。

這就是我們從用戶那裡獲取資訊的方式：也就是說，他或她點擊、打字、與我們的頁面交互，我們需要知道這種情況是否發生。新增事件監聽器看起來很簡單，但可能是一個艱難的過程。

在本文中，我們將看到一個真實的案例問題及其 1.6K 解決方案。

問題

我的一個朋友是初級開發人員。因此，他對普通 JavaScript 沒有太多經驗；然而，他不得不開始使用 AngularJS 和 Ember 等框架，而對 DOM 與 JavaScript 的關係沒有基本的了解。在擔任初級開發人員期間，他負責一個小型專案：一個幾乎不涉及 JavaScript 的單頁活動網站。他遇到了一個小但非常有趣的問題，最後促使我寫了 Bubble.js。

假設我們有一個彈出視窗。一個樣式漂亮的 元素：

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

這就是我們與頁面互動時瀏覽器處理事件的方式。

解决方案

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

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

以上是Bubble.js：針對常見問題的高效 1.6K 解決方案的詳細內容。更多資訊請關注PHP中文網其他相關文章！