摘要：显示所有指定的元素用操作符和清除所有指定元素的属性。使用了两个事件监听器。将指定的数组元素转换成元素标签，然后将它们插入指定的选择器元素内用和去生成一个元素标签列表复制一个字符串到剪切板。用去执行复制到剪切板。
英文文章来源于：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，则模拟一个 链接单击，否则为重定向。
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() -> truegetScrollPosition
返回页面滚动后的位置，也即是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 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 ![]()
elements on the page
show
显示所有指定的元素
用spread (...) 操作符和 Array.forEach() 清除所有指定元素的 display 属性。
const show = (...el) => [...el].forEach(e => (e.style.display = ""));
show(document.querySelectorAll("img")); // Shows all ![]()
elements on the page
speechSynthesis
语音合成 (实验特性)
用 SpeechSynthesisUtterance.voice 和 window.speechSynthesis.getVoices() 将一个消息转换为语音.
用 window.speechSynthesis.speak() 播放消息.
更多详情请参考 SpeechSynthesisUtterance interface of the Web Speech API.
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
将指定的数组元素转换成 元素标签，然后将它们插入指定的id选择器元素内.
用 Array.map() 和 document.querySelector() 去生成一个html元素标签列表.
const arrayToHtmlList = (arr, listID) => arr.map(item => document.querySelector("#"+listID).innerHTML+=`复制一个字符串到剪切板。只用在用户触发事件时才会执行 (i.e. 内部用 click 事件监听)。
创建一个