jQuery源码笔记(一)：jQuery的整体结构
jQuery 是一个非常优秀的 JS 库，与 Prototype,YUI,Mootools 等众多的 Js 类库相比，它剑走偏锋，从 web 开发的实用角度出发，抛除了其它 Lib 中一些中看但不实用的东西，为开发者提供了优美短小而精悍的类库。其使用简单，文档丰富，而且性能高效，能极大地提高 web 系统的开发效率。因此可以说是 web 应用开发中最佳的 Js 辅助类库之一。大部分开发者正在抛弃 Prototype，而选择Jquery 做为他们进行 web 开发的 JS 库。
(function(){
})();
这样有什么好处呢？
就是在函数里面写的任何东西都是局部的，在外部都是无法用到里面的变量和方法的。这样就可以与其他代码防止冲突，互相不影响。
但是都把东西弄成局部的也不行，还得提供接口：有一种方法就是把要对外提供的接口给它挂载到window下面，这时候调用就可以直接用了：
(function(){
var a = ;
function $(){
alert(a);
};
window.$ = $;
})();
$();
给出源码的基本结构：
(function(){
[,]:变量和方法；jQuery = function(){};
[,]:给jQuery这个对象添加一些方法和属性；
[,]:extend JQ的继承等等
[,]:jQuery.extend({{}):拓展一些工具方法
[877,2856]:完成一个Sizzle的功能
[2880,3042]:jQuery当中的回调对象callbacks:通过回调函数去管理函数，即函数的统一管理
[]:window.jQuery = window.$ = jQuery;
})()
[21行,94行]：定义了一系列的变量和函数。
[61行]：jQuery = function(){}; 这个jQuery就是平时咱们用的$()或者jQuery()去找元素的一个对外的接口。但是它目前是一个局部函数，要怎么样才能在外面找到它呢？这是就要对外提供一个接口，就在[8826行],把函数挂载在了window下的jQuery或者$。
[96行]：jQuery.fn = jQuery.prototype = {}；因为原型prototype在JavaScript中是属于面向对象的东西，所以可以说jQuery就是一个基于面向对象的东西。为什么jQuery是一个基于面向对象的程序：可以使用类比来说一下，可以说这样写可以提高可读性吧。
比如我们平时在用jQuery的时候，写法是这样的：
$(".div").css();
$(".div").html();
就好比：
var arr = new Array();
arr.sort();
arr.splice();
这都是一种面向对象的写法
不过这里$(".div")是函数调用，只是它的执行结果是对象：[63行]如下：
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
}
//返回的是一个jQuery对象
[285,347]:extend这个是一个继承的方法。使用继承方法更加有利于代码的独立性、后期的维护还有拓展；
[349,817]:jQuery.extend({{}):拓展一些工具方法。拓展工具方法优势什么呢？如下：
在jQuery当中提供了两种代码操作方式
比如：
$().css();
$().html();$()是对象，所以两个方法属于实例的方法。可以看做是更高级的东西 $.trim();
$.proxy();$只是一个函数，函数下面拓展一些静态的方法。这个就叫拓展工具方法。与上面的区别就是即可以给jQuery用，也可以给原生的JS来用。可以看做是更底层的东西
二、
介绍：jQuery中近2000多行：Sizzle选择器 jQuery中的Sizzle：复杂选择器的实现 jQuery中的Callbacks：JQ中的回调对象（函数统一管理） jQuery中的Deferred：延迟对象(异步统一管理） jQuery中的support：浏览器功能检测。
[877,2856]:完成一个Sizzle的功能。
sizzle的作用就是：复杂选择器的实现。我们平时做一些比如这样类名的选择器都是$(".div")都是比较简单的，还有复杂的：$("ul li + p input.class")。他也可以是一个独立的东西，平时不使用jQuery的时候也可以用它，http://sizzlejs.com/
/*!
* Sizzle CSS Selector Engine v1.9.4-pre
* http://sizzlejs.com/
*
* Copyright 2013 jQuery Foundation, Inc. and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2013-06-03
*/
[2880,3042]:jQuery当中的回调对象callbacks:通过回调函数去管理函数，即函数的统一管理。
为什么要管理：因为函数又多又复杂，统一管理起来可以方便使用。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
function fn1(){alert("");}
function fn2(){alert("");} var cb = $.Callbacks(); cb.add(fn1);
cb.add(fn2); cb.fire(); //1,2.统一地放在一起
</script>
</head>
<body>
</body>
</html>
不止这些，还有执行一次啊、去重啊、删除啊等等。Callbacks可以加参数的。如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-2.0.3.js"></script>
<script type="text/javascript">
function fn1(){alert("");}
function fn2(){alert("");} var cb = $.Callbacks(); cb.add(fn1);
cb.add(fn2); cb.fire(); cb.remove(fn1); cb.fire();
</script>
</head>
<body>
</body>
</html>
对函数的管理非常有帮助。
[3043,3183]:实现的功能是：延迟对象：Deferred。作用就是对异步的统一管理。
因为JS中异步方式很多，这样做有利用管理。比如：
setTimeout(function(){
alert("");
},);
alert("");
先弹2，在弹1。但是正常的逻辑思维应该是先写先执行，后写后执行，这样容易看懂，后期维护也方便。如果没有延迟对象的管理，要实现这样的弹出顺序就得这样写了：
setTimeout(function(){
alert("");
alert("");
},);
这样就非常别扭了，影响开发。延迟对象就可以解决这样的问题：
var dfd = $.Deferred();
setTimeout(function(){
alert("");
dfd.resolve();
},);
dfd.done(function(){
alert("");
})
这样就会先出1再出2了。
利用回调的方式：先把dfd.done()里面的参数保存，但触发了dfd.resolve()后就会执行done()里面的参数。所以如果将dfd.resolve()这句去掉的话就不会弹出2了。
[3184,3295]:support:功能检测。
什么是功能检测呢：有时我们会判断浏览器的版本等信息来决定执行什么样的操作，但是现在的浏览器更新非常快，功能也层出不穷。所以如果只是单单判断浏览器的版本等信息对维护是非常不利的。但是我们如果根据功能来判断浏览器就比较靠谱了，因为浏览器升级过程中功能肯定会保留。比如：
[3198行]
// Support: Safari 5.1, iOS 5.1, Android 4.x, Android 2.3
// Check the default checkbox/radio value ("" on old WebKit; "on" elsewhere)
support.checkOn = input.value !== "";
当我们写input的类型为checkbox/radio的时候，浏览器会默认为“on”，但是老版本webkit默认为“”，所以要区分老版本webkit和其他浏览器就可以通过support.checkOn了。
三、
介绍：jQuery中的data：数据缓存（避免大数据量的元素挂载、预防内存泄露） jQuery中的queue、dequeue：队列管理（入队、出队管理） jQuery中的attr、prop、val、addClass等：元素属性操作 jQuery中的on、trigger等：事件操作的相关方法 jQuery中的DOM操作：添加、删除、获取、包装、筛选…… jQuery中的CSS方法：样式的操作 jQuery中的数据提交与ajax：跨域、请求script、ajax…… jQuery中的animate：运动方法的实现 jQuery中的offset：位置与尺寸的方法 jQuery中的模块化：jQuery中支持模块化的模式。
[3308,3652]:data()方法的功能：数据缓存。就是对数据进行的一些操作：获取、设置、删除。如下：（当然这种方式只是举例，实际并不这么用）
$(".div").data('name','hello'); //添加一个数据
$('.div').data('name'); //获取一个数据
[3653,3797]:queue():队列管理；dequeue():出队
jQuery中哪里会用到呢：比如运动的效果，如下：
$('.div').animation({left:});
$('.div').animation({top:});
$('.div').animation({width:});
先left、再top、最后再width，就是利用队列来保证顺序的。
[3803,4299]:attr(),prop(),val(),addClass()等等方法：对元素属性的操作。
[4300,5128]:on(),trigger()等方法：事件操作的相关方法。
[5240,6057]:DOM操作方法：添加，删除，获取，包装，DOM筛选。
[6058,6620]:css():样式的操作。
[6621,7854]:提交的数据和AJAX操作：ajax(),load(),getJson().
[7855,8584]:animate():运动方法。
[8585,8792]:offset():位置和尺寸的方法。
[8804,8821]:jQuery支持模块化的一个模式。
最终的结构如下：
(function(){
( , ) 定义了一些变量和函数 jQuery = function(){};
( , ) 给JQ对象，添加一些方法和属性
( , ) extend : JQ的继承方法
( , ) jQuery.extend() : 扩展一些工具方法
( , ) Sizzle : 复杂选择器的实现
( , ) Callbacks : 回调对象 : 对函数的统一管理
( , ) Deferred : 延迟对象 : 对异步的统一管理
( , ) support : 功能检测
( , ) data() : 数据缓存
( , ) queue() : 队列方法 : 执行顺序的管理
( , ) attr() prop() val() addClass()等 : 对元素属性的操作
( , ) on() trigger() : 事件操作的相关方法
( , ) DOM操作 : 添加 删除 获取 包装 DOM筛选
( , ) css() : 样式的操作
( , ) 提交的数据和ajax() : ajax() load() getJSON()
( , ) animate() : 运动的方法
( , ) offset() : 位置和尺寸的方法
( , ) JQ支持模块化的模式
() window.jQuery = window.$ = jQuery;
})();
jQuery源码笔记(一)：jQuery的整体结构的更多相关文章
- jQuery源码分析之=>jQuery的定义
最近写前段的代码比较多,jQuery是用的最多的一个对象,但是之前几次看了源码,都没搞清楚jQuery是怎么定义的,今天终于看明白怎么回事了.记录下来,算是一个新的开始吧. (文中源码都是jQuery ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- jquery源码解析：jQuery队列操作queue方法实现的原理
我们先来看一下jQuery中有关队列操作的方法集: 从上图可以看出,既有静态方法,又有实例方法.queue方法,相当于数组中的push操作.dequeue相当于数组的shift操作.举个例子: fun ...
- jquery源码解析：jQuery静态属性对象support详解
jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...
- jQuery源码笔记(二)：定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- jQuery源码笔记——数据缓存
数据缓存是为了解决内存泄露,他的原理是,当我们将数据存储到一个对象上面,实际上是将所有的数据存到一个单独的数据对象里,而这个对象只提供一个接口,这个接口可以访问自己存在数据对象里自己的数据. 这是一个 ...
- jQuery源码笔记——四
each()实现 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context ) ...
- jQuery源码笔记——三
将类数组对象转化为数组对象 javascript中有许多类数组对象,比如HTMLCollection,NodeList,arguments.她们的特点是和数组一样有length属性,并且有0,1,2这 ...
- jQuery源码笔记——二
jQuery选择这样返回对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, con ...
随机推荐
- asp.net js 倒计时总秒数量 和 排序
Edit in JSFiddle JavaScript HTML CSS Result h1 { font-family: "微软雅黑"; font-size: 40px; mar ...
- C#------如何取出exe运行文件给客户使用
1.将解决方案配置里面的“Debug”转换成“Release” 2.右击“解决方案”,选着“重新生成解决方案”,以得到最新的版本 3.找到工程目录下的“bin”文件夹,里面有“Release”文件夹, ...
- mysql select 格式化输出
select * from test\G; MySQL的客户端命令行工具,有很多方便使用者的特性,某些方面甚至可以说比Oracle的sqlplus更加人性化.当然从整体来说,还是sqlplus更加方便 ...
- Eclipse导入项目：No projects are found to import
1 http://www.ztyhome.com/android-import-error/(网址不稳定详细内容如下:) 2如果发现导入工程(impot)的时候,出现”No projects are ...
- js中的preventDefault与stopPropagation详解
本篇文章主要是对js中的preventDefault与stopPropagation进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 首先讲解一下js中preventDefault和stopP ...
- Debian 8安装ibus输入法
# apt-get install ibus ibus-sunpinyin ibus-table-wubi
- 创建为ClickOnce清单签名的.pfx格式数字证书
------ 第一步 创建 X.509 证书 ------makecert.exe为证书创建工具.证书创建工具生成仅用于测试目的的 X.509 证书.它创建用于数字签名的公钥和私钥对,并将其存储在证书 ...
- Java序列化的几种方式以及序列化的作用
Java序列化的几种方式以及序列化的作用 本文着重讲解一下Java序列化的相关内容. 如果对Java序列化感兴趣的同学可以研究一下. 一.Java序列化的作用 有的时候我们想要把一个Java对象 ...
- Python之路【第六篇】：面向对象编程相关
判断类与对象关系 isinstance(obj, cls) 判断对象obj是否是由cls类创建的 #!/usr/bin/env python #-*- coding:utf-8 -*- class ...
- MongoDB 3.0.6 安装 增删改查
下载 安装包MSI http://yunpan.cn/cmhHdTPkXZRM2 访问密码 9b6c 上边提供的是 MongoDB 3.0.6 64Bit 的安装包 安装 如果不想直接安装在C盘.. ...