一起学习jQuery2.0.3源码—1.开篇

write less,do more

jQuery告诉我们:牛逼的代码不仅精简而且高效!

2006年1月由美国人John Resig在纽约的barcamp发布了jQuery,吸引了来自世界各地众多JavaScript高手加入,由Dave Methvin率领团队进行开发。如今,jQuery已经成为最流行的JavaScript框架,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。

jQuery 版本:截止2013年6月的版本是2.0.3和1.10.2。其中,jQuery1.10.2支持兼容各个版本的浏览器,而jQuery2.0.3并不完全兼容IE 6、7、8,仅凭这份骨气,便高看它几分,因此在学习源码时毫不犹豫选择了jQuery2.0.3,同时也是在呼吁:让IE6尽早走向灭亡,最好是尸骨无存!

开篇

本系列文章的宗旨:学习jQuery源码,便应习其精华,为我所用!

jQuery源码中的精髓无外乎:初始化的设计思路;选择器的设计方法;事件处理的设计方法;动画效果的设计机制;Ajax封装的设计思路;插件机制的设计;兼容性处理的设计方法;等。针对源码中精髓部分将进行重点学习,其余部分源码或简述、或略去、或一句带过。

纵览

jQuery 2.0.3源码的整体框架中,源码共8829行,将其划分为下列各个部分,其中每一行的数字,如21,94是指源码中的21行到94行的内容。

(14) (function(window,undefined){:定义自执行的匿名函数,所有源码均包含在该匿名函数中

(21,94) jQuery = function(){……}:定义了一些变量和函数

(96,283) jQuery.fn = jQuery.prototype={}:在jQuery对象原型中添加一些属性和方法

(285,347) jQuery.extend = jQuery.fn.extend : jQuery的继承方法,为添加后续代码提供良好的扩展性,同时扩展插件也是从该继承方法中扩展

(349,817) jQuery.extend() : 扩展一些工具方法(静态方法),如$.trim()、$.proxy()、等

(877,2856) Sizzle : 复杂选择器的实现,考虑了多种情况

(2880,3042) Callbacks : 回调对象,对函数的统一管理

(3043,3183) Deferred : 延迟对象,对异步的统一管理

(3184,3295) support : 浏览器的功能检测

(3308,3652) data() : 数据缓存,避免大数据量的元素挂载、预防内存泄露

(3653,3797) queue() : 队列方法,入队出队、执行顺序的管理

(3803,4299) attr()、prop()、val()、addClass()等 : 对元素属性的操作

(4300,5128) on()、trigger() : 事件操作的相关方法

(5140,6057) DOM操作 : 添加、删除、获取、包装、DOM筛选等

(6058,6620) css() : 样式的操作

(6621,7854) 序列化操作、数据提交和ajax方法:ajax()、load()、getJSON()等

(7855,8584) animate() : 运动(动画)的实现方法

(8585,8792) offset() : 位置和尺寸的方法

(8804,8821) jQuery中支持模块化的模式

(8826) window.jQuery = window.$ = jQuery:jQuery的符号简写为$

(8829) })(window):传入window参数

收尾

学习jQuery源码,其最终目的是要能够为我所用,即写出一套架构健壮、编码规范、运行稳定的属于自己的JS框架库,相信这个过程将使我们那拙劣的编码技术得到极大的提高,还有那满满的成就感,以及自我肯定。

因此,对于我们,这份执著,值得!

博文作者:twobin

博文出处:http://www.cnblogs.com/twobin

时间: 2024-10-22 02:24:59

一起学习jQuery2.0.3源码—1.开篇的相关文章

jQuery2.0.3源码学习---继承方法

jQuery中的extend()方法主要有三种用法: // 扩展插件 调用方法:$.a() $.extend({ a : function{ alert(1) } }) // 合并对象到第一个 $.extend(a,{name:'nick'},{age:'30'}) //拷贝 var a = {}; var b = {nage: 'nick'} $.extend(a, b) //浅拷贝 $.extend(true,a, b) //浅拷贝 其源码部分如下所示: jQuery.extend = jQ

