实用ES6代码片段

JavaScript

将字符串复制到剪贴板

  1. const copyToClipboard = str => {
  2.   const el = document.createElement(‘textarea’);
  3.   el.value = str;
  4.   el.setAttribute(‘readonly’, ”);
  5.   el.style.position = ‘absolute’;
  6.   el.style.left = ‘-100%’;
  7.   document.body.appendChild(el);
  8.   const selected =
  9.     document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  10.   el.select();
  11.   document.execCommand(‘copy’);
  12.   document.body.removeChild(el);
  13.   if (selected) {
  14.     document.getSelection().removeAllRanges();
  15.     document.getSelection().addRange(selected);
  16.   }
  17. };
  19. // 例子
  20. copyToClipboard(‘195440.com’); // ‘195440.com’ copied to clipboard.

判断元素是否在可视窗口可见

使用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 值来确定给定元素是否在可视窗口中可见。 省略第二个参数来判断元素是否完全可见，或者指定 true 来判断它是否部分可见。

  1. const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  2.   const { top, left, bottom, right } = el.getBoundingClientRect();
  3.   return partiallyVisible
  4.     ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
  5.       ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
  6.     : top >= 0 && left >= 0 && bottom < = innerHeight && right <= innerWidth;
  7. };
  9. elementIsVisibleInViewport(el) -> false (not fully visible)
  10. elementIsVisibleInViewport(el, true) -> true (partially visible)

在给定元素上触发特定事件，并可选地传递自定义数据

  1. const triggerEvent = (el, eventType, detail) =>
  2.  el.dispatchEvent(new CustomEvent(eventType, { detail }));
  4. // 例子
  5. triggerEvent(document.getElementById(‘myId’), ‘click’);
  6. triggerEvent(document.getElementById(‘myId’), ‘click’, { username: ‘bob’ });

链式调用异步函数

循环遍历包含异步事件的函数数组，每次异步事件完成后调用 next 。

  1. const chainAsync = fns => { let curr = 0; const next = () => fns[curr++](next); next(); };
  3. chainAsync([
  4.   next => { console.log(‘0 seconds’); setTimeout(next, 1000); },
  5.   next => { console.log(‘1 second’);  setTimeout(next, 1000); },
  6.   next => { console.log(‘2 seconds’); }
  7. ])

运行连续的 promise

使用 Array.reduce() 通过创建 promise 链来运行连续的 promises，

其中每个 promise 在 resolved 时返回下一个 promise 。

  1. const series = ps => ps.reduce((p, next) => p.then(next), Promise.resolve());
  2. const delay = (d) => new Promise(r => setTimeout(r, d));
  3. series([() => delay(1000), () => delay(2000)]);

本文链接地址: 实用ES6代码片段

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注