jQuery源码结构分析

╰+哭是因爲堅強的太久メ 2022-02-19 17:53 314阅读 0赞

## sum ##

*  官网介绍

jQuery is a fast, small, and feature-rich JavaScript library. 
    It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax 
    much simpler with an easy-to-use API that works across a multitude of browsers. 
    With a combination of versatility and extensibility, 
    jQuery has changed the way that millions of people write JavaScript.
    
    jQuery是一个快速、小巧、功能丰富的JavaScript库。
    它使诸如HTML文档遍历和操作、事件处理、动画和Ajax之类的操作简单得多，
    具有易于使用的API，可以跨多种浏览器工作。
    结合了通用性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

*  实际上  
    `jQuery`就是一个全局变量`window.jQuery`，他有一个别名`window.$`，全局变量的访问可以省略`window.`。

`$(selector)`就是向`jQuery`类的构造方法传入参数，这个构造方法返回jQuery实例对象。

`jQuery.xxx`就是调用jQuery类的静态成员。  
`$(selector).xxx`就是调用jQuery对象的原型方法

`$.fn`就是`$.prototype`，用作jQuery对象的原型方法的命名空间。

就是这样的整体结构，为我们封装好常用的对网页元素(DOM)的CRUD操作，以提高效率。

## intro ##

已知，在JS中的浏览器端中，`window`对象的成员为全局的。访问时可省略`window.`。

在`Mozilla`公司，有一个程序员[John Resig][]实现了一个JS的全局变量，  
`jQuery`，别名`$`，可以用好几种方式访问`window.jQuery, window.$, jQuery, $`。  
这个`jQuery`，可以看做是一个类(JS中的`class`实质还是`function`)。

他向`jQuery`类添加了一些静态方法，我们可以直接用类名调用方法来使用(执行想要的操作)。如：  
\- `jQuery.ajax(url, ?settings)`  
\- `jQuery.extend(target, ?obj1, ?obj2, ..., objN)`  
\- `jQuery.attr(attributeName, value)`  
\- `jQuery.attr(attributes)`  
\- `jQuery.css(propertyName, value)`  
\- `jQuery.css(properties)`

`jQuery`作为一个类，应该有原型方法(对应面向对象语言中的**实例方法**)。  
两点：

*  实例的创建  
    用过jQuery的朋友应该写过`$("p:first").xxx`这样格式的代码。  
    `$("...")`就是jQuery的构造函数，`selector`就是我们传入jQuery构造方法的参数。  
    `$(selector)`就是一个实例化好的jQuery对象，然后这个jQuery对象就可以调用jQuery的原型方法。  
    实际上jQuery的构造方法为`function(selector, context)`，且其中调用了另一个方法`$.fn.init(selector, context, rootjQuery)`。
 *  成员方法的添加：`$.fn.xxx = ...`;

向jQuery类添加静态成员`$.xx = ...;`  
向jQuery实例添加方法：`$.fn.xxx = function() {...}`  
\[ . f n \] ( h t t p s : / / b l o g . c s d n . n e t / w u y u j i n 1997 / a r t i c l e / d e t a i l s / 89017466 ) j Q u e r y 中 的 ‘ .fn\](https://blog.csdn.net/wuyujin1997/article/details/89017466) jQuery中的\` .fn\](https://blog.csdn.net/wuyujin1997/article/details/89017466)jQuery中的‘.fn\`实际上就是jQuery.prototype，  
一般把他作为jQuery对象的原型方法的命令空间，向其添加成员方法。

下面是对源码的一些简单分析：

## 源码中的一些信息 ##

*  整体结构  
    jQuery源码整体结构是一个[自调用函数][Link 1]。

(function(window, undefined) {
        /** code */
    })(window);

相当于:

function foo(window, undefined) {
        /** code */
    }
    foo(window);    // 调用函数，传参window。

自调用函数也是一个函数，函数中的代码可以是：  
\- 普通语句  
\- 变量声明  
\- 流程控制代码块  
\- 方法声明(JS中方法可以`嵌套声明`)  
之后就是向这个自调用函数中添加代码。

*  关于全局属性和$别名

(function(window, undefined) {
        // 这个自调用函数中的document, navigator, location分别对应window对象的对应成员属性(对象)。
        var document = window.document,
            navigator = window.navigator,
            location = window.location;
    
        // 设置jQuery对象的别名为$，且将其设置为全局属性(window.jQuery)。
        window.jQuery = winddow.$ = jQuery;
        
    })(window);

*  jQuery的构造

(function(window, undefined) {
        // first: 自调用函数中的document, navigator, location与全局对象window.xxx向对应。
    
        var jQuery = (function() {
            /** 又是一个自调用函数*/
            // 这里返回jQuery对象
        })();
        
        // last: 导出jQuery对象为全局属性window.jquery及window.$。
    })(window);

而其中的`var jQuery`变量存储的是自调用函数执行一次的返回值，重要的代码：

信息很多:  
\- 我们常用的`jQuery(selector)`是构造方法，传入的`selector`是参数，可以实例化出一个`jQuery`类型的对象。

- `jQuery.fn = jQuery.prototype = {/**  */}`
      我们把`jQuery.fn`当做jQuery对象的原型方法的命名空间使用(向`$.fn`添加方法，则jQuery对象也能调用这些方法)。
      其实实质上，`jQuery.fn`就是jQuery对象的原型`jQuery.prototype`。
      
    - `jQuery.fn.init.prototype = jQuery.fn`
      `jQuery.fn.init`方法需要用一些方法，这些方法`jQuery.prototype`上已经有了，所以`挂`一下原型。
    
    - `jQuery.extend = jQuery.fn.extend = funciton() {/**  */}`
      定义了jQuery类的静态方法`jQuery.extend`和jQuery对象的原型方法`jQuery.fn.extend`。他两实现是相同的(同一个函数)。
    
    - `rootjQuery = jQuery(document)`
      jQuery中所有对象的根元素都是`window.document`对象。

*  现在有了jQuery对象，之后的代码：  
    之后的代码有几种类型：
    
     *  变量声明语句(如正则表达式，普通布尔值，字符串变量等)
     *  普通代码块(方法内部当然可以直接写普通代码块，如if…else等)。
     *  声明方法(JS中方法可以`嵌套声明`)

其中，经常调用的几个方法有：  
\- 9次 `jQuery.fn.extend(object)`  
用于向`jQuery.fn`添加|扩展成员方法，来为jQuery对象提供新的原型方法。  
`Merge the contents of an object onto the jQuery prototype to provide new jQuery instance methods.`  
\- 12次 `jQuery.extend(target, ?obj1, ?obj2, ..., ?objN)`  
将后面的参数对象的成员添加到第一个参数`target`中。  
`Merge the contents of two or more objects together into the first object.`  
\- 26次 `jQuery.each(object|array, callback)`  
对给出的对象(或数组)进行迭代，每次迭代调用`callback`函数。

其他，就是更多的实现细节，后续再补充。

## code ##

row data, 619 rows code.  
见：[jQuery 1.7 源码大致结构][jQuery 1.7]

[John Resig]: https://baike.baidu.com/item/John%20Resig
[Link 1]: https://blog.csdn.net/wuyujin1997/article/details/88828124
[jQuery 1.7]: https://blog.csdn.net/wuyujin1997/article/details/89350745