<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <!-- <script type="text/javascript">

        // 需求：

        // 要实现一个创建缓存的函数：createCache()

        // 1 对缓存进行读取

        // 2 对缓存进行添加

        // 3 对缓存进行修改

        // 4 缓存的数量要控制在某个范围之内

        // 5 每调用一次创建缓存的函数，就会创建一个缓存出来

        //         并且多个缓存之间相互不影响！

        // 配置属性或者配置文件

        var cacheLength = 3;

        // 分析：

        function createCache() {

            var cache = {};

            // 作用：用来记录存储到缓存中key的顺序

            var keyArr = [];

            // 作用：对缓存进行增删改查

            return function(key, value) {

                // 1 先处理参数的个数

                // 如果是一个参数：表示读取

                // 如果是两个参数：表示设置

                //         a. value === undefined

                //         b. arguments.length

                if(value === undefined) {

                    return cache[key];

                }

                // 以下代码来处理设置缓存

                // 1 修改

                // 2 添加

                //         cache[key] === undefined

                //         如果判断为：true， 说明是 添加

                //         否则，就是修改

                if(cache[key] !== undefined) {

                    cache[key] = value;

                } else {

                    // 以下代码来处理添加的逻辑

                    // 1 缓存的长度超过了限制

                    // 2 缓存的长度没有超过限制

                    //         arr.length > 50

                    //

                    // 如果是先给数据中添加数据，判断的时候，就是：> 限制的数值

                    // 如果是先判断后添加的数据，判断的时候，就是：>= 限制的数值

                    keyArr.push(key);

                    if(keyArr.length > cacheLength) {

                        // 删除，问题：删除哪一条数据

                        // 删除的是：数组中最开始添加进来的数据

                        // 也就是：索引号为：0 的值

                        var deleteKey = keyArr.shift();

                        delete cache[deleteKey];

                    }

                    // 不管删除还是不删除数据，都要往缓存中添加数据

                    cache[key] = value;

                }

            };

        }

        // LVHA    => LV hao

        // :linked

        // :visited

        // :hover

        // :active

        // 调用

        var typeCache = createCache();

        // 添加缓存：

        typeCache("class", ".cls");

        typeCache("id", "#dv");

        typeCache("tag", "div, p");

        typeCache("tag", "span");

        typeCache(":even", "dddd");

        // 读取：

        console.log(typeCache("class"));        // .cls

        console.log(typeCache("id"));        // #dv

        console.log(typeCache("tag"));        // span

        console.log(typeCache(":even"));        // span

        var strCache = createCache();

    </script> -->

    <script type="text/javascript">

        var cacheLength = 3;

        // 优化代码

        function createCache() {

            // 作用：用来记录存储到缓存中key的顺序

            var cache = {},

            // 作用：对缓存进行增删改查

                keyArr = [];

            return function(key, value) {

                if(value === undefined) {

                    return cache[key];

                }

                if(cache[key] === undefined) {

                    // push 方法的返回值：添加数据之后的长度

                    if(keyArr.push(key) > cacheLength) {

                        delete cache[ keyArr.shift() ];

                    }

                }

                cache[key] = value;

            };

        }

        // 调用

        var typeCache = createCache();

        // 添加缓存：

        typeCache("class", ".cls");

        typeCache("id", "#dv");

        typeCache("tag", "div, p");

        typeCache("tag", "span");

        typeCache(":even", "dddd");

        // 读取：

        console.log(typeCache("class"));    // undefined

        console.log(typeCache("id"));        // #dv

        console.log(typeCache("tag"));        // span

        console.log(typeCache(":even"));    // dddd

    </script>

</body>

</html>

javascript中缓存的更多相关文章

  1. Javascript中关于cookie的那些事儿

    Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...

  2. JavaScript中闭包之浅析解读

    JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常 ...

  3. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  4. 【原】理解javascript中的闭包

    闭包在javascript来说是比较重要的概念,平时工作中也是用的比较多的一项技术.下来对其进行一个小小的总结 什么是闭包? 官方说法: 闭包是指有权访问另一个函数作用域中的变量的函数.创建闭包的常见 ...

  5. JavaScript中的函数表达式

    在JavaScript中,函数是个非常重要的对象,函数通常有三种表现形式:函数声明,函数表达式和函数构造器创建的函数. 本文中主要看看函数表达式及其相关的知识点. 函数表达式 首先,看看函数表达式的表 ...

  6. 浅谈JavaScript中的Ajax

    引言 作为一名WEB开发者,我想Ajax技术是一定需要掌握的.你也许平时没有使用JavaScript真正的写过Ajax.但是你一定使用过JQuery里面的相关函数来进行异步调用.今天我们就来介绍下原生 ...

  7. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  8. JavaScript中知而不全的this （转）

    原文引自:http://www.cnblogs.com/snandy/p/4773184.html 都说 JavaScript 是一种很灵活的语言,这其实也可以说它是一个混乱的语言.它把函数式编程和面 ...

  9. JavaScript 中 4 种常见的内存泄露陷阱

    了解 JavaScript 的内存泄露和解决方式! 在这篇文章中我们将要探索客户端 JavaScript 代码中常见的一些内存泄漏的情况,并且学习如何使用 Chrome 的开发工具来发现他们.读一读吧 ...

随机推荐

  1. Ecshop 扯淡问题

    1:解决 :在 temp 文件下创建 backup文件夹   修改权限 2:待补充...

  2. shell中的交互模式：expect

    在shell开发中,我们连接FTP或者passwd或sudo等操作时,需要手动输入密码.对于自动化而言,这显然是不合适的.而expect的强交互模式解决了这个问题.工作中偶有涉及到这个,个人也是简单的 ...

  3. 【图像处理】使用OpenCV实现人脸和行人检测

      OpenCV全称是Open source Computer Vision Library(开放源代码计算机视觉库),是一个用于图像处理.分析.机器视觉方面的开源函数库,提供了很多图像处理的工具和可 ...

  4. python之openpyxl模块

    一 . Python操作EXCEL库的简介 1.1 Python官方库操作excel Python官方库一般使用xlrd库来读取Excel文件,使用xlwt库来生成Excel文件,使用xlutils库 ...

  5. OpenStack 发行版本

    2010年7月,Rackspace和美国宇航局联合其他25家公司启动了OpenStack项目 OpenStack的发行版本时间表和核心项目 OpenStack发行版本 名称 日期           ...

  6. 深入了解Python--元组

    1. 对原元组进行插入 2. 元组的嵌套使用 3. for循环使用嵌套元组实例 4. 命名元组避免对分片混淆

  7. js严格模式下判断数据类型

    function isType(type) { return function (content) { let t = Object.prototype.toString.call(content). ...

  8. 【codeforces 727D】T-shirts Distribution

    [题目链接]:http://codeforces.com/problemset/problem/727/D [题意] 给你6种尺寸的衣服; 他们的尺码依次为S, M, L, XL, XXL, XXXL ...

  9. ASP.NET - 单元测试

    Assert类的使用 Assert.Inconclusive() 表示一个未验证的测试: Assert.AreEqual() 测试指定的值是否相等,如果相等,则测试通过: AreSame() 用于验证 ...

  10. cogs 1164. 跑步

    1164. 跑步 ★   输入文件:runa.in   输出文件:runa.out   简单对比时间限制:1 s   内存限制:128 MB [题目描述] 路人甲准备跑N (5≤N≤500)圈来锻炼自 ...