Analyse des malentendus sur la méthode des données dans jQuery_jquery

Quand frère Xie Liang et moi discutions de quelque chose aujourd'hui, nous avons parlé de performances. Il a utilisé attr pour faire fonctionner l'attribut personnalisé data-uid, j'ai dit qu'il était préférable d'utiliser des données car elles sont implémentées par ensemble de données, puis il. Je suis allé voir jQuery. Le code source m'a dit que cette chose n'avait pas été trouvée, donc j'étais perplexe. Je suis donc allé lire attentivement le code source de la méthode des données, seulement pour découvrir que je l'avais mal compris. Encore une fois, je voudrais m'excuser auprès du groupe d'amis qui m'ont posé des questions sur la méthode des données auparavant. alors viens me frapper.

Aujourd'hui, je vais réexpliquer la méthode des données. Jetons d'abord un coup d'œil à ce qui est dit dans le manuel jQuery 1.11.0. Veuillez vous rendre sur http://shouce.jb51.net/jquery/data. html ,
L’usage est ici très clair, mais comment est-il mis en œuvre en interne ? Cliquez sur moi pour voir le code source (Ce n'est pas grave si vous ne comprenez pas, je vais analyser brièvement son processus)

其实是这样的，当我们执行例如这样的语句时 $("#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]"
这个应该也有不少人遇到，至少群里有不少人问过这个问题。

En fait, je ne vous ai pas menti avant. Il n'est pas nécessaire de toujours utiliser attr pour les attributs personnalisés. Les données sont un couteau suisse que jQuery nous a offert, qui est très tranchant.

D'accord, je suis paresseux et je suis trop paresseux pour illustrer des images. J'ai déjà écrit beaucoup de mots. Si quelque chose que je dis est faux, contactez-moi

.