jQuery原始碼學習筆記一

kristy1993發表於2018-10-30
jQuery原始碼筆記

學習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*(<[wW]+>)[^>]*|#([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*(<[wW]+>)[^>]*|#([w-]*))$/,

解析： 判斷是否為HTML標籤或#id，例如<div>或#top
x|y 表示匹配x或者y
這裡可以分為兩個部分來看^(?:s(<[wW]+>)[^>]和 #([w-]))$
1、^(?:s(<[wW]+>)[^>]
?: (?:pattern)匹配pattern但不獲取匹配結果，也就是說這是一個非獲取匹配，不進行儲存供以後使用。例如“industr(?:y|ies)”就是一個比“industry|industries”更簡略的表示式。
s 匹配任何空白字元，包括空格、製表符、換頁符等等,零次或者多次。
[wW]+ 匹配於`[A-Za-z0-9_]`或[^A-Za-z0-9_]` 一次或多次
(<[wW]+>) 匹配的用<>包含的字串，如<li>

2、#([w-]*))$
匹配結尾帶上#號的任意字元，包括下劃線與-

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

1表示跟第一個（）中的內容匹配。<p></p>匹配，<li></p>不匹配

相關文章