Bubble.js: 一般的な問題に対する効率的な 1.6K ソリューション

Web 開発で最も一般的なタスクの 1 つはイベント管理です。通常、JavaScript コードは DOM 要素によって送出されるイベントをリッスンします。

これがユーザーから情報を取得する方法です。つまり、ユーザーがページをクリック、入力、操作したので、それが起こったかどうかを知る必要があります。イベント リスナーの追加は簡単そうに見えますが、難しいプロセスになる場合があります。

この記事では、実際のケースの問題とその 1.6K の解決策を見ていきます。

＃＃＃質問＃＃＃

私の友人は若手開発者です。そのため、彼はプレーンな JavaScript の経験があまりありませんでしたが、DOM と JavaScript の関係についての基本的な理解がないまま、AngularJS や Ember などのフレームワークを使い始めなければなりませんでした。彼はジュニア開発者として働いている間、JavaScript をほとんど使わない単一ページのイベント Web サイトという小さなプロジェクトに取り組みました。彼は、小さいながらも非常に興味深い問題に遭遇し、最終的に私が Bubble.js を作成するきっかけになりました。

ポップアップ ウィンドウがあるとします。美しくスタイルされた

要素: リーリー これはメッセージを表示するために使用するコードです:

リーリー

別の関数

hideMessage

があり、これは display プロパティを none に変更し、ポップアップを非表示にします。このアプローチは最も一般的なケースでは機能する可能性がありますが、まだいくつかの問題があります。 たとえば、問題が次々に発生すると、追加のロジックを実装する必要があります。ポップアップのコンテンツに 2 つのボタン (

Yes

と No) を追加する必要があるとします。 リーリー それでは、ユーザーがそれらをクリックしたことをどうやって知ることができるのでしょうか?各リンクにイベント リスナーを追加する必要があります。

＃＃＃例えば：＃＃＃ リーリー

上記のコードは、初回実行時に機能します。新しいボタンが必要な場合、あるいはさらに悪いことに、別の種類のボタンが必要な場合はどうすればよいでしょうか?つまり、

要素を引き続き使用し、クラス名が異なる場合はどうなるでしょうか?同じ

addListeners 関数を使用することはできませんし、ポップアップのバリエーションごとに新しいメソッドを作成するのは面倒です。 <a> </a>ここで問題が明らかになります:

リスナーを何度も追加する必要があります。実際、ポップアップの

内の HTML が変更されるたびにこれを行う必要があります。

• イベント リスナーをアタッチできるのは、ポップアップ ウィンドウのコンテンツが更新された場合のみです。 showMessage が呼び出された後のみ。これを常に考慮し、両方のプロセスを同期する必要があります。
• リスナーを追加するコードには、popup 変数というハードな依存関係があります。
document.querySelector
• の代わりに querySelector 関数を呼び出す必要があります。そうしないと、間違った要素が選択される可能性があります。 メッセージ内のロジックを変更したら、セレクターを変更し、場合によっては addEventListener 呼び出しも変更する必要があります。全然乾いてないんです。
• これを行うには、もっと良い方法があるはずです。
はい、もっと良い方法があります。いいえ、解決策はフレームワークを使用しないことです。

答えを明らかにする前に、まず DOM ツリー内のイベントについて話しましょう。

イベント処理について理解する

イベントは Web 開発の重要な部分です。これらはアプリケーションに対話性を追加し、ビジネス ロジックとユーザーの間のブリッジとして機能します。すべての DOM 要素はイベントをディスパッチできます。私たちがしなければならないことは、これらのイベントをサブスクライブし、受信した Event オブジェクトを処理することだけです。

「イベント伝播」という用語がありますが、これは「イベント バブリング」と「イベント キャプチャ」を表し、どちらも DOM でイベントを処理する 2 つの方法です。次の表記を使用してそれらの違いを見てみましょう。

リーリー

これら 2 つの要素に

click

イベント ハンドラーをアタッチします。ただし、これらは相互にネストされているため、すべて

click

イベントを受け取ります。 リーリー リンクを押すと、コンソールに次の出力が表示されます: リーリー つまり、両方の要素は実際に

click

イベントを受け取ります。最初にリンク、次に

です。これがバブリング効果です。最も深い要素からその親まで。泡立ちを止める方法はあります。各ハンドラーは、stopPropagation メソッドを使用してイベント オブジェクトを受け取ります: リーリー stopPropagation 関数を使用することで、イベントを親に送信しないことを示します。

場合によっては、順序を逆にして、外部要素にイベントをキャプチャさせる必要があるかもしれません。これを行うには、

addEventListener の 3 番目のパラメータを使用する必要があります。値として true

を渡すと、イベントのキャプチャが行われます。例えば：＃＃＃ リーリー

これは、ページを操作するときにブラウザーがイベントを処理する方法です。 <h2 id="解决方案">解决方案</h2> <p>好吧，那么我们为什么要在文章中花一部分时间讨论冒泡和捕获呢？我们提到它们是因为冒泡是弹出窗口问题的答案。我们不应该将事件监听器设置为链接，而是直接设置为 <code>。

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 中国語 Web サイトの他の関連記事を参照してください。