<!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. vue2 阻止时间冒泡

    click.stop.prevent <div class="content-right" @click.stop.prevent="pay" > ...

  2. RGB_D_开发征程（使用Kinect）

    学习历程依此为纲! Kinect学习资料: kinect和openNI开发资料汇总:http://blog.csdn.net/chenli2010/article/details/6887646 原始 ...

  3. Matrix Matcher UVA - 11019AC_自动机 + 代价提前计算

    Code: #include<cstdio> #include<cstring> #include<algorithm> #include<vector> ...

  4. Python——Day2（基础知识练习一）

    1.执行Python脚本的两种方式1)调用解释器 Python +绝对路径+文件名称2)调用解释器 Python +相对路径+文件名称 2.简述位.字节的关系8位为1个字节 3.简述ASCII.uni ...

  5. javascript事件列表解说

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  6. vue 配置页面动态的 title

  7. 使用IDEA 中 实现springboot 热部署 （spring boot devtools版）

    第一步:添加springboot的配置文件 首先我先贴出我的配置 添加依赖包 <!-- spring boot devtools 依赖包. --> <dependency> & ...

  8. 判断webservice是否可用

    在.net中验证WebService的Url有效并且验证服务可用: 需要用到win32下的组件,比如Microsoft XML, v5.0 测试程序具体如下:建一个项目,在你的引用中添加COM---找 ...

  9. flash透明 处于最低

    怎样在html中让flash透明 前提是FLASH里没有用其它形状或图形来作为背景.方法主要是在网页中的Flash加入一个参数,让网页设定Flash文件背景透明,Flash文件本身做不到. 关键: & ...

  10. HDU 1788

    必须MARK下:任何时候都要保持清醒头脑,不要被题目绕了.. 其实就是求最小公倍数. #include <iostream> #include <cstdio> #includ ...