jQuery的初始化與對象構(gòu)建之淺析
更新時(shí)間：2011年04月12日 00:14:37 作者：
之前本人的工作和學(xué)習(xí)多以原生js 為主，對jQuery 一直都不是很了解，但jQuery 作為當(dāng)今最優(yōu)秀的js 類庫之一，必須是要花時(shí)間好好學(xué)習(xí)下的，今天正好蛋疼，讀了里面一些代碼
小結(jié)一下：
1.整個(gè)類庫定義在一匿名函數(shù)中，杜絕了全局變量的產(chǎn)生；
2.將undefined 作為缺失的參數(shù)傳遞，防止了undefined 變量的污染；
3.可以看出$(...) 實(shí)際上返回的是jQuery.fn.init 對象的實(shí)例，隨后將該對象的prototype 指向了jQuery.prototype (語句jQuery.fn.init.prototype = jQuery.fn)，因此產(chǎn)生的實(shí)例共享著jQuery.prototype 里的方法和屬性且實(shí)現(xiàn)了鏈?zhǔn)骄幊痰牟僮鳎?
4.最后通過window.jQuery = window.$ = jQuery 將jQuery 與$ 導(dǎo)出為全局變量。
(function(window, undefined) {
// Define a local copy of jQuery
var jQuery = (function() {
var jQuery = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context/*, rootjQuery*/);
};
// ...
jQuery.fn = jQuery.prototype = {
constructor : jQuery,
init : function(selector, context, rootjQuery) {
// ...
}
// ...
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
// ...
// Expose jQuery to the global object
return jQuery;
})();
// ...
window.jQuery = window.$ = jQuery;
})(window);
1.整個(gè)類庫定義在一匿名函數(shù)中，杜絕了全局變量的產(chǎn)生；
2.將undefined 作為缺失的參數(shù)傳遞，防止了undefined 變量的污染；
3.可以看出$(...) 實(shí)際上返回的是jQuery.fn.init 對象的實(shí)例，隨后將該對象的prototype 指向了jQuery.prototype (語句jQuery.fn.init.prototype = jQuery.fn)，因此產(chǎn)生的實(shí)例共享著jQuery.prototype 里的方法和屬性且實(shí)現(xiàn)了鏈?zhǔn)骄幊痰牟僮鳎?
4.最后通過window.jQuery = window.$ = jQuery 將jQuery 與$ 導(dǎo)出為全局變量。
復(fù)制代碼 代碼如下:
(function(window, undefined) {
// Define a local copy of jQuery
var jQuery = (function() {
var jQuery = function(selector, context) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init(selector, context/*, rootjQuery*/);
};
// ...
jQuery.fn = jQuery.prototype = {
constructor : jQuery,
init : function(selector, context, rootjQuery) {
// ...
}
// ...
};
// Give the init function the jQuery prototype for later instantiation
jQuery.fn.init.prototype = jQuery.fn;
// ...
// Expose jQuery to the global object
return jQuery;
})();
// ...
window.jQuery = window.$ = jQuery;
})(window);
您可能感興趣的文章:
- JavaScript/jQuery、HTML、CSS 構(gòu)建 Web IM 遠(yuǎn)程及時(shí)聊天通信程序
- 使用jQuery.wechat構(gòu)建微信WEB應(yīng)用
- jQuery學(xué)習(xí)筆記之jQuery構(gòu)建函數(shù)的7種方法
- Jquery 快速構(gòu)建可拖曳的購物車DragDrop
- 精選的10款用于構(gòu)建良好易用性網(wǎng)站的jQuery插件
- 讀jQuery之三（構(gòu)建選擇器）
- JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table分頁代碼效率初探
- JQuery 構(gòu)建客戶/服務(wù)分離的鏈接模型中Table中的排序分析
- 實(shí)例詳解jQuery的無new構(gòu)建
- 深入理解jQuery()方法的構(gòu)建原理
相關(guān)文章
Jquery.TreeView結(jié)合ASP.Net和數(shù)據(jù)庫生成菜單導(dǎo)航條
在網(wǎng)上瀏覽了許多關(guān)于利用Jquery.TreeView插件生成樹的例子！但是大多數(shù)都沒有結(jié)合數(shù)據(jù)庫來生成樹，很難運(yùn)用到實(shí)際項(xiàng)目中！2010-08-08
jquery 頁面滾動(dòng)到指定DIV實(shí)現(xiàn)代碼
頁面滾動(dòng)到指定DIV的方法有很多，在本文將為大家介紹下jquery是如何實(shí)現(xiàn)的2013-09-09
點(diǎn)擊鏈接或按鈕時(shí)要確認(rèn)是否繼續(xù)當(dāng)前操作。2010-06-06
最近一直研究JQUERY的CHECKBOX,前面我已經(jīng)介紹了CHECKBOX的全選和取消全選,而今天我繼續(xù)給大家分享第三種方法,同時(shí)還能實(shí)現(xiàn)CHECKBOX的反選和指定選取,當(dāng)然我們得先下載2008-08-08
本文主要介紹了jQuery實(shí)現(xiàn)驗(yàn)證碼功能的示例代碼，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03
JQuery的AJAX實(shí)現(xiàn)文件下載的小例子
JQuery的ajax函數(shù)的返回類型只有xml、text、json、html等類型，沒有“流”類型，所以我們要實(shí)現(xiàn)ajax下載，不能夠使用相應(yīng)的ajax函數(shù)進(jìn)行文件下載。但可以用js生成一個(gè)form，用這個(gè)form提交參數(shù)，并返回“流”類型的數(shù)據(jù)。在實(shí)現(xiàn)過程中，頁面也沒有進(jìn)行刷新2013-05-05
前面我們講述了jQuery中ajax的load（）方法，小伙伴們反應(yīng)非常好，今天我們就來講解下jQuery中Ajax的get、post等方法，希望大家同樣能夠喜歡。2015-01-01
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)簡單輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
基于BootStrap環(huán)境寫jQuery tabs插件
這篇文章主要介紹了基于BootStrap環(huán)境寫jQuery tabs插件的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
在閱讀本文之前，相信大家對 jQuery 的總體架構(gòu)已經(jīng)了解了，這一篇文章主要來介紹 jQuery 的入口函數(shù) jQuery.fn.init。有需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02