JavaScript 闭包缓存使用例子

最新推荐文章于 2023-12-18 10:19:14 发布
最新推荐文章于 2023-12-18 10:19:14 发布
阅读量363 收藏
点赞数
分类专栏： 11_js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tengdazhang770960436/article/details/81989652
版权

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>
自找苦吃，自得其乐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript闭包
dva的博客
07-16 135
要了解闭包首先我们要知道JavaScript函数以及变量的作用域 函数定义了一个局部作用域，并在这个局部作用域中执行，每一个函数都有一个独立的局部作用域。局部作用域可以访问全局作用域中的属性，变量，反之则不然。嵌套函数的作用域可以访问外围函数的作用域以及全局作用域，反之亦不然。简单理解为只能从小的作用域向大的作用域访问。 全局变量的作用域是全局的，在函数内部声明的变量，是局部变量，作用域是局部的。...
闭包（JavaScript）
sizzurp的博客
09-13 64
1 变量作用域 函数内部可以使用全局变量 函数外部不可以使用局部变量 当函数执行完毕，本作用域内的局部变量会销毁 2 什么是闭包 闭包（closure）指有权访问另一个函数作用域中变量的函数。----- JavaScript高级程序设计 简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。 <script> // 闭包（closure）指有权访问另一个函数作用域中变量的函数。 // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局
闭包缓存
DLGDark的博客
09-10 992
一. 缓存：将常用的数据进行存储，以提升性能硬件缓存 浏览器缓存 CDN(content delivery network) //内容分发网络，使用缓存技术 内存性数据库(mongodb数据库) 二. 如何用闭包实现缓存：1.写一个闭包，在闭包中创建一个对象用来做缓存的存储对象 2.在闭包中创建一个数组，用来存储缓存中的键 3.返回一个函数，这个函数需要两个参数，一个是key，一个
利用闭包实现前端缓存
lys20000913的博客
03-21 197
if(!window.mycache){ window.mycache = (function(){ // 闭包变量 var cache = {} // 限制长度 var cacheArr = [] return { get(api){ return new Promise((resolve,reject)=>{ i
闭包缓存出现的问题
weixin_43918847的博客
04-03 206
今天在封装运动函数的时候遇到了一个由于不报缓存形成的问题，接下来分享给大家，在写的不透彻的地方欢迎各位能够指正，谢谢啦！ 我想要封装的函数是一个物体先加速后减速的直线运动，就在封装完成之后遇到了一些问题。话不多说上代码： function normal(tarPos, target) { let timer = null; return function () { clearInterval(timer);
用闭包可做缓存实例
Geezer_007的博客
12-13 233
funtion test () { var food = "apple"; var obj = { eatFood : function () { if (food != " "){ console.log("www"); } else { cosole.log ("222") } } pushFood :function (myFood){ food = myFood; } } return obj; } var Person =...
闭包的使用：做缓存、隔离变量或方法
qq_43119912的博客
10-16 331
看如下代码： function useCache () { const data = {}; // 存放要缓存的数据 return { setItem: (key, value) => { data[key] = value }, getItem: key => { return data[key
Javascript闭包用法实例分析
10-24
JavaScript 闭包是一种重要的编程概念，它涉及到函数和变量的作用域。闭包允许函数访问并操作在其外部定义的变量，即使在外部函数执行完毕后，这些变量仍然保持可访问状态。这种特性使得闭包在 JavaScript 中有着...
JavaScript闭包实例详解
11-23
JavaScript闭包是编程中一种非常重要的概念，它涉及到函数、作用域、变量持久化等多个方面。闭包的本质是在一个函数内部定义的函数可以访问并操作其外部函数的变量，即使外部函数已经执行完毕，这些变量依然可以被...
基于javascript 闭包基础分享
10-27
文章中提到了两个例子：第一个例子中，通过一个循环来创建带有闭包的函数数组，但是由于JavaScript变量作用域和循环的作用，所有函数最终都只访问到了循环的最终值。第二个例子通过立即执行函数表达式（IIFE）来解决...
理解Javascript闭包
12-10
闭包在JavaScript中有许多实际用途，比如数据封装、模块化、记忆化（缓存函数结果）等。然而，如果不正确地使用闭包，可能会导致内存泄漏，因为闭包会阻止垃圾收集器回收不再使用的变量。因此，理解和谨慎使用闭包是...
深入理解Javascript闭包 新手版
12-09
JavaScript中的闭包是一种高级特性，它允许内部函数访问并操作外部函数的变量，即使外部函数已经执行完毕...然而，过度使用闭包可能导致内存泄漏，因此在编写代码时需要注意合理控制闭包的使用，避免不必要的资源消耗。
是时候用闭包实现一个缓存函数了
孤佣
04-12 297
什么是缓存函数 所谓缓存函数就是将函数运算过的结果缓存起来，这种做法是典型的用内存去换取性能的手段，常用于缓存数据计算结果和缓存对象。缓存只是一个临时的数据存储，它保存数据，以便将来对该数据的请求能够更快地得到处理。 记忆函数的使用场景 在客户前端页面中，有些数据（比如一些后续不常改变的数据），可以在第一次请求的时候全部拿过来保存在 js 对象中，以后需要的时候就不用每次都去请求服务器了。对于那些大量使用类似下拉框的页面，这种方法可以极大地减少对服务器的访问。可以提供便利，减少查询次数和所消耗的时间。 函
浅析闭包在缓存逻辑中的一次应用
信言的笔记
07-13 1148
摘要 场景、背景    缓存逻辑代码大量重复，需要设法精简，以提高编码效率，降低维护成本。 问题本质  一段流程控制的代码大部分重复，小部分不同的情况下如何精简代码。典型情况如缓存逻辑，数据库查询逻辑等。 解决方案  使用闭包，通过模板模式配合回调，予以解决。优点：代码精简优雅、使开发人员只需关注变化的业务逻辑而无需关注缓存存取实现的细节。 关键字 闭包，缓存，底层改造，框架优
JS知识点汇总(四)--闭包&浏览器缓存
qq_42445025的博客
06-30 190
若不是某些特定任务需要使用闭包，在其它函数中创建函数是不明智的，闭包会携带包含其它的函数作用域，因此会比其他函数占用更多的内存。一般函数的词法环境在函数返回后就被销毁，但是闭包会保存对创建时所在词法环境的引用，即便创建时所在的执行上下文被销毁，但创建时所在词法环境依然存在，以达到延长变量的生命周期的目的。foo()函数的执行结果返回给bar，而此时变量a仍在使用，还没被销毁，然后执行bar()函数。这个说法来源于MDN-闭包。还有种说法：闭包是指有权访问另外一个函数作用域中的变量的函数。
使用闭包来缓存数据的开发实例
全栈软件工程师-陈征峰的博客
03-15 937
1、使用闭包缓存通过ajax请求的得到的数据 2、使用闭包缓存5个最近使用的数据
一次闭包缓存示例程序理解记录
行走的过客
12-28 121
闭包缓存功能程序理解分析 偷空看一本讲Javascript的书，里面有一个关于用闭包记录函数缓存的程序。第一次看过去发现绕得很，本来想大致在头脑中留个印象就直接放过去，等以后要用再回头理解，但后来觉得还是认真消化一下比较好，于是稍微分析了一下，在此记录理解过程。 程序选自《Secrets of the JavaScript Ninja》示例代码5.14 Function.prototype.memoized=function (key) { this._values=this._values||{};
利用闭包与高阶函数实现缓存函数的创建&&缓存函数在项目中的性能优化
最新发布
Aan___的博客
12-18 1041
允许函数保留其包含（封闭）范围中变量的访问权，即使在该范围外执行函数闭包是一种在函数嵌套的情况下，内部函数可以访问外部函数作用域中变量的现象。基本上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包允许你从一个函数中返回另一个函数，并且在后者执行时仍然能够访问前者的变量。通俗地说，闭包是由函数和与其相关的引用环境组合而成的实体。它可以让函数访问在它被创建时所处的词法作用域中的变量，即使函数在这个词法作用域外执行，也能够访问这些变量。内部函数可以访问外部函数中的变量和参数。
input 中 radio的使用
热门推荐
彻底拆分，一切可控！
10-20 4万+
在使用input的radio元素的时候,需要特别注意的一点是它的顺序,如果不注意顺序的话,那你就会被它该搞死的.如下所示:                 function select1() {             document.getElementsByName("b")[0].checked = true;             alert(document.
深入理解JavaScript闭包：作用与示例
本文将深入探讨JavaScript闭包的概念、作用以及其内在工作机制。首先，闭包被定义为能够访问另一个函数作用域中的变量的函数。通过实例来解释，如在函数a中定义变量i并在其内部创建函数b，函数a返回函数b，这样就...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值