jQuery_jquery의 데이터 메소드에 대한 오해 분석

오늘 Xie Liang 형제와 뭔가 논의할 때 attr을 사용하여 사용자 정의 속성 data-uid를 운영하는 것이 데이터 세트로 구현되기 때문에 data를 사용하는 것이 더 좋다고 말했습니다. jQuery를 보러 갔습니다. 소스 코드에서 이 항목을 찾을 수 없다고 해서 당황했습니다. 그래서 저는 데이터 방식의 소스 코드를 주의 깊게 읽어보았지만, 제가 계속해서 오해하고 있었다는 것을 알게 되었습니다. 다시 한 번, 제가 이전에 데이터 방식에 대해 "거짓말"을 했는지 물어본 친구들에게 사과하고 싶습니다. 너, 그러니 와서 나 좀 때려봐.

오늘은 데이터 방식에 대해 다시 설명하겠습니다. 먼저 jQuery 1.11.0 매뉴얼에 나와 있는 내용을 살펴보겠습니다. .html , 여기에서는 사용법이 매우 명확하지만 내부적으로 어떻게 구현됩니까?
클릭하시면 소스코드를 보실 수 있습니다 (이해가 안되셔도 상관없으니 간략하게 프로세스를 분석해보겠습니다)

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

사실 이전에는 거짓말을 하지 않았습니다. 사용자 정의 속성에 항상 attr을 사용할 필요는 없습니다. Data는 jQuery에서 제공한 스위스 군용 칼로 매우 예리합니다.

알겠습니다. 제가 게을러서 그림을 그리기도 힘드네요. 제가 이미 글을 많이 썼는데, 틀린 내용이 있으면 연락주세요