欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-04 14:30:04
jQuery是一个Javascript库,它支持链式操作方式,即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅,而且有强大的选择器,出色的DOM操作,可靠的事件处理机制,完善的Ajax,关键是有出色的浏览器兼容性,开发项目时可以不 ......

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>

writer by:大沙漠 qq:22969969

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

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

实际上当然不可能直接返回一个字符串,其实在这个立即执行表达式里,会执行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>

打印如下:

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

第一行输出是$('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 源码分析(一) 代码结构

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

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

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

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

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

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

底层支持模块又分为:

  选择器模块

  浏览器功能测试

  异步队列

  数据缓存和队列模块

功能模块又细分为

  属性操作

  事件系统

  dom遍历

  dom操作

  样式操作css

  异步请求

  动画模块

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