30-seconds-code——browser

作者: 缘自世界 | 来源:发表于2018-01-04 23:15 被阅读0次

英文文章来源于：https://github.com/Chalarangelo/30-seconds-of-code/blob/master/README.md

Browser

currentURL

返回当前页面的 URL。

用 window.location.href 获得当前的 URL.

const currentURL = () => window.location.href;
// currentUrl() -> 'https://google.com'

getURLParameters

返回一个包含当前页面 URL 的参数的对象.

用 match() 和一个合适的正则来获得所有的键值对，用Array.reduce() 去映射它们到一个对象内。
用 location.search 获得当前 url 的参数.

const getURLParameters = url =>
  url.match(/([^?=&]+)(=([^&]*))/g).reduce(
    (a, v) => (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1), a), {}
  );
// getURLParameters('http://url.com/page?name=Adam&surname=Smith') -> {name: 'Adam', surname: 'Smith'}

redirect

重定向到一个指定的 URL.

用 window.location.href 或 window.location.replace() 重定向 url 。
如果asLink 为 true，则模拟一个 <a href="https://google.com"></a> 链接单击，否则为重定向。

const redirect = (url, asLink = true) =>
  asLink ? window.location.href = url : window.location.replace(url);
// redirect('https://google.com')

httpsRedirect

如果它当前在HTTP中，将页面重定向到HTTPS。另外，按后退按钮不会将其返回到HTTP页面，因为它在历史中被替换了。

用 location.protocol 去获得当前所使用的协议。如果不是 HTTPS，用 location.replace() 将当前页转换为使用 HTTPS 协议。用 location.href 去获得链接地址，用 String.split() 移除当前 URL的协议。

const httpsRedirect = () => {
  if(location.protocol !== "https:") location.replace("https://" + location.href.split("//")[1]);
}

detectDeviceType

检测网站是在移动设备，还是在桌面/笔记本上打开。

用一个正则表达式检测 navigator.userAgent 属性来判断是移动设备还是桌面/笔记本。

const detectDeviceType = () =>
  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
    ? 'Mobile'
    : 'Desktop';
detectDeviceType(); // "Mobile" or "Desktop"

scrollToTop

平滑滚动到页面顶部。

用 document.documentElement.scrollTop 或 document.body.scrollTop 得到页面滚动后的top值。
用 window.requestAnimationFrame() 去实现平滑滚动.

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
// scrollToTop()

elementIsVisibleInViewport

如果指定的元素出现在可视窗口内，返回 true；否则，返回 false .

用 Element.getBoundingClientRect() 和 window.inner(Width|Height) 的值来判断给定元素是否在可视窗口内.
如果忽略第二个参数或者指定为 true 将判断元素的部分出现在可是窗口内。

const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
      ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
// e.g. 100x100 viewport and a 10x10px element at position {top: -1, left: 0, bottom: 9, right: 10}
// elementIsVisibleInViewport(el) -> false (not fully visible)
// elementIsVisibleInViewport(el, true) -> true (partially visible)

bottomVisible

如果到达页面可显示区域的底部，返回 true ，否则返回 false .

用 scrollY, scrollHeight 和 clientHeight 去判断是否到达页面可显示区域底部.

const bottomVisible = () =>
  document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
// bottomVisible() -> true

getScrollPosition

返回页面滚动后的位置，也即是html文档的卷起位置.

如果浏览器支持 pageXOffset 和 pageYOffset 就用它们；否则就用 scrollLeft 和 scrollTop.
参数 el 的默认值为 window.

const getScrollPosition = (el = window) =>
  ({x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft,
    y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop});
// getScrollPosition() -> {x: 0, y: 200}

getStyle

返回指定元素属性的css值。

用 Window.getComputedStyle() 去获取指定元素的属性值。

const getStyle = (el, ruleName) => getComputedStyle(el)[ruleName];
getStyle(document.querySelector('p'), 'font-size'); // '16px'

hasClass

如果一个元素有指定的 class，返回 true ；否则，返回 false.

用 element.classList.contains() 去判断一个元素是否有一个指定的class.

const hasClass = (el, className) => el.classList.contains(className);
hasClass(document.querySelector('p.special'), 'special'); // true

toggleClass

