摘要:根據(jù)項(xiàng)目選型決定是否開啟。為了壓縮,可維護(hù)為了支持從而使用代替變量存儲(chǔ)防沖突會(huì)用到,形如版本號聲明最終調(diào)用的是這個(gè)原型實(shí)際上。功能檢測統(tǒng)一兼容性問題。
概覽
(function (){ (21 , 94) 定義了一些變量和函數(shù) jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) extend:jQuery擴(kuò)展方法; (349 , 817) jQuery.extend : 擴(kuò)展一些工具方法; (877 , 2856 ) Sizzle : 復(fù)雜選擇器的實(shí)現(xiàn); (2880, 3042 ) Callbacks : 回調(diào)對象:函數(shù)的統(tǒng)一管理 (3043, 3183 ) Deferred : 延遲對象:對異步的統(tǒng)一管理 (3184, 3295) support : 瀏覽器功能檢測,確定瀏覽器對某些功能是否支持 (3380, 3652) data() : 數(shù)據(jù)緩存功能 (3653, 3797) queue()/dequeue() : 隊(duì)列管理 (3803, 4299) attr() prop() val() addClass()等方法,對元素屬性的操作 (4300, 5138) on() trigger()等方法,事件相關(guān)的方法,事件管理 (5140,6057) DOM操作:添加 刪除 包裝 獲取 DOM篩選 (6058, 6620) css() : 樣式操作 (6621, 7854) 提交的數(shù)據(jù)和Ajax()操作:ajax() load() getJson() (7855, 8584) animite() : 運(yùn)動(dòng)的方法 (8585, 8792) offset() :位置與尺寸的方法 (8804, 8821) JQuery對模塊化的支持 (8826) window.jQuery = window.$ = jQuery;//對外提供的接口 })();匿名函數(shù) :14
(function (window,undefined){ })(window)為什么傳入window
對壓縮和查找都有利
為什么傳入undefined防止undefined在外部被修改
嚴(yán)格執(zhí)行 :20"use strict"
低版本不支持,.net跟蹤不支持。根據(jù)項(xiàng)目選型決定是否開啟。
rootjQuery=jQuery(document);//:866
為了壓縮,可維護(hù)
core_strundefined :30core_strundefined=typeof undefined
為了支持 IE9,從而使用type of xmlNode.method代替xmlNode.method !==undefined
變量存儲(chǔ) :33location = 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() 會(huì)用到,clas2type形如 {"[objectt String]"}
core_version="2.0.3" :49版本號
jQuery聲明最終$()調(diào)用的是這個(gè)
//: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;
實(shí)際上jQuery.prototype.init.prototype = jQuery.prototype。之后的的代碼就可以寫成顆?;恼{(diào)用操作,形如jQuery().css()。
通用正則 數(shù)字//:67 core_pnum = /[+-]?(?:d*.|)d+(?:[eE][+-]?d+|)/.source,非空字符,比如單詞
core_rnotwhite = /S+/g,html標(biāo)簽
防止通過location.hash的XSS注入(#9521)
rquickExpr = /^(?:s*(<[wW]+>)[^>]*|#([w-]*))$/,獨(dú)立空標(biāo)簽
比如
rsingleTag = /^<(w+)s*/?>(?:1>|)$/,IE駝峰轉(zhuǎn)換
-ms-aaa-bbb轉(zhuǎn)換成MsAaaBbb
rmsPrefix = /^-ms-/,普通駝峰轉(zhuǎn)換
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:初始化和參數(shù)管理 :101
對傳入的參數(shù)分別處理
忽略的$(""), $(null), $(undefined), $(false)字符的
if 字符左側(cè)是`<`且右側(cè)是`>`且長度 大于3 //$("
return core_slice.call( this );
$("div"):{0:div,1:div,length:2} =>[div,div]
實(shí)際是調(diào)用slice
根據(jù)num返回全部或其中某個(gè)元素
get: function( num ) { return num == null ? this.toArray() : ( num < 0 ? this[ this.length + num ] : this[ num ] ); },pushStack():jQ對象入棧 :220
一個(gè)棧里放1個(gè)jQ對象,1個(gè)jQ對象包含1個(gè)或多個(gè)dom
each():遍歷集合 :236工具方法jQuery.each
ready():DOM加載的接口 :240工具方法jQuery.reday.promise.done(fn)
slice():集合的截取 :247棧操作 this.pushStack( core_slice.apply( this, arguments ) );
first():集合的第一項(xiàng)this.eq( 0 )
last():集合的最后一項(xiàng)this.eq( -1 )
eq():集合的指定項(xiàng) map():返回新集合return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); }));end():返回集合前一個(gè)狀態(tài)
return this.prevObject || this.constructor(null);
push(): 內(nèi)部使用core_push
sort(): 內(nèi)部使用[].sort,
splice(): 內(nèi)部使用splice: [].splice
jQuery.extend 拷貝方法 :285定義一些變量 if(){} 看是不是深拷貝情況 if(){} 看參數(shù)正確不 if(){} 看是不是插件情況 for(){ 可能有多個(gè)對象情況 if(){} 防止循環(huán)引用 if(){} 深拷貝 else if(){} 淺拷貝 }
防止循環(huán)引用
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字符串(內(nèi)部) noConflict():防止沖突 isReady: dom是否加載完(內(nèi)部) readyWait:等待多少文件的計(jì)數(shù)器(內(nèi)部) holdReady(): 推遲dom觸發(fā) ready():準(zhǔn)備dom觸發(fā) isFunction():是否為函數(shù) isArray():是否為數(shù)組 isWindow():是否為window isNumberic():是否為數(shù)字 type():判斷數(shù)據(jù)類型 isPlainObjeect():是否為對象自變量 isEmptyObject():是否為空的對象 error():拋出異常 parseHTML():解析節(jié)點(diǎn) parseJSON():解析JSON parseXML():解析XML noop():空函數(shù) globalEval():全局解析js })expando 唯一映射 :351
生成唯一jQuery字符串,做映射關(guān)系用
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加載相關(guān) jQuery.ready.promise
if ( document.readyState === "complete" ) { // 防止Ie的提前執(zhí)行 setTimeout( jQuery.ready ); } else { // 若dom加載了則執(zhí)行,否則監(jiān)聽完成后執(zhí)行 document.addEventListener( "DOMContentLoaded", completed, false ); window.addEventListener( "load", completed, false ); }readyList holdReady(hold) :373
為true時(shí)執(zhí)行ready,否則readyWait計(jì)數(shù)
if ( hold ) { jQuery.readyWait++; } else { jQuery.ready( true ); }ready(wait) :382
//如果有wait,或者ready,中止 if ( wait === true ? --jQuery.readyWait : jQuery.isReady ) { return; } jQuery.isReady = true; // 如果被觸發(fā),那么遞減,如果需要?jiǎng)t等待 if ( wait !== true && --jQuery.readyWait > 0 ) { return; } //如果有函數(shù)綁定,則執(zhí)行。 readyList.resolveWith( document, [ jQuery ] ); // 觸發(fā)任何綁定事件 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
//校驗(yàn)輸入 parsed=正則匹配data //單標(biāo)簽 return context.createElement( parsed[1] ) //多標(biāo)簽 //判斷是否保留script parsed = jQuery.buildFragment( [ data ], context, scripts ) return jQuery.merge( [], parsed.childNodes );globalEval(code) :528
直接調(diào)用eval無法全局訪問,必須先賦值
var indirect = eval; if "use strict" createElement document.head.appendChild( script ).parentNode.removeChild( script ) else indirect(code)camelCase :552
修正IE,駝峰轉(zhuǎn)換
return string.replace( rmsPrefix, "ms-" ).replace( rdashAlpha, fcamelCase )nodeName( elem, name ) :556
全轉(zhuǎn)小寫判斷是否相同
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.callmakeArray :615
類數(shù)組轉(zhuǎn)數(shù)組
if isArraylike( Object(arr) jQuery.merge else core_pushinArray( elem, arr, i ) :632
indexOf
return arr == null ? -1 : core_indexOf.call( arr, elem, i );merge( first, second ) :636
獲取2個(gè)變量的length
if 非json
for first[ i++ ] = second[ j ]
else
while first[ i++ ] = second[ j++ ]grep( elems, callback, inv ) :656
過濾新數(shù)組
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 回調(diào)函數(shù)
key,value {background:"red"}
if type(key) ==="object" for access else if value !== undefined //空 //非函數(shù) //函數(shù)swap( elem, options, callback, args ) :798
設(shè)置display可見
設(shè)置visibility:hidden
獲取樣式
屬性再轉(zhuǎn)回去
判斷不是window
nodeType==1&&length #是節(jié)點(diǎn) 返回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]=truejQuery.Callbacks(options) :2880
once// fire for list
memory//add()時(shí)直接執(zhí)行
unique//重復(fù)函數(shù),add()時(shí)判斷去重
stopOnFalse//fire for list
分別判斷arg=aaa arg=aaa,bbb arg=[aaa,bbb] if menory==true fireremove(arg) :2965
分隔數(shù)組
has(fn) :2987jQuery.InArray
fireWith(context,args) :3018if list && ( !fired || stack ) if firing stack.push(args) else fire(args)Deferred(func) :3045
異步操作,延遲對象,基于$.Callbacks()
$.ajax(url).done(=>resolve).fail(=>reject)
成功
resolve=>fire
done=>add
失敗
reject=>fire
fail=>add
notify=>fire
progress =>add
內(nèi)部有個(gè)計(jì)數(shù)器,當(dāng)$.when(a(),b(),c()) 中的arguments.length隨著done()后減少到0,實(shí)際執(zhí)行$.Deferred->resolve()
參數(shù)必須返回deferred延遲對象,不然則跳過該項(xiàng)。
統(tǒng)一兼容性問題。
checkOn復(fù)選框value值老版本chrome是‘’,新的是‘on’
optSelected下拉菜單子項(xiàng)第一項(xiàng)選中ie不會(huì)選中
noCloneChecked 克隆復(fù)選框的選中狀態(tài)ie9,10沒有選中
focusinBubbles 選中的冒泡機(jī)制 data 數(shù)據(jù)緩存 :3308key 自定義屬性,set,get,access,remove,hasData,discard文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/52739.html
摘要:根據(jù)項(xiàng)目選型決定是否開啟。為了壓縮,可維護(hù)為了支持從而使用代替變量存儲(chǔ)防沖突會(huì)用到,形如版本號聲明最終調(diào)用的是這個(gè)原型實(shí)際上。功能檢測統(tǒng)一兼容性問題。 概覽 (function (){ (21 , 94) 定義了一些變量和函數(shù) jQuery=function(); (96 , 293) 給jQuery對象添加一些方法和屬性; (285 , 347) ...
摘要:異步實(shí)戰(zhàn)狀態(tài)管理與組件通信組件通信其他狀態(tài)管理當(dāng)需要改變應(yīng)用的狀態(tài)或有需要更新時(shí),你需要觸發(fā)一個(gè)把和載荷封裝成一個(gè)。的行為是同步的。所有的狀態(tài)變化必須通過通道。前端路由實(shí)現(xiàn)與源碼分析設(shè)計(jì)思想應(yīng)用是一個(gè)狀態(tài)機(jī),視圖與狀態(tài)是一一對應(yīng)的。 React實(shí)戰(zhàn)與原理筆記 概念與工具集 jsx語法糖;cli;state管理;jest單元測試; webpack-bundle-analyzer Sto...
摘要:本文分析的版本內(nèi)部實(shí)現(xiàn)原理,版本已經(jīng)去除了大量的對于舊版本瀏覽器的兼容性的處理,但是還是有部分源碼是對不常見的或者老版本的瀏覽器進(jìn)行處理,在看到這部分的時(shí)候如果感興趣可以看一下,也可以直接跳過,個(gè)人一直認(rèn)為學(xué)習(xí)舊版本瀏覽器的兼容是最沒有收益 本文分析的JQuery2.0.3版本內(nèi)部實(shí)現(xiàn)原理,2.0.3版本已經(jīng)去除了大量的對于舊版本瀏覽器的兼容性的處理,但是還是有部分源碼是對不常見的或者...
摘要:所有注冊的處理方法并行執(zhí)行,相互獨(dú)立互不干擾。倘若某一個(gè)處理函數(shù)報(bào)錯(cuò),則執(zhí)行傳入的,后續(xù)的處理函數(shù)將不被執(zhí)行,否則最后一個(gè)處理函數(shù)調(diào)用。順序由注冊插件順序決定,而不是由函數(shù)的執(zhí)行時(shí)間。如果為此名稱注冊了插件,則返回。 Tapable https://github.com/webpack/ta...https://segmentfault.com/a/11... var Tapable ...
閱讀 3823·2021-11-24 09:39
閱讀 1827·2021-11-02 14:41
閱讀 829·2019-08-30 15:53
閱讀 3490·2019-08-29 12:43
閱讀 1204·2019-08-29 12:31
閱讀 3097·2019-08-26 13:50
閱讀 804·2019-08-26 13:45
閱讀 996·2019-08-26 10:56