学习 jQuery 源码整体架构，打造属于自己的 js 类库

(function(global, factory){ })(typeof window !== “underfined” ? window: this, function(window, noGlobal){ });

if ( !noGlobal ) { window.jQuery = window.$ = jQuery; } // 其中`noGlobal`参数只有在这里用到。

// global是全局变量，factory 是表达式 ( function( global, factory ) { // 采用严格模式 “use strict”; // Commonjs 或者 CommonJS-like 环境 if ( typeof module === “object” && typeof module.exports === “object” ) { // 如果存在global.document 则返回factory(global, true); module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( “jQuery requires a window with a document” ); } return factory( w ); }; } else { factory( global ); } // Pass this if window is not defined yet // 第一个参数判断window，存在返回window，不存在返回this } )( typeof window !== “undefined” ? window : this, function( window, noGlobal ) {});

if ( typeof define === “function” && define.amd ) { define( “jquery”, [], function() { return jQuery; } ); }

var version = “3.4.1”, // Define a local copy of jQuery jQuery = function( selector, context ) { // 返回new之后的对象 return new jQuery.fn.init( selector, context ); }; jQuery.fn = jQuery.prototype = { // jQuery当前版 jquery: version, // 修正构造器为jQuery constructor: jQuery, length: 0, }; init = jQuery.fn.init = function( selector, context, root ) { // … if ( !selector ) { return this; } // … }; init.prototype = jQuery.fn; jQuery.fn === jQuery.prototype; // true init = jQuery.fn.init; init.prototype = jQuery.fn; // 也是 jQuery.fn.init.prototype === jQuery.fn; // true jQuery.fn.init.prototype === jQuery.prototype; // true

<sciprt src=”https://unpkg.com/[email protected]/dist/jquery.js”> </script> console.log({jQuery}); // 在谷歌浏览器控制台，能看到jQuery表达式下挂载了很多静态属性和方法，在jQuery.fn 上也挂着很多属性和方法。

function Vue (options) { if (!(this instanceof Vue) ) { warn(Vue is a constructor and should be called with the `new` keyword); } this._init(options); } initMixin(Vue); function initMixin (Vue) { Vue.prototype._init = function (options) {}; };

jQuery.extend( target [, object1 ] [, objectN ] ) Returns: Object jQuery.extend( [deep ], target, object1 [, objectN ] )

// 1. jQuery.extend( target) var result1 = $.extend({ job: 后端开发工程师, }); console.log(result1, result1, result1.job); // $表达式 加了一个属性 job // 后端开发工程师 // 2. jQuery.extend( target, object1) var result2 = $.extend({ name: 若川, }, { job: 后端开发工程师, }); console.log(result2, result2); // { name: 若川, job: 后端开发工程师 } // deep 深拷贝 // 3. jQuery.extend( [deep ], target, object1 [, objectN ] ) var result3 = $.extend(true, { name: 若川, other: { mac: 0, ubuntu: 1, windows: 1, }, }, { job: 后端开发工程师, other: { mac: 1, linux: 1, windows: 0, } }); console.log(result3, result3); // deep true // { // “name”: “若川”, // “other”: { // “mac”: 1, // “ubuntu”: 1, // “windows”: 0, // “linux”: 1 // }, // “job”: “后端开发工程师” // } // deep false // { // “name”: “若川”, // “other”: { // “mac”: 1, // “linux”: 1, // “windows”: 0 // }, // “job”: “后端开发工程师” // }

// 浅拷贝同时实现 jQuery.extend = function(){ // options 是扩展的对象object1，object2… var options, // object对象上的键 name, // copy object对象上的值，也是是需要拷贝的值 copy, // 扩展目标对象，可能并非对象，因此或空对象 target = arguments[0] || {}, // 定义i为1 i = 1, // 定义实参个数length length = arguments.length; // 只有一个参数时 if(i === length){ target = this; i–; } for(; i < length; i++){ // 并非underfined 也并非null if((options = arguments[i]) != null){ for(name in options){ copy = options[name]; // 防止死循环，continue 跳出当前此次循环 if ( name === “__proto__” || target === copy ) { continue; } if ( copy !== undefined ) { target[ name ] = copy; } } } } // 最后返回目标对象 return target; }

if ( copy !== undefined ) { target[ name ] = copy; }

