jQuery1.8.2源码学习入手

JS IS JS

于 2018-09-02 19:53:28 发布

阅读量661

点赞数

分类专栏： jQuery 文章标签： jQuery 源码

本文链接：https://blog.csdn.net/qq_37905969/article/details/82292246

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

介绍

第一次正式写博客，打算通过CSDN来记录自己的学习过程，希望自己能够坚持下去。为什么叫源码学习而不是叫源码解析，是因为自己还处于对源码一窍不通的状态，如果有幸被大家看到我的博客，希望大佬们指出我理解有误的地方。如果博客的编写方式有问题的话，也希望大家能够多多指导，一起学习进步。
我这里是对jQuery的1.8.2版本进行学习，因为jq在2.0+的版本就已经放弃对ie8的支持了。之所以选择1.8.2是想多了解一下jq对ie兼容性的处理。推荐一个静态资源库(https://cdn.baomitu.com/)

正式

如何开启对源码的学习

当下载完源码后，一脸懵逼不知道如何下手，相信很多人都是一样懵逼。面向百度学习，大家都懂的。最后了解到，可以通过一个简单的html+js断点调试。至于如何具体断点调试，大家可以去网上学习一下，本文下面会简单地提到断点调试。
test.html（引入对应的js版本）如下：

<!Doctype html>
<html>
    <head>
        <title>study jquery code</title>
    </head>
    <body>
        <script src="./jquery-1.8.2.js"></script>
        <script>
            //在控制台打印$()
            console.log($())
        </script>
    </body>

</html>

断点图片如下：

入口如下：
这里写图片描述

通过打断点的方式找到jq的初始化入口。有没有感到一丝丝的兴奋和激动，我们已经通过简单的几步已经学会了如何对jQuery源码下手。

对入口进行分析

一、我们先回过头来分析代码的整个构建，整个代码被包裹在(function(window, undefined) {})(window)中，这是一个IIFE（立即执行函数表达式），这样做的意义如下：
a、匿名函数立即执行，防止函数内外变量名冲突，一般插件中的源码对外只暴露极少数变量来提供对插件的引用。
b、传入window参数，是为了方便对window对象的引用，减少作用域查询的时间，提高js性能。
c、undefiend参数的作用：有些老的浏览器并不支持undefined，直接使用会导致报错，所以考虑兼容性问题，需要添加改参数。

二、开始对入口除进行分析，我们调用时$()，触发了jQuery函数，这里我们便需要开始发动我们的小脑筋想想这是怎么实现的。有两个问题：jQuery为局部变量，为何我们能够访问到？$与jQuery 相等在何处声明？我们通过源码来找到问题的答案。
答案就在9422行，内容如下：

window.jQuery = window.$ = jQuery;
//暴露jQuery接口为全局对象

三、接着来看jQuery函数具体内容：

// Define a local copy of jQuery
jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    return new jQuery.fn.init( selector, context, rootjQuery );
},

在这个函数执行完了就是一个new构造函数的过程，返回的就是一个jQuery初始完成的对象。接着我们就可以找到jQuery.fn.init对应的位置，开启jQuery学习之路啦

参考博客：
前段百科—JS中形如(function(window, undefined) {})(window)写法的理解

JS IS JS

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery1.8.2源码学习入手

介绍第一次正式写博客，打算通过CSDN来记录自己的学习过程，希望自己能够坚持下去。为什么叫源码学习而不是叫源码解析，是因为自己还处于对源码一窍不通的状态，如果有幸被大家看到我的博客，希望大佬们指出我理解有误的地方。如果博客的编写方式有问题的话，也希望大家能够多多指导，一起学习进步。我这里是对jQuery的1.8.2版本进行学习，因为jq在2.0+的版本就已经放弃对ie8的支持了。之所以选择...
复制链接

扫一扫