[转] jQuery源码分析-如何做jQuery源码分析

jQuery源码分析系列(持续更新)

jQuery的源码有些晦涩难懂,本文分享一些我看源码的方法,每一个模块我基本按照这样的顺序去学习。

当我读到难度的书或者源码时,会和《如何阅读一本书》结合起来进行学习。推荐读读这本书,你可以从这里这里下载。

第一部分:检视阅读

1. 收集参考资料:官方文档、书籍、百度/谷歌,专题/博客等,快速的浏览,对涉及的知识点、范围、深度、是否有参考意义等有大致的了解和判断,知道这些文章的作者想要解释或解决什么问题。

第二部分:分析阅读

2. 细读官方文档,官方有非常详细的文档说明,随手打开翻译工具,不懂的单词及时查证,不要一开始就去读中文API,因为很多是机器翻译;读懂官文之后,再与中文API相互印证,加深理解。

3. 验证官方示例

打开Firebug或Chrome的调试工具,在控制台中输入命令进行验证;或者打开http://jsfiddle.net/,手动输入HTML、CSS、JavaScript;如果是AJAX,就去搭建自己的服务器和服务端程序。

到这一步,对API的功能、用法用已经初步掌握,保持这个学习习惯,可以很快成为一名jQuery熟练工。但这还是初级阶段,不过是掌握了一些知识(what)、知道了如何应用(how),还弄不清这些API的背后是如何设计和实现的(why);不过有了前边的基础准备工作,终于可以开始读源码了。

4. 开始读源码

首先把模块的结构整理出来,从整体理解,比如总体架构Event源码结构

接下来是边读边加注释,对每行代码每个函数调用都要字斟句酌吹毛求疵,觉得有趣的、惊艳的、疑问的、坑爹的、猜测、启发、联想等等,详细的把这些思考的过程和结果记录下来(放心吧jQuery值得你花时间这么做,你会体会到其中的乐趣,并很快发现这么做是有价值的);

边读边注释的过程中,设计一些测试用例,在调试工具(我发现Chrome比Firebug好用多了)中设置断点,通过单步调试来检验纠正我的理解;

最后,总结出API的实现思路关键代码,这是这一步最重要的2个成果。

我总结的经验是,自己主动努力分析,不要去看别人的分析。原因吗,比如版本问题、作者的水平和耐心等,最重要的是我发现,在读懂源码之前我经常读不懂这些文章。

第三部分:主题阅读

5. 大量阅读相关的网文和书籍(第1步收集的资料),重点阅读相同主题的分析文档,网上常问的问题等,在阅读的过程中不断修正和完善自己的理解。

同样需要不停的debug。

6. 写一篇应用教程(优秀的应用教程已经很多了,有时间也会写写,但不多)。

7. 写一篇源码分析,记录自己的心得,加深理解和记忆。

分析jQuery源码是成长为中级JSer的一条捷径,希望对大家能有所启发。

原文:http://www.cnblogs.com/nuysoft/archive/2011/12/08/2280855.html

时间: 2024-08-02 02:47:41

[转] jQuery源码分析-如何做jQuery源码分析的相关文章

jQuery源码分析-03构造jQuery对象-源码结构和核心函数

3. 构造jQuery对象 3.1源码结构 先看看总体结构,再做分解: (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.

jQuery源码分析-02构造jQuery对象

源码结构.核心函数和工具函数 1.源码结构 (function( window, undefined ) { var jQuery = (function() { // 构建jQuery对象 var jQuery = function( selector, context ) { return new jQuery.fn.init( selector, context, rootjQuery ); } // jQuery对象原型 jQuery.fn = jQuery.prototype = {

jquery dom ready, jqery2.1.1实现-源码分析

本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document  ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我现在闲来无事就闲扯一下jquery document  ready的实现.在低版本1.XX的实现和2.XX的略有不同,这里以2.1.1为准 平时一般都会这样写,一般就这两种方式 $(document).ready(function(){ //do something }) $(function(){

jQuery2.1.1源码分析(一)---微型jQuery框架

错误很多,多多指教. 去掉繁杂的代码,下面就相当于一个微型的jQuery框架. //一个js函数function,闭包传入window变量运行,(function(window){ //定义jQuery赋值给3个变量,返回一个对象jQuery.fn.init的实例化 var jQuery = window.jQuery = window.$ = function( selector, context ) { return new jQuery.fn.init( selector, context

jQuery 源码解析一:jQuery 类库整体架构设计解析

如果是做 web 的话,相信都非要对 Dom 进行增删查改,那这相信大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.getElementsByName...官方提供超长方法 api . jQuery 整体源码,本人也还在阅读中,暂时记录一下.(为什么要看源码,原因很简单---- 一 好好了解一下 jQuery 原理  二 为了装逼显摆).   一  使用 jQuery 时候,首先需引入 jQuery 文件,而之

二.jQuery源码解析之构建jQuery之构建函数jQuery的7种用法

一:$(selectorStr[,限制范围]),接受一个选择器(符合jQuery规范的字符串),返回一个jQuery对象;二:$(htmlStr[,文档对象]),$(html[,json对象])传入html字符串,创建一个新的dom元素 三:$(dom元素),$(dom元素集合)将dom元素转换成jQuery对象.四:$(自定义对象)封装普通对象为jQuery对象.五:$(回调函数)绑定ready事件监听函数,当Dom加载完成时执行.六:$(jQuery对象)接受一个jQuery对象,返回一个j

分享十款jquery实现的特效预览及源码下载

1.jquery灯箱插件Lightbox 原来的lightbox脚本在最近的8年依然很火.它是100%免费使用. 在线演示 源码下载 2.CSS3立体3D菜单 蓝色淡雅风格菜单 今天我们要来分享一款基于CSS3的3D菜单,这款菜单式蓝色淡雅风格的,鼠标滑过菜单项时还会有淡入淡出的颜色渐变效果.菜单的整体外观比较简单,边框呈现淡淡的阴影,因此让这款CSS3菜单变得有3D立体的效果. 在线演示 源码下载 3.隐藏式侧滑内容特效 Slide in panel 今天向大家分享一个基于css3和jquer

jQuery版推箱子游戏详解和源码

前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这一关其实还是有点难度的,我做完之后想检测一下下一关正确么,居然还玩了以后才通关. 如果你看到这张图让你想起了你童年的回忆,说明你老了,这里可以试玩一下(很遗憾没有链接地址,最后又源码可以下载). css布局 主要考虑的是地图是怎么动态生成的,地图中有灰色的,还有墙,箱子,蓝色,红色背景,人物.先看c

ConcurrentHashMap源码阅读以及底层实现的简单分析

ConcurrentHashMap 是可以实现多线程并发的HashMap,它是线程安全的. 前面分析过 HashMap的源码,它和HashMap有很多的相同点一样,比如它也有 initialCapacity 以及负载因子 loadFactor 属性.而且他们的默认值也是16和0.75. static final int DEFAULT_INITIAL_CAPACITY =16; static final float DEFAULT_LOAD_FACTOR =0.75f; 和HashMap不同的是