jquery原理的简单分析，扒开jquery的小外衣

百度权重查询 词库网 网站监控 服务器监控 seo监控 手机游戏 iPhone游戏

引言

好近LZ还在消化系统原理的第三章，因此这部分内容LZ打算再沉淀一下再写。本次笔者和各位来讨论一点前端的内容，其实有关jquery，在很久之前，LZ就写过一篇简单的源码分析。只不过当时刚开始写博客，写的相对来讲比较随意，直接就把源码给贴上来了，尽管加了许多注释，但照旧会略显粗糙。

这次LZ再次执笔，预备稍微规范一点的探讨一下jquery的相关内容。

jquery的外套

jquery是一个轻量级的JS框架，这点相信大部分人都听过，而jquery之所以有这样一个称呼，就是因为它静静披了一件外套，将自己给隐藏了起来。

//以下截取自jquery源码片段(function( window, undefined ) { /* 源码内容 */})( window );

上面这一小段代码来自于1.9.0当中jquery的源码，它是一个无污染的JS插件的标准写法，专业名词叫闭包。可以把它简单的看做是一个函数，与通俗函数不同的是，这个函数没有名字，而且会立即执行，就像下面这样，会直接弹出字符串。

(function( window, undefined ) { alert("Hello World!"); })( window );

可以看出来这样写的直接效果，就相当于我们直接弹出一个字符串。但是不同的是，我们将里面的变量变成下场域变量，这不仅可以提高运行速度，更主要的是我们在引用jquery的JS文件时，不会因为jquery当中的变量太多，而与其它的JS框架的变量命名产生冲突。对于这一点，我们拿以下这一小段代码来说明。

var temp = "Hello World!"; (function( window, undefined ) { var temp = "ByeBye World!"; })( window ); alert(temp);

这段代码的运行效果是Hello而不是ByeBye，也就是说闭包中的变量声明没有污染到外面的全局变量，倘使我们去掉闭包，则好终的效果会是ByeBye，就像下面这样。

var temp = "Hello World!";// (function( window, undefined ) { var temp = "ByeBye World!";// })( window ); alert(temp);

由此就可以看出来，jquery的外套就是这一层闭包，它是很主要的一个内容，是编写JS框架必须知道的知识，它可以帮助我们隐藏我们的一时变量，降低污染。

jquery的背心

刚才我们说了，jquery将自己声明的变量悉数都用外套隐瞒起来了，而我们平时使用的Jquery和$，却是真真实实的全局变量，这个是从何而来，谜底就在jquery的某一行代码，一般是在文件的末尾。

window.jQuery = window.$ = jQuery;

这一句话将我们在闭包当中定义的jQuery对象导出为全局变量jQuery和$，因此我们才可以在外部直接使用jQuery和$。window是默认的JS上下文环境，因此将对象绑定到window上面，就相当于变成了传统意义上的全局变量，就像下面这一小段代码的效果一样。

var temp = "Hello World!"; (function( window, undefined ) { var temp = "ByeBye World!"; window.temp = temp; })( window ); alert(temp);

很显明，它的效果应该是ByeBye，而不是Hello。因为我们在闭包中导出了temp局部变量为全局变量，从而覆盖了行声明的全局变量temp。可以看出，就是通过导出的体例，jquery露出了自己的小背心。

jquery的内裤

内裤珍爱的是我们的核心器官，因此特别很是主要。那么jquery的内裤也一样，也是好核心的功能，就是选择器。而选择器简单理解的话，其实就是在DOM文档中，寻找一个DOM对象的工具。

首先我们进入jquery源码中，可以很容易的找到jquery对象的声明，看过以后会发现，原来我们的jquery对象就是init对象。

jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); }

这里出现了jQuery.fn这样一个东西，它的由来可以在jquery的源码中找到，它其实代表的就是jQuery对象的原型。

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

这两句话，句把jQuery对象的原型赋给了fn属性，第二句把jQuery对象的原型又赋给了init对象的原型。也就是说，init对象和jQuery具有相同的原型，因此我们在上面返回的init对象，就与jQuery对象有一样的属性和方法。