对于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. 纯css来实现提示框

    用js用多了,就疏忽了最基本的css了---用title属性来实现提示框.下面言归正传------如何用css实现提示框: 1.利用title属性来实现鼠标滑过某个元素时,实现提示整段内容的功能(利用 ...

  2. 关于zepto（相似于jquery、jQuery用于网页浏览器，zepto用于手机浏览器）

    http://blog.csdn.net/kongjiea/article/details/42522305   -----关于zepto和jquery的差别 jQuery 使用 .width() 和 ...

  3. Mac 终端 Linux 命令总结(简单命令)

    目录操作 命令名 功能描述 使用举例 mkdir 创建一个目录 mkdir dirname rmdir 删除一个目录 rmdir dirname mvdir 移动或重命名一个目录 mvdir dir1 ...

  4. IIS 连接 oracle报Oracle.DataAccess版本错误解决办法

    通过IIS连接oracle时报“Could not load file or assembly 'Oracle.DataAccess, Version=2.112.3.0, Culture=neutr ...

  5. css3媒体查询实现网站响应式布局

    最常见的办法就是基类(最常用的网站布局)+扩展类(几种不同的网站布局类)来实现不同的布局. <!–使用说明:网站基本布局,使用class="layout";使用ipad访问时 ...

  6. [转]android：动态创建多个按钮 及 批量设置监听

    之前投机取巧,先创建好多个按钮,再根据需要的数量进行部分隐藏,不过还是逃不过呀. 这样根本无法批量地 findId,批量地 设置监听. 所以今天还是认认真真地研究回“动态创建按钮”,终于,通过不断尝试 ...

  7. java 解析并生成 XML

    在 java 中使用 Dom4j 解析 XML 对 XML 文件的解析,通常使用的是 Dom4j 和 jdom 作为XML解析工具. 在此只介绍下 Dom4j 对 XML 文件的解析使用方法. 1. ...

  8. 实验mongodb使用gridfs存放一个大文件

    1.启动mongoDB 2.使用gridfs存放大文件 3.观察fs.chunks和fs.files的情况 命令 db.fs.chunks.find()查到的是一些二进制文件:

  9. Oracle CDC配置案例

    异步部署 1. 环境的配置准备 1.1.    数据库版本 SQL> select * from v$version; BANNER ------------------------------ ...

  10. int与string类型的转换

    在SQL语句中 在JS中, (1) var   x=100    a   =   x.toString()   (2) var   x=100;    a   =   x   +"" ...