对于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. Excel转Html

    项目结构: 这是一个maven项目,主函数在Client类里面 当运行程序的后,控制台情况: 当我们刷新了test.html文件后,用浏览器打开效果: 说一下这个过程的设计思路: 1.读取excel文 ...

  2. (转)Vsdocman7.2 注册版

    Vsdocman是一个优秀的.NET源代码注释编写工具,方便的以GUI的方式设计.NET源代码的注释.我们只是大自然的搬运工:http://download.csdn.net/detail/iamyg ...

  3. Struct2 csv文件上传读取中文内容乱码

    网络上搜索下,发现都不适合 最终改写代码: FileInputStream fis = null; InputStreamReader isr = null; BufferedReader br= n ...

  4. 浏览器全屏事件(Html5)

    <button onclick="launchFullscreen(document.documentElement);"></button> functi ...

  5. U盘安装Ubuntu 10.4 Server

    试了几次的U盘安装Ubuntu Server失败后,只能求助网络了,找了半天终于安装成功了.问题就是虽然从U盘启动了安装程序,但是在系统安装到一半的过程中,会进行CD-ROM的检查,检查不到安装程序, ...

  6. 【一】Ubuntu14.04+Jekyll+Github Pages搭建静态博客

    本系列有五篇:分别是 [一]Ubuntu14.04+Jekyll+Github Pages搭建静态博客:主要是安装方面 [二]jekyll 的使用 :主要是jekyll的配置 [三]Markdown+ ...

  7. linux 中部署ant编译的包中缺少问题

    今天遇到在window上部署ant编译的包,能运行正常,但部署在linux中出现跳不进jsp中,出现404问题,后来经过排查在jsp中<%@taglib prefix="c" ...

  8. CYQ.Data 快速开发之UI（赋值、取值、绑定）原理

    昨夜园子猴子问了几个我CYQ.Data使用的小问题,经过简单解答后,他表示“妈妈再也不用担心我的学习",并于事后以资鼓励,希望这框架越走越好. 除了技术上的交流,双方在生活,S上面的问题上也 ...

  9. Python黑帽编程 3.3 MAC洪水攻击

    Python灰帽编程 3.3 MAC洪水 传统的交换机(我只对我目前使用的交互机做过测试,按照常识只能这样表述)在数据转发过程中依靠对CAM表的查询来确定正确的转发接口,一旦在查询过程中无法找到相关目 ...

  10. 从天猫和支付宝身上学习opcity与rgba

    不知道什么时候,一个双层透明的对话框悄然流行了起来. 我们在各大网站上都能见到类似这样的对话框: 这样的聚焦更明显,用户体验更好,也显得更加的高大上. 先说点题外话,这种布局如何用CSS+DIV去实现 ...