1. 如何获取URL?
const getBaseURL = url => url. replace ( / [?#].*$ / , '' ) ;
getBaseURL ( 'http://url.com/page?name=Adam&surname=Smith' ) ;
2. 如何检查URL是否是绝对的?
const isAbsoluteURL = str => / ^[a-z][a-z0-9+.-]*: / . test ( str) ;
isAbsoluteURL ( 'https://google.com' ) ;
isAbsoluteURL ( 'ftp://www.myserver.net' ) ;
isAbsoluteURL ( '/foo/bar' ) ;
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' ) ;
4. 如何检查元素是否包含另一个元素?
const elementContains = ( parent, child ) =>
parent !== child && parent. contains ( child) ;
elementContains (
document. querySelector ( 'head' ) ,
document. querySelector ( 'title' )
) ;
elementContains ( document. querySelector ( 'body' ) , document. querySelector ( 'body' ) ) ;
5.如何获取元素的所有祖先?
const getAncestors = el => {
let ancestors = [ ] ;
while ( el) {
ancestors. unshift ( el) ;
el = el. parentNode;
}
return ancestors;
} ;
getAncestors ( document. querySelector ( 'nav' ) ) ;
6. 如何平滑滚动元素到视图中?
const smoothScroll = element =>
document. querySelector ( element) . scrollIntoView ( {
behavior : 'smooth'
} ) ;
smoothScroll ( '#fooBar' ) ;
smoothScroll ( '.fooBar' ) ;
7. 如何处理元素外的点击?
const onClickOutside = ( element, callback ) => {
document. addEventListener ( 'click' , e => {
if ( ! element. contains ( e. target) ) callback ( ) ;
} ) ;
} ;
onClickOutside ( '#my-element' , ( ) => console. log ( '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 ( ) ;
9. 如何获取选中的文本?
const getSelectedText = ( ) => window. getSelection ( ) . toString ( ) ;
getSelectedText ( ) ;
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 ( ) ;
fullscreen ( false ) ;
13. 如何检测Caps Lock是否打开?
< 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' ) ;
isDateValid ( '1995-12-17T03:24:00' ) ;
isDateValid ( '1995-12-17 T03:24:00' ) ;
isDateValid ( 'Duck' ) ;
isDateValid ( 1995 , 11 , 17 ) ;
isDateValid ( 1995 , 11 , 17 , 'Duck' ) ;
isDateValid ( { } ) ;
15. 如何从 Date 中获取冒号时间?
const getColonTimeFromDate = date => date. toTimeString ( ) . slice ( 0 , 8 ) ;
getColonTimeFromDate ( new Date ( ) ) ;
16. 如何查看当前用户的首选语言?
const detectLanguage = ( defaultLang = 'en-US' ) =>
navigator. language ||
( Array. isArray ( navigator. languages) && navigator. languages[ 0 ] ) ||
defaultLang;
detectLanguage ( ) ;
17. 如何查看用户喜欢的配色方案?
const prefersDarkColorScheme = ( ) =>
window &&
window. matchMedia &&
window. matchMedia ( '(prefers-color-scheme: dark)' ) . matches;
prefersDarkColorScheme ( ) ;
18. 如何检查设备是否支持触摸事件?
const supportsTouchEvents = ( ) =>
window && 'ontouchstart' in window;
supportsTouchEvents ( ) ;
19. URL对象
const url = new URL ( "https://example.com/login?user=someguy&page=news" ) ;
url. origin
url. host
url. protocol
url. pathname
url. searchParams. get ( 'user' )