jQuery源码分析（一）-蒲公英云

jQuery源码分析（一）

- 日理万妓 2022-12-29 14:15 255阅读 0赞

jQuery源码分析（一）

我们知道在jQuery中在使用选择器或者给元素绑定事件的时候都是通过$来操作的。那么基于JavaScript面向对象的思想，我们可以把jQuery看做一个函数或者对象，它里边存储了大量的方法，是一个类库。
$代表的就是jQuery
$.ajax() ————- jQuery.ajax() 当做对象来看就是jQuery调用它静态私有的属性和方法，同样我们可以再控制台输出一下dir(jQuery)看到jQuery对象中存储属性和方法：

jQuery.prototype 原型上存储的就是供jQuery实例对象调用的方法。同样输出一下jQuery.prototype

$(’.box’).addClass()就是找的jQuery.prototype中的addClass方法那么我们就可以把
$(’.box’)看作是jQuery的一个实例对象，原型上的属性和方法只能被其所属类或所属类的实例调用。上源码

var
    version = "3.5.1",
    //这是在$也就是jQuery执行的时候做的操作 
    jQuery = function jQuery(selector, context) { 
        // selector:选择器类型 「字符串（选择器/HTML字符串）、函数、DOM元素对象...」
        // context:上下文，限制其获取的范围
        return new jQuery.fn.init(selector, context);
    };
// 原型方法：供实例调用 原型重定向
jQuery.fn = jQuery.prototype = { 
    jquery: version,
    constructor: jQuery,
    // ...
};
//这两段代码意思是一样的
var jQuery.fn = jQuery.prototype;
    jQuery.prototype={ 
        jquery: version,
        constructor: jQuery
    };

上边这段代码表示：原型重定向以后会丢失之前的属性和方法，所以jQuery中自己给新原型加上了jquery和constructor属性。那么在jQuery执行的时候new jQuery.fn.init(selector, context)就是调用的new jQuery.prototype.init(selector, context))也就是原型上的init方法

var rootjQuery = jQuery(document),
   rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/,
   init = jQuery.fn.init = function (selector, context, root) { 
       var match, elem;
       // HANDLE: $(""), $(null), $(undefined), $(false)
       if (!selector) { 
           return this;
       }
       // Method init() accepts an alternate rootjQuery
       // so migrate can support jQuery.sub (gh-2101)
       root = root || rootjQuery;
       // Handle HTML strings
       if (typeof selector === "string") { 
           if (selector[0] === "<" &&
               selector[selector.length - 1] === ">" &&
               selector.length >= 3) { 
               // Assume that strings that start and end with <> are HTML and skip the regex check
               match = [null, selector, null];
           } else { 
               match = rquickExpr.exec(selector);
           }
           // Match html or make sure no context is specified for #id
           if (match && (match[1] || !context)) { 
               // HANDLE: $(html) -> $(array)
               if (match[1]) { 
                   context = context instanceof jQuery ? context[0] : context;
                   // Option to run scripts is true for back-compat
                   // Intentionally let the error be thrown if parseHTML is not present
                   jQuery.merge(this, jQuery.parseHTML(
                       match[1],
                       context && context.nodeType ? context.ownerDocument || context : document,
                       true
                   ));
                   // HANDLE: $(html, props)
                   if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
                       for (match in context) { 
                           // Properties of context are called as methods if possible
                           if (isFunction(this[match])) { 
                               this[match](context[match]);
                               // ...and otherwise set as attributes
                           } else { 
                               this.attr(match, context[match]);
                           }
                       }
                   }
                   return this;
                   // HANDLE: $(#id)
               } else { 
                   elem = document.getElementById(match[2]);
                   if (elem) { 
                       // Inject the element directly into the jQuery object
                       this[0] = elem;
                       this.length = 1;
                   }
                   return this;
               }
               // HANDLE: $(expr, $(...))
           } else if (!context || context.jquery) { 
               return (context || root).find(selector);
               // HANDLE: $(expr, context)
               // (which is just equivalent to: $(context).find(expr)
           } else { 
               return this.constructor(context).find(selector);
           }
           // HANDLE: $(DOMElement)
       } else if (selector.nodeType) { 
           this[0] = selector;
           this.length = 1;
           return this;
           // HANDLE: $(function)
           // Shortcut for document ready
       } else if (isFunction(selector)) { 
           return root.ready !== undefined ?
               root.ready(selector) :
               // Execute immediately if ready is not present
               selector(jQuery);
       }
       return jQuery.makeArray(selector, this);
   };
   //init的原型指向重定向以后的原型
init.prototype = jQuery.fn;