<!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. phpstudy不显示目录列表---设置方法

    打开phpstudy,显示的项目文件路径不见了,其实是phpstudy的设置问题.以下是设置方法. 并将一下几个文件删除即可

  2. VFS文件系统结构分析 与socket

    本文乃fireaxe原创,使用GPL发布,可以自由拷贝,转载.但转载请保持文档的完整性,并注明原作者及原链接.内容可任意使用,但对因使用该内容引起的后果不做任何保证. 作者:fireaxe_hq@ho ...

  3. layui 时间控件 单击 年直接赋值

    在 //选中 lay(ul).find('li').on('click', function(){  //结尾处添加 if (options.done === "year") { ...

  4. VMware WorkStation 用 VMTools 官方下载地址

    每次安装 VMTools 都不成功,谷歌到了这个地址,特地分享. 先打开这个网址, 选择你的 VMware WorkStation 对应的版本号: http://softwareupdate.vmwa ...

  5. vc++如何创建程序-设置断点-函数的覆盖，c++的多态性

    ---恢复内容开始--- 如何设置断点小笔记 将光标移动到你想设置断点的地方,按一下F9键即可,或者你可以用鼠标左键点击小手图标. CommentOut多行注释 函数的覆盖是在父类与子类之间的,函数的 ...

  6. c++ socket C/S通信实例

    具体的实例连接: 客户端项目连接:http://pan.baidu.com/s/1c2MndTI 服务端项目连接:http://pan.baidu.com/s/1i4DFkFV 用vs2013打开,服 ...

  7. 算法46----移除K位数字

    一.题目:移除K位数字 给定一个以字符串表示的非负整数 num,移除这个数中的 k 位数字,使得剩下的数字最小. 注意: num 的长度小于 10002 且 ≥ k. num 不会包含任何前导零. 示 ...

  8. bilibili用户信息查询

    bilibili用户信息查询 http://space.bilibili.com/ajax/member/GetInfo?mid= 后缀为用户mid号 # -*- coding:utf-8 -*- # ...

  9. jQuery(事件对象)

    冒泡与阻止冒泡 阻止默认行为

  10. oracle定时器执行一遍就不执行或本就不执行

    转:http://blog.csdn.net/qq_23311211/article/details/76283689 以sqlplus/ assysdba进入sql命令模式,使用sql:select ...