jQuery技术内幕 深入解析jQuery架构设计与实现原理

 jquery的外衣

jquery是一个轻量级的JS框架

//以下截取自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和$

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。

自调匿名函数

 

posted @   ~沐风  阅读(1053)  评论(0编辑  收藏  举报
编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示