对于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. PHP+JQUEY+AJAX实现分页【转】

    HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left ...

  2. windows环境下搭建vue+webpack的开发环境

    前段时间一直在断断续续的看vue的官方文档,后来就慢慢的学习搭建vue的开发环境,已经有将近两周了,每到最后一步的时候就会报错,搞的我好郁闷,搁置了好几天,今天又接着搞vue的开发环境,终于成功了.我 ...

  3. JQuery实现Ajax应用

    将自己之前在印象笔记的笔记搬家了~ 1.使用 load()方法异步请求数据,通过Ajax 请求加载服务器中的数据,并把返回的数据放置到指定的元素中,它的调用格式为: load(url,[data],[ ...

  4. form data和request payload的区别

    HTML <form> 标签的 enctype 属性 在下面的例子中,表单数据会在未编码的情况下进行发送: <form action="form_action.asp&qu ...

  5. linux 用户管理(一)

    本节内容梗概: 1.用户管理配置文件 2.用户管理命令 3.用户组管理命令 4.批量添加用户 5.用户授权 学东西先讲原理,所以从配置文件入手 1.用户信息文件  /etc/passwd 存放了用户的 ...

  6. java开发中JDBC连接数据库代码和步骤

    JDBC连接数据库 •创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.l ...

  7. JavaScript判断移动端及pc端访问不同的网站

    JavaScript判断移动端及pc端访问不同的网站 现在很多网站都是分为两个版本,一个pc端的一个移动端的(响应式除外),针对这两个版本,就需要对访问的设备进行判断,如果是pc,就直接访问pc网站, ...

  8. eclipse 下找不到或无法加载主类的解决办法

    有时候 Eclipse 会发神经,好端端的 project 就这么编译不了了,连 Hello World 都会报“找不到或无法加载主类”的错误,我已经遇到好几次了,以前是懒得深究就直接重建projec ...

  9. 魅族M8时期写过几个app，纪念一下曾经的自己

    找工作的过程中也看了不少资料和文章,也学着别人弄弄博客,但发现自己临时的行为有点那啥吧..曾经我也写过不少东西,有过自己的一个技术论坛,为当时的魅族M8手机写过一个系列的技术帖子,但因为论坛被我关了, ...

  10. Windows安装和使用zookeeper

    之前整理过一篇文章<zookeeper 分布式锁服务>,本文介绍的 Zookeeper 是以 3.4.5 这个稳定版本为基础,最新的版本可以通过官网 http://hadoop.apach ...