Data封装的方法的后面四个方法 和 dataAttr方法阅读。

Data.prototype = {

  key: function( owner ) {},

  set: function( owner, data, value ) {},

  get: function( owner, key ) {},

  // 该方法集中处理了几种情况。该方法看似没什么用,其实它是暴露给用户的data方法的统一处理入口。
     access: function( owner, key, value ) {
        var stored;
        // 如果key和value没有传入,或者((key传入了并且key是String)但是value没有传入)
        if ( key === undefined ||
                ((key && typeof key === "string") && value === undefined) ) {
            //调用Data的get方法从owner上取出key的value。如果key为undefined,返回的是owner的所有数据
            stored = this.get( owner, key );
            //如果stored有值则返回该值,否则将key转换成驼峰式的字符串再次调用get方法取值,并返回
            //也就是 如果key类似于"a-bc",会取出"a-bc" 和"aBc"的值
            return stored !== undefined ?
                stored : this.get( owner, jQuery.camelCase(key) );
        }

//如果key和value都存在,或者key不是字符串(是对象),则调用Data的set方法,储存数据。
        this.set( owner, key, value );
    // 返回value或者是key,为啥。
        return value !== undefined ? value : key;
    },

  // 删除owner存在cache中的key对应的值
    remove: function( owner, key ) {
        var i, name, camel,
            // 拿到对应的cache索引
            unlock = this.key( owner ),
            // 通过索引取出存储在cache中的值
            cache = this.cache[ unlock ];
        // 如果没有传入key,则将此索引(键)对应的值设置为空对象(全部删除)
        if ( key === undefined ) {
            this.cache[ unlock ] = {};
    // 如果传入了key
        } else {
            // 支持array或者是以空字符分割的String
            if ( jQuery.isArray( key ) ) {
                // 将key中的元素复制一份并转换成驼峰式,连接到原始数据的后面
                name = key.concat( key.map( jQuery.camelCase ) );
            } else {

       // 如果不是数组,将key转换成驼峰式
                camel = jQuery.camelCase( key );
                // 如果key是cache中的其中一个键
                if ( key in cache ) {

        // 将key和脱分化之后的key组成一个数组赋值给name
                    name = [ key, camel ];
                } else {
                    // 否则直接将驼峰化之后的key赋值个name
                    name = camel;

         // 看看驼峰化之后的key是不是cache的键(统一格式)
                    name = name in cache ?
                        [ name ] : ( name.match( core_rnotwhite ) || [] );
                }
            }  
     // 删除key或者驼峰化之后的key
            i = name.length;
            while ( i-- ) {
                delete cache[ name[ i ] ];
            }
        }
    },
    //检查owner(DOM)上是否有数据
    hasData: function( owner ) {
        return !jQuery.isEmptyObject(
            this.cache[ owner[ this.expando ] ] || {}
        );
    },

  // 删除owner上所有的数据,包括owner和cache的对应关系
    discard: function( owner ) {
        if ( owner[ this.expando ] ) {
            delete this.cache[ owner[ this.expando ] ];
        }
    }
};

// 该方法是对DOM中属性为“data-xxx”的处理

function dataAttr( elem, key, data ) {
    var name;
    //如果从内部没有找到任何数据,则尝试读取DOM元素的attribute,找出以"data-"开头的属性
    if ( data === undefined && elem.nodeType === 1 ) {
        // 将驼峰化转换成'-'连接的小写字符串 (匹配大写字母,并将大写字母转换成"-小写字母"的形式)
        name = "data-" + key.replace( rmultiDash, "-$1" ).toLowerCase();
        // 从DOM上读取其"data-"开头的属性的值
        data = elem.getAttribute( name );
        // 如果data是String类型,则根据其String中的内容对其进行不同的处理
        if ( typeof data === "string" ) {
            //使用try catch的原因是?
            try {
                // 如果字符串是"true",则将字符串转换成boolean类型的true。false、null同true。
                data = data === "true" ? true :
                    data === "false" ? false :
                    data === "null" ? null :
                    // 将其转换成数字再转换成字符串之后如果没有变化,则将其转换成数字?
                    +data + "" === data ? +data :
                    // 如果其中有{}或者[],则解析这个字符串成为json格式
                    rbrace.test( data ) ? JSON.parse( data ) :
                    data;
            } catch( e ) {}
            // 将在DOM属性上读取的数据存储到Data的cache中
            data_user.set( elem, key, data );
        } else {
            data = undefined;
        }
    }
    return data;
}

