JavaScript 闭包,基于闭包实现JQuery的缓存机制_js 闭包cache 删除缓存-优快云博客

本文链接：https://blog.youkuaiyun.com/houyanhua1/article/details/79847886

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        
        function createCache(){  // 闭包
            //cache对象中以键值对的形式存储我们的缓存数据(无法区分次序先后)
            var cache = {};  //闭包中的私有空间
            //index数组中存储键，键有顺序，可以方便做超出容量的处理(能够区分次序先后)
            var index = [];
            return function (key, value) {
                //如果传了value值，就说明是设置值
                if(value !== undefined){
                    //将数据存入cache对象，做缓存
                    cache[key] = value;
                    //将键存入index数组中，以和cache中的数据进行对应
                    index.push(key);
                    //判断缓存中的数据数量是不是超出了限制
                    if(index.length >= 50){
                        //如果超出了限制
                        //删除掉最早存储缓存的数据
                        //最早存入缓存的数据的键是在index数组的第一位
                        //使用数组的shift方法可以获取并删除掉数组的第一个元素
                        var tempKey = index.shift();  //删除数组中的第一个元素,并返回该元素值
                        //获取到最早加入缓存的数据的键，可以使用它将数据从缓存中删除
                        delete cache[tempKey];   //delete关键字,删除对象的某个属性(或某个变量)
                    }
                }
                return cache[key];  // 不管是设置还是获取,都返回指定缓存值。
            }
        }

        //eleCache   //专门存放元素的缓存
        //typeCache  //专门存放类型的缓存
        //classCache  
        //eventCache

        var eleCache = createCache();  //专门存放元素的缓存
        eleCache("name","高金彪");  //传两个值是设置
        console.log(eleCache("name"));  //传一个值是获取
        var typeCache = createCache();  //专门存放类型的缓存,需要什么缓存就创建什么缓存

    </script>
</head>
<body>

</body>
</html>