废话

这几天有想看源码的想法,于是就开始了源码的研究,经过几天的摸索发现看源码还是有点技巧在里面的,想着把这些东东写下来作为一个小总结。

在一个多月前我对Vue源码进行了一次研究,那时看源码的方式基本上是从上往下看,结果看着看着就看不下去了,后来找了一个很老的版本看,但看的还是不太懂,于是想着干脆看一些工具类得了,因为工具类一般比较单一不会和上下文有太多的联系,有点基本都能看懂。

不管是什么源码其研究方式基本上都是大同小异的,标题写jQuery是因为这几天正好在研究jQuery源码,这里就拿jQuery作为讲解的对象。

基本步骤

研究源码的第一步找到源码的入口,找源码的入口可以通过打断点的方式找到,比如像下面这样

<script src="dist/jquery.js"></script>
<script>console.log($())</script>

然后我们打开Chrome浏览器给console.log($())这行打个断点,如下图

通过以上方法我们找到了入口,剩下的就是跟着调试器看看这些代码怎么执行的。

对于某个特定的方法我们也可以通过打断点的方式来看这些代码大概是在做什么,比如jQuery中的extend方法

打断点不仅仅是用来调试的,还可以当作学习的工具。通过打断点的方式可以使我们对程序的执行过程以及依赖关系有个粗略的了解。

但不管是方法还是技巧它都只能解决我们的一部分问题,要真正的看懂和理解源码还存在很多其他因素。

闲扯

看源码这件事吧,不要抱着一次就能看懂的心态去学,其实想想我们看源码不就是为了学习嘛,不一定说要全部都看懂,只要比之前进步一点也很不错啊,这样压力会小点吧,有时压力太大就不想学了。

源码可以从不同的角度去看,从架构,从细节、又或是某些工具方法,如果技术不太好我们可以先从工具类方法看起,对一些复杂的方法可以先忽略一些细节先搞清楚它是干什么的,这何尝不是一种方法。

jQuery源码研究——怎么看源码的更多相关文章

  1. 没必要看源码。。把文档学通就已经牛逼了(我们大多还是在应用层,还达不到研究的程度。附class与examples大全链接)

    [学霸]深圳-鑫 2017/7/11 13:54:07只是学习怎么用QT的话,不用看源码.看帮助文档就很好要学习编码风格与思路,就看看源码 [学神]武汉-朝菌 2017/7/11 13:54:39没必 ...

  2. underscore.js源码研究(1)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  3. zepto源码研究 - zepto.js - 1

    简要:网上已经有很多人已经将zepto的源码研究得很细致了,但我还是想写下zepto源码系列,将别人的东西和自己的想法写下来以加深印象也是自娱自乐,文章中可能有许多错误,望有人不吝指出,烦请赐教. 首 ...

  4. jdk源码研究1-HashMap

    今天开始,研读下jdk的常用类的一些源码,下面是jdk中HashMap的研究.诚然,网上已经很多这方面的总结了,但是,个人只是想单纯地把自己的理解过程进行记录,大牛们就绕路吧,当然,欢迎扔砖头.下面是 ...

  5. dubbo源码研究(一)

    1. dubbo源码研究(一) 1.1. dubbo启动加载过程 我们知道,现在流行注解方式,用spring管理服务,dubbo最常用的就是@Reference和@Service了,那么我首先找到这两 ...

  6. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

  7. 从源码的角度看 React JS 中批量更新 State 的策略(下)

    这篇文章我们继续从源码的角度学习 React JS 中的批量更新 State 的策略,供我们继续深入学习研究 React 之用. 前置文章列表 深入理解 React JS 中的 setState 从源 ...

  8. underscore.js源码研究(8)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

  9. underscore.js源码研究(5)

    概述 很早就想研究underscore源码了,虽然underscore.js这个库有些过时了,但是我还是想学习一下库的架构,函数式编程以及常用方法的编写这些方面的内容,又恰好没什么其它要研究的了,所以 ...

随机推荐

  1. Vue-cli搭建完项目,各文件解释

    脚手架vue-cli搭建完成后,会生成一些文件,总结学习一下这些文件是做什么用的:1.一级目录: build和config文件夹是wbepack配置的文件夹: node_modules是在我npm i ...

  2. JAVA 键盘输入数组,输出数组内容和最大值、最小值

    package shuzu; import java.util.Scanner; import java.util.Arrays; public class shuzu { /** * @param ...

  3. nxlog4go 简介 - 基于log4go的下一代go语言日志系统

    nxlog4go的项目网址: https://github.com/ccpaging/nxlog4go 项目历史 ccpaging's log4go forked from https://githu ...

  4. c# gdi设置画刷透明

    使用solidBrush新建画刷,定义画刷的颜色为透明色 Brush b = new SolidBrush(Color.FromArgb(50, Color.Green)); 这里的50是透明度的设置 ...

  5. 安装新的int 9中断例程2

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...

  6. 通过EXPLAIN分析低效SQL的执行计划

    explain select * from film where rating>9\G; select_type 表示select的类型 SIMPLE 代表简单表,不用表连接或子查询 PRIMR ...

  7. python_如何派生内置不可变类型并修改实例化行为

    案例: 我们想要自定义新类型的元组,对传入的可迭代对象我们只保留其中的int类型并且值大于0的元素,如下: [1, -2, 'xxx', 7, [1, 'oo'], 9]  >> (1, ...

  8. 微信屏蔽js分享、复制链接

    页面内引入js(不放在页面内部不起作用) $(function(){ function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu'); ...

  9. POI--HSSFRow类

    用POI在工作表里作成一个行,可以用「HSSFRow」类,它的构造方法有三个. protected HSSFRow() protected HSSFRow(Workbook book, Sheet s ...

  10. 【转】python入门指引

    http://matrix.42qu.com/10757179 前言 其实我也不知道python怎么入门,由我来写这个真的不是很合适.我学python是直接找了dive into python来看.然 ...