前端开发系列075-JQuery篇之框架源码解读[结构]

这篇文章将主要介绍jQuery框架的前面几百行代码并说明jQuery框架的整体结构。

一、源码解读

这里先简单贴出jQuery框架3.3.1版本中的前600行代码，其它和整体结构无关的部分省略了。

 * jQuery JavaScript Library v3.3.1
 * https://jquery.com/                  官网地址
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/                核心选择器
 *
 * Copyright JS Foundation and other contributors
 * Released under the MIT license	    开源协议
 * https://jquery.org/license           开源协议地址
 *
 * Date: 2018-01-20T17:24Z			    更新(发布)时间

//jQuery的外城结构是一个闭包(即时调用函数)
//整体结构可以抽象为(fn)(....)
( function( global, factory ) {

	"use strict"; 	//开启严格模式

	//判断的当前的环境是否是CommonJs
	//说明：CommJs 环境中会有一个 module 对象，这个对象上会有一个 exports 对象
	if ( typeof module === "object" && typeof module.exports === "object" )
	{
		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.

		//如果在 CommonJs 环境下，那么将 jQuery 对象挂载到 module.exports 对象
		//factory函数的第二个参数传递为true,表示将不会在window上注册jQuery对象

		//因为可能运行在非浏览器下，所有对global.document进行检查
		//如果global.document有值，那么调用factory( global, true )得到结果赋值给module.exports
		//如果global.document没有值(在非浏览器环境下)，我们没有window对象，那么就需要自己创建了一个模拟浏览器的环境
		//传入自己的 window 对象，这种情况下 jQuery 对象将绑定到你传入的这个特殊的 window 对象上
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					//如果没有document,那么就抛出错误信息
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	}
	else
	{
		//如果不是在 CommonJs 环境下，直接执行工厂函数
        //调用函数的时候传递一个参数(window|this),第二个参数没有传值，默认为undefined
		factory( global );
	}

	// Pass this if window is not defined yet
    //实参说明：第一个参数(global)的值为window 或者 是当前上下文this,第二个参数为函数
} )( typeof window !== "undefined" ? window : this, function( window, noGlobal )
{

// Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1
// throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode
// arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common
// enough that all such attempts are guarded in a try block.
//开启严格模式
"use strict";

//声明变量
var arr = [];

//获取document文件
var document = window.document;

//保存Object对象上获取原型对象的方法
var getProto = Object.getPrototypeOf;

//保存数组中截取元素的方法
var slice = arr.slice;

//保存数组中合并数组的方法
var concat = arr.concat;

//保存数组中添加元素的方法
var push = arr.push;

//保存数组中返回元素索引的方法
var indexOf = arr.indexOf;

//初始化空的对象
var class2type = {};

//保存{}.toString方法,其实是Object.prototype.toString方法
//该方法用于获取指定对象的类型和真实构造函数 ex: [object String]
var toString = class2type.toString;

//保存检查是否是实例成员的方法
var hasOwn = class2type.hasOwnProperty;

//保存 Object.prototype.hasOwnProperty.toString方法
var fnToString = hasOwn.toString;
//保存 Object.prototype.hasOwnProperty.toString.call(Object) 方法
//	==> "function Object() { [native code] }"
var ObjectFunctionString = fnToString.call( Object );

// 初始化空的对象
var support = {};
// 工具函数：检查传入的对象是否是函数类型的
var isFunction = function isFunction( obj ) {

      // Support: Chrome <=57, Firefox <=52
	  //浏览器的支持情况
      // In some browsers, typeof returns "function" for HTML <object> elements
	  // 在很多的浏览器中对HTML对象节点执行typeof会返回 function
      // (i.e., `typeof document.createElement( "object" ) === "function"`).
	  // 在ie中typeof document.createElement( "object" )的结果为function
      // We don't want to classify *any* DOM node as a function.
	  // 在检查函数的时候排除任何的DOM节点
	  // 注：DOM节点均拥有nodeType属性，属性值为number类型，根据具体的数值不同来进行区分 1为元素节点 2为属性节点

      return typeof obj === "function" && typeof obj.nodeType !== "number";
  };

//工具函数：检查传入的参数是否是window
var isWindow = function isWindow( obj ) {
		//检查window的方式  window = window.window 即window对象本身拥有window属性来标名自己是window
		//null不能拥有任何的属性，排除null
		return obj != null && obj === obj.window;
};

//保存script属性的字面量对象:类型|资源|noModule
var preservedScriptAttributes = {
		type: true,
		src: true,
		noModule: true
	};

// 该方法作为 $.globalEval();方法的内部实现,作用类似于js原生的eval方法
// $.globalEval( "var a = 1;" );方法其实就是调用 DOMEval("var a = 1;");
function DOMEval( code, doc, node ) {

	     //如果doc没有值,那么初始化为document
		doc = doc || document;

		//创建空的script标签
		var i,
			script = doc.createElement( "script" );
		//设置script标签的文本内容
		script.text = code;
		if ( node ) {
			//循环preservedScriptAttributes对象
			//把node节点中的type && src && noModule拷贝给script标签
			for ( i in preservedScriptAttributes ) {
				if ( node[ i ] ) {
					script[ i ] = node[ i ];
				}
			}
		}
		//doc.head 表示访问页面中的header头部标签
		//把先创建的script标签插入到页面然后删除掉
		doc.head.appendChild( script ).parentNode.removeChild( script );
	}

//	获取参数对应的数据类型
function toType( obj ) {
	// 如果参数是null,那么就返回"null"
	if ( obj == null ) {
		return obj + "";
	}
	// Support: Android <=2.3 only (functionish RegExp)
	// 如果typeof的结果为object 或者是function 那么就通过class2type[ toString.call( obj ) ]方法计算
	// class2type[ toString.call( obj ) ] 其实就是Object.prototype.toString.call(obj) 形式
	// 如果toString方法计算的结果为false,那么就返回object,否则返回typeof obj的值
	return typeof obj === "object" || typeof obj === "function" ?
		class2type[ toString.call( obj ) ] || "object" :
		typeof obj;
}
/* global Symbol */
// Defining this global in .eslintrc.json would create a danger of using the global
// unguarded in another place, it seems safer to define global only for this module

var
	// 当前版本
	version = "3.3.1",

	// Define a local copy of jQuery 定义jQuery的本地副本
	// jQuery工厂函数的定义(声明)
	// 参数1 ： 选择器
	// 参数2 :  上下文对象
	jQuery = function( selector, context ) {

		// The jQuery object is actually just the init constructor 'enhanced'
		// Need init if jQuery is called (just allow error to be thrown if not included)

		// jQuery.fn,init 作为构造函数，这里返回的其实是jQuery.fn.init构造函数的实例化对象
		// 调用jQuery函数的时候其实是以构造函数的方式调用 xxx...init函数
		return new jQuery.fn.init( selector, context );
	},

	// Support: Android <=4.0 only
	// Make sure we trim BOM and NBSP
	// 确保对BOM和NBSP的处理,清除字符串开始和结尾的一个或多个空格的正则表达式
	rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;

//设置jQuery的原型对象，并把原型对象赋值给jQuery.fn
jQuery.fn = jQuery.prototype = {

	//这里列出了一部分jQuery原型成员（属性和方法）
	//所有的jQuery实例对象都能够访问这些属性和方法

	// The current version of jQuery being used
	//当前正在使用的jQuery版本信息
	jquery: version,
	//构造器属性 ---> jQuery
	constructor: jQuery,

	// The default length of a jQuery object is 0
	//jQuery实例对象中数据的个数，默认长度为0
	length: 0,

	// 把jQuery实例对象转换为数组类型的方法
	toArray: function() {
		//其实调用的是Array.prototype.slice.call(this) 方法 相当于this.slice()
		//在数组的slice方法中，如果不接受参数则表示截取所有的元素保存到一个新的数组中返回
		return slice.call( this );
	},

	// Get the Nth element in the matched element set OR
	// Get the whole matched element set as a clean array
	// 获取jQ对象中指定索引对应的数据(通常为DOM节点)
	get: function( num ) {

		// Return all the elements in a clean array
		//如果没有传递参数，那么等价于调用了toArray方法
		//把当前jQ对象中所有的value值保存到数组中返回
		if ( num == null ) {
			return slice.call( this );
		}

		// Return just the one element from the set
		// 区分索引值的情况
		// 如果索引值为负数那么 返回this[index + this.length]
		// 如果索引值> = 0     返回thus[index]
		return num < 0 ? this[ num + this.length ] : this[ num ];
	},

	// Take an array of elements and push it onto the stack
	// (returning the new matched element set)
	// 维护堆栈集合 把传入的数据包裹成一个新的jQ对象，然后更新prevObject的值为上一个(this)对象
	pushStack: function( elems ) {

		// Build a new jQuery matched element set
		// merge方法用于合并两个数组
		// this.constructor() 其实就是this.jQuery(); 得到的是一个空的jQ实例对象
		//
		var ret = jQuery.merge( this.constructor(), elems );

		// Add the old object onto the stack (as a reference)

		//prevObject属性用于维护和记录前一个操作的jQ实例对象
		//把当前对象设置为ret的prevObject属性，并返回
		ret.prevObject = this;

		// Return the newly-formed element set
		return ret;
	},

	// Execute a callback for every element in the matched set.
	//迭代jQuery实例对象的方法，该方法内部调用jQuery.each方法实现
	each: function( callback ) {
		return jQuery.each( this, callback );
	},

	// 数组映射方法，对jQuery.map方法做了额外的包装
	map: function( callback ) {
		return this.pushStack( jQuery.map( this, function( elem, i ) {
			//使用当前的元素来调用callback方法,绑定this
			return callback.call( elem, i, elem );
		} ) );
	},
	// 截取对象中指定的键值对(元素)
	//因为slice方法调用后返回的是一个新的对象集合，所以需要调用pushStack方法维护prevObject堆栈
	slice: function() {
		//核心实现：this => Array.prototype.slice(arguments) || this => [].slice(arguments)
		return this.pushStack( slice.apply( this, arguments ) );
	},

	//获取jQuery实例对象中的第一个元素(第一个键值对中的value值，其实就是第一个DOM标签)包裹为jQuery对象返回
	//内部通过调用jQuery.eq方法实现，
	first: function() {
		return this.eq( 0 );
	},
	//获取jQuery实例对象中的最后一个元素
	//同first方法一致，eq方法传递-1表示倒着数，即倒数第一个(最后一个)元素
	last: function() {
		return this.eq( -1 );
	},

	//获取jQuery实例对象中指定索引对应的元素，拿到元素后包装为jQuery实例对象返回
	//该方法的参数支持正整数或者是负数
	eq: function( i ) {
		var len = this.length,
			j = +i + ( i < 0 ? len : 0 );
		return this.pushStack( j >= 0 && j < len ? [ this[ j ] ] : [] );

		//自己写的另外一种实现方案(在判断的时候需要考虑到越界的问题)
		// var len = this.length;
		// var arrM = [];
		// if (i >= 0 && i < len)
		// {
		// 		arrM.push(this[i])
		// }
		// else if(i < 0 && (-i < len) )
		// {
		// 		arrM.push(this[i + len])
		// }
		// return this.pushStack(arrM)
	},

	//返回前一个操作的jQuery实例对象
	end: function() {
		//检查prevObject的属性值，如果优质那么就返回prevObject否则返回空的jQuery实例对象
		return this.prevObject || this.constructor();
	},

	// For internal use only.
	// 仅供内部使用的方法
	// Behaves like an Array's method, not like a jQuery method.
	// 这些方法的表现和数组一致，不完全像jQuery风格的方法

	//往jQuery实例对象中添加数据
	push: push,
	//排序的方法
	sort: arr.sort,
	//添加|删除的方法，其实就是数组中的splice方法
	splice: arr.splice
};

//......
// 设置jQuery.prototype.init方法
init = jQuery.fn.init = function( selector, context, root ) {
    //...
};

// Give the init function the jQuery prototype for later instantiation
/  让jQuery.prototype.init方法的原型对象指向jQuery原型对象
// (正因如此$("xx")得到的jQ实例对象才能访问jQuery原型对象上面的方法)
init.prototype = jQuery.fn;
//.....

window.jQuery = window.$ = jQuery;
} );

