zoukankan      html  css  js  c++  java
  • jQuery 源码分析(一) 代码结构

    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.$上,打印出来的如下:

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

  • 相关阅读:
    <C Primer Plus>4 Pointer Operations
    <C Primer Plus>3 Arguments and Pitfalls of Printf()
    <C Primer Plus >2 Altering Variables in the Calling Function
    <C Primer Plus >1 Constants and the C Preprocessor
    《proe 二次开发01》
    poj 2551 Ones
    POJ2309 -- BST
    Log4j基本用法----日志级别
    Log4j基本用法
    Hibernate学习(一)
  • 原文地址:https://www.cnblogs.com/greatdesert/p/11398906.html
Copyright © 2011-2022 走看看