FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

褰辯話發布于2019-08-02 11:03 / 853人閱讀

摘要：根據項目選型決定是否開啟。為了壓縮，可維護為了支持從而使用代替變量存儲防沖突會用到，形如版本號聲明最終調用的是這個原型實際上。功能檢測統一兼容性問題。

概覽

   (function (){
   (21  , 94) 定義了一些變量和函數 jQuery=function();  
   (96  , 293) 給jQuery對象添加一些方法和屬性;  
   (285 , 347) extend:jQuery擴展方法;  
   (349 , 817) jQuery.extend : 擴展一些工具方法;  
   (877 , 2856 ) Sizzle : 復雜選擇器的實現;  
   (2880, 3042 ) Callbacks : 回調對象：函數的統一管理  
   (3043, 3183 ) Deferred : 延遲對象：對異步的統一管理  
   (3184, 3295) support : 瀏覽器功能檢測，確定瀏覽器對某些功能是否支持  
   (3380, 3652) data() : 數據緩存功能  
   (3653, 3797) queue()/dequeue() : 隊列管理  
   (3803, 4299) attr() prop() val() addClass()等方法，對元素屬性的操作  
   (4300, 5138) on() trigger()等方法，事件相關的方法，事件管理  
   (5140，6057) DOM操作：添加 刪除 包裝 獲取 DOM篩選  
   (6058, 6620) css() ： 樣式操作  
   (6621, 7854) 提交的數據和Ajax()操作:ajax() load() getJson()  
   (7855, 8584) animite() : 運動的方法  
   (8585, 8792) offset() :位置與尺寸的方法  
   (8804, 8821) JQuery對模塊化的支持  
   (8826) window.jQuery = window.$ = jQuery;//對外提供的接口  
   })();

匿名函數 :14

(function (window,undefined){
})(window)

為什么傳入window

對壓縮和查找都有利

為什么傳入undefined

防止undefined在外部被修改

嚴格執行 :20

"use strict"
低版本不支持，.net跟蹤不支持。根據項目選型決定是否開啟。

rootjQuery ：23

rootjQuery=jQuery(document);//:866

為了壓縮，可維護

core_strundefined ：30

core_strundefined=typeof undefined

為了支持 IE9,從而使用type of xmlNode.method代替xmlNode.method !==undefined

變量存儲 :33

location = window.location //:33
document=window.document
docElem=document.documenttElement

core_concat = core_deletedIds.concat, //:52
core_push = core_deletedIds.push,
core_slice = core_deletedIds.slice,
core_indexOf = core_deletedIds.indexOf,
core_toString = class2type.toString,
core_hasOwn = class2type.hasOwnProperty,
core_trim = core_version.trim,

防沖突：38

_jQuery=window.jQuery
_$=window.$

class2type={} :44

$.tpye() 會用到，clas2type形如 {"[objectt String]"}

core_version="2.0.3" :49

版本號

jQuery聲明

最終$()調用的是這個

//:61
jQuery = function( selector, context ) {
    return new jQuery.fn.init( selector, context, rootjQuery );
},

jQuery 原型

//:96
jQuery.fn = jQuery.prototype = {
    jquery: core_version,
    constructor: jQuery,
    init: function( selector, context, rootjQuery ) {...}
}
//:283
jQuery.fn.init.prototype = jQuery.fn;

實際上jQuery.prototype.init.prototype = jQuery.prototype。之后的的代碼就可以寫成顆粒化的調用操作，形如jQuery().css()。

通用正則 數字

//:67
core_pnum = /[+-]?(?:d*.|)d+(?:[eE][+-]?d+|)/.source,

非空字符，比如單詞

core_rnotwhite = /S+/g,

html標簽

