笔记(二)也分为三部分:

一、

介绍:

注释说明:v2.0.3版本、Sizzle选择器、MIT软件许可
注释中的#的信息索引、查询地址(英文版)
匿名函数自执行:window参数及undefined参数意义
'use strict' 严格模式:代码规范及其不推荐严格模式理由
rootjQuery根节点:document 获取及其声明意义
readyList DOM加载相关……
typeof undefined 字符串形式'undefined'的存放及其意义。

先看开头的注释:

/*!
* jQuery JavaScript Library v2.0.3
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
*
* Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2013-07-03T13:30Z
*/

这注释有什么意思呢:版本-官网-Sizzle-Sizzle网站-jQuery版权-许可证-最新更新时间

jQuery的注释非常多,而且经常可以看到这些东西:(#13335),即是括号里面的#加数字。就是通过它可以找打更详细的说明。

可以在官网找到BUG TRACKER,进去以后就可以直接用索引搜索了。不过新版的jQuery已经没有用这个了。

匿名函数自执行:

(function( window, undefined ) {

})(window)

就是使得变量和函数不与外部变量和函数相冲突。

为什么还要传window参数呢,直接在里面使用window不就行了吗?

window在JavaScript中属于最顶端,根据作用域链机制,查找会比较慢。而将window作为参数,使得 window 由全局变量变为局部变量,当在 jQuery 代码块中访问window 时,不需要将作用域链回退到顶层作用域,这样可以更快的访问 window;这还不是关键所在,更重要的是,将 window 作为参数传入,可以在压缩代码时进行优化。比如不传参的话,这时候window在压缩版本中是压缩不了的,压缩了就不知道是什么意思了。

压缩版本如下:

(function(e,undefined){

})

undefined:undefined不是保留字,也不是关键字,只是window下的一个属性,在有些浏览器中,它是可以被修改的。所以就通过传参的形式,以免被修改。

继续看注释:

// Can't do this because several apps including ASP.NET trace
// the stack via arguments.caller.callee and Firefox dies if
// you try to trace through "use strict" call chains. (#13335)
// Support: Firefox 18+
//"use strict";

出现严格模式的注释,但是建议我们不要用。因为它还是存在很多问题的。不过最新版本已经在使用了。

还是平时写代码规范点就好。

变量:rootjQuery:jQuery的根目录,在[866行]有这么一句话:rootjQuery = jQuery(document);

    // A central reference to the root jQuery(document)
rootjQuery,

使用变量还是考虑到压缩优化的时候,而且可一提高维护性,因为提供变量更接近语义性,更能知道它的作用。

变量readyList:与DOM加载有关,在拓展工具方法和复杂选择器之间。

    // The deferred used on DOM ready
readyList,

core_strundefined = typeof undefined:保存一个字符串形式的undefined,为什么要这样使用?如下:

window.a == undefined;

typeof window.a == "undefined";

这两种方法都可以判断是否为undefined,不过有些情况下window.a == undefined这种方式判断不了,比如IE9。另一种方式兼容性比较高

二、

介绍:

常见对象存储:location、document、docElem
变量名防止冲突:$()、jQuery() class2type
判断数据类型、预留检测方式
core_deletedIds 旧版本的ID删除、新版本只做为数组方法引用
core_version = '2.0.3' 版本号存储
一些新方法的存储……如:trim()
jQuery函数:$()、jQuery() 返回对象
原生JS面向对象的写法示例
jQuery面向对象方式:省去初始化元素和创建对象、直接使用内置方法
对象引用实现共享方法:jQuery.fn.init.prototype = jQuery.fn;

对象存储:

    // Use the correct document accordingly with window argument (sandbox)
location = window.location,
document = window.document,
docElem = document.documentElement,

总之:存储变量对压缩很有意义

变量名防止冲突:

    // Map over jQuery in case of overwrite
_jQuery = window.jQuery, // Map over the $ in case of overwrite
_$ = window.$,

可以这两个变量防止冲突:

比如在其他库也有可能会用到$这个符号,比如我们在使用jQuery的时候还是用了var $ = 10;这个语句,那么这是jQuery库里面就会吧_$=10;如果没有那个语句,那么_$在jQuery中就等于undefined。

判断数据类型、预留检测方式

    // [[Class]] -> type pairs
class2type = {},

定义一个对象。在这个方法$.type()会用到的

最终会变成这个形式:class2type = {'[Object String]':'string','[Object Array]':'array'}。做类型判断,两个类型,所以是2。

core_deletedIds 旧版本的ID删除、新版本只做为数组方法引用 :

    // List of deleted data cache ids, so we can reuse them
core_deletedIds = [],

跟缓存数据有关。这个在2.0中已经没什么用处了

一些新方法的存储:

    // Save a reference to some core methods
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函数:$()、jQuery() 返回对象 :

    jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
},

