jQuery框架介绍

JQuery已经使用了一段时间，但是一些API实现确实令人困惑。边肖参考了相关资料的源代码，现在我就和大家分享一下我的学习过程和收获。

下面将用简化代码介绍，重点介绍jQuery的实现思路~ _ ~。

//匿名立即执行函数//。防止全球空间被污染。选择性保护内部变量(函数(window，undefined){//第二个参数未定义但不传输的原因：//当这种情况在外部发生时，undefined会在：var undefined=时被篡改。//设置第二个参数，但不传输。Undefined将重置回原始值函数jquery(sel){返回new jquery . prototype . init(sel)；} jQuery . prototype={ constructor : jQuery，init : function(sel){ if(type of sel==' string '){ var that=this；//jQuery内部使用Sizzle，这里使用的是querySelectorAll，而不是varnodelist=document . query selectorall(sel)；array . prototype . foreach . call(nodeList，function(val，I){ that[I]=val；})this . seller=sel；this . length=nodelist . length；} } } jquery . prototype . init . prototype=jquery . prototype；//对外公开jQuery:将jQuery绑定到window。$=jQuery})(窗口)；-

一开始，jQuery用匿名立即执行函数包装了它的内部，并在第5行公开了它。

所谓匿名立即执行函数，是指这个函数是匿名的(没有名字)，定义后立即调用；

当我们在外部调用$('div ')时，我们实际上是在调用内部jquery ('div ')。

(函数(window，undefined){//内部变量//向外界公开jQuery:将jQuery绑定到window。$=jQuery})(窗口)；$(“div”)-

好了，下面稍微复杂一点。下面的代码主要实现了如图所示的相互引用：

以$('div ')调用为例：

从第二行代码中可以看到，jQuery使用jQuery.prototype.init来实例化jQuery对象，但是这带来了一个问题：

实例化的对象只能访问init下的变量，而不能访问jquery . prototype(jquery提供的API绑定在这个对象下)。

因此，添加第21行代码，并将init.prototype指向jQuery.prototype.

就是这样，用init实例化它，并在init作用域下访问jQuery.prototype。

函数jQuery(sel){返回新的jQuery . prototype . init(sel)；} jQuery . prototype={ constructor : jQuery，init : function(sel){ if(type of sel==' string '){ var that=this；//jQuery内部使用Sizzle，这里使用的是querySelectorAll，而不是varnodelist=document . query selectorall(sel)；array . prototype . foreach . call(nodeList，function(val，I){ that[I]=val；})this . seller=sel；this . length=nodelist . length；} } } jquery . prototype . init . prototype=jquery . prototype；为什么用jQuery.prototype.init来实例化一个对象，而不是直接用jQuery函数呢？

假设jQuery函数用于实例化对象，这样对象之间的引用确实可以简化为jQuery - jQuery.prototype

但是，调用将变得复杂：new $('div ')，因此基于这一考虑(猜测( 0 ))，内部使用了更复杂的实现来简化调用。

-

好了，最后，让我们看看init的实现。它还简化了代码，只实现了最常用的情况。

JQuery会将得到的nodeList处理成数组(方便后续使用)，并在它下面挂载一些变量，比如长度、选择器。

init:函数(sel){ if(type of sel==' string '){ var that=this；//jQuery内部使用Sizzle，这里使用的是querySelectorAll，而不是varnodelist=document . query selectorall(sel)；array . prototype . foreach . call(nodeList，function(val，I){ that[I]=val；})this . seller=sel；this . length=nodelist . length；}}本文到此结束。下一篇文章将介绍jQuery链调用并展示知识。更多信息请关注我们的网站！