切换一个元素的class。

用 element.classList.toggle() 去切换指定元素的class。

const toggleClass = (el, className) => el.classList.toggle(className);
toggleClass(document.querySelector('p.special'), 'special'); // 这个段落将不再有 'special' class

setStyle

设置指定元素css样式属性的值.

用 element.style 设置指定元素的样式 value。

const setStyle = (el, ruleName, value) => (el.style[ruleName] = value);
setStyle(document.querySelector('p'), 'font-size', '20px'); // The first <p> element on the page will have a font-size of 20px

hide

隐藏所有指定的元素。

用 spread (...) 操作符和 Array.forEach() 去给所有的指定元素添加 display: none 样式。

const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page

show

显示所有指定的元素

用spread (...) 操作符和 Array.forEach() 清除所有指定元素的 display 属性。

const show = (...el) => [...el].forEach(e => (e.style.display = ''));
show(document.querySelectorAll('img')); // Shows all <img> elements on the page

speechSynthesis

语音合成 (实验特性)

用 SpeechSynthesisUtterance.voice 和 window.speechSynthesis.getVoices() 将一个消息转换为语音.
用 window.speechSynthesis.speak() 播放消息.

const speechSynthesis = message => {
  const msg = new SpeechSynthesisUtterance(message);
  msg.voice = window.speechSynthesis.getVoices()[0];
  window.speechSynthesis.speak(msg);
};
speechSynthesis('Hello, World'); // // plays the message

onUserInputChange

不管什么时候用户的input类型改变 (mouse or touch) 执行这个函数。用于启用/禁用依赖于输入设备的代码。这个过程是动态的，并于混合设备（例如：触摸屏，笔记本）一起工作。

使用了两个事件监听器。假如 mouse 输入初始化，然后绑定一个 touchstart 时间将听页面。
依据 touchstart 添加一个 mousemove 事件监听器，然后用 performance.now() 在20ms触发两次 mousemove 事件。
在这两种情况下，执行回调函数以input类型作为参数。

const onUserInputChange = callback => {
  let type = 'mouse',
    lastTime = 0;
  const mousemoveHandler = () => {
    const now = performance.now();
    if (now - lastTime < 20)
      (type = 'mouse'), callback(type), document.removeEventListener('mousemove', mousemoveHandler);
    lastTime = now;
  };
  document.addEventListener('touchstart', () => {
    if (type === 'touch') return;
    (type = 'touch'), callback(type), document.addEventListener('mousemove', mousemoveHandler);
  });
};

onUserInputChange(type => {
  console.log('The user is now using', type, 'as an input method.');
});

UUIDGeneratorBrowser

在浏览器中生成UUID。

用 crypto API 生成一个 UUID, 可参考 RFC4122 v.4 。

const UUIDGeneratorBrowser = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
  );
UUIDGeneratorBrowser(); // '7982fcfe-5721-4632-bede-6000885be57d'

arrayToHtmlList

将指定的数组元素转换成 <li> 元素标签，然后将它们插入指定的id选择器元素内.

用 Array.map() 和 document.querySelector() 去生成一个html元素标签列表.

const arrayToHtmlList = (arr, listID) => arr.map(item => document.querySelector("#"+listID).innerHTML+=`<li>${item}</li>`);
// arrayToHtmlList(['item 1', 'item 2'],'myListID')

copyToClipboard

复制一个字符串到剪切板。只用在用户触发事件时才会执行 (i.e. 内部用 click 事件监听)。

创建一个 <textarea> 元素，然后给它填充指定的字符串作为文本，最后将这个元素添加到html文档中。
用 Selection.getRangeAt() 存储选中的范围 (如果有的情况下)。
用 document.execCommand('copy') 去执行复制到剪切板。
从HTML文档中移除 <textarea> 元素.
最后，用 Selection().addRange() 去恢复原来的选中范围 (如果有的情况下).

const copyToClipboard = str => {
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  const selected =
    document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  if (selected) {
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(selected);
  }
};

copyToClipboard('Lorem ipsum'); // 'Lorem ipsum' copied to clipboard.

更多关于30-seconds-code中文翻译
https://github.com/lvzhenbang/article/blob/master/js/30-seconds-code/index.md