jQuery 源码分析(一) 代码结构

来源：cnblogs　　作者：大沙漠　　时间：2019/8/26 8:43:43　　对本文有异议

jQuery是一个Javascript库，它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅，而且有强大的选择器，出色的DOM操作,可靠的事件处理机制,完善的Ajax,关键是有出色的浏览器兼容性，开发项目时可以不用考虑兼容性，因为jQuery已经替我们都修正好了，最后还有一点是jQuery有非常多的插件，功能非常丰富。

jQuery和Vue(包括react、angular)的区别就不说了，网上一大堆哈哈，前者是MVC模式，后者是MVVM模式,MVVM模式的出现不是说为了取代MVC模式的，它们是可以共同存在的，很多时候还是使用mvc模式更方便，对于一些数据交互比较多的可以使用vue之类的脚手架来进行开发项目,难度相比较也有点大

jQuery的代码结构相比较简单，就是一个匿名函数，将入口挂载到window.$和window.jQuery属性上，我们模拟一下jQuery的结构，由浅入深，如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        (function(window,undefined){
            var jQuery = (function(){
                return 'Hello jQuery';
            })()
            window.jQuery = window.$ = jQuery;
        })(window)
        console.log($)
    </script>
</body>
</html>

就是定义一个匿名函数，内部再定义一个jQuery变量，值为一个立即执行表达式，最后将值挂载到window.jQuery和window.$上，打印出来的如下:

实际上当然不可能直接返回一个字符串，其实在这个立即执行表达式里，会执行new jQuery.fn.init()创建一个函数对象，最后返回改函数对象，我们加深一点代码，和jQuery内部一样，如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="p">123</p>
    <script>
        (function(window,undefined){
            var jQuery = (function(){
                var jQuery = function(selector){ 　　　　　　　　//再定义一个函数，内部返回new一个jQuery.fn.init对象，并返回
                    return new jQuery.fn.init(selector)
                }
                jQuery.fn={
                    init:function(selector){
                        this[0] = selector;
                        return this
                    }
                }
                return jQuery;
            })()
            window.jQuery = window.$ = jQuery;
        })(window)
        console.log($('p'))
        console.log($('p')[0])
    </script>
    
</body>
</html>

打印如下:

第一行输出是$('p')对象，第二行就是p这个Dom节点引用了，第一行输出是不是和真实的jQuery对象很像呢，我们用真实的jQuery打印看看:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
    <p id="p">123</p>
    <script>
        console.log($(p))
        console.log($(p)[0])
    </script>
</body>
</html>

输出如下:

可以看到真实的jQuery返回的也是一个init对象，第二行输出么就是一摸一样了。

jQuery的代码结构就是这样的,最后返回的其实内部的jQuery.fn.init对象，然后会把jQuery.fn设置为jQuery.fn.init的原型，最后在jQuery.fn或jQuery.fn.prototype上设置大量的属性和方法，这些属性和方法就是jQuery对外的属性和方法，供我们使用了。

jQuery的代码结构按照功能不同分为三部分:

　　入口模块(用于构造jQUery对象)　　

　　底层支持模块(供功能模块使用的)

　　功能模块(最后实现的操作)

底层支持模块又分为:

　　选择器模块

　　浏览器功能测试

　　异步队列

　　数据缓存和队列模块

功能模块又细分为

　　属性操作

　　事件系统

　　DOM遍历

　　DOM操作

　　样式操作CSS

　　异步请求

　　动画模块

后面慢慢介绍每个模块，每个API的用法和原理实现。

原文链接：http://www.cnblogs.com/greatdesert/p/11398906.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章