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内核架构剖析 （转）
我们做管理软件的,主要核心就在数据存储管理上.所以数据库设计是我们的重中之重.为了让我们的管理软件能够稳定.可扩展.性能优秀.可跟踪排错. 可升级部署.可插件运行,我们往往研发自己的管理软件开发平台. ...
随机推荐
- Linux查看系统状态命令
Linux查看系统状态命令 iostat iostat 命令详细地显示了存储子系统方面的情况.你通常用iostat来监控存储子系统总体上运行状况如何,并且在用户注意到服务器运行缓慢之前提早 ...
- db2定界符
在DB2数据库中,在导出DEL文件时,默认的字符分隔符是".字段分隔符是, (逗号).有一个需求是要为Oracle数据库提供数据,因此就想使用"|"作为数据的字段分隔符. ...
- Linux命令dos2unix 从windows转换到linux --- nuix2dos从linux转换到windows
dos2unix命令用来将DOS格式的文本文件转换成UNIX格式的(DOS/MAC to UNIX text file format converter).DOS下的文本文件是以\r\n作为断行标志的 ...
- 客户端连接注册Ejabberd新用户
今天需要使用客户端注册新用户,结果发现注册失败,在管理后台添加新用户成功.编译安装ejabberd就没有管了,经过翻论坛的到解决方法 在ejabberd.yml中. access: trusted_n ...
- 【Python】引用计数
一.概述 要保持追踪内存中的对象,Python使用了引用计数这一简单的技术. 二.引用计数的增减 2.1 增加引用计数 当对象被创建并(将其引用)赋值给变量时,该对象的引用计数被设置为1. 对象的引用 ...
- LL LR SLR LALR 傻傻分不清
[转] 一:LR(0),SLR(1),规范LR(1),LALR(1)的关系 首先LL(1)分析法是自上而下的分析法.LR(0),LR(1),SLR(1),LALR(1)是自下而上的分析法. ...
- winhttp demo
#include <string>#include <iostream>#include <windows.h>#include <winhttp.h> ...
- 推荐几个Android自定义的进度条(转载)
CustomLoading ElasticDownload Circle-Progress-View lzyzsdCircleProgress SquareProgressBar materialis ...
- 《Linux内核设计与实现》读书笔记 第十八章 调试
第十八章调试 18.1 准备开始 需要准备的东西: l 一个bug:大部分bug通常都不是行为可靠而且定义明确的 l 一个藏匿bug的内核版本:找出bug首先出现的版本 l 相 ...
- Android Support Library
title: Android Support Library tags: Support Library,支持库 grammar_cjkRuby: true --- DATE: 2016-5-13. ...