欢迎来到《前端精选》，这里记录有趣的见闻，每周一发布。

封面

大兴机场

话题

分工陷阱

工业界引入的 流水线 式生产，在大大提高生产效率的同时，也让分工思想深入人心，但是对于流水线上的工人而言，这种思想却充满陷阱。

首先是分工让人和流水线高度绑定，一旦脱离，你的技能将无处施展；其次你也无法左右其他环节的产出质量，但最终结果却取决于每一个环节；最后是可替代性高，且由此导致的议价能力低下。

这么看前端是否有些许类似？你有哪些关于分工的思考，欢迎留言讨论。

见闻

纯 JavaScript 实现并发控制

实现并发控制是常见的前端面试题，本文介绍了一种利用迭代器的实现方法，非常简洁巧妙。

export default async function limit(tasks, concurrency) {
  const results = [];

  async function runTasks(tasksIterator) {
    for (const [index, task] of tasksIterator) {
      try {
        results[index] = await task();
      } catch (error) {
        results[index] = new Error(`Failed with: ${error.message}`);
      }
    }
  }

  const workers = new Array(concurrency)
    .fill(tasks.entries())
    .map(runTasks);

  await Promise.allSettled(workers);

  return results;
}

移除事件监听的几种方式

本文介绍了 removeEventListener、once 选项、克隆/替换、AbortController 4种移除事件监听的方式和适用场景，非常全面，可以说移除事件监听的方式都在这里了。

14条异步 JavaScript 代码规则

本文介绍了有关异步 JavaScript 代码的14条 eslint 规则，其中通用7条、nodejs 3条、TypeScript 4条，同时文中也指出如果有不能遵从的情况，建议用 eslint 注释暂时关闭规则。本人以为，这些规则可以无脑套用，可以帮助写出简洁、稳健的代码。

dialog 元素介绍

长期以来，我们都是用 position:fixed 定位来实现对话框的，本文介绍的 HTML 原生标签 dialog，可以轻松实现此类功能，文章从显示、关闭、取值、样式等方面介绍了 dialog，相当全面。

用 animation-time 实现滚动阴影

区块滚动时，一般会在交界处画个阴影便于区分，如何实现这种滚动时才有的阴影呢？本文介绍了 animation-time 属性，它能根据滚动进度控制动画进度，从而实现了上述效果。

如何用 CSS 创建波形

本文介绍了如何实现波形的原理和步骤，主要利用相切圆弧、配合 CSS 变量来模拟波形，还提供了一个配置并生成波形 CSS 的在线工具。

制作圆锥渐变的时钟

在第一期收录了一篇“用 CSS 三角函数实现时钟”文章，本文还是制作时钟，所不同的是，作者利用 conic-gradient 实现了界面圆锥渐变效果，比较美观。

用 Type 还是 Interface?

本文介绍 Type 和 Interface 的区别，主要是 Interface 不能表达联合、映射、条件类型，但可以使用 extends；应该默认使用 Type，除非遇到 Interface 独有的特性才用 Interface。

typograms - 渲染 ASCII 图工具

这是一个能渲染 ASCII 简图的工具，它使用 ASCII 中一部分表示图，并将其绘制成常用的点、线、面，如下图，左边是字符，右边是渲染效果。

Screen Shot 2023-08-27 at 19.49.27.png

Croner - JavaScript/TypeScript cron 工具

cron 是描述定时任务的常用格式，此工具是 JS/TS 的实现版本。

前端精选#3 分工陷阱

封面

话题

见闻