【你的jQuery?是你的jQuery】(一)——jQuery的架子
目的:
了解jQuery整體結構,自己構造出$(oo).xx這種東西
解析:
在jQuery中,你會發現整篇滿眼的“$(xx)”、“$(oo).css(xx)”這種,是的,它就是構造jQuery對象的構造函數簡稱,你可以這樣理解:$==window.$==window.jQuery
也就是說我們常用的$為widow對象下的一個屬性,那么這個屬性是怎么跑到window上的呢?
我們先把源碼中多余的代碼去掉會看到:
一:
1 (function(window,undefined){ 2 3 //code 4 5 })(window)
說明:
1、通過定義一個匿名函數,創建了一個“私有”的命名空間,該命名空間下,你可以玩命定義你的var變量而不會破壞全局的命名空間。
2、通過傳入window變量,使得window由全局變量變為局部變量,當在jQuery代碼塊中訪問window時,不需要將作用域鏈回退到頂層作用域,這樣可以更快的訪問window;這還不是關鍵所在,更重要的是,將window作為參數傳入,可以在壓縮代碼時進行優化
3、參數列表中增加undefined,確保undefined是真的未定義。因為undefined能夠被重寫,賦予新的值。(undefined = "123";)這樣。
二:
我們將代碼擴充一下
1 (function (window, undefined) { 2 var jQuery = window.jQuery = window.$ = function (selector, context) { 3 return new jQuery.fn.init(selector, context); 4 } 5 jQuery.fn = jQuery.prototype = { 6 init: function (selector, context) { 7 }, 8 jquery: "xxx" 9 } 10 jQuery.fn.init.prototype = jQuery.fn; 11 })(window) 12 alert($().jquery) //成功構造出$(oo).xx這種東西
說明:
1、selector:也就是你傳入$()內的參數,形如$("#id")、$(".class")、$("div p span")
2、context:可選參數,會默認成當前節點的上下文
3、new jQuery.fn.init:jQuery真正的入口,創建出各種jQuery對象
4、jQuery.fn.init.prototype = jQuery.fn;此句為關鍵代碼,將上一條說明中創建的jQuery實例對象的原型鏈連上jQuery的原型方法,原型鏈不太懂的同學可以看下這個【javascript繼承】之——原型鏈繼承和類式繼承
(本篇至此,其他內容未完,待續……)
下一節提示:
介紹jQuery的基本組成,了解到底什么是jQuery對象,以及常說的jQuery對象的”原型方法”和“靜態方法”
浙公網安備 33010602011771號