防止通過location.hash的XSS注入(#9521)

rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,

獨立空標簽

比如

rsingleTag = /^<(w+)s*/?>(?:|)$/,

IE駝峰轉換

-ms-aaa-bbb轉換成MsAaaBbb

rmsPrefix = /^-ms-/,

普通駝峰轉換

rdashAlpha = /-([da-z])/gi,

jQuery.prototype ：98 jquery：版本：100

jquery: core_version,

constructor:修正指向問題

constructor: jQuery,
不寫容易被修改，例如

//Aaa
Aaa.prototype.name="hello"
Aaa.prototype.age=30

//Object
AAA.prototype={
    name:"hello",
    age：30
}

init:初始化和參數管理：101

對傳入的參數分別處理

忽略的

$(""), $(null), $(undefined), $(false)

字符的

if 字符左側是`<`且右側是`>`且長度 大于3
    //$("") $("
1
2")
    match=[null,"",null]
else
    match=null //$(".box") $("div") $("#div1 div.box")
    match=["$#div1",null,"div1"]//$("#div1")
    match=["
hello","
",null] $("
hello")
if ( match && (match[1] || !context) ) {// :120
    //$("
") $("#div1")
    if(match[1]){
        //HANDLE: $(html) -> $(array)
        使用jQuery.parseHTML將html代碼轉數組
        使用jQuery.merge將json轉數組
        
        // HANDLE: $(html, props)
        if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) 
        
        
    }else{
        //HANDLE: $(#id) ：151
        elem = document.getElementById( match[2] );
        //黑莓4.6兼容代碼 ：155
    }
// HANDLE: $(expr, $(...))
}else if ( !context || context.jquery ) {

// HANDLE: $(expr, context) 例如 $(context).find(expr)
} else {

}
// HANDLE: $(DOMElement)
else if ( selector.nodeType ) {

// HANDLE: $(function)
else if ( jQuery.isFunction( selector ) ) {

jQuery.makeArray 將dom集合轉數組或對象

selector:存儲選擇字符串 length：this對象的長度 toArray():轉數組 :202

return core_slice.call( this );
$("div"):{0:div,1:div,length:2} =>[div,div]
實際是調用slice

get():轉原生集合 :208

根據num返回全部或其中某個元素

get: function( num ) {
    return num == null ?
        this.toArray() :
        ( num < 0 ? this[ this.length + num ] : this[ num ] );
},

pushStack():jQ對象入棧 :220

一個棧里放1個jQ對象，1個jQ對象包含1個或多個dom

each():遍歷集合 :236

工具方法jQuery.each

ready():DOM加載的接口 :240

工具方法jQuery.reday.promise.done(fn)

slice():集合的截取 :247

棧操作 this.pushStack( core_slice.apply( this, arguments ) );

first():集合的第一項

this.eq( 0 )

last():集合的最后一項

this.eq( -1 )

eq():集合的指定項 map():返回新集合

return this.pushStack( jQuery.map(this, function( elem, i ) {
    return callback.call( elem, i, elem );
}));

end():返回集合前一個狀態

return this.prevObject || this.constructor(null);

push(): 內部使用

core_push

sort(): 內部使用

[].sort,

splice(): 內部使用

splice: [].splice

jQuery.extend 拷貝方法 :285

定義一些變量
if(){}    看是不是深拷貝情況
if(){}    看參數正確不
if(){}    看是不是插件情況
for(){    可能有多個對象情況
    if(){}        防止循環引用
    if(){}        深拷貝
    else if(){}     淺拷貝
}

防止循環引用

if ( target === copy ) {
    continue;
}

深拷貝

if ( copyIsArray ) {
    copyIsArray = false;
    clone = src && jQuery.isArray(src) ? src : [];

} else {
    clone = src && jQuery.isPlainObject(src) ? src : {};
}

// Never move original objects, clone them
target[ name ] = jQuery.extend( deep, clone, copy );

淺拷貝

target[ name ] = copy;

工具方法

jQuery.extend({
    expando:生成唯一jQ字符串(內部)
    noConflict():防止沖突
    isReady: dom是否加載完(內部)
    readyWait:等待多少文件的計數器(內部)
    holdReady(): 推遲dom觸發
    ready():準備dom觸發
    isFunction():是否為函數
    isArray():是否為數組
    isWindow():是否為window
    isNumberic():是否為數字
    type():判斷數據類型
    isPlainObjeect():是否為對象自變量
    isEmptyObject():是否為空的對象
    error():拋出異常
    parseHTML():解析節點
    parseJSON():解析JSON
    parseXML():解析XML
    noop():空函數
    globalEval():全局解析js
})

expando 唯一映射 :351

生成唯一jQuery字符串,做映射關系用

expando: "jQuery" + ( core_version + Math.random() ).replace( /D/g, "" ),

noConflict 防止沖突 :353

if ( window.$ === jQuery ) {
    window.$ = _$;
}
if ( deep && window.jQuery === jQuery ) {
    window.jQuery = _jQuery;
}
return jQuery;

dom加載相關 jQuery.ready.promise

if ( document.readyState === "complete" ) {
    // 防止Ie的提前執行
    setTimeout( jQuery.ready );
} else {
    // 若dom加載了則執行，否則監聽完成后執行
    document.addEventListener( "DOMContentLoaded", completed, false );
    window.addEventListener( "load", completed, false );
}

readyList holdReady(hold) :373

為true時執行ready，否則readyWait計數

if ( hold ) {
    jQuery.readyWait++;
} else {
    jQuery.ready( true );
}

ready(wait) :382

//如果有wait，或者ready，中止
if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) {
    return;
}
jQuery.isReady = true;
// 如果被觸發，那么遞減，如果需要則等待
if ( wait !== true && --jQuery.readyWait > 0 ) {
    return;
}
//如果有函數綁定，則執行。
readyList.resolveWith( document, [ jQuery ] );
// 觸發任何綁定事件
if ( jQuery.fn.trigger ) {
    jQuery( document ).trigger("ready").off("ready");
}

type(obj) :423

if ( obj == null ) {
    return String( obj );
}
// 兼容: Safari <= 5.1 
return typeof obj === "object" || typeof obj === "function" ?
    class2type[ core_toString.call(obj) ] || "object" :
    typeof obj;

isWindow(obj) :415

不為空且window屬性相同(undefined 沒有屬性)

return obj != null && obj === obj.window;

isNumeric(obj) :417

typeof NaN 或 finite ==="number"

return !isNaN( parseFloat(obj) ) && isFinite( obj );

parseHTML(data, context, keepScripts) :475

//校驗輸入
parsed=正則匹配data
//單標簽
return context.createElement( parsed[1] )
//多標簽
//判斷是否保留script
parsed = jQuery.buildFragment( [ data ], context, scripts )
return jQuery.merge( [], parsed.childNodes );

globalEval(code) :528

直接調用eval無法全局訪問，必須先賦值

var indirect = eval;
if "use strict"
    createElement
    document.head.appendChild( script ).parentNode.removeChild( script )
else
    indirect(code)

camelCase :552

修正IE,駝峰轉換

return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase )

nodeName( elem, name ) :556

全轉小寫判斷是否相同

return elem.nodeName && elem.nodeName.toLowerCase() === name.toLowerCase();

each( obj, callback, args ) :561

i=0
length=obj.length //若json則不存在
isArray=isArraylike(obj)

if isArray
    for(;;)
        callback.call
else 
    for in
        callback.call

makeArray :615

類數組轉數組

if isArraylike( Object(arr) 
    jQuery.merge
else
    core_push

inArray( elem, arr, i ) :632

indexOf

return arr == null ? -1 : core_indexOf.call( arr, elem, i );

merge( first, second ) :636

獲取2個變量的length

if 非json

for
    first[ i++ ] = second[ j ]

else

while
    first[ i++ ] = second[ j++ ]

grep( elems, callback, inv ) :656

過濾新數組

for
    retVal = !!callback( elems[ i ], i )
    if inv !== retVal
        ret.push( elems[ i ] )

map( elems, callback, arg ) :676

//分別處理arr 和json
for
    value = callback( elems[ i ], i, arg );
    if ( value != null ) {
        ret[ ret.length ] = value;
    }
return core_concat.apply( [], ret );

proxy( fn, context ) :713

context 若是string 
    content=fn(content)
return function(){
    return fn.apply( context || this, args.concat( core_slice.call( arguments ) ) )
}
proxy.guid = fn.guid = fn.guid || jQuery.guid++

access( elems, fn, key, value, chainable, emptyGet, raw ) :742

elems $("#div1")
fn 回調函數
key,value {background:"red"}

if  type(key) ==="object"
    for
        access
else if value !== undefined
    //空
    //非函數
    //函數

swap( elem, options, callback, args ) :798

設置display可見
設置visibility:hidden
獲取樣式
屬性再轉回去

isArraylike(obj) :848

判斷不是window

nodeType==1&&length #是節點 返回true
return type === "array" 
        ||type !== "function" 
            &&( length === 0 
                ||typeof length === "number"
                && length > 0 
                && ( length - 1 ) in obj )

createOptions(options)

將"once memory"=>{once:true,memory:true}
each

obj[flag]=true

jQuery.Callbacks(options) :2880

once// fire for list
memory//add()時直接執行
unique//重復函數，add()時判斷去重
stopOnFalse//fire for list

add(arg)

    分別判斷arg=aaa
            arg=aaa,bbb
            arg=[aaa,bbb]
    if menory==true
        fire

remove(arg) :2965

分隔數組

has(fn) :2987

jQuery.InArray

fireWith(context,args) :3018

    if list && ( !fired || stack )
        if firing
            stack.push(args)
        else
            fire(args)

Deferred(func) :3045

異步操作,延遲對象，基于$.Callbacks()
$.ajax(url).done(=>resolve).fail(=>reject)

"resolve", "done", jQuery.Callbacks("once memory"), "resolved"

成功
resolve=>fire
done=>add

"reject", "fail", jQuery.Callbacks("once memory"), "rejected"

失敗
reject=>fire
fail=>add

"notify", "progress", jQuery.Callbacks("memory")

notify=>fire
progress =>add

when() 批量延遲：3133

內部有個計數器，當$.when(a(),b(),c()) 中的arguments.length隨著done()后減少到0,實際執行$.Deferred->resolve()
參數必須返回deferred延遲對象，不然則跳過該項。

support 功能檢測:3184

統一兼容性問題。

checkOn復選框value值

老版本chrome是‘’，新的是‘on’

optSelected下拉菜單子項第一項選中

ie不會選中

noCloneChecked 克隆復選框的選中狀態

ie9,10沒有選中

focusinBubbles 選中的冒泡機制 data 數據緩存 :3308

key 自定義屬性，
set，get，access，remove，hasData，discard

GPU云服務器云服務器完整網站源碼商城完整源碼小程序完整源碼 webrtc完整源碼下載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52739.html

FE.SRC-逐行分析jQuery2.0.3源碼-完整筆記

摘要：根據項目選型決定是否開啟。為了壓縮，可維護為了支持從而使用代替變量存儲防沖突會用到，形如版本號聲明最終調用的是這個原型實際上。功能檢測統一兼容性問題。概覽 (function (){ (21 , 94) 定義了一些變量和函數 jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...

Lin_R 2019-08-23 10:29 評論0 收藏0
FE.SRC-React實戰與原理筆記

摘要：異步實戰狀態管理與組件通信組件通信其他狀態管理當需要改變應用的狀態或有需要更新時，你需要觸發一個把和載荷封裝成一個。的行為是同步的。所有的狀態變化必須通過通道。前端路由實現與源碼分析設計思想應用是一個狀態機，視圖與狀態是一一對應的。 React實戰與原理筆記概念與工具集 jsx語法糖;cli;state管理;jest單元測試; webpack-bundle-analyzer Sto...

PumpkinDylan 2019-08-26 14:04 評論0 收藏0
JQuery源碼 1 / 整體結構

摘要：本文分析的版本內部實現原理，版本已經去除了大量的對于舊版本瀏覽器的兼容性的處理，但是還是有部分源碼是對不常見的或者老版本的瀏覽器進行處理，在看到這部分的時候如果感興趣可以看一下，也可以直接跳過，個人一直認為學習舊版本瀏覽器的兼容是最沒有收益本文分析的JQuery2.0.3版本內部實現原理，2.0.3版本已經去除了大量的對于舊版本瀏覽器的兼容性的處理，但是還是有部分源碼是對不常見的或者...

warkiz 2019-08-26 12:00 評論0 收藏0
FE.SRC-webpack/tapable-0.2 源碼分析

摘要：所有注冊的處理方法并行執行，相互獨立互不干擾。倘若某一個處理函數報錯，則執行傳入的，后續的處理函數將不被執行，否則最后一個處理函數調用。順序由注冊插件順序決定，而不是由函數的執行時間。如果為此名稱注冊了插件，則返回。 Tapable https://github.com/webpack/ta...https://segmentfault.com/a/11... var Tapable ...

luckyyulin 2019-08-26 12:24 評論0 收藏0
系列文章目錄

摘要：為了避免一篇文章的篇幅過長，于是一些比較大的主題就都分成幾篇來講了，這篇文章是筆者所有文章的目錄，將會持續更新，以給大家一個查看系列文章的入口。前言大家好，筆者是今年才開始寫博客的，寫作的初衷主要是想記錄和分享自己的學習經歷。因為寫作的時候發現，為了弄懂一個知識，不得不先去了解另外一些知識，這樣以來，為了說明一個問題，就要把一系列知識都了解一遍，寫出來的文章就特別長。為了避免一篇...

lijy91 2019-06-28 16:36 評論0 收藏0