当前位置:首页 > 短网址资讯 > 正文内容

【FT12短网址】事件代理:模式 or 反模式?

www.ft12.com8年前 (2017-08-04)短网址资讯2149

前言

终于熬过四个月了,人都黑了一圈。8 月 4 号的早读文章由 @ 文蔺翻译授权分享。

正文从这开始~

JavaScript 工具包(toolkit)和框架所做的大量工作,都集中于尝试修复、规范或优化浏览器的功能实现。此类工作需要做出许多假设,这些假设包括:问题是什么,开发人员将如何使用我们的工具,以及我们对未来的期望。

但这些假设经常是错误的。更有甚者,在很长一段时间内,这些选择可能貌似正确,直至某天我们被问题反咬一口。在这个无知的幸福时期当中,我们的工具包可能变得相当受欢迎,并成为大型复杂代码库的重要组成部分。

事件冒泡与事件代理

事件冒泡允许源自子节点的事件向父级节点“冒泡”(bubble)。这种行为导致 JavaScript 开发者使用松散的设计模式来识别我们所关心的接收事件的节点 —— 通常使用 CSS 选择器 —— 同时将事件监听器添加到该节点的父级节点上。

一旦这种模式进入工具包之中,设计 API 时须做出一些假设。在开始阶段,这些假设主要围绕性能与效率展开。

事件代理(Event Delegation)是处理事件的实际方法之一。然而,这种方法论适用于所有项目吗?实际上,更好的问题可能是,每个工具包的所基于的假设是否与你的项目需求相符。要想知道某个 API 是否适合当下项目,就要了解这些工具是建立在哪些假设之上的,并且理解每个工具包如何解释它们。

假设

一起来看看,在思考如何有效管理 DOM 事件时可能会产生的一些假设。

本机事件注册机制太慢

在你能够提出 API 存在的继发原因之前,不要创建新的 API。随着浏览器厂商们对运行时的投入增加,你的功能实现总有一天会比原生实现慢。我所在的 SitePen 有一个项目依赖于数组拼接(splice)速度。我们发现,在某些情况下,手动操作索引和数组长度能够带来显著的性能提升。但我们无法定位到特定浏览器、浏览器版本或平台,因为无法进行运行时功能测试以确定我们的实现是否比原生 API 快。

新的原生 API 不会出现

保持谨慎,确保已收集到足够的信息,可以降级使用原生实现 —— 无论是已存在的,还是理想情况下可能存在的。这项工作的另一个名字叫“预防过时”(future proofing)。在某些情况下,你可能会使用必需参数超出绝对需要的 API,但如果它l能够保证轻松地过渡到更优秀的原生 API,那么完全可以如此。一个很好的例子是最终获得原生支持的 querySelectorAll API,之前许多开发人员假设这种事永远不会发生。

不常见用例没有性能损失

事件代理可能会以数种方式呈现。例如两种特殊情况:大量节点上的少量事件,以及少数节点上的大量事件。如果针对其中之一进行优化,则可能会为另一个带来明显的瓶颈。虽然使用事件代理可能只需要向单个节点添加一个事件侦听器,但识别触发回调的节点的复杂方法对性能的影响可能不成比例。快速触发大量事件(例如鼠标移动或滚动事件)正是使用事件代理的场景。

条件与背景

在考虑事件代理时,很容易认为我们只需要关心用户交互。这可能导致我们假设节点始终是文档的一部分,然后开始思考,为何不在 document 对象上添加单个事件处理程序呢?DOM 事件并非总是用户交互的结果 —— 我们也有人为事件、自定义事件以及加载事件等。如果想要监听的节点不在文档中,而监听器却绑定在 document 对象上,我们永远得不到通知。如果在 API 中无法区别监听器是添加到 document 上,抑或是添加到我们所传递的参数上,则能够理解为什么会出现这种情况。

抽象

如果一个工具包提供一个仅用于支持代理的事件处理 API —— 需要父级节点和标识子节点的选择器 —— 则无法将事件监听器直接添加到某个节点。即使是使用 CSS 选择器,也引入了更高级的功能,可以轻松地使用另一种选择器语法或简单函数。

不会发生副作用

