jQuery2.0.3源碼分析

時間 2019-11-05

原文原文鏈接

整體架構

// 匿名子執行函數
(function() {
    (21,94) 定義一些變量和函數 jQuery = function() {};
    (96,283) 給jq對象，添加屬性和方法，
    (285, 347) extend: jQ的繼承方法
    (349, 817) jQuery.extend(): 拓展一些工具方法，靜態
    (877,2856) Sizzle : 複雜選擇器的實現
    (2880,3042) Callbacks: 回調對象：函數的統一管理
    (3043,3183) Deferred： 延遲對象： 對異步的統一管理
    (3184,3295) support :功能檢測
    (3308, 3652) data() : 數據緩存
    (3653, 3797) queue(): 隊列管理 保證異步的執行順序
    (3803,4299) attr() prop() val() addClass() 對元素的操做
    (4300, 5128) on() prop() val() addClass() 對元素的操做
    (5140, 6057) DOM操做: 添加 刪除 獲取 包裝 DOM 篩選
    (6058,6620) css() 樣式的操做
    (6621,7854) 提交的數據和ajax(): ajax() load() getJson()
    (7855,8584) animate()
    (8585,8792) offset() ： 位置和尺寸的方法 
    (8804,8821) JQ支持模塊化的模式
})()

rootJquery 全部jq對象最後返回這些？
readyList 與DOM加載相關
core_strundedfined = typeof undefined

兼容處理，老版瀏覽器沒法使用'undefined'判斷XML中string類型css

location、document、docElem
jQuery = window.jQuery, $ = window.$,防止被重寫
class2type 用於類型判斷，用json格式保存多種類型值

_$ = window.$,

_$ = window.$,
core_version = "2.0.3", 版本號 // _proto_的jquery屬性
core_pnum = // ; 數字的正則，與css表達式相關

rootjQuery = jQuery(document);

completed

completed = function() {
        document.removeEventListener( "DOMContentLoaded", completed, false );
        window.removeEventListener( "load", completed, false );
        jQuery.ready();
    };

注：DOMContentLoaded與onload區別html

1.當onload事件觸發時，頁面上全部的DOM，樣式表，腳本，圖片flash都加載完
2.當DOMContentLoaded事件觸發時，僅當DOM加載完成時，不包括樣式表，圖片，flashjquery

jQuery.fn 代替 jQuery.prototype

jQuery.fn = jQuery.prototype = {
    constructor: jQuery,  // 指定constructor
}

jQuery.fn.init(selector,context,rootJquery)

if (selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3) 
// <html> <html>...</html>

else //<html>ddd

if( match && (match[1] || !context) ) // html標籤
    if(match[1]) // html標籤
        // 匹配單標籤
        if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) )
else //#id

parseHtml(str,docment,false)把字符串轉爲節點數組

context 指定不一樣環境下的根節點ajax

參數selector，接受任何類型的值

"" , null, undefined, false的處理，返回原值

if ( !selector ) {
    return this;
}

this指空jQuery對象json

處理HTML字符串

parseHTML: function( data, context, keepScripts ) {
        if ( !data || typeof data !== "string" ) {
            return null;
        }
        if ( typeof context === "boolean" ) {
            keepScripts = context;
            context = false;
        }
        context = context || document;

        var parsed = rsingleTag.exec( data ),
            scripts = !keepScripts && [];

        // Single tag
        if ( parsed ) {
            return [ context.createElement( parsed[1] ) ];
        }

        parsed = jQuery.buildFragment( [ data ], context, scripts );

        if ( scripts ) {
            jQuery( scripts ).remove();
        }

        return jQuery.merge( [], parsed.childNodes );
    }

參數類型判斷必不可少，這也是js這門語言帶來的頭痛的問題之一。數組