在我们的开发流程中，我们经常会遇到一些具有挑战性的问题，而解决这些问题可能只需要几行代码。在本文中，我试图整理出一些有用的代码片段，帮助您在处理 URL、DOM、事件、日期、用户偏好等方面时更加便捷。
所有这些代码片段都是从"30 seconds of code"中精心挑选的。这是一个很棒的资源，我强烈推荐去查看更多内容。
这些代码片段被筛选的主要标准是实用性。希望您能找到一些有价值的东西，可以应用到未来的代码库中。
1. 如何获取 base URL？
const getBaseURL = (url) => url.replace(/[?#].*$/, '')
getBaseURL('http://url.com/page?name=Adam&surname=Smith')
// 'http://url.com/page'
2. 如何检查 URL 是否为绝对路径？
const isAbsoluteURL = (str) => /^[a-z][a-z0-9+.-]*:/.test(str)
isAbsoluteURL('https://google.com') // true
isAbsoluteURL('ftp://www.myserver.net') // true
isAbsoluteURL('/foo/bar') // false
3. 如何将 URL 参数转换为对象？
const getURLParameters = (url) =>
(url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
(a, v) => (
(a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a
),
{}
)
getURLParameters('google.com') // {}
getURLParameters('http://url.com/page?name=Adam&surname=Smith')
// {name: 'Adam', surname: 'Smith'}
4. 如何检查一个元素是否包含另一个元素？
const elementContains = (parent, child) =>
parent !== child && parent.contains(child)
elementContains(document.querySelector('head'), document.querySelector('title'))
// true
elementContains(document.querySelector('body'), document.querySelector('body'))
// false
5. 如何获取元素的所有祖先元素？
const getAncestors = (el) => {
let ancestors = []
while (el) {
ancestors.unshift(el)
el = el.parentNode
}
return ancestors
}
getAncestors(document.querySelector('nav'))
// [document, html, body, header, nav]
6. 如何平滑滚动到元素视图中？
const smoothScroll = (element) =>
document.querySelector(element).scrollIntoView({
behavior: 'smooth',
})
smoothScroll('#fooBar') // 平滑滚动到id为fooBar的元素
smoothScroll('.fooBar')
// 平滑滚动到class为fooBar的第一个元素
7. 如何处理点击元素外部的事件？
const onClickOutside = (element, callback) => {
document.addEventListener('click', (e) => {
if (!element.contains(e.target)) callback()
})
}
onClickOutside('#my-element', () => console.log('Hello'))
// 当用户点击#my-element外部时将输出'Hello'
8. 如何生成 UUID？
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'
9. 如何获取选定的文本？
const getSelectedText = () => window.getSelection().toString()
getSelectedText() // 'Lorem ipsum'
10. 如何将文本复制到剪贴板？
const copyToClipboard = (str) => {
if (navigator && navigator.clipboard && navigator.clipboard.writeText)
return navigator.clipboard.writeText(str)
return Promise.reject('The Clipboard API is not available.')
}
11. 如何为 HTML 元素添加样式？
const addStyles = (el, styles) => Object.assign(el.style, styles)
addStyles(document.getElementById('my-element'), {
background: 'red',
color: '#ffff00',
fontSize: '3rem',
})
12. 如何切换全屏模式？
const fullscreen = (mode = true, el = 'body') =>
mode
? document.querySelector(el).requestFullscreen()
: document.exitFullscreen()
fullscreen() // 将body以全屏模式打开
fullscreen(false) // 退出全屏模式
13. 如何检测大写锁定是否打开？
<form>
<label for="username">Username:</label>
<input
id="username"
name="username"
/>
<label for="password">Password:</label>
<input
id="password"
name="password"
type="password"
/>
<span
id="password-message"
style="display: none"
>Caps Lock is on</span
>
</form>
const el = document.getElementById('password')
const msg = document.getElementById('password-message')
el.addEventListener('keyup', (e) => {
msg.style = e.getModifierState('CapsLock')
? 'display: block'
: 'display: none'
})
14. 如何检查日期是否有效？
const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf())
isDateValid('December 17, 1995 03:24:00') // true
isDateValid('1995-12-17T03:24:00') // true
isDateValid('1995-12-17 T03:24:00') // false
isDateValid('Duck') // false
isDateValid(1995, 11, 17) // true
isDateValid(1995, 11, 17, 'Duck') // false
isDateValid({}) // false
15. 如何从日期获取时间（带冒号）？
const getColonTimeFromDate = (date) => date.toTimeString().slice(0, 8)
getColonTimeFromDate(new Date()) // '08:38:00'
16. 如何从日期生成 UNIX 时间戳？
const getTimestamp = (date = new Date()) => Math.floor(date.getTime() / 1000)
getTimestamp() // 1602162242
17. 如何检查当前用户的首选语言？
const detectLanguage = (defaultLang = 'en-US') =>
navigator.language ||
(Array.isArray(navigator.languages) && navigator.languages[0]) ||
defaultLang
detectLanguage() // 'nl-NL'
18. 如何检查当前用户的首选颜色方案？
const prefersDarkColorScheme = () =>
window &&
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches
prefersDarkColorScheme() // true
19. 如何检查设备是否支持触摸事件？
const supportsTouchEvents = () => window && 'ontouchstart' in window
supportsTouchEvents() // true
