js 批量从缓存中读取数据_js cache storage读取数据-CSDN博客

本文链接：https://blog.csdn.net/qq_15253407/article/details/83014191

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">取出数据</div>
<script>
    window.onload = function () {
        
        let _len = 6;
        let array = [1, 2, 3, 4, 5];
        let cache = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
        // 用来处理数据量大的问题(每次从缓存中读取数据) 避免dom节点 渲染过多  每次从缓存数据中新增5条数据进行显示
        var data = ArrRepalce2(array, cache, _len);
        document.getElementById('test').addEventListener('click', function () {
            console.log(data.load());
        });
        /**
         * @param array
         * @param cache
         * @param len
         * @returns {*}
         * @constructor
         */
        function ArrRepalce2(array, cache, len) {
            if (this instanceof ArrRepalce2) {
                if (Array.isArray(array) && Array.isArray(cache)) {
                    this.array = array;
                    this.cache = cache;
                    this.len = len;
                    this.cusour = 0;
                } else {
                    return new TypeError('param error');
                }
            } else {
                return new ArrRepalce2(array, cache, len);
            }
        }

        ArrRepalce2.prototype.load = function () {
            this.array = []; // 默认清空原信息
            if (this.cusour + this.len > this.cache.length) {
                let first = this.cache.slice(this.cusour, this.cusour + this.len);
                let end = this.cache.slice(0, (this.cusour + this.len) - this.cache.length);
                this.array = first.concat(end);
                this.cusour = (this.cusour + this.len) - this.cache.length;
            } else {
                this.array = this.array.concat(this.cache.slice(this.cusour, this.cusour + this.len));
                this.cusour = this.cusour + this.len;
            }
            return this.array;
        }
    }
</script>
</body>
</html>