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

发布时间:2025-10-24 点击:1
百度权重查询 词库网 网站监控 服务器监控 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对象有一样的属性和方法。


微信网站建设应该如何进行或者说如何制作
B2C网站规划思路之前期九大注意事项
本地搜索谷歌更新的意义
哪个行业必须要做网站?-----浅谈旅游网站(销售做哪个行业比较好)
郑州服务器托管的优势是什么?
开发设计高质量的电商网站务必考虑什么
中小企业网站都应该重视搜索引擎优化
电商网站建设前需要做的准备工作