<!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. HOG行人检测 如何制作样品

    原文链接:http://blog.csdn.net/Armily/article/details/8333836 如何制作训练样本 分析了原作者的数据集,结合网上一些资料,下面描述如何制作训练样本 1 ...

  2. chrome模拟微信

    这里有一个模拟器,既可以设置模拟很多型号的手机设备,也可以伪造你想要的HTTP_USER_AGENT.选择USER_AGENT,选other,微信的HTTP_USER_AGENT是: 在iPhone下 ...

  3. .bat 打开程序

    为什么要用.bat打开程序. 因为一个一个难得点 怎么做 百度的,start 程序路径\程序 改进 点击bat,不显示dos窗口. 新建.vbs文件 Set shell = Wscript.creat ...

  4. 深入jar包：从jar包中读取资源文件

    我们常常在代码中读取一些资源文件(比如图片,音乐,文本等等).在单独运行的时候这些简单的处理当然不会有问题.但是,如果我们把代码打成一个jar包以后,即使将资源文件一并打包,这些东西也找不出来了.看看 ...

  5. mysql 锁表查看

    information_schema.INNODB_TRX    一般锁表后查询这个表  把相关的事务执行线程kill就可以了,可以分析sql语句执行场景 ​ INNODB_LOCKS​ PROCES ...

  6. php 单例模式与常驻服务

    运行机制使得每个PHP页面被解释执行后,所有的相关资源都会被回收.也就是 说,PHP在语言级别上没有办法让某个对象常驻内存.在PHP中,所有的变量都是页面级的,无论是全局变量,还是类的静态成员,都会在 ...

  7. 纯css3实现箭头、关闭按钮旋转效果

    说起css3的旋转效果,那就要说为什么不用js去实现,CSS3的动画效果,能够减少对JavaScript和Flash文件的HTTP请求这是原因之一.但是css3可能要求浏览器执行很多的工作来完成这个动 ...

  8. JavaScript：进制转换。

    最近做了一些进制的转换的点. 十进制转二进制: let a = 45; a.toString(2); //"101101" let b = 123; b.toString(2); ...

  9. USB OTG学习笔记

    仅仅看了半天SPEC写的笔记,有些乱,等调试完毕再次整理,思路不是很成熟,推测成分较多,可能有不对的地方,欢迎拍砖交流指正.   1. 概要     OTG设备使用插头中的ID引脚来区分A/B Dev ...

  10. MyEclipse 2014 有用的几个快捷键

    ctrl+h  fileSearch ------------------------------------- MyEclipse 快捷键1(CTRL) ---------------------- ...