jQuery缓存机制(四)的更多相关文章

  1. jQuery缓存机制(一)

    1.首先看一下涉及到jQuery缓存机制的代码结构: // 定义一些jQuery内部的变量,方便后续使用 var data_user, data_priv, // 后续会被赋值为两个Data对象 rb ...

  2. jQuery缓存机制(三)

    缓存机制提供的入口有: $.data([key],[value]) // 存取数据 $.hasData(elem) // 是否有数据 $.removeData([key]) // 删除数据 $.acc ...

  3. (五)JS学习笔记 - JQuery缓存机制

    历史背景 开发中常常因为方便,把状态标志都写到dom节点中,也就是HTMLElement,缺点: 循环引用 直接暴露数据,安全性? 增加一堆的自定义属性标签,对浏览器来说是没意义的 取数据的时候要对H ...

  4. jQuery缓存机制(二)

    1.从用户调用的入口开始阅读,因为这是我们比较熟悉的部分(主要做参数的调整,根据不同的完成不同的功能) // 进入jQuery Data模块的入口 使用方法有三种,不传参,传一个参,传两个参.示例$( ...

  5. jquery源码解析:jQuery数据缓存机制详解1

    jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...

  6. jquery源码解析:jQuery数据缓存机制详解2

    上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...

  7. JS高级. 06 缓存、分析解决递归斐波那契数列、jQuery缓存、沙箱、函数的四种调用方式、call和apply修改函数调用方法

    缓存 cache 作用就是将一些常用的数据存储起来 提升性能 cdn //-----------------分析解决递归斐波那契数列<script> //定义一个缓存数组,存储已经计算出来 ...

  8. mybatis(四)缓存机制

    转载:https://www.cnblogs.com/wuzhenzhao/p/11103043.html 缓存是一般的ORM 框架都会提供的功能,目的就是提升查询的效率和减少数据库的压力.跟Hibe ...

  9. Java缓存学习之二:浏览器缓存机制

    浏览器端的九种缓存机制介绍 浏览器缓存是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户.浏览器端缓存 ...

随机推荐

  1. 如何让Snippet Compiler 2008 支持linq

    转载自:http://www.cnblogs.com/hbb0b0/archive/2009/09/01/1557832.html 注意,下面的图和上面的图,有些不同  上面是在 FileSystem ...

  2. js作为参数,并且返回值;js的回调模式 callback

    有这样一个情景,当我们弹出一个 prompt的时候,要求用户在文本框输入一个文字,然后点击确认,就可以拿到返回值 var temp=prompt("请输入您的名字");     a ...

  3. linux 系统安装配置 zabbix服务(源码安装)

    简介: zabbix是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵活的通知机制以让系统管理员快速定 ...

  4. 文本处理三剑客之 sed详解

    1.简介 sed是非交互式的编辑器,它不会修改文件,除非使用shell重定向来保存结果.默认情况下,所有的输出行都被打印到屏幕上. sed编辑器逐行处理文件(或输入),并将结果发送到屏幕.具体过程如下 ...

  5. vncviewer 通过ipv6连接

    vncserver 填为: [ipv6-address]:port 即可,例如 [:da8::81f:f292:1cff:fe07:da3c]:

  6. Http请求的工具

    1.火狐的插件 HttpRequester 安装方法:火狐浏览器的最右上角的菜单,打开附件组件 ,搜索:HttpRequester,重启火狐浏览器.在菜单栏的工具下可以看到 HttpRequester ...

  7. Unity3d游戏开发中使用可空类型(Nullable Types)

    你怎么确定一个Vector3,int,或float变量是否被分配了一个值?一个方便的方式就是使用可空类型! 有时变量携带重要信息,但仅仅有在特定的游戏事件发生时触发.比如:一个角色在你的游戏可能闲置, ...

  8. RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的“添加/删除程序”

    转自http://www.cnblogs.com/xiaochaohuashengmi/archive/2011/10/08/2203153.html 备忘 rpm 执行安装包 二进制包(Binary ...

  9. 在阿里云创建子域名,配置nginx,使用pm2部署node项目到ubuntu服务器

    配置域名 在阿里云找到主域名 进入主域名之后,右上角添加解析,添加子域名, 记录类型选择cname,主机记录填写子域名的名称,记录值为主域名,至此阿里云已经配置好了. 检查nginx安装 首先检查服务 ...

  10. ABBYY FineReader 12没你想得那么简单

    你是否觉得自己对ABBYY FineReader 12已经了如指掌了?也许你会认为它不过就是一款OCR文字识别软件,能够快速方便地将扫描纸质文档.PDF文件或者数码相机的图像转换为可编辑.可搜索的格式 ...