學習jQuery源碼,我主要是通過妙味視頻上學習的。這裡將所有的源碼分析,還有一些自己弄懂過程中的方法及示例整理出來,供大家參考。 我用的jquery v2.0.3版本。 正則表達式的分析: 解析: 判斷是否為HTML標簽或 id,例如<div>或 top x|y 表示匹配x或者y 這裡 ...
學習jQuery源碼,我主要是通過妙味視頻上學習的。這裡將所有的源碼分析,還有一些自己弄懂過程中的方法及示例整理出來,供大家參考。
我用的jquery v2.0.3版本。
var
rootjQuery,
readyList,
core_strundefined = typeof undefined,
location = window.location,
document = window.document,
docElem = document.documentElement,
_jQuery = window.jQuery,
_$ = window.$,
class2type = {},
core_deletedIds = [],
core_version = "2.0.3",
core_concat = core_deletedIds.concat,
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,
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},
core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,
// 匹配非空字元
core_rnotwhite = /\S+/g,
//匹配HTML標簽或#id,例如<div>或#top
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
// 匹配<p></p>類似的空標簽
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,
// 匹配-ms-
rmsPrefix = /^-ms-/,
// 匹配帶-的小寫數字
rdashAlpha = /-([\da-z])/gi,
// 將字元串轉換成大寫
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
// The ready event handler and self cleanup method
completed = function() {
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false );
jQuery.ready();
};
正則表達式的分析:
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
解析: 判斷是否為HTML標簽或#id,例如<div>或#top
x|y 表示匹配x或者y
這裡可以分為兩個部分來看^(?:\s(<[\w\W]+>)[^>]和 #([\w-]))$
1、^(?:\s(<[\w\W]+>)[^>]
?: (?:pattern)匹配pattern但不獲取匹配結果,也就是說這是一個非獲取匹配,不進行存儲供以後使用。例如“industr(?:y|ies)”就是一個比“industry|industries”更簡略的表達式。
\s 匹配任何空白字元,包括空格、製表符、換頁符等等,零次或者多次。
[\w\W]+ 匹配於'[A-Za-z0-9_]'或[^A-Za-z0-9_]' 一次或多次
(<[\w\W]+>) 匹配的用<>包含的字元串,如<li>
2、#([\w-]*))$
匹配結尾帶上#號的任意字元,包括下劃線與-
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/
\1表示跟第一個()中的內容匹配。<p></p>匹配,<li></p>不匹配