jQuery2.0.3原始碼分析

看見了發表於2018-10-12
jQuery原始碼

總體架構

// 匿名子執行函式
(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型別

  • 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區別

1.當onload事件觸發時，頁面上所有的DOM，樣式表，指令碼，圖片flash都載入完
2.當DOMContentLoaded事件觸發時，僅當DOM載入完成時，不包括樣式表，圖片，flash

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 指定不同環境下的根節點

引數selector，接受任何型別的值

  • “” , null, undefined, false的處理，返回原值
if ( !selector ) {
    return this;
}

this指空jQuery物件

處理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這門語言帶來的頭痛的問題之一。

相關文章