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*(<[\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>不匹配

posted @ 2018-10-30 18:01 kristy1993 阅读(...) 评论(...) 编辑 收藏