5 个提升你 JavaScript 编码水平的实例( 二 ) _小知识

var el = document.querySelector(".moveBox");getOffset(el); // {top: xxx, left: xxx}

文章插图

我们可以看上面的摇杆效果，这里就是利用了offset()去做位置判断。具体实现代码可以看：https://codepen.io/krischan77/pen/zYxPNPy
Fade 特效

// Fade invar fadeIn = function (el) {el.style.opacity = 0var last = +new Date()var tick = function() {el.style.opacity = +el.style.opacity + (new Date() - last) / 400last = +new Date()if (+el.style.opacity < 1) {requestAnimationFrame(tick))}}tick()}// Fade outvar fadeOut = function (el) {el.style.opacity = 1var last = +new Date()var tick = function() {el.style.opacity = +el.style.opacity - (new Date() - last) / 400last = +new Date()if (+el.style.opacity > 0) {requestAnimationFrame(tick)}}tick()}

上述是淡入淡出效果的具体实现，这里是利用requestAnimationFrame对opacity通过递归的方式进行修改。
其实这里需要提一个概念，就是时间分片。
这是一个非常重要的概念，例如 React 的 Fiber 核心实现就是时间分片。它会将一个长任务切分成一个含有若干小任务的任务队列，然后一个接着一个的执行。
requestAnimationFrame就是这样一个 API，它可以根据系统来决定回调函数的执行时机，其实也就是在下一次重绘之前更新动画帧，因为有这样的机制，所以能防止丢帧。
利用队列的概念进行数据操作队列（queue），是先进先出（FIFO, First-In-First-Out）的线性表。在具体应用中通常用链表或者数组来实现。队列只允许在后端（称为 rear）进行插入操作，在前端（称为 front）进行删除操作。
虽然很多人觉得了解数据结构对前端作用不大，但是如果我们懂一些基础的概念，是否在编码时能够更加扩散我们的思维呢？我们看下面两个例子：
获取节点在该父节点下的坐标。如果我们要操作原生 DOM，那么是绕不开获取节点在该父节点的下标的这个功能的，那么我们该如何实现呢？
当然就是利用我们的循环啦，对子元素集合进行遍历，直到确定下标为止，代码如下：
var index = function(el) {if (!el) {return -1;}var i = 0;while ((el = el.previousElementSibling)) {i++;}return i;};清空子节点如果我们要清空某个 DOM 节点的子节点，我们有以下的方法：
var empty = function(el) {while (el.firstChild) {el.removeChild(el.firstChild);}};上面只是提供一个思路，其实el.innerhtml = ''会更简洁。
利用 reduce 进行数据优化数组去重没错，又是一个老生常谈的问题，数组去重，但是我们这次去除的不仅仅是单个的数据，而是拥有某个相同键值的对象集合。例如下面的例子，我们有以下的数据：
牛逼的 reduce数据去重首先我们来看看一个老生常谈的问题，我们假设有这样的一个对象：

const data = https://www.isolves.com/it/cxkf/yy/js/2020-05-11/[{name: "Kris",age: "24"},{name: "Andy",age: "25"},{name: "Kitty",age: "25"},{name: "Andy",age: "25"},{name: "Kitty",age: "25"},{name: "Andy",age: "25"},{name: "Kitty",age: "25"}];

现在我们要去重里面name重复的对象，这时候我们可以利用reduce，例子如下：

const dataReducer = (prev, cur, idx) => {let obj = {};const { name } = cur;obj[name] = cur;return {...prev,...obj};};const reducedData = https://www.isolves.com/it/cxkf/yy/js/2020-05-11/data.reduce(dataReducer, {});let newData = Object.values(reducedData);

批量生成对象元素在鱼头的实际业务中，有一个操作是需要对类似以下的对象进行操作的：
{a1: 'data',a2: 'data',...,an: 'data'}像我这么懒的鱼，肯定不会一个个手写，所以就有了以下方法

const createList = (item, idx) => {let obj = {};obj[`a${idx}`] = "data";return obj;};const listReducer = (acc, cur) => (!acc ? { ...cur } : { ...cur, ...acc });const obj = Array.from(new Array(20), createList).reduce(listReducer);