CSS魔法
边角透明化
目前的两个小缺憾： - 边角不透明 - 在页面缩放时，边角容易出现残影线条 它们其实源自同一个问题——现有的折角效果是使用遮挡实现的。 我周末粗略思考了一下，要实现边角透明化，动作会比较大。 - 首先布局方式会很复杂，我就不太乐意写裸 CSS 了（我会采用 Stylus 来做一些布局计算），这意味着源码格式会变。 - 另一方面，改变布局方式之后，自定义颜色的方式会变化（改为 `color` 属性），虽然似乎语义更好，但毕竟是改变了现有接口。 鉴于以上原因，我没有冒然提一个 PR 上来。如果作者可以接受上述两大改动，我会写好 PR 发上来；如果不愿意，我可以写个透明边角的 demo，然后作者自己完成后绪工作。
## Video / 视频 * https://www.bilibili.com/video/BV1p541127JF/ ## Slides / 幻灯片 > 此分享的幻灯片实验性地采用了纯 JS 代码的形式。 ```js // MY STORY ABOUT CLICK-EVENT-BINDING // @CSSMAGIC ``` ```js // BACKGROUND ``` ```js // ONE...
> 如果你还不清楚这个库的用处，[请参阅《简介》](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() }) ```...
> ### 前言 > > ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时，ESLint 就会提示错误。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你顺利地把既有代码迁移到 ESLint 的保护之中。 ## `no-fallthrough` > 禁止在 `switch`/`case` 语句中使用穿透特性。 我们在 JS（以及大多数类 C 语言）里写 switch/case...
> ### 前言 > > ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时，ESLint 就会提示错误。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你顺利地把既有代码迁移到 ESLint 的保护之中。 ## `no-empty` > 禁止出现空代码块，比如 `if`/`else`/`for`/`catch` 等代码块都在报警之列。 比如下面这个判断语句，`if` 块就是空的： ```js if (foo)...
> ### 前言 > > ESLint 是目前最主流、最强大的 JS 代码校验工具。当我们的代码触发了 ESLint 的报警规则时，ESLint 就会提示错误。 > > 本系列文章将详细讲解那些需要手工介入修复的 ESLint 规则，帮助你顺利地把既有代码迁移到 ESLint 的保护之中。 ## `no-return-assign` > 禁止 `return` 一个赋值表达式。 虽然函数允许 `return` 一个赋值表达式，但这种写法令人困惑： ```js function...