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

前两个月项目组特别忙了,买了一本《Juqery技术内幕,深入解析Jquery架构设计与实现原理》一直放着睡大觉;进入八月份项目终于过了TR5点,算是可一个喘口气;这本书终于有时间拜读一下。下面的一两个月我将每天坚持看几页,并陆陆续续写几篇不伦不类的技术博客,谈谈自己的心得体会等等。

首先评价一下这本书吧,我本来想买《锋利的Jquery》,但是电子版翻了一下,感觉还是有点基础了;就在网上找找呀,终于看到了这本---《Juqery技术内幕,深入解析Jquery架构设计与实现原理》,一看作者是阿里大牛,出版时间是14年1月,感觉,应该狠不错,最起码作者比较牛,讲得东西比较新。呵呵呵。不扯淡了,开始进入正题。

第一篇Jquery整体架构。

众所周知,Jquery是业界最流行的Js库(注,有人说是框架,本人不敢苟同,只是觉得Jquery还没有到达支撑前端设计和架构的高度;别和我吵,你要非说是框架,我也认了)。有人装文艺说,Jquery的API非常精致和优雅;这个评价我想说,敢不敢从技术角度讲一讲;不要这么晦涩,弄这么高雅文艺的词汇来形容。你就说设计巧妙,架构合理,上手容易,不就结了。好了,我不喷了,接着说。整体模块可以分为三部分,入口模块,底层支持模块以及功能模块。我画了一张图,如下。

图上就整个构架做了一个概括。源码架构如下:

(function( window, undefined ) {
   // 构造jQuery对象
var jQuery = function( selector, context ) {
       return new jQuery.fn.init( selector, context, rootjQuery );
   }
// 工具函数 Utilities
// 异步队列 Deferred
// 浏览器测试 Support
// 数据缓存 Data
// 队列 queue
// 属性操作 Attribute
// 事件处理 Event
// 选择器 Sizzle
// DOM遍历
// DOM操作
// CSS操作
// 异步请求 Ajax
// 动画
// 坐标,尺寸,大小
   window.jQuery = window.$ = jQuery;
})(window);

由于设计比较复杂,这里不一一介绍,待具体源码实现时,在介绍原理及使用技巧等等之类的。

打开源码库,所有代码被包裹在一个立即执行的匿名函数表达式中;

function(window,undefined){
var jQuery=...;//1
//....
......
window.jQuery=window.$=jQuery;//2
})(window);

这样做的好处有以下几点:

1,创建了一个特殊的函数作用域(不了解的赶紧去看看作用域链,执行环境,活动对象相关的知识,这里不解释);这样在自己的执行环境中,就不会和已有的函数,方法,变量(主要指同名)以及第三方库冲突;在保证自己的代码不收其他干扰外,同时不会破坏和污染全局环境和其他执行环境的变量等。

2,window.jQuery=window.$=jQuery; 变量jQuery添加到window对象上,将JQuery添加到最顶层的全局执行环境window对象的作用域中,成为全局变量,添加到其他值执行环境的作用域链的最后端,保证其他执行环境可以访问和使用jQuery.

3,传入window对象,把window对象充当参数传入自调用匿名函数的内部,也就进入该执行环境,保证可以迅速访问到window对象(不需要沿着作用域链会退到顶层作用域);另外就是在压缩代码时进行优化。

4,传入参数undefined,一方面和传入window对象一样,能够缩短查找undefined时的作用域,并且在压缩代码时进行优化。更重要的是,确保参数undefined的值是undefined,防止被重写。、

结尾

第一篇,就这样吧,整体构架有点复杂,自己也是一边看一边写博客,大家发现不对的地方,多多提建议,共同进步。下一篇,我将介绍一下jQuery构造函数的源码,以及实现原理和里面的一些比较晦涩难懂的逻辑。

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

时间: 2024-12-29 16:23:35

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

Hadoop技术内幕:深入解析YARN架构设计与实现原理pdf

