废话

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

在一个多月前我对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. 部署Asp.net Core 项目发生502.5 或者500 没有其他提示信息

    最近将公司原来.NetCore 1.6的项目升级到.net Core 2.0首先发生 502.5的错误,包括IIS日志,Windows应用程序日志都没有记录问题始终解决不了,首先看看官网给出的解决方案 ...

  2. windows平台下python 打包成exe可执行文件

    第一步 安装 pyinstaller 命令行下运行:pip install pyinstaller 第二步 打包安装 pyinstaller Test.py 第三步 完成 找到打包目录下dist目录  ...

  3. mysql中使用show table status 查看表信息

    本文导读:在使用mysql数据库时,经常需要对mysql进行维护,查询每个库.每个表的具体使用情况,Mysql数据库可以通过执行SHOW TABLE STATUS命令来获取每个数据表的信息. 一.使用 ...

  4. 调用QQ聊天功能

    [HTML]: <a href="javascript:void(0);" onclick="chatQQ()">咨询客服</a> fu ...

  5. Python-Blog1-搭建开发环境

    注:本系列是根据廖雪峰python实战过程,详情可见(https://www.liaoxuefeng.com/) 环境准备 Python 版本:Python 3.X,查看python版本python ...

  6. python_virtualenvwrapper安装与使用

    如何创建当前python版本虚拟环境? 1. 安装virtualenv pip install -i https://pipy.doubanio.com/simple virtualenv 2. 创建 ...

  7. python_计算1+……+100中偶数和

    如何计算1+--+100中偶数和? 1. 把奇数去掉,通过if,判断累加数除以2的余数,是否为1,判断是否是奇数 2. 通过continue 跳过对奇数的累加 #!/usr/bin/python3 d ...

  8. Java中Unsafe类详解

    http://www.cnblogs.com/mickole/articles/3757278.html Java不能直接访问操作系统底层,而是通过本地方法来访问.Unsafe类提供了硬件级别的原子操 ...

  9. keytool 错误:java.to.FileNotFoundException:

    老是报如题的错误: 后来才知道是因为当前的目录下没有写的权限,所以需要指定一个路径来存放android.key: keytool -genkey -alias android.key -keyalg ...

  10. js设置滚动条位置

    JS控制滚动条的位置: window.scrollTo(x,y); 竖向滚动条置顶(window.scrollTo(0,0); 竖向滚动条置底 window.scrollTo(0,document.b ...