简单概括⼀下jQuery的实现原理
1）jQuery的代码都是写在⼀个⽴即执⾏函数⾥⾯，形成私有作⽤域，避免命名空间污染
2）window 对象上有两个公共的接⼝，分别是 $ 和 jQuery：
window.jQuery = window.$ = jQuery;
，因此我们才可以在外部直接使⽤jQuery和
这⼀句话将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和。window是默认的JS上下⽂环境，因此将对象绑定到window上⾯，就相当于变成了传统意义上的全局变量
3）jQuery.fn指向jQuery.prototype，这样可以达到书写简洁的⽬的。
2）jQuery()和$()是jQuery中最常⽤的⽅法，他们的调⽤结果是返回⼀个jQuery实例对象，
3）编写组件通常的做法是将组件封装成⼀个对象，需要⽤的时候则通过new运算符来创建⼀个实例。但是jQuery( )⽆须我们⽤new⼿⼯实例化，它会⾃动返回⼀个实例(即隐藏了new的过程)。这是因为在jQuery()函数中返回了jQuery.prototype.init()的实例对象，⽽
jQuery.prototype.init.prototype=jQuery.prototype，这样new出来的init()实例对象能继承所有jQuery的⽅法，从⽽解决函数调⽤的问题。
var nodeList =(context || document).querySelectorAll(selector);
init()函数中将DOM节点赋值给了⾃⼰this[i] = nodeList[i]，因此返回的init对象是⼀个类数组，包含了DOM节点列表，还包括⼀些其他的⽅法。
var jQuery=function(){
return new jQuery.prototype.init();
}
jQuery.prototype ={
constructor: jQuery,
init:function(){
this.jquery =1.0;
return this;
},
jquery:2.0,
each:function(){
console.log('each');
return this;
}
}
jQuery.prototype.init.prototype = jQuery.prototype;
jQuery().each()//'each'
这样就形成了jQuery的⼀个核⼼框架
4）jQuery中的链式调⽤，使得代码书写简洁，⽽且返回的都是同⼀个对象，提⾼代码效率。实现原理是在原型函数的后⾯返回this对象5）jQuery中的⼀个重要函数extend()，可以对本⾝ jQuery 的属性和⽅法进⾏扩展（d()—静态函数），⼜可以对原型的属性和⽅法进⾏扩展（d—实例函数）。如果extend()函数只有⼀个object对象参数，那么将该object扩展到jQuery的命名空间中（浅拷贝）；如果有多个object，则表⽰将第⼆个参数及之后的参数属性拷贝到第⼀个对象上（浅拷贝）；如果第⼀个参数是boolean类型，true表⽰深拷贝，false表⽰浅拷贝。如果有两个参数，那么将第⼆个参数object的属性拷贝到jQuery的命名空间中；如果有多于两个参数，那么就将第三个参数及之后的参数的属性拷贝到第⼆个参数上⾯。
6）jQuery中的ready()⽅法：它的实现原理就是，维护⼀个函数数组，然后通过监听DOMContentLoaded事件，不停的判断DOM是否加载完毕，通过标记isReady是否被设置来判断，未被设置那就是说页⾯未加载完，就会把要执⾏的函数⽤⼀个数组缓存起来，当页⾯加载完后，再把缓存的函数⼀⼀执⾏
具体实现：
在jquery脚本加载的时候，会设置⼀个isReady的标记，监听DOMContentLoaded事件(这个不是什么浏览器都有的，不同浏览器,jquery运作⽅式不⼀样).当然遇到调⽤ready函数的时候，如果isReady未
被设置，那就是说页⾯未加载完，就会把要执⾏的函数⽤⼀个数组缓存起来，当页⾯加载完后，再把缓存的函数⼀⼀执⾏
页⾯加载过程：
解析HTML结构
加载并解析外部脚本
DOM树构建完成，执⾏脚本//DOMInteractive –> DOMContentLoaded
加载图⽚、样式表⽂件等外部⽂件
页⾯加载完毕//load
涉及到的事件
a）DOMContentLoaded:
触发时机：当页⾯的DOM树解析好触发；DOMContentLoaded事件不直接等待CSS⽂件、图⽚的加载完成
b）load:
触发时机：当整个html⽂档加载的时候就触发了，也就是在body元素加载之前就开始执⾏了
c）load:
当页⾯全部加载完成（包括所有资源）
d）onreadytstatechange:
当对象状态变更时触发这个事件，⼀旦document的readyState属性发⽣变化就会触发
原⽣JS的load与jquery的$(document).ready(function(){})有什么不同？
**两者的区别：**
● load()：当页⾯所有的资源都加载完成之后，才执⾏load()⽅法。如果同⼀个js⽂件⾥⾯定义了多个load()，那么只执⾏最后⼀个load()⽅法
●$(function(){})：监听DOMContentLoaded事件，在DOM树渲染完成后执⾏该⽅法，如果有多个定义则依次执⾏
可以看出$(function(){})在load前执⾏
⽐如：页⾯中只有⼀个img标签，当img节点创建完后就会执⾏$(function(){})中的代码，当img的src指定的图⽚完全加载完后才会触发load事件。
if(document.addEventListener){jquery是什么功能组件
document.addEventListener('DOMContentLoaded',function(){
callback();
},false);
}else if(document.attachEvent){// 兼容ie
document.attachEvent('onreadytstatechange',function(){
adyState =="complete"){
document.detachEvent("onreadystatechange", arguments.callee);
callback();
}
});
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。