前端开发日常记录下载导出：https://www.jianshu.com/p/f26bd8da174f 防抖（debou

下载导出：www.jianshu.com/p/f26bd8da1…
防抖（debounce）

function debounce(fn, wait) {
  let timer = null
  return () => {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      fn
    }, wait)
  }
}

使用场景：单位时间内多次操作，只执行最后一次，input输入框搜索

节流（throttle）

function throttle(fn, wait) {
    let timer = null
    return () => {
        if (timer) return 
        timer = setTimeout(() => {
            fn()
            timer = null
        })
    }
}

使用场景：一定时间内只出发一次，也可以用时间戳形式比较实现

IOS 10.3以下不支持.scroll(); 可以使用scrollLeft || scrollTop替代
max-content iOS 10以下不兼容
解决 iphone 11 pro ios 14.0 几个tab切换页面出现半白屏，白屏之后稍微动一下页面就正常，所以通过改变页面高度来解决

document.querySelector('.container').style.height = (document.querySelector('.container').clientHeight - 1) + 'px'
setTimeout(() => {
  document.querySelector('.container').style.height =   
  (document.querySelector('.container').clientHeight + 1) + 'px'
}, 100);

ios微信端页面强制归位：解决：键盘收齐后，延迟200ms，使用 window.scrollTo(0, Math.max(scrollHeight - 1, 0)) 归位
html2canvas生成图片左侧和底部白边问题解决

window.html2canvas(document.getElementById('canvasContent'), {
    // 解决生成图片左侧和底部白边问题
    width: document.getElementById('canvasContent').offsetWidth - 1,
    height: document.getElementById('canvasContent').offsetHeight - 1,
 }).then((*canvas*) => {
    // 将整个页面图片转成Base64位
    const dataURL = canvas.toDataURL('image/png')
    resolve(dataURL)
}).catch((*err*) => {
    console.log(err)
})

html2canvas生成图片模糊解决：juejin.cn/post/684490…

const img2base64 = async () => {
    let timer
    const images = document.querySelectorAll('img')
    for (let i = 0; i < images.length; i++) {
        const canvas = document.createElement('canvas')
        const context = canvas.getContext('2d')
        var ratio = window.devicePixelRatio || 1
        context.scale(ratio, ratio)
        let base64Str = ''
        let tempImage = new Image()
        tempImage.setAttribute('crossOrigin', 'anonymous')
        tempImage.src = `${images[i].src}?timeStamp=${new Date()}`
        tempImage.onload = function() {
            const imgScale = tempImage.width / tempImage.height
            canvas.style.width = canvas.width + 'px'
            canvas.style.height = canvas.width / imgScale + 'px'
            canvas.width = canvas.width * ratio
            canvas.height = canvas.width / imgScale
            // canvas.width = images[i].width
            // canvas.height = images[i].height
            // context.drawImage(tempImage, 0, 0, images[i].width, images[i].height)
            context.drawImage(tempImage, 0, 0, tempImage.width, tempImage.height, 0, 0, canvas.width, canvas.height)
            base64Str = canvas.toDataURL('image/jpg', 1)
            if (!images[i].attributes.local) {
                // 不是本地，图片链接不用base64
                images[i].src = base64Str
            }
            if (timer) clearTimeout(timer)
            timer = setTimeout(async () => {
                opacityImgSrc = await dom2Canvas()
            }, 500)
        }
    }
}

swiper闪屏

.*swiper-slide {   -webkit-transform*: translate3d(0, 0, 0) *}*

父元素flex, 子元素超出一行省略做法：

.parent {
    flex: 1;
    flex-grow: 1;
    width: 0;
}
.child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

H5键盘弹出收起问题：blog.csdn.net/mqy1023/art…
iphoneX 底部安全距离问题：jelly.jd.com/article/600…
url获取参数并转为对象参考：juejin.cn/post/714562… const getParameters = URL => JSON.parse({"${decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"')}"} ); getParameters(window.location.href)
检查对象是否为空

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object; isEmpty({}) // true isEmpty({a:"not empty"}) //false

检查设备类型

未完待续