常用代码片段

// 复制文本到剪切板
const copy2Clipboard = (text) => navigator.clipboard.writeText(text)
// 解析 url 参数
function parseQuery(url) {
    const q = {}
    url.replace(/([^?&=]+)=([^&]+)/g, (_, k, v) => (q[k] = v))
    return q
}

clipboard API

// 将剪切板的图片粘贴到页面上
// <div contenteditable id="editor" />
const editor = document.querySelector('#editor')
editor.on('paste', () => {
    e.preventDefault()
    const [file] = e.clipboardData.files
    const reader = new FileReader()
    reader.onload = (e) => {
        const img = document.createElement('img')
        img.src = e.target.result
        editor.appendChild(img)
    }
    reader.readAsDataURL(file)
})

Intersection Observer

替换图片

const ob = new IntersectionObserver((entries) => {
    for (const entry of entries) {
        if (entry.isIntersecting) {
            // 已经进入页面
            const img = entry.target
            img.src = img.dataset.src
            ob.unobserve(img) // 图片已经真实加载，不需要再监听该元素了
        }
    }
})
const imgs = document.querySelectorAll('img[data-src]')
imgs.forEach((img) => {
    ob.observe(img)
})
// loading 加载效果=》页面底部增加一个 loading icon，只对它进行 observe，出现了则代表触底，触发 loadingMore 即可

动画函数

function animation(
    duration: number,
    from: number,
    to: number,
    onProgress: (value: number) => void
) {
    let value = from
    const speed = (to - from) / duration
    const start = Date.now()

    function _run() {
        const passed = Date.now() - start
        if (passed >= duration) {
            value = to
            onProgress(value)
            return
        }
        value = from + passed * speed
        onProgress(value)
        requestAnimationFrame(_run)
    }

    _run()
}

分时函数封装

requestIdleCallback((idle) => {
    while (idle.timeRemaining()) {
        // do something
    }
})

流式数据获取

async function getResponse() {
    const resp = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            content: '讲个困困和马老师打拳击的故事',
        }),
    })

    const reader = resp.body.getReader()
    // 解码器
    const textDecoder = new TextDecoder()
    while (1) {
        const { done, value } = await reader.read()
        // 解码成文字
        const str = textDecoder.decode(value)
        console.log(str)
        if (done) {
            break
        }
    }
}