jQuery架构剖析
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery架构剖析相关的知识，希望对你有一定的参考价值。
对于jQuery的整体架构，经典之处有三：
1、jQuery的无new构建
2、jQuery的链式调用
3、jQuery的插件接口
想必兄弟姐妹们也觉得这架构不错哈，但有时又畏惧去拜读大量的jQuery源码，只好对它敬而远之了。
哈哈，今天我就将其jQuery架构提炼出来，和大家一同分析研究下，jQuery是怎么实现这三个经典之处的。
提炼的代码如下：
1 <!DOCTYPE html> 2 <head> 3 <title>jQuery</title> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 </head> 6 <body> 7 <script> 8 9 (function(window){ 10 var temp=window.$=function(){ 11 return new temp.fn.init(); 12 }; 13 temp.fn=temp.prototype={ 14 init:function(){ 15 return this; 16 }, 17 attr:function(){ 18 console.log(1); 19 return this; 20 } 21 } 22 temp.fn.init.prototype = temp.fn; 23 })(window); 24 //执行 25 console.log( $ ); 26 27 </script> 28 </body> 29 </html>
是不是吃惊，怎么会这么少，哈哈哈，不必吃惊，事实就是这样，如果你能理解其中的用意，那么jQuery的整体架构也就差不多了哦。
下面我们就来一步一步地探其究竟。
回想一下，当我们调用jQuery方法时，是怎么调用的呢？
答案：$(‘xx’)
是通过$来调用的，完全没有new一个对象好不好。
jQuery是怎么做到的呢。通过$()方法，返回一个实例对象。详情见上代码中的第11行。
这样它就不用new了撒。
咦，第15行是什么？return this？
what?
聪明的你可能会说，那么11行处，return的this不就应该指向temp.fn吗？因为this指向调用者嘛。
是的，this是指向它的调用者。
但是请仔细看看它是通过的new创建的一个实例哦。
那么this就是指向的temp.fn.init这个构造函数创建出来的实例啦。
可能，你会问，我靠，为什么new一下就变了呢。哈哈，看来有必要了解一下new的过程哦。
下面简单阐述下new都做了什么：
1、创建一个新的对象，这个对象的类型是object；
2、将这个对象的_prototype_隐指针指向构造函数的prototype
3、执行构造函数，当this关键字被提及的时候，使用新创建的对象的属性；
4、返回新创建的对象
所以return new temp.fn.init()就是返回的temp.fn.init创建的对象啦。
大家注意到22行没，temp.fn.init.prototype = temp.fn，这一句其实就是将init的原型链指向jquery的原型链啦，这样temp.fn.init创建出来的实例就可以访问jquery.prototype里面的东东咯。也就是为什么我们能够通过$.fn扩展实例方法了哈。
对于链式调用，其实就是在每个调用的方法中return this;嘛。就如上述代码中的19行一样咯。
好啦，兄弟姐妹们，这下jQuery的架构三大特性被我们一步一步窥探清楚了哦。
总结：
jQuery利用匿名函数创建无污染的命名空间，通过window对象，将$符号抛给用户操作，利用原型链的知识构建面向对象。
晚安everyone~
以上是关于jQuery架构剖析的主要内容，如果未能解决你的问题，请参考以下文章
Visual Studio 2012-2019的130多个jQuery代码片段。
markdown 在WordPress中使用jQuery代码片段