jQuery2.0.3源码

概览 整体结构 (function (){ (21 , 94) 定义了一些变量和函数 jQuery=function(); (96 , 293) 给jQuery对象添加一些方法和属性; (285 , 347) extend:jQuery扩展方法; (349 , 817) jQuery.extend : 扩展一些工具方法; (877 , 2856 ) Sizzle : 复杂选择器的实现; (2880, 3042 ) Callbacks : 回调对象:函数的统一管理 (3043, 3183 ) De

Android 5.0内核和源代码学习(2)——源码下载和系统启动过程分析

一.Android源码下载 上一次简单介绍了Android系统的层次结构,这次开始动真格了--下载源码和分析源码! 那么,Android的源码从哪下?当然是谷歌官网,下载方法官网也讲得很详细,但是奈何中国的墙比较厚,所以上面的办法是没用的,当然,有些是有用的,地址:http://source.android.com/source/downloading.html 谷歌官网没办法下,幸好还有一些国内网站,废话不多说,直接开始步骤: 工具和环境:VM虚拟机+Ubantu14系统 第一步:Ubantu

烂泥:mysql5.0数据库源码编译安装

本文首发于烂泥行天下. 本次实验的mysql.OS相关信息如下: Mysql:5.0.96 OS:centos 32 bit 最近公司要上新的业务,指明数据库使用的是mysql5.0版本.如果是使用rpm包安装的话,那就很简单了.直接使用yum安装即可,命令如下: yum –y install mysql mysql-server Yum方式安装完毕后,直接启动mysql数据库服务即可.如下图: 这样基本上就可以了. 但是这样安装mysql数据库,没有进行定制.比如mysql数据库的数据文件存储

[spring源码学习]二、IOC源码——配置文件读取

一.环境准备 对于学习源码来讲,拿到一大堆的代码,脑袋里肯定是嗡嗡的,所以从代码实例进行跟踪调试未尝不是一种好的办法,此处,我们准备了一个小例子: package com.zjl; public class Person { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } public void sayHello

基于IntelliJ IDEA 15.0.2的Tomcat7.0.69源码运行环境搭建

由于目前的工作内容调整,及重新进行职业规划,预备进行Tomcat源码学习. 一.准备资源: 1.Java的IDE工具使用:IntelliJ IDEA 15.0.2 版本 2.Tomcat源码使用:apache-tomcat-7.0.69-src.zip 版本 3.使用Maven环境:apache-maven-3.0.4 版本 4.JDK环境:使用 jdk1.7.0_51 版本 二.环境搭建 1.准备Tomcat源码环境 a.解压tomcat7.0.69源码压缩包 b.将tomcat7.0.69转

u-boot学习(三):u-boot源码分析

建立域模型和关系数据模型有着不同的出发点: 域模型: 由程序代码组成, 通过细化持久化类的的粒度可提高代码的可重用性, 简化编程 在没有数据冗余的情况下, 应该尽可能减少表的数目, 简化表之间的参照关系, 以便提高数据的访问速度 Hibernate 把持久化类的属性分为两种: 值(value)类型: 没有 OID, 不能被单独持久化, 生命周期依赖于所属的持久化类的对象的生命周期 实体(entity)类型: 有 OID, 可以被单独持久化, 有独立的生命周期(如果实体类型包含值类型,这个值类型就

EasyUI学习总结(三)——easyloader源码分析

EasyUI学习总结(三)--easyloader源码分析 easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>easyloader范例</tit

EasyUI学习总结(四)——parser源码分析

EasyUI学习总结(四)--parser源码分析 parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyui开头的class标签,然后初始化成easyui控件. 1 /** 2 * parser模块主要是解析页面中easyui的控件 3 */ 4 $.parser = { 5 // 是否自动解析 6 auto: true, 7 8 // 可以被解析的控件 9 plugins:['linkbutton','menu','menubutton','splitb