JQuery已经使用了一段时间，但是有些API实现确实令人困惑。参考了边肖相关资料的源代码，现在和大家分享一下我的学习过程和收获。
JQuery已经使用了一段时间，但是有些API实现确实令人困惑。参考了边肖相关资料的源代码，现在和大家分享一下我的学习过程和收获。
下面将用简化的代码进行介绍，重点介绍jQuery的实现思路~ _ ~
//立即匿名执行函数
//.防止地球空间污染
//.选择性保护内部变量
(功能(窗口，未定义){
//设置了第二个参数undefined但没有传输的原因：
//这是外部发生的：当var undefined=，undefined会被篡改。
//设置第二个参数而不传递，未定义的将被重置回初始值。
函数jQuery(sel){
返回新的jquery . prototype . init(sel)；
}
jQuery.prototype={
构造函数：jQuery，
init:函数(sel){
if(typeof sel==='string'){
var that=this
//jQuery内部用Sizzle，这里用querySelectorAll代替。
var nodeList=document . query selector all(sel)；
array . prototype . foreach . call(nodeList，function(val，i){
that[I]=val；
})
this.selector=sel
this . length=nodelist . length；
}
}
}
jquery . prototype . init . prototype=jquery .原型；
//对外公开jQuery:将jQuery绑定到窗口。
窗户。$=jQuery
})(窗口)；
-
起初，jQuery用匿名立即执行函数包装其内部，并在第5行暴露出来；
所谓匿名立即执行函数，就是这个函数是匿名的(没有名字)，定义后立即调用；
当我们外部调用$('div ')时，实际上调用的是内部的jQuery(' div ')；
(功能(窗口，未定义){
//内部变量
//对外公开jQuery:将jQuery绑定到窗口。
窗户。$=jQuery
})(窗口)；
$('div ')
-
好吧，那就有点复杂了。下面的代码主要实现如图所示的交叉引用：
以$('div ')调用为例：
从第2行的代码可以看出，jQuery使用jQuery.prototype.init实例化jQuery对象，但这带来了一个问题：
实例化的对象只能访问init下的变量，不能访问jQuery.prototype(jQuery提供的jQuery API绑定在这个对象下)。
因此，填充第21行代码并将init.prototype指向jQuery.prototype
这样做了，用init实例化，在init的作用域下可以访问jQuery.prototype。
函数jQuery(sel){
返回新的jquery . prototype . init(sel)；
}
jQuery.prototype={
构造函数：jQuery，
init:函数(sel){
if(typeof sel==='string'){
var that=this
//jQuery内部用Sizzle，这里用querySelectorAll代替。
var nodeList=document . query selector all(sel)；
array . prototype . foreach . call(nodeList，function(val，i){
that[I]=val；
})
this.selector=sel
this . length=nodelist . length；
}
}
}
jquery . prototype . init . prototype=jquery .原型；
为什么使用jQuery.prototype.init来实例化对象，而不直接使用jQuery函数呢？
假设使用jQuery函数实例化对象，那么对象之间的引用确实可以简化为jQuery - jQuery.prototype
但是调用会变得繁琐：new $('div ')，所以基于这个考虑(guess ( 0 ))，在内部使用了更复杂的实现来简化调用。
-
好了，最后我们来看看init的实现。它还简化了代码，只实现了最常用的情况。
JQuery会把获取的nodeList处理成一个数组(方便后续使用)，并在它下面挂载一些变量，比如length，selector。
init:函数(sel){
if(typeof sel==='string'){
var that=this
//jQuery内部用Sizzle，这里用querySelectorAll代替。
var nodeList=document . query selector all(sel)；
array . prototype . foreach . call(nodeList，function(val，i){
that[I]=val；
})
this.selector=sel
this . length=nodelist . length；
}
}
本文到此结束。下一篇文章将介绍jQuery链调用和显示知识。更多信息请关注我们的网站！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。