Heim > Artikel > Web-Frontend > Analyse von Missverständnissen über die Datenmethode in jQuery_jquery
Als Bruder Xie Liang und ich heute etwas besprachen, sprachen wir über die Leistung. Er verwendete attr, um das benutzerdefinierte Attribut data-uid zu bedienen. Ich sagte, dass es besser sei, Daten zu verwenden, da diese durch den Datensatz implementiert würden Ich habe mir jQuery angesehen und der Quellcode sagte mir, dass dieses Ding nicht gefunden wurde, also war ich verwirrt. Also habe ich den Quellcode der Datenmethode sorgfältig gelesen und festgestellt, dass ich ihn noch einmal falsch verstanden habe. Ich möchte mich noch einmal bei der Gruppe von Freunden entschuldigen, die mich zuvor nach der Datenmethode gefragt haben. Also komm und schlag mich.
Heute werde ich die Datenmethode noch einmal erklären. Schauen wir uns zunächst an, was im jQuery 1.11.0-Handbuch gesagt wird. Bitte gehen Sie zu http://shouce.jb51.net/jquery/data. html ,
Die Verwendung ist hier sehr klar, aber wie wird sie intern implementiert? Klicken Sie auf mich, um den Quellcode anzuzeigen (Es spielt keine Rolle, wenn Sie ihn nicht verstehen, ich werde seinen Prozess kurz analysieren)
其实是这样的,当我们执行例如这样的语句时 $("#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]" 这个应该也有不少人遇到,至少群里有不少人问过这个问题。
Eigentlich habe ich Sie vorher nicht angelogen. Es besteht keine Notwendigkeit, attr immer für benutzerdefinierte Attribute zu verwenden. Daten sind ein Schweizer Taschenmesser, das uns von jQuery gegeben wurde, und das ist sehr scharf.
Okay, ich bin faul und zu faul, um Bilder zu illustrieren. Ich habe bereits viele Wörter geschrieben, die falsch sind, melden Sie sich bitte bei mir