二、框架的整体结构

下面给出简化后jQuery框架的整体结构。

//01 立即调用函数(闭包)
(function (window) {

    //02 提供工厂函数
    var jQuery = function (selector) {
        return new jQuery.fn.init(selector);
    }

    //03 设置原型对象
    jQuery.prototype = {
        constructor:jQuery,
        init:function (selector) {
            //初始化处理...
        }
    }

    //动态的添加fn属性
    jQuery.fn = jQuery.prototype;

    //04 原型对象赋值
    jQuery.fn.init.prototype = jQuery.fn;

    //........

    //05 把jQuery和$暴露出来
    window.$ = window.jQuery = jQuery;

})(window);

jQuery框架整体结构总结

>❏   jQuery本身是闭包中的一个函数，该函数作工厂函数用。
>❏   jQuery所有的代码都被放在一个即时调用函数中(闭包)，拥有独立和安全的作用域。
>❏   jQuery方法在调用的时候，获取的实例对象其本质上是`jQuery.fn.init`构造函数实例化的。
>❏   jQuery函数调用的时候，参数实际上都传递给了`init`函数，`init`函数才是真正的入口函数。
> ❏   为了让实例对象访问jQuery原型对象的成员，设置了`jQuery.fn.init`和`jQuery原型对象`共享。
>❏   jQuery通过把自身赋值给window成为全局对象的属性来实现框架外的访问(`$ 和 jQuery`访问)。