jQuery原始碼分析（一）

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;

基于原型和原型鏈的圖：