$.extend = function(){ // options 是扩展的对象object1，object2… var options, // object对象上的键 name, // copy object对象上的值，也是是需要拷贝的值 copy, // 深拷贝新增的四个变量 deep、src、copyIsArray、clone deep = false, // 源目标，需要往上面赋值的 src, // 需要拷贝的值的类型是表达式 copyIsArray, // clone, // 扩展目标对象，可能并非对象，因此或空对象 target = arguments[0] || {}, // 定义i为1 i = 1, // 定义实参个数length length = arguments.length; // 处理深拷贝情况 if ( typeof target === “boolean” ) { deep = target; // Skip the boolean and the target // target目标对象开始后移 target = arguments[ i ] || {}; i++; } // Handle case when target is a string or something (possible in deep copy) // target不等于对象，且target并非表达式的情况下，强制将其赋值为空对象。 if ( typeof target !== “object” && !isFunction( target ) ) { target = {}; } // 只有一个参数时 if(i === length){ target = this; i–; } for(; i < length; i++){ // 并非underfined 也并非null if((options = arguments[i]) != null){ for(name in options){ copy = options[name]; // 防止死循环，continue 跳出当前此次循环 if ( name === “__proto__” || target === copy ) { continue; } // Recurse if were merging plain objects or arrays // 这里deep为true，并且需要拷贝的值有值，并且是纯粹的对象 // 或者需拷贝的值是数组 if ( deep && copy && ( jQuery.isPlainObject( copy ) || ( copyIsArray = Array.isArray( copy ) ) ) ) { // 源目标，需要往上面赋值的 src = target[ name ]; // Ensure proper type for the source value // 拷贝的值，并且src并非数组，clone对象改为空数组。 if ( copyIsArray && !Array.isArray( src ) ) { clone = []; // 拷贝的值并非数组，对象不是纯粹的对象。 } else if ( !copyIsArray && !jQuery.isPlainObject( src ) ) { // clone 赋值为空对象 clone = {}; } else { // 否则 clone = src clone = src; } // 把下一次循环时，copyIsArray 需要重新赋值为false copyIsArray = false; // Never move original objects, clone them // 递归调用他们 target[ name ] = jQuery.extend( deep, clone, copy ); // Dont bring in undefined values } else if ( copy !== undefined ) { target[ name ] = copy; } } } } // 最后返回目标对象 return target; };

var isFunction = function isFunction( obj ) { // Support: Chrome <=57, Firefox <=52 // In some browsers, typeof returns “function” for HTML <object> elements // (i.e., `typeof document.createElement( “object” ) === “function”`). // We dont want to classify *any* DOM node as a function. return typeof obj === “function” && typeof obj.nodeType !== “number”; };

jQuery.isPlainObject({}) // true jQuery.isPlainObject(“test”) // false var getProto = Object.getPrototypeOf; var class2type = {}; var toString = class2type.toString; var hasOwn = class2type.hasOwnProperty; var fnToString = hasOwn.toString; var ObjectFunctionString = fnToString.call( Object ); jQuery.extend( { isPlainObject: function( obj ) { var proto, Ctor; // Detect obvious negatives // Use toString instead of jQuery.type to catch host objects // !obj 为true或者 不为[object Object] // 直接返回false if ( !obj || toString.call( obj ) !== “[object Object]” ) { return false; } proto = getProto( obj ); // Objects with no prototype (e.g., `Object.create( null )`) are plain // 原型不存在 比如 Object.create(null) 直接返回 true; if ( !proto ) { return true; } // Objects with prototype are plain iff they were constructed by a global Object function Ctor = hasOwn.call( proto, “constructor” ) && proto.constructor; // 构造器是表达式，并且 fnToString.call( Ctor ) === fnToString.call( Object ); return typeof Ctor === “function” && fnToString.call( Ctor ) === ObjectFunctionString; }, });

jQuery.fn.extend({ addClass: function(){ // … return this; }, removeClass: function(){ // … return this; }, toggleClass: function(){ // … return this; }, });

<script> var $ = 我是其它的$，jQuery不要覆盖我; </script> <script src=”./jquery-3.4.1.js”> </script> <script> $.noConflict(); console.log($); // 我是其它的$，jQuery不要覆盖我 </script>

var // Map over jQuery in case of overwrite _jQuery = window.jQuery, // Map over the $ in case of overwrite _$ = window.$; jQuery.noConflict = function( deep ) { // 如果早已存在$ === jQuery; // 把已存在的_$赋值给window.$; if ( window.$ === jQuery ) { window.$ = _$; } // 如果deep为 true, 并且早已存在jQuery === jQuery; // 把已存在的_jQuery赋值给window.jQuery; if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; } // 最后返回jQuery return jQuery; };

// 源标识符内部结构 ( function( global, factory ) “use strict”; if ( typeof module === “object” && typeof module.exports === “object” ) { module.exports = global.document ? factory( global, true ) : function( w ) { if ( !w.document ) { throw new Error( “jQuery requires a window with a document” ); } return factory( w ); }; } else { factory( global ); } } )( typeof window !== “undefined” ? window : this, function( window, noGlobal ) { var version = “3.4.1”, // Define a local copy of jQuery jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ); }; jQuery.fn = jQuery.prototype = { jquery: version, constructor: jQuery, length: 0, // … }; jQuery.extend = jQuery.fn.extend = function() {}; jQuery.extend( { // … isPlainObject: function( obj ) {}, // … }); init = jQuery.fn.init = function( selector, context, root ) {}; init.prototype = jQuery.fn; if ( typeof define === “function” && define.amd ) { define( “jquery”, [], function() { return jQuery; } ); } jQuery.noConflict = function( deep ) {}; if ( !noGlobal ) { window.jQuery = window.$ = jQuery; } return jQuery; });