JavaScript 闭包缓存使用例子

太过爱你忘了你带给我的痛 2022-05-15 03:20 226阅读 0赞

# 1.单独在一个页面中使用 #

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script src="js/jquery.js"></script>
    <div id="id" class="id">缓存测试</div>
    <script> function getValue(id) { document.writeln('为：' + id + '创建值'); document.writeln('<br>') document.writeln('<br>') return "value is "+ id; } var CacheSearchBox = (function () { var cache = {}, count = []; return { // 缓存中搜索方法 search: function (searchId) { // 如果在缓存中，直接返回缓存中对象 if(searchId in cache) { document.writeln('从缓存中取数据'); document.writeln('<br>') return cache[searchId]; } document.writeln('缓存中无此数据'); document.writeln('<br>') var value = getValue(searchId); cache[searchId] = value; count.push(searchId) // 保证缓存大小为2 if(count.length > 2) { document.writeln('缓存量超过最大值，删除最后一个元素'); document.writeln('<br>') // count.pop() 删除并返回第一个元素 delete cache[count.shift()]; } document.writeln('当前缓存对象内容：' + JSON.stringify(cache)); document.writeln('<br>') document.writeln('当前缓存数组内容：' + JSON.stringify(count)); document.writeln('<br>') }, // 清除缓存方法 clear: function (searchId) { if(searchId in cache) { // 删除缓存中的对象 delete cache[searchId]; // 删除缓存数组中的数据 count.splice(count.indexOf(9), 1) document.writeln('清除缓存对象：' + searchId); document.writeln('<br>') document.writeln('当前缓存对象内容：' + JSON.stringify(cache)); document.writeln('<br>') } } }; })(); CacheSearchBox.search('1'); CacheSearchBox.search('1'); CacheSearchBox.search('2'); CacheSearchBox.search('2'); CacheSearchBox.search('3'); CacheSearchBox.clear('3') </script>
    </body>
    </html>

# 2.将闭包放到一个单独js文件中使用 #

## 2.1.创建 cache.js 文件 ##

// 使用闭包的方式把当前缓存对象加入到window对象中，成为它的属性CacheSearchBox，
    // 以便在所有需要使用缓存的地方直接通过CacheSearchBox名字就可以直接调用方法了
    ;(function (window) { 
        function getValue(id) { 
            document.writeln('为：' + id + '创建值');
            document.writeln('<br>')
            document.writeln('<br>')
            return "value is "+ id;
        }
    
        var CacheSearchBox = (function () { 
            var cache = {}, count = [];
            return {
                // 缓存中搜索方法
                search: function (searchId) { 
                    // 如果在缓存中，直接返回缓存中对象
                    if(searchId in cache) {
                        document.writeln('从缓存中取数据');
                        document.writeln('<br>')
                        return cache[searchId];
                    }
                    document.writeln('缓存中无此数据');
                    document.writeln('<br>')
                    var value = getValue(searchId);
                    cache[searchId] = value;
                    count.push(searchId)
                    // 保证缓存大小为2
                    if(count.length > 2) {
                        document.writeln('缓存量超过最大值，删除最后一个元素');
                        document.writeln('<br>')
                        // count.pop() 删除并返回第一个元素
                        delete cache[count.shift()];
                    }
                    document.writeln('当前缓存对象内容：' + JSON.stringify(cache));
                    document.writeln('<br>')
                    document.writeln('当前缓存数组内容：' + JSON.stringify(count));
                    document.writeln('<br>')
                },
                // 清除缓存方法
                clear: function (searchId) { 
                    if(searchId in cache) {
                        // 删除缓存中的对象
                        delete cache[searchId];
                        // 删除缓存数组中的数据
                        count.splice(count.indexOf(9), 1)
                        document.writeln('清除缓存对象：' + searchId);
                        document.writeln('<br>')
                        document.writeln('当前缓存对象内容：' + JSON.stringify(cache));
                        document.writeln('<br>')
                    }
                }
            };
        })();
        window.CacheSearchBox = CacheSearchBox;
    
    })(window);

## 2.2.在需要的地方引用 cache.js 文件并使用 ##

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <script src="js/jquery.js"></script>
    <script src="js/cache.js"></script>
    <div id="id" class="id">缓存测试</div>
    <script> CacheSearchBox.search('1'); CacheSearchBox.search('1'); CacheSearchBox.search('2'); CacheSearchBox.search('2'); CacheSearchBox.search('3'); CacheSearchBox.clear('3') </script>
    </body>
    </html>