jQuery源码结构分析

锦天

于 2019-04-16 22:04:32 发布

阅读量271

点赞数

分类专栏： jQuery 文章标签： jQuery 源码类静态原型

本文链接：https://blog.csdn.net/wuyujin1997/article/details/89343432

版权

jQuery 专栏收录该内容

27 篇文章 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`实际上就是jQuery.prototype，
一般把他作为jQuery对象的原型方法的命令空间，向其添加成员方法。

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

源码中的一些信息

整体结构
jQuery源码整体结构是一个自调用函数。

(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变量存储的是自调用函数执行一次的返回值，重要的代码：

var jQuery = (function() {
    var jQuery = function(selector, context) {
        return new jQuery.fn.init(selector, context, rootjQuery);
    };
    jQuery.fn = jQuery.prototype = {/**  */}
    jQuery.fn.init.prototype = jQuery.fn;
    jQuery.extend = jQuery.fn.extend = function() {/**  */};
    rootjQuery = jQuery(document);
    return 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函数。