如上所述,DOM 事件冒泡是事件代理模式存在的前提。但是了解完整规范所涉及的内容之后,你会发现,事件冒泡是可以取消的。你的实现可能会将 stopPropagation 方法为空函数的自定义事件传递给回调函数;或者,你可能只会记录问题,并限制事件代理 API 的使用。这两种方法都有问题,但是如果你打算像为 document 对象事件处理程序那样工作,添加大量可取消的事件层可能放大副作用。

不受时间影响

一旦代码编写完成,很可能就会弃而不顾。但浏览器正在以我们无法想象、预测的方式向前发展,我们在编写代码时所做的假设可能会被证明是错误的,尽管我们尽了最大的努力。

总结

为什么要在项目中使用事件代理?

原生实现太慢了吗?对现代浏览器来说不太可能。

是否有更好的 API 来执行事件代理?目前还没有 —— 如果你需要事件代理,这是一个很好的模式。

该工具包的性能优化是否符合项目需求?如果它专注于特殊情况,可能不会。

工具包的实现中有没有什么不适用于你的项目的内容?阅读文档,这些通常都会标出。

是否有副作用?遇到错误前你可能不会发现这一点,所以要特别注意。

人们在不了解创作假设的情况下,所有设计模式都有成为反模式的风险,所以对项目中使用的任何新工具都应当回答同样的问题。如果你所做的似乎是在抄近路,要特别小心。谨慎、多加思考,才能使项目发光。

扫描二维码推送至手机访问。

版权声明:本文由短链接发布,如需转载请注明出处。

本文链接:https://www.ft12.com/article_377.html

标签: 代理模式
分享给朋友:

相关文章

腾讯推行信用分的背后,或许是小程序电商的铺垫

腾讯推行信用分的背后,或许是小程序电商的铺垫

前言  最近腾讯信誉分开端进行灰度测验,引起了相当多的重视。  事实上,腾讯信征早已对外开放,而且推出时刻和芝麻信誉一样,同样是2015年。  只不过彼时腾讯只推出了信征报告,能够查询的内容也比较有限,其给出当前信誉较好、较差,以及当前排名...

不要在年纪轻轻的时候学会了过日子

不要在年纪轻轻的时候学会了过日子

女人的人生路线不应该是奔向家庭主妇,好男人的标准不应该是贤惠持家。我们共同的理想,都不应该是归于平凡。01在我很小的时候,我就经常听街坊邻里夸隔壁家张婆婆的儿媳妇又漂亮又懂事,白天上班晚上就回家从来不出去瞎玩,跟她男人规规矩矩地过日子,有这...

携程和饿了么隔空回怼 美团点评触动了什么?

携程和饿了么隔空回怼 美团点评触动了什么?

2015年,王兴带领下的美团点评开始打破边界,开疆拓土,当越来越多的友商抱怨“公牛闯进瓷器店”时,王兴却抛出了“互联网下半场共存是常态”的新理论,“不冒进,广交朋友,永不称霸”。而600多年前,同样内涵的话是这么说的:高筑墙,广积粮,缓称王...

理解短网址在移动互联网的作用

理解短网址在移动互联网的作用

引言这几天无事,仔细研究了一下移动互联网的发展趋势以及在这个过程中出现的每个新鲜事物。然后我发现了短网址在移动互联网的发展中有着不可替代的作用。顾名思义,短网址就是提供网址缩短服务,使得长链接能以比较美观的短链接的形式在互联网以及移动营销中...

线下成电商必争之地 京东美团陆续在京开店

在推翻了传统商超之后,电商却一直企图和它们做兄弟,2017年,在用O2O与线下零售合作遭受重重困阻之后,电商公司干脆做起了自营超市。阿里旗下的盒马鲜生一度成为新零售的代表,而该公司创始人侯毅的老东家京东,也不想错失新式线下超市的时机。据联商...

淘宝&支付宝:连续一段时间未登录将销号

淘宝&支付宝:连续一段时间未登录将销号

日前阿里巴巴对旗下淘宝、支付宝平台的服务协议进行了修改,对于用户的权利和义务进行了更细致的界定,同时规定在淘宝、支付宝平台的非活跃用户在一定时间之后将会进行销号处理。淘宝平台方面,此次新增加规定,用户不得以任何方式转让,否则淘宝平台有权追究...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。