jQuery架构剖析

时间：2022-08-28 23:19:55

对于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. &lbrack;转&rsqb;分布式文件系统FastDFS架构剖析

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

  3. 《Netty5&period;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&period;1&period;4版本）

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

  8. &lbrack;转载&rsqb;SQL Server内核架构剖析

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

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

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

随机推荐

  1. Don&&num;39&semi;t let self-built concept im* yourself

    If Self-inferiority is disease, but self-confidence is hazard. Leo moon personalities can be extreme ...

  2. DSP中CMD文件

    DSP中CMD文件 (2012-12-26 20:54:17) 转载▼ 标签: 杂谈 分类: DSP FPGA DSP的存储器的地址范围,CMD是主要是根据那个来编的.CMD 它是用来分配rom和ra ...

  3. SQL SERVER 2012使用sequence

    从之前Oracle转过来,现在看sql server中对于id的实现竟然用guid这种方式.为啥不像在Oracle中一样使用Sequence并行获取序列号呢?今天看MSDN才发现在sql server ...

  4. 转 - CSS深入理解vertical-align和line-height的基友关系

    一.想死你们了 几个星期没有写文章了,好忙好痒:个把月没有写长篇了,好忙好想:半个季度没在文章中唠嗑了,好痒好想. 后面一栋楼有对夫妻在吵架,声音雄浑有力,交锋酣畅淋漓,还以为只有小乡镇才有这架势,哦 ...

  5. linux安装rz和sz

    rz命令是用来上传文件 sz命令是用来下载文件 1.系统安装了yum 以root用户登录: yum install lrzsz -y 2.没有安装yum 以下地址中有详解 http://jingyan ...

  6. Couchbase 使用方法

    1.数据流向 List<模型>  数据-->MsgPack 打包成byte[]-> couchbase 实例调用 Store(Enyim.Caching.Memcached.S ...

  7. oracle 定义数据完整性

    1. 定义主键约束 1.1 在创建表时定义主键约束 create table student(name varchar2(8),studentid varchar2(10) primary key,s ...

  8. NS2 nam中节点及数据流颜色设置

    NS2 节点颜色设置在http://hi.baidu.com/jrwen0/item/d105c642f4c3ce36fb89601b说明的比較具体,大家能够參见. 我这里想说的是数据流颜色的设置,相 ...

  9. &lbrack;编织消息框架&rsqb;&lbrack;netty源码分析&rsqb;12 ByteBuf 实现类UnpooledDirectByteBuf职责与实现

    public class UnpooledDirectByteBuf extends AbstractReferenceCountedByteBuf { private final ByteBufAl ...

  10. java的IO流的一些测试

    public class Demo02 { public static void main(String[] args) { //获取当前毫秒值,用于测试 long l = System.curren ...

相关文章