<!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. Windows Phone - 按钮/button 控件

    System.Windows.Controls.Button   button控件一.button控件的各种样式的展示可以通过 …… 来给控件定义公共的样式调用样式的方法:在Button控件上添加样式 ...

  2. YoC云上芯片家族迎来新成员

    Espressif 乐鑫信息科技(以下简称乐鑫科技)近日在上海召开发布会,发布其旗下最新的旗舰同时也是第二代Yun on Chip(简称YoC)云上芯片ESP32.YoC云上芯片是由YunOS牵头,联 ...

  3. 洛谷P3807 【模板】卢卡斯定理_组合数学模板

    Code: #include<cstdio> using namespace std; typedef long long LL; const int maxn=1000000+2; LL ...

  4. 洛谷P1540 机器翻译 水题 模拟

    注意一下细节,尤其是更新minv时不要更新错. Code: #include<vector> #include<iostream> #include<cstdio> ...

  5. WTM

    WTM的由来 WalkingTec.Mvvm框架(简称WTM)最早开发与2013年,基于Asp.net MVC3 和 最早的Entity Framework, 当初主要是为了解决公司内部开发效率低,代 ...

  6. java.util.Date日期类通过java语句转换成Sql(这里测试用的是oracle)语句可直接插入（如：insert into）的日期类型

    public void add(Emp emp) throws Exception{ QueryRunner runner = new QueryRunner(JdbcUtil.getDataSour ...

  7. Python笔记11------一个K-means聚类的小例子

    #导入scipy库,库中已经有实现的kmeans模块,直接使用, #根据六个人的分数分为学霸或者学渣两类 import numpy as np from scipy.cluster.vq import ...

  8. 【深入理解Java虚拟机】自动内存管理机制——垃圾回收机制

      Java与C++之间有一堵有内存动态分配和垃圾收集技术所围成的"高墙",墙外面的人想进去,墙里面的人却想出来.C/C++程序员既拥有每一个对象的所有权,同时也担负着每一个对象生 ...

  9. 关于linux系统的sendmail使用中的问题与解决

    系统环境是ubuntu16.04 安装 sudo apt-get install sendmail 检查运行情况 sudo service sendmail status 结果如下,表示正在运行 ● ...

  10. 慎用PHP的unset、array_unique方法

    背景 在日常工作中,可能会经常遇到一些PHP的代码场景,需要我们去除数组中的某个项,通常会直接调用unset方法,但是如果用得不妥,会给自己挖坑 1.实操 以下使用具体例子进行证明假设有数组如下值: ...