jQuery架构剖析

对于jQuery的整体架构,经典之处有三:

1、jQuery的无new构建

2、jQuery的链式调用

3、jQuery的插件接口

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

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

提炼的代码如下:

 1 <!DOCTYPE html>
 2     <head>
 3         <title>jQuery</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     </head>
 6     <body>
 7         <script>
 8
 9            (function(window){
10                 var temp=window.$=function(){
11                     return new temp.fn.init();
12                 };
13                 temp.fn=temp.prototype={
14                         init:function(){
15                             return this;
16                         },
17                         attr:function(){
18                             console.log(1);
19                             return this;
20                         }
21                 }
22                 temp.fn.init.prototype = temp.fn;
23             })(window);
24             //执行
25             console.log( $ );
26
27         </script>
28     </body>
29 </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、将这个对象的_prototype_隐指针指向构造函数的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~

时间: 2024-10-11 11:50:39

jQuery架构剖析的相关文章

Jquery源码---读《uqery技术内幕,深入解析Jquery架构设计与实现原理》

前两个月项目组特别忙了,买了一本<Juqery技术内幕,深入解析Jquery架构设计与实现原理>一直放着睡大觉:进入八月份项目终于过了TR5点,算是可一个喘口气:这本书终于有时间拜读一下.下面的一两个月我将每天坚持看几页,并陆陆续续写几篇不伦不类的技术博客,谈谈自己的心得体会等等. 首先评价一下这本书吧,我本来想买<锋利的Jquery>,但是电子版翻了一下,感觉还是有点基础了:就在网上找找呀,终于看到了这本---<Juqery技术内幕,深入解析Jquery架构设计与实现原理&

VLC播放器架构剖析

VLC采用多线程并行解码架构,线程之间通过单独的一个线程控制所有线程的状态,解码器采用filter模式.组织方式为模块架构 模块简述:libvlc                  是VLC的核心部分.它是一个提供接口的库,比如给VLC提供功能接口:流的接入,音频视频的输出,插件管理,线程系统. interface           包含与用户交互的按键和设备弹出. Playlist               管理播放列表的交互,如停止,播放,下一个,或者随机播放. Video_output

HDFS架构剖析

HDFS架构核心内容: 一.NameNode/DataNode 二.数据存储副本 三.元数据持久化 四.数据模型 五.故障容错 具体讲解: 一.NameNode/DataNode HDFS采用Master/Slave架构,其集群由一个NameNode和多个DataNodes组成. NameNode是中心服务器,负责管理文件系统的名字空间(namespace)以及客户端的访问.DataNode负责管理它所在节点上的存储.用户能够通过HDFS文件系统的名字空间以文件的形式在上面存储数据. 对于内部存

SQLServer内核架构剖析 (转载)

SQL Server内核架构剖析 (转载) 这篇文章在我电脑里好长时间了,今天不小心给翻出来了,觉得写得很不错,因此贴出来共享. 不得不承认的是,一个优秀的软件是一步一步脚踏实地积累起来的,众多优秀的程序员呕心沥血,他们已经不是在简单的写代码,而是在创作一门艺术. 和前面提到的暴雪公司的发展相比他们有一个相同之处,即:他们只做经典.不能说他们集中的全世界最优秀的程序员,而实际上他们集中的是全世界最好的思想,并且付诸实践. 成功不是靠急于求成,而是靠远见.祝Microsoft SQL Server

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

<Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的事件驱动网络应用框架,具有高性能.高扩展性等特性.Netty提供了统一的底层协议接口,使得开发 者从底层的网络协议 (比如 TCP/IP. UDP) 中解脱出来. 就使用来说, 开发者只要参考Netty 提供的若干例子和它的指南文档,就可以放手开发基于 Netty 的服务端程序了. 在Java 社区,最知名的

机器学习平台mahout,推荐系统算法与架构剖析视频教程

38套大数据,云计算,架构,数据分析师,Hadoop,Spark,Storm,Kafka,人工智能,机器学习,深度学习,项目实战视频教程 视频课程包含: 38套大数据和人工智能精品高级课包含:大数据,云计算,架构,数据挖掘实战,实时推荐系统实战,电视收视率项目实战,实时流统计项目实战,离线电商分析项目实战,Spark大型项目实战用户分析,智能客户系统项目实战,Linux基础,Hadoop,Spark,Storm,Docker,Mapreduce,Kafka,Flume,OpenStack,Hiv

jQuery架构设计与实现(2.1.4版本)

市面上的jQuery书太多了,良莠不齐,看了那么多总觉得少点什么 对"干货",我不喜欢就事论事的写代码,我想把自己所学的知识点,代码技巧,设计思想,代码模式能很好的表达出来,所以考虑通过分析jQuery的源码库的方式来表达,尽力做最好 内容结构还在不断的修正,欢迎给出建议 ps:写了数万字,因项目太忙,暂停下 https://github.com/JsAaron/jQuery 本书围绕的几个核心点: 设计理念 结构组织 抽象设计 模式运用 场景套用 第一章:理解架构 1.1 我们真正会

jquery-2.1.4 源码解读(1):jquery架构

本人在研究jquery源码的过程中将同时记录下研究过程,此文将分阶段研究jquery源码,先是jquery的总体架构,然后是内部实现细节. jquery总体结构为: (function(global, factory){ ... //代码1 }(参数1, 参数2)); 此处定义了匿名函数,然后传入参数1和参数2,立即执行. 代码1处为匿名函数的内部定义,其中会判断是否处于commonJS环境,否则的话将执行fanctory(global); 参数1为typeof window !== "unde

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

原文链接:http://www.sqlserver.com.cn 我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排错.可升级部署.可插件运行, 我们往往研发自己的管理软件开发平台.我们总是希望去学习别人的开发平台(如用友或金蝶或SAP),但我们却总是感叹管理软件业务处理细节繁多, 而数据库管理软件却简单的SELECT.INSERT.DELETE.UPDATE四个命令就搞定. 我们多希望有一天能做出一个架构,也可