jQuery架构剖析
对于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架构剖析的更多相关文章
- SQLServer内核架构剖析 （转载）
SQL Server内核架构剖析 (转载) 这篇文章在我电脑里好长时间了,今天不小心给翻出来了,觉得写得很不错,因此贴出来共享. 不得不承认的是,一个优秀的软件是一步一步脚踏实地积累起来的,众多优秀的 ...
- [转]分布式文件系统FastDFS架构剖析
[转]分布式文件系统FastDFS架构剖析 http://www.programmer.com.cn/4380/ 文/余庆 FastDFS是一款类Google FS的开源分布式文件系统,它用纯C语言实 ...
- 《Netty5.0架构剖析和源码解读》【PDF】下载
<Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的 ...
- 《jQuery技术内幕：深入解析jQuery架构设计与实现原理》
<jQuery技术内幕:深入解析jQuery架构设计与实现原理> 基本信息 作者: 高云 出版社:机械工业出版社 ISBN:9787111440826 上架时间:2014-1-10 出版日 ...
- Nebula 架构剖析系列（一）图数据库的存储设计
摘要 在讨论某个数据库时,存储 ( Storage ) 和计算 ( Query Engine ) 通常是讨论的热点,也是爱好者们了解某个数据库不可或缺的部分.每个数据库都有其独有的存储.计算方式,今天 ...
- Nebula 架构剖析系列（二）图数据库的查询引擎设计
摘要 上文(存储篇)说到数据库重要的两部分为存储和计算,本篇内容为你解读图数据库 Nebula 在查询引擎 Query Engine 方面的设计实践. 在 Nebula 中,Query Engine ...
- jQuery架构设计与实现（2.1.4版本）
市面上的jQuery书太多了,良莠不齐,看了那么多总觉得少点什么 对"干货",我不喜欢就事论事的写代码,我想把自己所学的知识点,代码技巧,设计思想,代码模式能很好的表达出来,所以考 ...
- [转载]SQL Server内核架构剖析
原文链接:http://www.sqlserver.com.cn 我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排 ...
- SQLSERVER内核架构剖析 （转）
我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排错. 可升级部署.可插件运行,我们往往研发自己的管理软件开发平台. ...
随机推荐
- 图文解释XCode常用快捷键的使用
刚开始用Xcode是不是发现以前熟悉的开发环境的快捷键都不能用了?怎么快捷运行,停止,编辑等等.都不一样了.快速的掌握这些快捷键,能提供开发的效率. 其实快捷键在Xcode的工具栏里都标注有,只是有的 ...
- Xcode8中处理打印日志的配置
Xcode8中处理打印日志的配置
- Python之路Day16--JavaScript(二)
本节内容: 1.上节内容回顾 2.JavaScript补充 $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ 一.上节内容回顾 1.作业问题: a.页面布局不好 ...
- Oracle查询和问题简记
现在做两个版本的系统,一个用的数据库是Access,另一个就是Oracle了.每个数据库支持的的查询SQL语句都有所区别,这里主要针对Access和Oracle做 记录. 首先贴出遇到问题最多的一条语 ...
- JPA或Hibernate中的
JPA执行原生SQL截断Char类型问题 在JPA的API中执行原生SQL:EntityManager.createNativeQuery(String sqlString); 传入参数是原生SQL语 ...
- ThreadLocal对象使用过程中容易陷入的坑
ThreadLocal对象帮助我们管理线程内的对象,保证对象在线程之间是相互隔离的. 今天碰到的坑是这样的: index01.html页面加载的时候会发送一次a请求,然后点击附件上传的时候会发送上传请 ...
- requireJs--简单的使用方法
简单使用: <!-- index.html部分 data-main 为入口 --> <script data-main="js/app.js" src=" ...
- 怎么可以让div自适应屏幕的高度？（已解决）
主要解决问题的方法是用JS脚本. 先看布局, 一个div是首部,另一个div是主体,主体包含左侧菜单和右侧内容. 我想把主体div的高度自适应屏幕剩余区域,怎么做? 首先,获取可见区域的高度,docu ...
- ASP.NET Core 数据保护（Data Protection）【中】
前言 上篇主要是对 ASP.NET Core 的 Data Protection 做了一个简单的介绍,本篇主要是介绍一下API及使用方法. API 接口 ASP.NET Core Data Prote ...
- NoSQL初探之人人都爱Redis：（2）Redis API与常用数据类型简介
一.Redis API For .Net 首先,不得不说Redis官方提供了众多的API开发包,但是目前Redis官方版本不支持.Net直接进行连接,需要使用一些第三方的开源类库.目前最流行的就是Se ...