场景吾辈在写 vuejs 前端项目的时候，需要实现一个下拉文章列表时，出现一个悬浮按钮，用于一键回到文章顶部。 实现 实现源码放到了 GitHub，Demo 演示 想直接看源码/效果的人可以直接去看，但最好看一下 注意点 思路 定义一个 vuejs 组件，抽取出最需要的几个属性（位置，组件的样子） 监听窗口滚动，当滚动到第二屏的时候显示组件 监听组件点击，点击即逐渐减少与顶端的距离 当在滚动中用

场景网络上已经存在了大量的有关 防抖 和 节流 的文章，为何吾辈还要再写一篇呢？事实上，防抖和节流，吾辈在使用中发现了一些奇怪的问题，并经过了数次的修改，这里主要分享一下吾辈遇到的问题以及是如何解决的。 为什么要用防抖和节流？因为某些函数触发/调用的频率过快，吾辈需要手动去限制其执行的频率。例如常见的监听滚动条的事件，如果没有防抖处理的话，并且，每次函数执行花费的时间超过了触发的间隔时间的话 –

场景在日常编写 JavaScript 代码的过程中，或许会遇到一个很常见的问题。根据某个状态，进行判断，并执行不同的操作。吾辈并不是说 if-else 不好，简单的逻辑判断 if-else 毫无疑问是个不错的选择。然而在很多时候似乎我们习惯了使用 if-else，导致代码不断庞大的同时复杂度越来越高，所有的 JavaScript 代码都乱作一团，后期维护时越发困难。 GitHub, 演示地址

场景 圣人走过的道路，荆棘遍布，火焰片片焚烧…… 日常 review 代码时看到一些奇怪的代码，这里记录一下重构方案以及原因。 命名规范不要使用拼音命名如果不熟悉英语，可以使用 Codelf 或者 Google 翻译，避免使用拼音命名。 错误示例 12// 这里是用户状态const yongHuZhuangTai = 1 正确示例 1const userStatus = 1 函数中的变量js

为什么需要它有些时候不得不需要限制并发 fetch 的请求数量，避免请求过快导致 IP 封禁 需要做到什么 允许限制 fetch 请求同时存在的数量 时间过久便认为是超时了 如何实现暂停请求 该方法的请求是无序的！ 使用 class 定义默认超时设置和请求数量限制的构造函数 在请求前判断当前请求的数量，添加请求等待数量 如果请求数量已满，则进行等待 如果请求数量未满，则删除一个请求等待数量

场景 SegmentFault 在使用 async-await 时，吾辈总是习惯把它们当作同步，终于，现在踩到坑里去了。使用 setTimeout 和 setInterval 实现的基于 Promise 的 wait 函数，然而测试边界情况的时候却发现了一些问题！ 实现代码 12345678910111213141516171819202122/** * 等待指定的时间/等待指定表达式成立 *

场景 死后我们必升天堂，因为活时我们已在地狱。 不知你是否遇到过，向后台发送了多次异步请求，结果最后显示的数据却并不正确 – 是旧的数据。 具体情况: 用户触发事件，发送了第 1 次请求 用户触发事件，发送了第 2 次请求 第 2 次请求成功，更新页面上的数据 第 1 次请求成功，更新页面上的数据 嗯？是不是感觉到异常了？这便是多次异步请求时会遇到的异步回调顺序与调用顺序不同的问题。 思考

场景 吾辈是一只在飞向太阳的萤火虫 JavaScript 中的数组是一个相当泛用性的数据结构，能当数组，元组，队列，栈进行操作，更好的是 JavaScript 提供了很多原生的高阶函数，便于我们对数组整体操作。然而，JavaScript 中的高阶函数仍有缺陷 – 异步！当你把它们放在一起使用时，就会感觉到这种问题的所在。 例如现在，有一组 id，我们要根据 id 获取到远端服务器 id 对应的值

场景 虽说人人平等，但有些人更加平等。 为什么有了 Lodash 这种通用函数工具库，吾辈要写这篇文章呢？吾辈在 SegmentFault 上经常看到关于 JavaScript 数组的相关疑问，甚至于，相同类型的问题，只是数据变化了一些，就直接提出了一个新的问题（实际上，对自身并无帮助）。简单搜索了一下 Array，居然有 2360+ 条的结果，足可见这类问题的频率之高。若是有一篇适合 Java

场景在一个新的项目时，需要在 JavaScript 中编写与后端对应的实体类时，因为不想使用下面的方法定义类了，感觉实在不够灵活… 123var User = { //more field and function} 或者 123function User() { //more field and function} 解决 目前 ES6 已经完全普及开来，所以如果需要定义类的话，请使用 E

场景前端项目中，有一些需要处理树结构数据的情况，（一年）之前吾辈曾经写过一篇文章，但现在，吾辈有了更好的解决方案。 思考之前吾辈使用 Proxy 的方式抹平树结构数据的差异，然后再处理。后来吾辈发现这完全是多此一举，在使用过 antd 的 Tree 组件、deepdash 之后，确实第一步是完全没有必要的。 以下代码均由 TypeScript 实现，最好能了解 TypeScript 类型操作

场景在今天写 JavaScript 函数时，发现了一个有趣的技巧。 在此之前，吾辈想知道泥萌需要默认值的时候是如何做的呢？ 例如下面的函数 print，吾辈需要在没有给定参数 user 的情况下，给出合适的输出 123456789101112function print(user) { if (!user) { user = {} } if (!user.name) { user