zoukankan      html  css  js  c++  java
  • jquery data方法取值与js attr取值的区别

    <a data-v="3"></a>

    jquery data方法的运行机制: 第一次查找dom,使用attributes获取到dom节点值,并将其值存到缓存里,第二次操作的时候,还是先找到dom,但是这次取值是直接从缓存读了,少了一步对dom的操作

    attr()方法每次都要操作dom,性能上差点儿

    $('a').data('v')取到的值是页面初次加载的缓存值,以后如何更改,在页面上都不会改变,但缓存值会变,可以传给i/o请求使用

    document.getElementsByTagName('a').attr('data-v'),如果页面响应事件ain改变了该值,其页面展示值也会改变,因为是一直操作的dom,性能上低于前者

    以下是盗图原文

    代码展示地https://github.com/jquery/jquery/blob/master/src/data.js#L77-L165

    其实是这样的,当我们执行例如这样的语句时 $("#id").data("test"); (简化后的过程) 
    第一步: jQuery 会获取到 $("#id") 元素,对吧、 
    第二步: 执行到 data方法 的时候,他会通过 attributes 取我们要的对应值。 
    第三步: 返回结果给我们,然后 jQuery 把值缓存到内部对象里 
    第一次取的时候,我们可以得到的 undefined,字符串,数字或者解析后的json。 
     
    那有人会说这个和 attr 有什么区别呢? 
    当我们第二次执行 $("#id").data("test"); 的时候: 
    第一步: jQuery 会获取到 $("#id") 元素,和上面一样。 
    第二步: 执行到 data方法 的时候,从 jQuery 的缓存中取值 
    第三步: 返回结果给我们 
     
    发现第二步不同了,对吧,为什么不是从 attributes 取值,而是从缓存中取呢? 
    缓存其实是js的对象,简单说就类似 var cache = {}; jQuery 在第一次取值之后就会保存到这个缓存对象中,这样我们再次操作的时候就非常快了、 
    往往性能的损耗都是在 dom 操作上,所以避免重复操作 dom 是非常必要的。 
     
    到这,也能看出他和 attr 最大的区别了,比如 <div id="id" data-test="hehe"></div> 
    $("#id").data("test", "123"); 执行后依然是 data-test="hehe"
    $("#id").attr("data-test", "123"); 执行后会是 data-test="123"
     
    那么我们要给一个元素赋值值,或者对象的时候他们有什么区别呢?比如 <div id="id" data-test="hehe"></div> 
    $("#id").data("test", {str: "hehe"}); 会把 {str: "hehe"} 赋值给 缓存,元素节点上依然是 data-test="hehe"
    $("#id").attr("data-test", {str: "hehe"}); 执行后会是 data-test="[object Object]"
    这个应该也有不少人遇到,至少群里有不少人问过这个问题。
  • 相关阅读:
    三个心态做人做学问 沧海
    成功走职场要找准自己的"快捷键" 沧海
    免费离线下载 拂晓风起
    Hibernate 获取某个表全部记录时 奇怪现象 (重复出现某个记录) 拂晓风起
    无法读取mdb 如果连接不了ACCESS mdb文件,就尝试安装MDAC 拂晓风起
    Netbeans 使用 Hibernate 逆向工程 生成hbm和pojo 拂晓风起
    如何点击单选框 radio 后面的文字,选中单选框 拂晓风起
    Java 连接access 使用access文件 不用配置 拂晓风起
    mysql下如何执行sql脚本 拂晓风起
    Hibernate配置access Hibernate 连接 access 拂晓风起
  • 原文地址:https://www.cnblogs.com/Aladingding/p/5164280.html
Copyright © 2011-2022 走看看