Bubble.js：针对常见问题的高效 1.6K 解决方案

分类：JavaScript作者：佚名

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

上面的代码在第一次运行时有效。如果我们需要一个新按钮怎么办，或者更糟糕的是，如果我们需要不同类型的按钮怎么办？也就是说，如果我们继续使用 元素但使用不同的类名会怎么样？我们不能使用相同的 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 指向点击的 标签。因此，我们将使用它来区分是和否按钮。

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”上并执行单击，则调度事件的元素不是 标记，而是 span 元素。

摘要

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

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

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

以上就是Bubble.js：针对常见问题的高效 1.6K 解决方案的详细内容，更多请关注编程之家其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

哪些JavaScript IDE最好用？
阅读本文之前，分享大家一张图片，看图会发现JavaScript开发需求最高，占比达到42.84%，因此掌握JavaScript语言好工作就不愁啦，工欲善其事必先利其器，那么选择IDE来开发是至关重要的，本文指出常用的几款JavaScript IDE，分析其优缺点，如有不完善的请大家补充
异步编程之Javascript Promises 规范介绍
Promises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。本文简要的介绍了Promises的基础知识，希望我们我们能够更好的使用Promises，更轻松的编写代码。
超越Web，Javascript在物联网的应用
引子 Patrick Catanzariti 是一名Web开发工程师，最近他在 sitepoint 发表了《JavaScript Beyond the Web in 2014》，介绍了JavaScript在物联网中的应用，非常有意思。做为JavaScript的爱好者和从业者，我在这里把它翻译了，以飨
JavaScript 常用功能总结
小编吐血整理加上翻译，太辛苦了~求赞！ 本文主要总结了JavaScript 常用功能总结，如一些常用的JS 对象，基本数据结构，功能函数等，还有一些常用的设计模式。 目录： 众所周知，JavaScript是动态的面向对象的编程语言，能够实现以下效果： 1. 丰富Web 网页功能 2. 丰富Web界面
微软Edge 内嵌的JavaScript 引擎即将开源
微软于今日（2015年12月10日）宣布即将开源Chakra核心控件，并改名为“ChakraCore”,该控件包含所有Edge JavaScript 引擎的所有核心功能。ChakraCore 将于下月发布在GitHub中。 Chakra提供了顶级的JavaScript处理功能，并具有非常强大的性能优
1000多个项目中的十大JavaScript错误以及如何避免
通过统计数据库中的1000多个项目，我们发现在 JavaScript 中最常出现的错误有10个。本文会向大家介绍这些错误发生的原因以及如何防止。
TypeScript VS JavaScript 深度对比
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言，我们已经熟知 TypeScript 是 JavaScript 的一个超集，但是 TypeScript 与 JavaScript 之间又有什么样的区别呢？在选择开发语言时，又该如何抉择呢？
2017年 JavaScript 框架回顾 -- 后端框架
本文是2017年 JavaScript 框架回顾系列的最后的一篇文章，主要介绍 JavaScript 的后端框架情况。
JavaScript 开发人员需要知道的简写技巧
本文来源于多年的 JavaScript 编码技术经验，适合所有正在使用 JavaScript 编程的开发人员阅读。本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作。
前端开发者常用的9个JavaScript图表库
对于前端开发人员来说，如果能够掌握交互式网页中的数据可视化技术，则是一项很棒的技能。当然，通过一些 JavaScript 的图表库也会使前端的数据可视化变得更加容易。
顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期，就有一个新的 JavaScript 库席卷网络社区！Web 社区日益活跃、多样，并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库，是个不可能完成的任务。接下来，我会分享一些前端开发的最著名和最有影响力的框架和库。下面，就让我们一起来看看，顶级的 JavaS
一张图告诉你最流行的 7 个 JavaScript框架特点
AngularJ.js 由google开发，2009年首次发布 很流行的前端框架 使用Angular.js创建第一个UI，成本很低 对于团队来说，AngularJ.js有许多很棒的工具可用 很适合创建一个快速、混合型复杂的解决方案 比起React，更合适于创建小型企业级应用 由Google负责维护基
1分钟选好最合适你的JavaScript框架
Javascript框架（以下简称框架）也被称为Javascript库，是一组包含丰富功能和函数的JavaScript代码集，能够帮助开发者快速完成Web设计和开发工作。随着Web社区的越发活跃，新的框架也层出不穷，目前流行的有：Angular、React、Vue.js和Knockout等。 面对如
2017年 JavaScript 框架回顾 -- 前端框架
对于 JavaScript 社区来说，npm 的主要功能之一就是帮助开发者发掘所需的 npm Registry 中的库和框架。npm 强大的搜索功能能够帮助找到一组相关的软件包，同时其内置的的文档和使用统计信息，可以帮助开发者决定使用哪一种软件包。
SpreadJS使用进阶指南
前言 SpreadJS作为一款性能出众的纯前端电子表格控件，自2015年发布以来，已经被广泛应用于各领域“在线Excel”数据管理项目中。NPM，作为管理Node.js库最有力的手段，解决了很多NodeJS代码部署的问题。 如今，为让您更方便的使用产品和更好地管理项目中的SpreadJS代码，我们已
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中，我们介绍了2017年 JavaScript 框架的整体情况。我们也了解到在众多的前端框架中，目前最为庞大又在快速增长的当属React了，本文就来重点介绍React的生态系统。
ES2017异步函数现已正式可用
ES2017标准已经于2017年6月份正式定稿了，并广泛支持最新的特性：异步函数。如果你曾经被异步JavaScript的逻辑困扰，这么新函数正是为你设计的。
Top 10 JavaScript编辑器，你在用哪个？
本文将会讨论10个优秀的支持JavaScript，HTML5和CSS开发，并且可以使用Markdown进行文档编写的文本编辑器。
JavaScript中的内存泄漏以及如何处理
随着现在的编程语言功能越来越成熟、复杂，内存管理也容易被大家忽略。本文将会讨论JavaScript中的内存泄漏以及如何处理，方便大家在使用JavaScript编码时，更好的应对内存泄漏带来的问题。
JavaScript 性能优化技巧分享
JavaScript 作为当前最为常见的直译式脚本语言，已经广泛应用于 Web 应用开发中。为了提高Web应用的性能，从 JavaScript 的性能优化方向入手，会是一个很好的选择。本文从加载、上下文、解析、编译、执行和捆绑等多个方面来讲解 JavaScript 的性能优化技巧，以便让更多的前端开
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot