jQuery-1.9.1源码分析系列(一)整体架构
不废话,直接上关键。这个系列中有好些直接借用别人的资料,我将他们整合在自认为比较合理的地方。所以在此先谢谢那些前辈。
注意:后续系列中jQuery实例多用$(...)来表示
1. 初始化与链式调用基础
jQuery之所以能够链式调用在于每次调用返回来jQuery本身。实现关键代码如下。
jQuery = function(selector,context){return new jQuery.fn.init(selector,context,rootjQuery); } ... rootjQuery = jQuery(document); ... jQuery.fn = jQuery.prototype = {constructor: jQuery,init: function(selector,context,rootjQuery){ ... return this;...} } ... jQuery.fn.init.prototype = jQuery.fn; ... window.jQuery = window.$ = jQuery;
需要有几个理解
a. new的深度理解
var obj = new Base();
这样代码的结果是什么,我们在Javascript引擎中看到的对象模型是:
new操作符具体干了什么呢?其实很简单,就干了三件事情。
var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);
第一行,我们创建了一个空对象obj;
第二行,我们将这个空对象的__proto__成员指向了Base函数对象prototype成员对象;
第三行,我们将Base函数对象的this指针替换成obj,然后再调用Base函数,于是我们就给obj对象赋值了一个id(name,根据浏览器决定,chrome是name属性)成员变量,这个成员变量的值是”Base”。
Base函数返回的结果会导致obj的结果不同。
举例(chrome下):
function Base(){this.name = “test”;this.a = “f”;return result; }
1) 根据new的原理,如果没有返回值或返回值为数字或字符串或布尔类型,即result为null/number/string/bool,则new Base()返回的结果是本身,为
Base {name: "test", a: "f"}
2) 如果返回值为对象(数组或普通对象)或函数,则返回的对象或函数替换了Base本身;
拓展:
new Base() == Base () 返回的结果为false
例如当result为[]的时候,new Base()返回结果和Base()返回结果的都是[],但实际上他们并不相等 , Javascript 对于 Object 和 Function 的比较是基于引用的.
Var m = [],t = []; m == t;//false,并不是同一个引用
Var m = t = []; m == t;//true
b. jQuery中jQuery.fn为什么表现为数组
jQuery将对象模拟成了数组,而如何让一个对象模拟成数组,jQuery给对象加上了以下几个属性:
{length: 0,push: [].push,sort: [].sort,splice: [].splice },
不同的是chrome在给对象添加了length和splice后真的转化成了数组,如$()结果是[],而ie没有转化$()结果是{}。但是无所谓,他们都可以使用length等属性,不影响后续使用。如果$(…)有搜索结果,jQuery会把结果拼接成数组返回,这样jQuery的返回结果看起来总是数组。
总结
由上面的分析可知jQuery.fn.init.prototype = jQuery.fn目的就是将jQuery.fn上的所有属性都挂在jQuery实例$(...)上,使得实例拥有很多jQuery.fn上定义的函数。比如jQuery.fn.extend函数,实例就可以直接使用:$(...).extend({"name": "chua"})。
由于每次都是一个新的实例new jQuery.fn.init(selector,context,rootjQuery),所以各个实例是独立的。而jQuery全局的属性直接挂在jQuery上,比如jQuery.extend,这个和jQuery.fn.extend不一样了,因为jQuery.extend是全局的,比如jQuery.extend({"test": "chua"})你可以随时通过jQuery.test就把值给取出来了,而jQuery实例则需要保证同一个实例的情况下才能取到值。比如var ps = $("p").extend({"test": "chua"}),通过ps.test能够取到值,但是你使用$("p").test是取不到的。因为你使用$(...)又新建了一个实例。
至于jQuery的链式调用很好理解,源码初始化的时候返回了jQuery对象本身:
init: function(selector,context,rootjQuery){... return this; }
这一节先到这里,待续……
如果觉得本文不错,请点击右下方【推荐】!
转载于:https://www.cnblogs.com/chuaWeb/p/jQuery-1-9-1-frame1.html
jQuery-1.9.1源码分析系列(一)整体架构相关推荐
- Dubbo源码分析系列之-整体架构设计
导语: 在了解一个框架的源码的时候,第一步要了解的就是源码的结构,接下来第二步需要了解的就是源码的架构,下面这张图在Dubbo官网上所展示的Dubbo的架构设计图.接下来就来详细的分析一下这张图. ...
- 菜鸟读jQuery 2.0.3 源码分析系列(1)
原文链接在这里,作为一个菜鸟,我就一边读一边写 jQuery 2.0.3 源码分析系列 前面看着差不多了,看到下面一条(我是真菜鸟),推荐木有入门或者刚刚JS入门摸不着边的看看,大大们手下留情,想一起 ...
- jQuery源码分析系列
声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://git ...
- [转]jQuery源码分析系列
文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaro ...
- 【转】ABP源码分析一:整体项目结构及目录
ABP是一套非常优秀的web应用程序架构,适合用来搭建集中式架构的web应用程序. 整个Abp的Infrastructure是以Abp这个package为核心模块(core)+15个模块(module ...
- [转载]jQuery1.6.1源码分析系列
转载:http://www.cnblogs.com/nuysoft/archive/2011/11/14/2248023.html [原创] jQuery1.6.1源码分析系列(停止更新) 作者:nu ...
- MyBatis 源码分析系列文章合集
1.简介 我从七月份开始阅读MyBatis源码,并在随后的40天内陆续更新了7篇文章.起初,我只是打算通过博客的形式进行分享.但在写作的过程中,发现要分析的代码太多,以至于文章篇幅特别大.在这7篇文章 ...
- MyBatis 源码分析系列文章导读
1.本文速览 本篇文章是我为接下来的 MyBatis 源码分析系列文章写的一个导读文章.本篇文章从 MyBatis 是什么(what),为什么要使用(why),以及如何使用(how)等三个角度进行了说 ...
- Spring IOC 容器源码分析系列文章导读
1. 简介 前一段时间,我学习了 Spring IOC 容器方面的源码,并写了数篇文章对此进行讲解.在写完 Spring IOC 容器源码分析系列文章中的最后一篇后,没敢懈怠,趁热打铁,花了3天时间阅 ...
- Spring IOC 容器源码分析系列文章导读 1
1. 简介 Spring 是一个轻量级的企业级应用开发框架,于 2004 年由 Rod Johnson 发布了 1.0 版本.经过十几年的迭代,现在的 Spring 框架已经非常成熟了.Spring ...
最新文章
- (C++)1046 划拳
- Apache不记录制定文件类型日志
- VisualVM介绍使用
- leetcode--数组(Easy)
- 扫雷程序设计 python_端口扫描
- TensorFlow神经网络(三)神经网络优化
- Git 学习笔记--git 查看某个文件的修改历史
- BZOJ 3207: 花神的嘲讽计划Ⅰ
- python百度贴吧怎么爬取最早的帖子_Python爬虫爬取百度贴吧的帖子
- C# Winform获取路径
- sql or 与and同时有时要注意
- SQL语法很难?其实只需要记住这部分行了
- Android Studio 导入安卓源码步骤
- ubuntu20.04安装谷歌输入法命令
- UFS SCSI Inquiry Cmd
- 从融360到理财魔方、再到韭菜财经,新金融正确姿势为哪般?
- SDKMAN因为网络问题用不了怎么办?
- 2018noip普及组初赛竞赛总结
- iframe 嵌入页面后无法显示的问题
- PM981/PM981a安装黑苹果——第八版
热门文章
- 图片在section上下居中_新媒体运营者关于图片使用的几大要点
- C语言switch制作菜单例题,c语言入门之,switch语句习题。
- C++笔记-远程线程注入
- QML工作笔记-2种输入框的使用(TextField与TextInput)
- Qt工作笔记-通过C++使widgets与QQuick交互(包含qml界面对象与C++对象映射)
- Qt学习笔记-http服务的初步认识(使用程序下载网站上的图片)
- 数据库设计_数据库设计(一)分析及逻辑设计
- windowblinds 6_过年回家选车很重要!锐骐6强势对比纳瓦拉
- java光标修订_如何在java中更改鼠标光标?
- java设置等待锁的时间_java的锁池和等待池