提供了一个接口,这样我们就可以用啦,也就是$(),jquery()。返回的是一个对象。

构造函数:jQuery.fn.init( selector, context, rootjQuery )。

在源码中会有这句:jQuery.fn = jQuery.prototype,就是把jQuery的原型赋给fn。这样构造函数就是原型下的init().

//平时在写面向对象的时候如下:
function A(){};
A.prototype.init = function(){}; //初始化方法
A.prototype.css = function(){}; var a1 = new A();
a1.init(); //先初始化
a1.css(); //对jQuery的
function jQuery(){};
jQuery.prototype.init = function(){};
jQuery.prototype.css = function(){}; //但jQuery并不是这样设计的
function jQuery = function(){
return new jQuery.prototype.init();
}
jQuery.prototype.init = function(){};
jQuery.prototype.css = function(){}; jQuery().css(); //当然这种写法是有问题的,因为css()这个方法是在jQuery的,不是在构造函数的 //[283行]:jQuery.fn.init.prototype = jQuery.fn; //结果是这样的

function jQuery = function(){
  return new jQuery.prototype.init();
  }
  jQuery.prototype.init = function(){};
  jQuery.prototype.css = function(){};

jQuery.prototype.init.prototype = jQuery.prototype;  //添加一个对象的引用

jQuery().css();

这样就解决了平时繁琐的工作了。

三、

介绍:

core_pnum:正则数字匹配
core_rnotwhite:正则单词匹配
rquickExpr:正则标签匹配(防止XSS木马注入)
rsingleTag:正则匹配空标签
rmsPrefix:正则匹配IE下转换ms
rdashAlpha:正则匹配转换大写、数字
fcamelCase:转驼峰回调函数
completed:DOM触发成功时回调函数

正则数字匹配 :

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

匹配数字。到css方法设置样式的时候会用到

正则单词匹配:

    // Used for splitting on whitespace
core_rnotwhite = /\S+/g,

正则标签匹配(防止XSS木马注入):

    // A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

匹配标签,Prioritize #id over <tag> to avoid XSS via location.hash

比如:<p>aaaaa 或 #div

正则匹配空标签:

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

匹配一个独立的空标签,比如<p></p>,<div></div>

正则匹配IE下转换ms、正则匹配转换大写、数字:

    // Matches dashed string for camelizing
rmsPrefix = /^-ms-/, //如下
rdashAlpha = /-([\da-z])/gi, //找到横杆加字字母就转换成大写的字母
比如jQuery中有些样式会转化:比如
margin-left:marginLeft
-webkit-margin-left:webkitMarginLeft
但是IE里他会首字母就大写的:
-ms-margin-left:MsMarginLeft

当然,margin-left并不需要家前缀,只是演示一下而已。

转驼峰回调函数:

    // Used by jQuery.camelCase as callback to replace()
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},

DOM触发成功时回调函数:

    // The ready event handler and self cleanup method
completed = function() {
document.removeEventListener( "DOMContentLoaded", completed, false );
window.removeEventListener( "load", completed, false );
jQuery.ready();
};

jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}的更多相关文章

  1. jQuery源码笔记——二

    jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, con ...

  2. jquery源码分析(二)——架构设计

    要学习一个库首先的理清它整体架构: 1.jQuery源码大致架构如下:(基于 jQuery 1.11 版本,共计8829行源码)(21,94)                定义了一些变量和函数jQu ...

  3. jQuery源码笔记(一):jQuery的整体结构

    jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...

  4. jQuery 源码解析二:jQuery.fn.extend=jQuery.extend 方法探究

    终于动笔开始 jQuery 源码解析第二篇,写文章还真是有难度,要把自已懂的表述清楚,要让别人听懂真的不是一见易事. 在 jQuery 源码解析一:jQuery 类库整体架构设计解析 一文,大致描述了 ...

  5. 车大棒浅谈jQuery源码(二)

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

  6. jQuery 源码解析(二十二) DOM操作模块 复制元素 详解

    本节说一下DOM操作模块里的复制元素子模块,该模块可以复制一个DOM节点,并且可选择的设置是否复制其数据缓存对象(包含事件信息)和是否深度复制(子孙节点等),API如下: $.clone(elem, ...

  7. Tomcat8源码笔记(二)Bootstrap启动

    TOMCAT源码调试入口是Bootstrap类的main方法,我的启动参数VM: -Dcatalina.home=E:/Tomcat_Source_Code/apache-tomcat-8.0.53- ...

  8. jQuery 源码解析(二十七) 样式操作模块 坐标详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下坐标这一块. 对于坐标来说,jQuery提供了一个offset方法用于获取第一个匹配元素的坐标或者设置所有匹配元素的坐标,还有offse ...

  9. jQuery 源码解析(二十六) 样式操作模块 样式详解

    样式操作模块可用于管理DOM元素的样式.坐标和尺寸,本节讲解一下样式相关,样式操作通过jQuery实例的css方法来实现,该方法有很多的执行方法,如下: css(obj)            ;参数 ...

随机推荐

  1. [No00007D]2016-面经[上]

    面试常见问题: 题一:"请你自我介绍一下" 思路:1.这是面试的必考题目.2.介绍内容要与个人简历相一致.3.表述方式上尽量口语化.4.要切中要害,不谈无关.无用的内容.5.条理要 ...

  2. highcharts基本配置和使用highcharts做手机端图标

    使用highcharts三个理由:1>手机适配2>大数据的支持3>svg的优势缺点:不开源.学习资料少 官方有基本的常规用法,一般都是基于jquery写的例子,也可以自己封装函数,用 ...

  3. 初学C#和MVC的一些心得,弯路,总结,还有教训(4)--Cache 关于创建多个缓存实例

    asp.net中的数据缓存可以用 HttpRuntime.Cache ,这个是大家都知道的,但如果缓存的数据比较多,又比较杂乱,想要把缓存分开管理(也就是创建多个缓存实例)应该怎么做呢... 于是常规 ...

  4. 跨域的另一种解决方案——CORS(Cross-Origin Resource Sharing)跨域资源共享

    在我们日常的项目开发时使用AJAX,传统的Ajax请求只能获取在同一个域名下面的资源,但是HTML5打破了这个限制,允许Ajax发起跨域的请求.浏览器是可以发起跨域请求的,比如你可以外链一个外域的图片 ...

  5. Curl扩展开启失败解决方案

    1.php.ini 开启curl扩展 2.设置有时候开启之后,curl还是不能将php目录下的libssh2.dll复制到apache/bin下.(基本上可以成功) 3. 如果没有开启成功,将php安 ...

  6. lvs/dr配置

    lvs/dr Director server : DIP:192.168.1.100/24  eth0 VIP:192.168.1.101/24  eth0:0 Real server: Real1: ...

  7. ajax之 get post请求

    get请求 function get(){ $.get( "./Aservlet?id=5", function(data, textStatus, jqXHR){ $(" ...

  8. js cookie 数组 存读

    自己研究了一下. "Cookie里面只能放String 类型" 所以只能将arr的数据按照自己的约定转成string格式存进cookie. 这里提示一下cookie是存在本地浏览器 ...

  9. 3 HTML&JS等前端知识系列之javascript的基础

    preface 作为一名运维开发,必须懂得前端知识,比如javascript,dom等等,下面就聊聊javascript. include 数据格式 条件判断,循环流程等. 函数 面向对象 what ...

  10. git push如何至两个git仓库

    分别有仓库 A(github),B(JAE 的 git),本机为C. 假设以 a 仓库作为最终的使用仓库, b为发布仓库.分支都为 dev 第一步,增加远程仓库 git remote add orig ...