jQuery中$原理實(shí)例分析
本文實(shí)例講述了jQuery中$原理。分享給大家供大家參考,具體如下:
1、外層沙箱及命名空間$
為了避免聲明了一些全局變量而污染,把代碼放在一個(gè)“沙箱執(zhí)行”,jQuery具體的實(shí)現(xiàn),都被包含在了一個(gè)立即執(zhí)行函數(shù)構(gòu)造的閉包里面,然后在暴露出命名空間(可以為API,函數(shù),對(duì)象),如只暴露 $ 和 jQuery 這2個(gè)變量給外界:
(function(window, undefined) { // 用一個(gè)函數(shù)域包起來(lái),就是所謂的沙箱 // 在這里邊var定義的變量,屬于這個(gè)函數(shù)域內(nèi)的局部變量,避免污染全局 // 把當(dāng)前沙箱需要的外部變量通過(guò)函數(shù)參數(shù)引入進(jìn)來(lái) // 只要保證參數(shù)對(duì)內(nèi)提供的接口的一致性,還可以隨意替換傳進(jìn)來(lái)的這個(gè)參數(shù) "use strict"; window.jQuery = window.$ = jQuery; ... // jQuery代碼 }) (window);
jQuery有一個(gè)針對(duì)壓縮優(yōu)化細(xì)節(jié),在代碼壓縮時(shí),window和undefined都可以壓縮為1個(gè)字母且確保它們就是window和undefined。外層函數(shù)只傳了一個(gè)參數(shù),因此沙箱執(zhí)行時(shí),u自然會(huì)undefined,把9個(gè)字母縮成1個(gè)字母,可以看出壓縮后的代碼減少一些字節(jié)數(shù)。
// 壓縮策略 // w -> window , u -> undefined (function(w, u) { "use strict"; w.jQuery = w.$ = jQuery; var a; if (a == u) return; })(window);
2、jQuery 無(wú) new 構(gòu)造
實(shí)例化一個(gè)jQuery對(duì)象的方法:
$('#text').text('myJQuery'); // 無(wú) new 構(gòu)造
等價(jià)于:
var text = new $('#text'); text.text('myJQuery');
使用jQuery時(shí)一般都使用無(wú)new的構(gòu)造方式,直接$('')
進(jìn)行構(gòu)造,這也是jQuery十分便捷的一個(gè)地方。當(dāng)使用無(wú)new
構(gòu)造方式時(shí),其本質(zhì)是相當(dāng)于new jQuery()
,在jQuery內(nèi)部的實(shí)現(xiàn)方式是:
(function(window, undefined) { // ... jQuery = function(selector, context) { // 實(shí)例化方法jQuery()實(shí)際上是調(diào)用了其拓展的原型方法 jQuery.fn.init return new jQuery.fn.init(selector, context, rootjQuery); }, // jQuery.prototype是jQuery的原型,掛載在上面的方法,即可讓所有生成的jQuery對(duì)象使用 jQuery.fn = jQuery.prototype = { // 實(shí)例化方法,這個(gè)方法可以稱作 jQuery 對(duì)象構(gòu)造器 init: function(selector, context, rootjQuery) { // ... } } // jQuery 沒(méi)有使用 new 運(yùn)算符將 jQuery 實(shí)例化,而是直接調(diào)用其函數(shù) // 要實(shí)現(xiàn)這樣,那么 jQuery 就要看成一個(gè)類,且返回一個(gè)正確的實(shí)例,且實(shí)例還要能正確訪問(wèn) jQuery 類原型上的屬性與方法 // jQuery 的方式是通過(guò)原型傳遞解決問(wèn)題,把 jQuery 的原型傳遞給jQuery.prototype.init.prototype,所以通過(guò)這個(gè)方法生成的實(shí)例 this 所指向的仍然是 jQuery.fn,所以能正確訪問(wèn) jQuery 類原型上的屬性與方法 jQuery.fn.init.prototype = jQuery.fn; })(window);
1) 使用$('xxx')
這種實(shí)例化方式,其內(nèi)部調(diào)用的是 return new jQuery.fn.init(selector, context, rootjQuery)
這一句話,也就是構(gòu)造實(shí)例是交給了 jQuery.fn.init()
方法去完成。
2) 將 jQuery.fn.init
的 prototype 屬性設(shè)置為 jQuery.fn
,那么使用 new jQuery.fn.init()
生成的對(duì)象的原型對(duì)象就是 jQuery.fn
,所以掛載到 jQuery.fn
上面的函數(shù)就相當(dāng)于掛載到 jQuery.fn.init()
生成的 jQuery 對(duì)象上,所有使用 new jQuery.fn.init()
生成的對(duì)象也能夠訪問(wèn)到 jQuery.fn 上的所有原型方法。
3) 實(shí)例化方法存在這么一個(gè)關(guān)系鏈 :
① jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype ;
② new jQuery.fn.init()
相當(dāng)于 new jQuery() ;
③ jQuery() 返回的是 new jQuery.fn.init()
,而 var obj = new jQuery()
,所以這 2 者是相當(dāng)?shù)?,所以我們可以無(wú) new 實(shí)例化 jQuery 對(duì)象。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
jQuery操作input type=radio的實(shí)現(xiàn)代碼
jQuery操作input type=radio的實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-06-06jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果【附demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)點(diǎn)擊后高亮背景固定顯示的菜單效果,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊菜單項(xiàng)后呈現(xiàn)出鼠標(biāo)滑過(guò)一樣的背景高亮顯示效果,同時(shí)該顯示效果固定不變,需要的朋友可以參考下2016-09-09讀jQuery之七 判斷點(diǎn)擊了鼠標(biāo)哪個(gè)鍵的代碼
jQuery中的which即可以是鍵盤的鍵值,也可以是鼠標(biāo)的鍵值。2011-06-06利用div+jquery自定義滾動(dòng)條樣式的2種方法
可以設(shè)置左邊菜單項(xiàng)div的overflow-x:auto;overlfow-y:auto;這樣就會(huì)自動(dòng)生成了滾動(dòng)條,但是大家都知道自帶的不好看。接下來(lái)就是重點(diǎn)了,如何修改滾動(dòng)條的樣式呢?感興趣的朋友可以了解下本文2013-07-07jquery 新手學(xué)習(xí)常見(jiàn)問(wèn)題解決方法
jquery 新手入門參考教程。2010-04-04使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10jQuery經(jīng)過(guò)一段時(shí)間自動(dòng)隱藏指定元素的方法
這篇文章主要介紹了jQuery經(jīng)過(guò)一段時(shí)間自動(dòng)隱藏指定元素的方法,實(shí)例分析了兩種比較常用的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03很棒的學(xué)習(xí)jQuery的12個(gè)網(wǎng)站推薦
jQuery是目前最流行的 JavaScript 庫(kù)。對(duì)于初學(xué)者來(lái)說(shuō),有的時(shí)候很難找到一個(gè)好的學(xué)習(xí)jQuery的網(wǎng)站,今天本文收集了12個(gè)很棒的 jQuery 學(xué)習(xí)網(wǎng)站推薦給大家。2011-04-04