1. 程式人生 > >jquery原始碼分析(1)---框架結構

jquery原始碼分析(1)---框架結構

jq原始碼分析 (version2.2.3)

  1. 定義變數和函式然後掛載到了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支援模組化的支援。