对于jQuery的整体架构，经典之处有三：

1、jQuery的无new构建

2、jQuery的链式调用

3、jQuery的插件接口

想必兄弟姐妹们也觉得这架构不错哈，但有时又畏惧去拜读大量的jQuery源码，只好对它敬而远之了。

哈哈，今天我就将其jQuery架构提炼出来，和大家一同分析研究下，jQuery是怎么实现这三个经典之处的。

提炼的代码如下：

 <!DOCTYPE html>

     <head>

         <title>jQuery</title>

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     </head>

     <body>

         <script>

            (function(window){

                 var temp=window.$=function(){

                     return new temp.fn.init();

                 };

                 temp.fn=temp.prototype={

                         init:function(){

                             return this;

                         },

                         attr:function(){

                             console.log(1);

                             return this;

                         }

                 }

                 temp.fn.init.prototype = temp.fn;

             })(window);

             //执行

             console.log( $ );

         </script>

     </body>

 </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、将这个对象的__proto__隐指针指向构造函数的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架构剖析的更多相关文章

  1. SQLServer内核架构剖析 （转载）

    SQL Server内核架构剖析 (转载) 这篇文章在我电脑里好长时间了,今天不小心给翻出来了,觉得写得很不错,因此贴出来共享. 不得不承认的是,一个优秀的软件是一步一步脚踏实地积累起来的,众多优秀的 ...

  2. [转]分布式文件系统FastDFS架构剖析

    [转]分布式文件系统FastDFS架构剖析 http://www.programmer.com.cn/4380/ 文/余庆 FastDFS是一款类Google FS的开源分布式文件系统,它用纯C语言实 ...

  3. 《Netty5.0架构剖析和源码解读》【PDF】下载

    <Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的 ...

  4. 《jQuery技术内幕：深入解析jQuery架构设计与实现原理》

    <jQuery技术内幕:深入解析jQuery架构设计与实现原理> 基本信息 作者: 高云 出版社:机械工业出版社 ISBN:9787111440826 上架时间:2014-1-10 出版日 ...

  5. Nebula 架构剖析系列（一）图数据库的存储设计

    摘要 在讨论某个数据库时,存储 ( Storage ) 和计算 ( Query Engine ) 通常是讨论的热点,也是爱好者们了解某个数据库不可或缺的部分.每个数据库都有其独有的存储.计算方式,今天 ...

  6. Nebula 架构剖析系列（二）图数据库的查询引擎设计

    摘要 上文(存储篇)说到数据库重要的两部分为存储和计算,本篇内容为你解读图数据库 Nebula 在查询引擎 Query Engine 方面的设计实践. 在 Nebula 中,Query Engine ...

  7. jQuery架构设计与实现（2.1.4版本）

    市面上的jQuery书太多了,良莠不齐,看了那么多总觉得少点什么 对"干货",我不喜欢就事论事的写代码,我想把自己所学的知识点,代码技巧,设计思想,代码模式能很好的表达出来,所以考 ...

  8. [转载]SQL Server内核架构剖析

    原文链接:http://www.sqlserver.com.cn 我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排 ...

  9. SQLSERVER内核架构剖析 （转）

    我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排错. 可升级部署.可插件运行,我们往往研发自己的管理软件开发平台. ...

随机推荐

  1. C,C++

    C与C++的Struct有何区别,Java有Struct吗,C++里Struct与Class区别: C++虚析构函数作用: static静态变量初始化: 深复制与浅复制区别: const * int ...

  2. JS中检测数据类型的几种方式及优缺点【转】

    1.typeof 用来检测数据类型的运算符 typeof value 返回值首先是一个字符串,其次里面包含了对应的数据类型,例如:"number"."string&quo ...

  3. <十>JDBC_处理Blob类型数据

    /*  * 读取BLOB数据:  *  使用getBlob方法读取到Blob对象  *  调用Blob的getBinaryStream(方法得到输入流,在使用IO操作  * */ @Test publ ...

  4. 一鼓作气 博客--第六篇 note6

    1.无论公司付给你多少,你的青春都是廉价的!! 2.通往财富自由之路 --得到APP 3.time 3.1 time.time() t = time.time() print(t) #--->1 ...

  5. 初涉深度优先搜索--Java学习笔记（二）

    版权声明: 本文由Faye_Zuo发布于http://www.cnblogs.com/zuofeiyi/, 本文可以被全部的转载或者部分使用,但请注明出处. 上周学习了数组和链表,有点基础了解以后,这 ...

  6. Wishart distribution

    Introduction In statistics, the Wishart distribution is generalization to multiple dimensions of the ...

  7. Python黑帽编程1.1虚拟机安装和配置 Kali Linux 2016

    Python黑帽编程1.1虚拟机安装和配置 Kali Linux 2016 0.1  本系列教程说明 本系列教程,采用的大纲母本为<Understanding Network Hacks Att ...

  8. NodeJS写个爬虫，把文章放到kindle中阅读

    这两天看了好几篇不错的文章,有的时候想把好的文章 down 下来放到 kindle 上看,便写了个爬虫脚本,因为最近都在搞 node,所以就很自然的选择 node 来爬咯- 本文地址:http://w ...

  9. Google分布式构建软件之一：获取源代码

    本文原文在google开发者工具组的博客上[需要FQ],以下是我的翻译,欢迎转载,但尊重作者版权,注名原文地址. 在Google,所有的产品都是在主干上开发的.这样的好处:每个人都可以查看和修改代码, ...

  10. iOS-中app启动闪退的原因

    这种情况应和所谓的内存不足关系不大,很少有程序会在初始化时载入大量内容导致崩溃,并且这类问题也很容易在开发阶段被发现,所以内存不足造成秒退的可能性低(内存不足退,通常是程序用了一段时间,切换了几个画面 ...