下载地址:网盘下载 <Hadoop技术内幕:深入解析MapReduce架构设计与实现原理>内容简介:"Hadoop技术内幕"共两册,分别从源代码的角度对"Common+HDFS"和"MapReduce的架构设计和实现原理"进行了极为详细的分析.<Hadoop技术内幕:深入解析MapReduce架构设计与实现原理>由Hadoop领域资深的实践者亲自执笔,首先介绍了MapReduce的设计理念和编程模型,然后从源代码的角度深入

jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)

第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结构,如下: 1 (function(){ 2 (21 , 94) 定义了一些变量和函数 jQuery = function(){}; 3 (96 , 283) 给JQ对象,添加一些方法和属性 4 (285 , 347) extend : JQ的继承方法 5 (349 , 817) jQuery.ex

Struts2技术内幕----深入解析Struts2架构与设计(一)

Struts2的核心入口程序,从功能上来说必须能够处理Http请求,这是表示层框架的基本要求.为了达到这一目的,Struts2毫无例外地遵循了Servlet标准,通过实现标准的Filter接口来进行Http请求的处理. 我们通过在web.xml中指定这个实现类,就可以将Struts2框架引入到应用中来. <filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.d

[转] jQuery源码分析-如何做jQuery源码分析

jQuery源码分析系列(持续更新) jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习. 当我读到难度的书或者源码时,会和<如何阅读一本书>结合起来进行学习.推荐读读这本书,你可以从这里和这里下载. 第一部分:检视阅读 1. 收集参考资料:官方文档.书籍.百度/谷歌,专题/博客等,快速的浏览,对涉及的知识点.范围.深度.是否有参考意义等有大致的了解和判断,知道这些文章的作者想要解释或解决什么问题. 第二部分:分析阅读 2. 细读官方文档,官方有非

jQuery源码分析-each函数

本文部分截取自且行且思 jQuery.each方法用于遍历一个数组或对象,并对当前遍历的元素进行处理,在jQuery使用的频率非常大,下面就这个函数做了详细讲解: 复制代码代码 /*! * jQuery源码分析-each函数 * jQuery版本:1.4.2 * * ---------------------------------------------------------- * 函数介绍 * * each函数通过jQuery.extend函数附加到jQuery对象中: * jQuery.

jQuery源码的奥妙(一)

jQuery源码的奥妙(一) 简化jQuery框架 1.jQuery 源码下载 下载地址:http://jquery.com/download/ 下载版本:jquery-2.0.3.js 2.(function(){})(); // 匿名函数自执行 1)局部变量,防止冲突,互不影响.    (function(){        var a = 10;        function $(){           alert(a);        }     })();     //alert(

[转]jQuery源码分析系列

文章转自:jQuery源码分析系列-Aaron 版本截止到2013.8.24 jQuery官方发布最新的的2.0.3为准 附上每一章的源码注释分析 :https://github.com/JsAaron/jQuery 正在编写的书 - jQuery架构设计与实现 本人在慕课网的教程(完结) jQuery源码解析(架构与依赖模块) 64课时 jQuery源码解析(DOM与核心模块)64课时 jQuery源码分析目录(完结) jQuery源码分析系列(01) : 整体架构 jQuery源码分析系列(

读jQuery源码之四(Callbacks,Deferred,when)

看了下Sizzle部分源码,核心的原理就是使用正则表达式去匹配,找到对应的原生获取元素的方法,我没有去细究了.大家有兴趣可以自己看看,分享分享! 从2850行开始,继续往下读jQuery源码(2850-3043行) 进入Callbacks(回调函数管理模块)之前,有几个扩展方法 1.dir方法 三个参数:elem——dom元素,dir——指定elem的层级名称(例如parentNode,nextSibling),until——结束判断.返回一个数组,比如获取某个元素的parentNode,如果不

读jQuery源码 - Deferred

Deferred首次出现在jQuery 1.5中,在jQuery 1.8之后被改写,它的出现抹平了javascript中的大量回调产生的金字塔,提供了异步编程的能力,它主要服役于jQuery.ajax. Deferred就是让一组函数在合适的时机执行,在成功时候执行成功的函数系列,在失败的时候执行失败的函数系列,这就是Deferred的本质.简单的说,模型上可以规划为两个数组来承接不同状态的函数——数组resolve里的函数列表在成功状态下触发,reject中的函数在失败状态下触发. 本文原创于