jQuery源码 逐行解析之变量函数定义

变量定义

var  
 rootjQuery,
// rootjQuery = jQuery(document) 
readyList,
// 用于DOM加载,dom就是网页一个一个的标签在内存中表示成dom树
core_strundefined = typeof undefined,
// typeof undefined == 'undefined' 等于字符串形式的"undefined"
    /** 我们要明确,上面穿了undefined,
    这个undefined不是保留字也不是关键字,
    它只是window下的一个属性,
    所以在某些情况下这个undefined可以被更改 **/

location = window.location,//网址信息
document = window.document,//document对象
docElem = document.documentElement,//html标签
 // 利于压缩 
_jQuery = window.jQuery, //=>参考下面解释
_$ = window.$,
// 防冲突用,当不小心 给$赋值时,先用赋的值,如果没有赋值,这两个东西是undefined
class2type = {},
// 类型有关 $.type()
// class2type = {'[Object String]':'string','[Object Array]':'array'}
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, //去掉空格
// 存储了常用的数组方法和对象字面量方法,利于代码压缩
// Save a reference to some core methods

大多数是为了便于维护压缩用的,变量名有意义.

函数定义

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

入口函数 window.$=window.jQuery=jQuery

1. 我们要明确 这个就是我们用的$().css() 对象方法,这个返回了一个对象,那么fn是什么

参看这一句

//代码70-96 
jQuery.fn = jQuery.prototype = {
   ......
};

fn就是JQ的原型,但是在JQ原型下的方法怎么弄被JQ.fn.init函数使用呢?这个是返回了一个对象和JQ有什么关系呢?

//普通构造函数及使用方法
function arry(){ //构造函数
....
}
//构造函数原型下面加些其它方法
arry.prototype.init=function(){ //init调用就执行
....
}
//
arry.prototype.push=function(){
....
}
//调用
var arr1 = new arry(); //拿构造函数new 出一个实例化对象
arr1.init(); //对象方法调用
arr1.push();

我们来看看JQ里面怎么做的

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

1. 在上面JQ原型赋给了fn,fn=JQ原型,
2. JQ原型又给了 JQ原型下init函数下的原型, 而JQ原型本身就是一个对象,对象赋值对象就形成了引用

正则定义

// Used for matching numbers 匹配数字
core_pnum = /[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,

// 匹配单词,之间不存在空格的元素,用空格分开
core_rnotwhite = /\S+/g,
// |之前匹配标签 之后 匹配id
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

// Match a standalone tag
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/,

 /**
 webkitMarginLeft 但在ie有问题,
 在ie转换的话第一个字母不是小写而是大写MsMarginLeft
 **/
rmsPrefix = /^-ms-/,
// 转换大小写,-l ==> L , -2d ==> 2d
rdashAlpha = /-([\da-z])/gi,

防止xss注入:

我们在页面跳转时,有些网站往往用id作为跳转,在早前的浏览器我们可以这么写

这么写不是跳转页面,而是创建div,在早前是这样的,现在通过 rquickExpr 匹配 它只识别真正的id 而不是 带尖括号的标签

---

函数定义2

// 转驼峰的回掉函数,就是驼峰写法
fcamelCase = function (all, letter) {
  return letter.toUpperCase();
},
// dom加载成功触发的
completed = function () {
  document.removeEventListener("DOMContentLoaded", completed, false);
  window.removeEventListener("load", completed, false);
  jQuery.ready();
};

未完待续....