action
action copied to clipboard
cssmagic
Easy and lazy solution for click-event-binding.
## Video / 视频 * https://www.bilibili.com/video/BV1p541127JF/ ## Slides / 幻灯片 > 此分享的幻灯片实验性地采用了纯 JS 代码的形式。 ```js // MY STORY ABOUT CLICK-EVENT-BINDING // @CSSMAGIC ``` ```js // BACKGROUND ``` ```js // ONE...
Update https://registry.npm.taobao.org to https://registry.npmmirror.com, For more info please refer to https://zhuanlan.zhihu.com/p/430580607. This is an automated PR by @npmmirror (Which is a bot maintained by 8d6e8cefe5a7e3202364ec2c48db03fcc544218cf70100bf65d2ed2df5cc83da).
> 如果你还不清楚这个库的用处，[请参阅《简介》](https://github.com/cssmagic/action/issues/12)。 ## 术语约定 * 动作 -- 你有一件特定的事情要做，可以将它定义为一个 “动作”，以便在必要时触发它。 * 动作名 -- 每个动作都需要有一个名字，即 “动作名”。 * 动作函数 -- 每个动作的行为使用函数来描述，即 “动作函数”。 ## HTML 接口 页面中的 DOM 元素可以通过 `data-action` 属性来声明自己被点击时要执行的动作。比如点击下面的链接和按钮就可以分别触发名为 `foo` 和 `bar`...
# 为什么 `.add()` API 没有采用队列机制？ > 本问题摘自 C4 前端交流会的现场观众提问。 ## 背景 大家最熟悉的 DOM 事件 API `.addEventListener()` 是队列机制——可以为元素的同一事件多次添加事件处理函数，当事件触发时，这些事件处理函数会被依次调用。 因此，当大家看到 `action.add()` 这个 API 时，很自然就会发出疑问：它的工作方式是队列式吗？如果不是，为什么？ ## 文档 实际上 `.add()` API 并没有设计队列机制。对于重复添加同名动作的情况，文档是这样描述的： > 如果在定义动作时使用了已经存在的动作名，则相当于用新的动作函数替换原有的动作函数。**原因在于...
# 所有元素都可以用 Action 来绑定点击事件吗？ 从技术上来说，Action 对 `body` 元素内的所有元素生效。但是，我只推荐你对 ``、`` 和 `` 等元素使用 Action 来绑定点击事件。 这有几方面的原因，下面一一道来。 ## 语义 上面列出的这些元素都是天生可以与用户进行交互的元素，天生承接用户的点击行为。用户点击它们就是为了触发一些动作，我将它们称为 “动作元素”。 由于这些元素天生具备可交互的特性，浏览器通常也会为它们设置特殊的默认样式，比如暗示可点击的手形鼠标光标、预设的 `:hover` `:focus` `:active` 样式等等。 而除此以外的其它元素大多是以呈现信息为已任，虽然它们也可以被点击、也会产生点击事件，但从语义上看，并不是最佳选择。 ## 移动端 当使用 Action 为...
# 所有点击都要冒泡到 body 元素再处理，性能如何？ > 本问题摘自 C4 前端交流会的现场观众提问。 ## 担忧 运行性能对于类库来说，是一个非常重要的指标。性能优劣往往会左右开发者对于类库的选择。 对 Action 的性能担忧主要在于以下两点： - `body` 元素要处理所有动作。 - 点击事件触发后要等到冒泡到 `body` 元素时才会被处理。 ## 前提 在分析性能问题之前，我们需要了解一个概念——“累积效应”。 很多性能测试都是利用大量重复来放大差异，比如分别把两个函数重复执行数万次，再比较两者的耗时长短。这种性能测试方式对数据处理的场景是合适的，因为此时程序的运行模式是同步的，且性能与执行次数（或数据的复杂度）正相关，存在“累积效应”。 举个例子。我写了一个性能不佳的数组 `map()` 方法，在处理小数组时可能察觉不到异常，但在处理大数组时，性能问题就会突显。**在这种存在累积效应的场景下，单次执行的性能差异往往直接影响最终性能。** ## 分析...
# 动作函数的执行上下文（`this` 指向）是如何处理的？ ## 误解 在 C4 前端交流会上播放的 [幻灯片](https://github.com/cssmagic/action/issues/11) 里有这样一段代码： ``` js $body.on('click', '[data-action]', function () { var actionName = $(this).data('action') var action = actionList[actionName] if ($.isFunction(action)) action() }) ```...
我有个问题，这个action只适用于简单的埋点场景，我呆过的两家it公司，埋点上报的基本都是很复杂的数据，很多数据与业务逻辑无关，这就需要大改原来的代码，一层一层把数据数据传下来，这种改动对源码来说是毁灭性的，很多人痛疼的埋点问题应该也是这个，这个要如何解决[吃瓜]
