jquery原始碼分析(1)---框架結構
阿新 • • 發佈:2019-01-28
jq原始碼分析 (version2.2.3)
- 定義變數和函式然後掛載到了window上:通過自執行匿名函式的方式實現. 區域性作用域。然後函式內部將方法掛載到window上面方便外部呼叫的同時,不汙染全域性作用域。ex
(function(){
var a = 1;
function show(){
alert(a)
}
window.show = show;
})()
show()//1
45行到89行定義了一些變數和函式。重要的函式:jquery函式等。9810行將其掛載到了window上面:
if ( !noGlobal ) {
window .jQuery = window.$ = jQuery;
}
91行開始,在jquery物件的原型上面掛載方法。
jQuery.fn = jQuery.prototype ={}
175行到243行,extend:jquery繼承的一些方法key,希望後續新增的方法可以通過extend新增到jquery物件。
244行到511行擴充套件一些工具方法:
$().css();//只能是jquery物件用
//區別於以下的工具方法:可以給jquery和原生物件使用,更底層。
$.trim();
$.proxy()
545行到2680行。sizzle:複雜選擇器功能的實現(多層)。
3144到3337行。jquery的回撥物件callbacks:函式的統一管理。ex
function fn1(){alert(1)};
function fn2(){alert(2)};
var cb = $.Callbacks;
//新增:
cb.add(fn1);
cb.add(fn2);
//同時呼叫
cb.fire();//1,2
//刪除
cb.remove(fn2)
3339行到3487行:Defered:延遲物件:對非同步的統一管理。(定時器,ajax)ex:
setTimeout(function(){
alert(1)
},1000)
alert(2);
// 2,1
//如何改變順序?
var dfd = $.Defered();
setTimeout(function (){
alert(1);
dfd.resolve();
},1000)
dfd.done(function(){
alert(2)
})
//實現的機制是利用了回撥函式
3660行到3853行:data();資料快取。ex:
//將資料掛載到元素身上
$('#div1').data('name','hello');
$('#div1').data('name')//hello.
//避免直接在元素身上掛載引用型別的時候出現記憶體洩漏
4036到4168。queue,dequeue:佇列管理,執行順序管理。ex:動畫佇列:
$('#a').animate({left:100});
$('#a').animate({top:100});
$('#a').animate({left:100});
後邊的內容分為:
1. 對元素屬性的操縱attr();prop();val();….
2. on(),trigger();…事件操作;
3. DOM操作:新增,刪除,獲取
4. css();方法樣式操作。相容性,寫法,單位等。
5. 提交的資料和ajax的操作。ajax();load();getJson();
6. animate();運動相關的操作。
7. offset();位置與尺寸相關的方法。
8. jq支援模組化的支援。