解构jQuery之jQuery整体架构

在前端开发过程中必然绕不开jQuery库,移动端zepto。天天用到的一个库,很久就想通读一下源码,行动力不够一直没有执行……现在终于开始学习它,参照网上大神的博文和教程辅助自己学习。自己同时也构建一个自己的jQuery库,体验造轮子的整个过程。计划就是这样子啦,下面就是行动!

jQuery源码可以精简为以下内容:

方框上面的代码是对AMD规范的支持。

jQuery整体上被包裹在一个匿名函数中,这个匿名函数再作为另一个匿名函数的参数被传入,形参factory。

"()"圆括号包裹函数声明语句,解析器会将其解析为表达式,再在后面加一对圆括号就会形成表达式调用:

(function(arg1,arg2){
    //代码
}(arg1,arg2));

包裹jQuery的匿名函数相当于arg2参数,在匿名参数中被调用——factory()。

这种被称为命名空间的函数(或自执行函数、立即调用表达式函数)在开发中应该经常用到,原理可以参考我的另一篇博文:立即调用表达式。

jQuery对象的创建和调用方式

jQuery并没有使用new运算符将jQuery显式的实例化,而是直接调用其函数。如:

$().ready();
$().ajax();

源码的最后部分有这样一段代码:

window.jQuery = window.$ = jQuery;

其实我们在平时的使用中就知道,$=jQuery,$("selector") = jQuery("selector"),$()、jQuery()直接调用自身就创建了对象。这里有着非常精妙的设计。

由以上代码可以看出,jQuery()调用自身,获得的是jQuery.fn.init对象。接着看init和jQuery的关系

先执行jQuery.fn = jQuery.protorype,再执行jQuery.fn.init.prototype = jQuery.fn,合并后是:

jQuery.fn.init.prototype = jQuery.fn = jQuery.prototype;

即jQuery的prototype等于init的prototype

所以,所有挂载到jQuery.fn上的方法就是挂在到了jQuery.prototype,即挂在到了jQuery函数上,相当于挂载到了jQuery.fn.init.prototype上,即相当于挂载到了一开始的jQuery函数返回的对象上,即挂载到了我们最终使用的jQuery对象上。

参考:

jQuery 2.0.3源码分析core - 整体架构

慕课网jQuery源码解析 ——Aaron

jQuery源码分析系列——nuysoft

时间: 2024-09-30 07:48:45

解构jQuery之jQuery整体架构的相关文章

【深入浅出jQuery】源码浅析--整体架构(转)

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下

【深入浅出jQuery】源码浅析--整体架构

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下

jQuery源码学习1——整体架构篇

由于jQuery的源码比较复杂,所以我选择从jQuery1.0.0版本开始学习,逐步深入. 而且本系列文章包含大量的个人观点,纯属本人学习的记录 jQuery1.0.0只有1800行左右的代码,相对来讲看起来还是比较简单的 首先,想说一下我对jQuery的理解 jQuery其实就是一个很大的构造函数 它为我们提供了很多实例化方法 当然,由于在js中函数本身就是对象 因此jQuery也提供了很多的静态方法 个人认为,这些静态方法更为底层 今天把jQuery的架构梳理了一下 其实我们可以将其中的方法

深入了解jQuery之整体架构

本文是在阅读了Aaron艾伦的jQuery源码解析(地址:http://www.imooc.com/learn/172)后的个人体会以及笔记.在这里感谢艾伦老师深入浅出的讲解!! 先来看看如何生成一个jQuery对象,源码: var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; 当我们使用jQuery('something')或者$('something')时

jQuery 2.0.3 源码分析core - 整体架构

转载http://www.cnblogs.com/aaronjs/p/3278578.html 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 例如: $().find().css() $().hide().html('....').hide(). 从上面的写法上至少可以发现2个问题 1. jQuery对象的构建方式 2 .jQuery方法的调用方式 分析一:jQuery的无new构建 JavaScript是函数式语言,函数可以实现类,类就是面向对象编程中最基本的概

jQuery整体架构源码解析

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下

转载Aaron博客 ---- jQuery 2.0.3 源码分析core - 整体架构

jQuery 2.0.3 源码分析core - 整体架构 整体架构 拜读一个开源框架,最想学到的就是设计的思想和实现的技巧. 废话不多说,jquery这么多年了分析都写烂了,老早以前就拜读过, 不过这几年都是做移动端,一直御用zepto, 最近抽出点时间把jquery又给扫一遍 我也不会照本宣科的翻译源码,结合自己的实际经验一起拜读吧! github上最新是jquery-master,加入了AMD规范了,我就以官方最新2.0.3为准 整体架构 jQuery框架的核心就是从HTML文档中匹配元素并

jQuery 源码解析一:jQuery 类库整体架构设计解析

如果是做 web 的话,相信都非要对 Dom 进行增删查改,那这相信大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.getElementsByName...官方提供超长方法 api . jQuery 整体源码,本人也还在阅读中,暂时记录一下.(为什么要看源码,原因很简单---- 一 好好了解一下 jQuery 原理  二 为了装逼显摆).   一  使用 jQuery 时候,首先需引入 jQuery 文件,而之

jquery api的整体解读

最近做了几个网站的项目,比如 www.ya-jing.cn(配资公司) ,用到了jquery,那个slide 以及一些效果就是用到了jquery.索性研究了一下jquery,那么我觉得有必要对其进行一下整体的解读. 在解读jquery api之前,我们先必须清楚一个基础的概念,即jquery只是javascript众多库中突出的一个,虽然用jquery已经可以做出大多的网页特效,但并非可以做出所有的特效,要做出想达到的效果,我们还需要对javascript的语法,函数和对象有一些了解,这里的了解