在我们的开发流程中，我们经常会遇到一些具有挑战性的问题，而解决这些问题可能只需要几行代码。在本文中，我试图整理出一些有用的代码片段，帮助您在处理 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><inputid="username"name="username"/><label for="password">Password:</label><inputid="password"name="password"type="password"/><spanid="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]) ||defaultLangdetectLanguage() // 'nl-NL'
18. 如何检查当前用户的首选颜色方案？
const prefersDarkColorScheme = () =>window &&window.matchMedia &&window.matchMedia('(prefers-color-scheme: dark)').matchesprefersDarkColorScheme() // true
19. 如何检查设备是否支持触摸事件？
const supportsTouchEvents = () => window && 'ontouchstart' in windowsupportsTouchEvents() // true
