背景介紹
jQuery可以說是流行最廣谜酒，使用量最多的一個js庫了。它極大的提高了人們工作的效率人灼，解決了困擾人們很久的dom不一致性所帶來的各種問題坐昙。jQuery最大的貢獻就是在dom操作這方面鳖擒，當(dāng)然它還提供其他方面的操作溉浙。下面我們來通過一個小的例子簡單介紹一下jQuery的實現(xiàn)原理。
內(nèi)部結(jié)構(gòu)
jQuery內(nèi)部其實是一個偽數(shù)組對象蒋荚，對象上還綁定一些自帶的屬性戳稽，比如說context,selector等。最重要的是jQuery的原型圆裕，接下來我們講广鳍。
構(gòu)造函數(shù)
把jQuery寫成構(gòu)造函數(shù)荆几，把所有的共用屬性寫在JQuery.prototype上吓妆，方便每個示例的調(diào)用，也節(jié)省了大量的內(nèi)存空間吨铸。如果是非構(gòu)造函數(shù)形式調(diào)用行拢，那么就new一個實例并返回。
window.jQuery = function(nodes){
//判斷是否使用 new 關(guān)鍵字
if(this instanceof jQuery){
this.init(nodes);
}else {
return new jQuery(nodes);
}
};
獲取節(jié)點
jQuery基于原生的Dom屬性與方法封裝了自己的選擇器方法诞吱。通過選擇器方法舟奠，可以把原生節(jié)點，選擇器字符串轉(zhuǎn)換為jQuery內(nèi)部節(jié)點房维。然后對節(jié)點進行操作沼瘫。由于選擇器方法比較復(fù)雜，我們就用現(xiàn)有的document.querSelectorAll()來代替咙俩，實現(xiàn)的效果相同耿戚。在構(gòu)造函數(shù)初始化的時候就去執(zhí)行這個方法。
//初始化函數(shù)阿趁，把nodes節(jié)點傳給this
jQuery.prototype.init = function(nodes){
var _this = this;
_this.length = 0;
if(typeof nodes === 'string'){
nodes = document.querySelectorAll(nodes);
}
for(var i=0;i<nodes.length;i++){
_this[_this.length] = nodes[i];
_this.length++;
}
};
addClass方法
jQuery有一個addClass方法膜蛔，我們這里模擬一下。不過只是一個簡易版脖阵，了解一下原理即可皂股。首先遍歷所有實例中的節(jié)點對象，然后每個執(zhí)行dom原生提供的classList.add()命黔。
//添加class
jQuery.prototype.addClass = function(className){
var _this = this;
for(var i = 0;i < _this.length;i++){
_this[i].classList.add(className)
}
};
setText方法
setText方法和addClass方法原理類似呜呐，都要遍歷實例中的節(jié)點對象就斤，然后每個執(zhí)行一遍dom提供的textContent的方法。
//添加文字
jQuery.prototype.setText = function(text){
var _this = this;
for(var i = 0;i < _this.length;i++){
_this[i].textContent = text;
}
};
window.$
為了使用戶用的方便卵史，最好能像jQuery一樣战转，直接使用$就可以，只需要設(shè)置window.$ = jQuery即可以躯。剛剛已經(jīng)講過內(nèi)部已經(jīng)判斷過是否是通過new 來構(gòu)造實例的槐秧，如果不是，內(nèi)部return new jQuery忧设。
調(diào)用測試
通過以下代碼調(diào)用刁标，基本都實現(xiàn)功能。如果想要實現(xiàn)鏈式調(diào)用址晕，直接在每個方法結(jié)尾return this即可膀懈。
$('div').addClass('red');
$('div').setText('h1');
總結(jié)
jQuery內(nèi)部提供了大量的api,如果有興趣，可以自己多實現(xiàn)一些方法谨垃。本文只是簡單介紹一下實現(xiàn)原理與結(jié)構(gòu)启搂。本文內(nèi)容僅供學(xué)習(xí)與交流使用，轉(zhuǎn)載請注明出處刘陶。
