jQuery 2 0 3 原始碼分析 資料快取

var aa1=$("#aaron");

var aa2=$("#aaron");
// 覆蓋
// aa1.data('a',1111); //結果2222222
// aa2.data('a',2222); //結果2222222
// console.log(aa1.data('a'))
// console.log(aa2.data('a'))
// 不覆蓋
$.data(aa1,"b","1111")
$.data(aa2,"b","2222")
console.log($.data(aa1,"b")) //結果111111
console.log($.data(aa2,"b")) //結果222222
// 分析
//data()不會再dom element 書寫出值而是在記憶體中，不像attr
// 一：思考乙個問題?
// 設定$.data後移除remove()還是可以獲取帶值
// aa1.remove()
aa2.remove()
console.log($.data(aa1,"b")) //結果111111
console.log($.data(aa2,"b")) //結果222222
// 二：同樣，這些問題也存在於event 物件中，因為事件處理器(handlers)也是用該方法來儲存的
if ( elem.nodetype ) else 
// 實現解析
function data(), 0 ,;}})
this.expando = jquery.expando + math+randow();
}// 解析
// 接著把每個節點的dom[expando]的值都設為乙個自增的變數id，保持全域性唯一性。 
// 這個id的值就作為cache的key用來關聯dom節點和資料。也就是說cache[id]就取到了這個節點上的所有快取，即id就好比是開啟乙個房間(dom節點)的鑰匙。
// 而每個元素的所有快取都被放到了乙個map對映裡面，這樣可以同時快取多個資料。
// 所以cache物件結構應該像下面這樣
var cache = ,
"uid2": 
// ......
};// 流程分析
// 儲存：1.乙個陣列結果2.了把不把資料與dom直接關聯，所以會把資料儲存到乙個cache物件上，
// 把unlock標記號，作為乙個屬性值 賦予$body節點
// cache快取物件中開闢乙個新的空間用於儲存foo資料，this.cache[ unlock ] = {};
// 最後把foo資料掛到cache上,cache[ data ] = value;
// 獲取資料：從$body節點中獲取到unlock標記，通過unlock在cache中取到對應的資料cache[ unlock ]
// 那麼jquery.data() 與 .data() 有什麼區別？
// jquery.data()
jquery.extend(,
//直接呼叫 data_user.access 資料類的介面，傳入的是elem整個jquery物件
data: function( elem, name, data ) ,
........
// .data()
jquery.fn.extend( }}
},........
// 看jquery.data(element,[key],[value])，每乙個element都會有自己的乙個物件儲存著資料，
// 所以新建的物件就算有key相同它也不會覆蓋原來存在的物件key所對應的value，因為新物件儲存是是在另乙個物件中
// $("div").data("a","aaaa") 它是把資料繫結每乙個匹配div節點的元素上
// 原始碼可以看出來，說到底，資料快取就是在目標物件與快取體間建立一對一的關係,整個data類其實都是圍繞著 thia.cache 內部的資料做 增刪改查的操作

jQuery 2 0 3 原始碼分析 樣式操作

根據api分類 css對元素的樣式操作,底層的實現就是修改元素的classname值 實現的功能 增加一條樣式規則 addclass myclass 增加多條樣式規則 addclass myclass yourclass 傳遞 遍歷樣式規則 ul li last addclass function ...

jQuery 2 0 3 整體架構

示例 var jquery function jquery.fn jquery.prototype name function age 20 原型傳遞 jquery.fn.init.prototype jquery.fn 因為是引用傳遞，所以不用擔心迴圈引用的效能問題。示例 jquery.proto...

jQuery原始碼分析

工具 版本說明 版本號備註 jquery 2.1.1 sublime 3jquery function selector,context jquery.fn jquery.prototype 快速匹配正則 不加g 不光匹配整體項還會匹配到子項 rquickexpr s w w w init jque...