[转] 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
[转] jQuery源码分析-如何做jQuery源码分析的更多相关文章
- jQuery 源码分析 8: 回头看jQuery的构造器(jQuery.fn,jQury.prototype,jQuery.fn.init.prototype的分析)
在第一篇jQuery源码分析中,简单分析了jQuery对象的构造过程,里面提到了jQuery.fn.jQuery.prototype.jQuery.fn.init.prototype的关系. 从代码中 ...
- 【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...
- jQuery原型属性constructor,selector,length,jquery和原型方法size,get,toArray源码分析
首先看一下在jQuery1.7.1中定义的原型属性和方法有哪些? init方法作为实际的构造函数已经详细分析过了,需要了解可以参考http://www.cnblogs.com/yy-hh/p/4492 ...
- jquery dom ready, jqery2.1.1实现-源码分析
本文链接http://www.cnblogs.com/Bond/p/4178311.html jquery document ready的实现其很很简,虽说简单,其很很多人还是没去关注过它的实现.我 ...
- jQuery源码分析-03构造jQuery对象-源码结构和核心函数
3. 构造jQuery对象 3.1源码结构 先看看总体结构,再做分解: (function( window, undefined ) { var jQuery = (function() { // 构 ...
- jquery源码解读 (摘自jQuery源码分析系列图书(pdf)) 持续更新
1.总体架构 1.1自调用匿名函数 //自调用匿名函数 (function(window,undefined){ //jquery code})(window); 1.这是一个自调用匿名函数.第一个括 ...
- jQuery1.11源码分析(9)-----初始化jQuery对象的函数和关联节点获取函数
这篇也没什么好说的,初始化jQuery对象的函数要处理多种情况,已经被寒冬吐槽烂了.关联节点获取函数主要基于两个工具函数dir和sibling,前者基于指定的方向遍历,后者则遍历兄弟节点(真的不能合并 ...
- jQuery源码-dom操作之jQuery.fn.html
写在前面 前面陆陆续续写了jQuery源码的一些分析,尽可能地想要cover里面的源码细节,结果导致进度有些缓慢.jQuery的源码本来就比较晦涩,里面还有很多为了解决兼容问题很引入的神代码,如果不g ...
- jQuery源码笔记(一):jQuery的整体结构
jQuery 是一个非常优秀的 JS 库,与 Prototype,YUI,Mootools 等众多的 Js 类库相比,它剑走偏锋,从 web 开发的实用角度出发,抛除了其它 Lib 中一些中看但不实用 ...
随机推荐
- js 读写cookie。不同路径会储存各自的cookie。而 在v.net环境下读写是在 / 根目录。
所以如果全站不分path 的 话.应该显示的写上 path .设置为根目录 function setCookie(name, value) { document.cookie = name + &qu ...
- Android 代码混淆 防止反编译
为了防止代码被反编译,因此需要加入混淆.混淆也可以通过第三方进行apk混淆,也可以用android中的proguard进行混淆. 混淆步骤: 1.配置混淆文件,名字可以随意,在这里使用proguard ...
- Android网络编程系列 一 JavaSecurity之JSSE(SSL/TLS)
摘要: Java Security在Java存在已久了而且它是一个非常重要且独立的版块,包含了很多的知识点,常见的有MD5,DigitalSignature等,而Android在Java Se ...
- ios7适配一些问题以及64位32位
ios7适配一些问题(http://www.cocoachina.com/ios/20130703/6526.html) 1.iOS应用如何实现64位的支持 http://www.codeceo.co ...
- 网络粘贴---Xcode中可用到的快捷键
快捷键: 1.StoryBoard技巧 当你想直接在view中选择自己想要的元素时,但是又碍于一个view上叠加的元素太多很难直接选中,那么在这时,你同时按住键盘上的shift和 control键,然 ...
- [转载]最牛B的编码套路
原文地址:http://www.codeceo.com/article/nb-coding-style.html 这篇文章很不错,推荐给大家看. 最近,我大量阅读了Steve Yegge的文章.其中有 ...
- 使用git命令提交远程github仓库的时候提示"rejected"(拒绝)解决办法
今天使用在自己笔记本本地磁盘上使用Git命令行执行"git push"然后输入github的用户名和密码之后,报如下错误: ![rejected] master->maste ...
- JavaScript 同名方法的处理
在JS中,如果存在同名同参的方法,它会先调用哪一个?先看两个例子: 例1: <html> <head> <title></title> <scri ...
- 项目框架开发流程(oa项目为例)
1. 导包 2. 配置web.xml 3. 设计通用dao ,base,service, action, domain ,utils等 4.配置struts.xml 和 beans.xml 5. 配 ...
- windows 下使用 Filezilla server 搭建 ftp 服务器
windows 下使用 Filezilla server 搭建 ftp 服务器 1. Filezilla server 免费,开源, ftp 服务端 2. 下载安装, windows https:/ ...