23-august-23h

date

发布日期: 2023-08-23

文章字数: 451

阅读时长: 2 分

阅读次数:

取出一个值的所有类型

type A = {
  name: string;
  age: number
}

type B = A[keyof A]

// B类型是A的值的联合类型

函数传参方式

传多个参数，并希望保持他们的顺序，可以写成数组，然后传递的时候延展

开，这样即使不用对象方式，也能传递多个，且也易于维护

const list = [1, 2, 3]
function func(...[list]) {}

新奇解构方式

<div {...{
    name: '牛总',
    age: 18
  }}>
</div>

虚拟列表

在渲染列表时，如果数据量很大，渲染成千上万条，可能会造成严重性能影响。

因此可以只渲染可视区域内的元素，在滚动时动态的计算出应该展示的元素并展示出来，

可视区域之外的一概不展示，

这样可视区域永远展示的是一共那几条，只是数据不同，

这就是虚拟列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 650px;
            border: 1px solid pink;
            overflow-y: auto;
        }

        p {
            height: 100px;
            margin-bottom: 10px;
            margin-top: 0;
            border: 1px solid cadetblue;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="container"></div>
    </div>
    <script>
        const box = document.getElementsByClassName('box')[0]
        const container = document.getElementsByClassName('container')[0]
        console.log('box', box, 'container', container);
    
        const itemHeight = 110;
        let startIndex = 0;
        const pageSize = Math.ceil(box.clientHeight / itemHeight)
        let endIndex = pageSize
        console.log('endIndex', endIndex);
    
        const data = []
    
        function getData () {
            for(let i = 0; i < 2000; i ++) {
                data.push(i)
            }
        }
    
        function upDateDom () {

            const scrollTop = box.scrollTop
            startIndex = Math.ceil(scrollTop / itemHeight)
            endIndex = startIndex + pageSize
            console.log('更新');
            let html = ''
            for(let i = startIndex; i <= endIndex; i++) {
                html += `
                    <p>内容${i}</p>
                `
            }
            container.style.transform = `translateY(${startIndex * itemHeight}px)`
            console.log('container.style.transform',  container.style.transform);
            container.innerHTML = html
        }

        box.addEventListener('scroll', upDateDom)

        function init () {
            getData()

            container.style.height = data.length * itemHeight + 'px'
            console.log('data', data);
            upDateDom()
        }
    
        init()
    </script>
</body>
</html>