jQuery實現原理

Limyes發表於2018-06-05
jQuery

本文講述的是怎樣在不使用js原生和jQuery提供的API,實現和jQuery一樣的效果。

舉例:addClass（新增類名）

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>複製程式碼

第一步：獲取物件

如果我們要給第二個li加類名：

var litag=document.querySelector('ul li:nth-child(2)')複製程式碼

第二步：給這個li新增類名

litag.classList.add('checkli')複製程式碼

第三步：封裝成一個函式方便呼叫

function addClass(){
   var litag=document.querySelector('ul li:nth-child(2)')
   litag.classList.add('checkli')
}複製程式碼

第四步：把變數換成引數傳入

function addClass(selector,newclassname){
    var litag=document.querySelector(selector)
     litag.classList.add(newclassname)
}複製程式碼

第五步：呼叫函式，新增類名

addClass.call('undefined','ul>li:nth-child(2)','red');
複製程式碼

如果想要選擇多個li，就要變成這樣：

function addClass(selector,newclassname){
    var litags=document.querySelectorAll(selector)   //選擇多個內容，獲得的結果是陣列
    for(var i=0;i<litags.length;i++){   //遍歷陣列中的每一個
         litags[i].classList.add(newclassname)
    }
}複製程式碼

但是這種呼叫形式看起來太怪了，想要換成node.addClass()，有兩種方法：
1：把這個方法加到對應的原型上去，就可以直接呼叫了，此處對應的原型是Node.prototype,所以呼叫方式如下：

Node.prototype.addClass=function(newclassname){
    this.classList.add(newclassname)
}
xxx.addClass.call(xxx,'red')//此處xxx就是this，也可以直接寫作this複製程式碼

2：把這個方法再包一層方法名再呼叫

var addClass2=function(selector){
	var node;
	if(typeof selector === "string"){//判斷傳入的引數型別是選擇器還是節點
	    node=document.querySelector(selector);
	}else{
	    node=selector;
	}
	return {
		addClass:function(newclassname){
		        node.classList.add(newclassname);
		        return node;
		    }
		}
}	
var litag=addClass2.call('undefined',"#xxx");
litag.addClass.call('undefined','red');
複製程式碼

如果把上面的addClass2換成jQuery,再用$替換jQuery，如下所示：

window.jQuery=function(nodeorselector){
	var nodes;
	if(typeof nodeorselector === "string"){
		nodes=document.querySelectorAll(nodeorselector);
	}else{
		nodes=nodeorselector;
	}
	return {
		addClass:function(classname){
			for(var i=0;i<nodes.length;i++){
				nodes[i].classList.add(classname);
			}
			return nodes;	
		},
		setText:function(text){
			for(var i=0;i<nodes.length;i++){
				nodes[i].textContent=text;
			}
			return nodes;	
		}
	}
}
	window.$ = jQuery;		
	var $div = $('div')
	$div.addClass('red')//給所有div新增類名
	$div.setText('hi')//給所有div設定內容文字
複製程式碼

以上即jQuery實現原理，jQuery的本質是一個建構函式，接受我們傳入的引數，然後根據js的原生API操作引數對應的節點，返回一個結果。

call用法：

call(引數1，引數2)，call的第一個引數就是this，剩下的引數都是arguments,this一般指向呼叫函式的那個物件，使用call時第一個引數不可省略，沒有特別說明時可以設定undefined,在普通模式下，如果this是undefined,瀏覽器會自動把this變成window；如果是嚴格模式下，this就是undefined本身。


相關文章