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本身。