[转] 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
转载于:https://www.cnblogs.com/kuangliu/p/4466241.html
[转] jQuery源码分析-如何做jQuery源码分析相关推荐
- Javascript笔记:(实践篇)从jQuery插件技术说起-分析extend方法的源码(发现extend方法里有bug)(下篇)...
1.1 分析$.extend源码 在分析源码之前,我还要加一段s测试代码,代码如下: <script type="text/javascript"> $(doc ...
- jQuery源码分析笔记-构造jQuery对象(三)
jQuery对象是一个类数组对象,含有连续的整型属性.length属性和大量的jQuery方法,jQuery对象由构造函数jQuery()创建,$()则是jQuery()的缩写. 调用构造函数jQue ...
- jQuery 源码解析一:jQuery 类库整体架构设计解析
如果是做 web 的话,相信都要对 Dom 进行增删查改,那大家都或多或少接触到过 jQuery 类库,其最大特色就是强大的选择器,让开发者脱离原生 JS 一大堆 getElementById.get ...
- jquery项目源码_第一个jQuery程序
1.配置jQuery环境 1.1获取jQuery最新版本 进入jQuery的官方网址 http://jquery.com ,下载最新的jQuery库. 1.2 jQuery库类型说明 目前jQuery ...
- jQuery源码学习第二天--jQuery的extend扩展
Jquery中的extend扩展 一.看下常见的extend扩展: 1: jQuery.extend({ 2: noConflict: function( deep ) { 3: if ( windo ...
- 用Html5实现天气预报的原理,HTML5 Canvas和jQuery实时天气预报代码解析「附源码」...
HTML5 Canvas和jQuery实时天气预报代码解析「附源码」 这是一款非常有意思的纯CSS3扁平风格天气预报卡片动画特效.该天气预报特效将各种天气制作为卡片形式,包括下雨,闪电,白天,夜间和下 ...
- 炫酷的jQuery手风琴图片和菜单插件及源码
手风琴效果的应用非常广泛,我们常见的有手风琴图片切换和手风琴菜单,同时它也是焦点图的一种展现形式之一.今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧. 1. ...
- jQuery源码研究分析学习笔记-jQuery.extend()、jQuery.fn.extend()(八)
jQuery.extend().jQuery.fn.extend()主要用于编写插件和处理函数参数. jQuery.extend(deep,target,objdect1 [,objectN]) jQ ...
- jQuery源码学习之五 (jQUery继承方法)
jQuery 利用extend进行扩展. 参考jQuery API关于extend 的用法: $.extend([deep],target,object1,objectN) $.fn.extend(o ...
最新文章
- oracle plsql开启并行,Oracle开启并行的几种方法
- hbuilder/hbuilderx 无法检测到模拟器
- 电脑安全注意事项_松下洗衣机维修方法及注意事项
- Oracle学习:子查询 (sql 嵌套 sql)
- 2020CCPC(秦皇岛) - Kingdom‘s Power(树形dp+贪心)
- 前端解析返回的对象时json显示$ref问题的解决
- Liunx之nginx代理
- python安装多个版本_Mac安装多个python版本
- 将Java程序作成exe文件的几种方法
- Unity TimeLine实用功能讲解
- (原创)ics-openvpn编译详解
- win7下用VS编译SBA(摄影测量光束法平差程序库)
- 最新的基于mvc毕业设计题目50例
- swfobject.js 2.2 使用方法
- 在Ubuntu 20.04系统里安装Flatpak软件应用无图标显示问题的解决
- 关于电商秒杀系统中防超卖、以及高性能下单的处理方案简述
- 彭于晏都在看的博客,你还在犹豫什么
- 学习华为,小米研究 AI 芯片
- mac安装php的mongodb扩展报错:No such file or directory autom4te: /usr/bin/m4 failed with exit status: 1...
- RUFUS刷UBUNTU启动盘
热门文章
- linux 检测远程端口是否打开---nmap命令
- android o测试版,一加手机可升级!谷歌已正式推送Android O测试版系统
- 使用Socket模拟聊天室
- c语言输入字符串的格式不正确的是,关于c#:输入字符串的格式不正确
- Java与汽车_Java NIO:IO与NIO的区别
- linux vbox 添加串口,如何在VirtualBox中直接使用本机物理串口
- Jupyter Noteboot 添加kernel 环境
- 突发!吴恩达确诊新冠,46岁生日还有不到3个月
- 试用期没过,因在公司上了1024网站...
- 江苏机器人竞赛南航_中国青少年机器人竞赛