源码阅读心得

一、看源码的正确方法

改页面、看源码一定记得debugger,在debugger的过程一个个函数跳进去看,然后看每跳过一个每个函数对应页面效果的变化,这样才能快速看懂不同函数的功能。

1.1 利用身边好工具


双屏模式下秒用控制台窗口,第一个会把控制台和页面分成2个页面,双屏很方便。

1.2 分块看

1.2.1 如上面的页面,就分为左、中、右三部分去深入细节看。

1.2.2 在控制台中找要看的功能对应的关键词class或者id;编译器中全局搜索这个关键词,以这个为入口延伸拓展着去看一系列相关的函数和功能代码,这样看代码富有乐趣,看的同时不断来页面调试下,边调边看效果。

通过断点调试判断自己想看的功能对应的函数对不对,有没有运行。

1.2.3 有JS交互的地方,先找到对应的id,在控制台/IDEA找对应函数功能实现。


如函数内部还嵌套了函数,那就去IDEA中找到对应内部函数


command+鼠标点进这个addAppBox()函数中,看这个函数内部的方法。


点进去后再去浏览器打断点看更深层次的信息。


注意:浏览器全局搜索command+alt+F

二、方法篇

看源码之前先跑项目,看项目在页面中的效果。从布局最外层先找起,定位代码片段,只看对自己有用或者感兴趣的代码、避免一次看过多代码影响思路。

  1. 先把JS注释掉,再看页面状态、判断JS渲染页面哪些部分的功能,再取消注释。
    2.1 针对自己想学的效果来实现的HTML和CSS分离、在网页开发者模式中找resource看HTML代码时,附带看完对应CSS效果。
    2.2 分析页面框架布局,将与自己想看功能有关的布局对应的CSS分离出来到自己的文件下。
    3.1 对哪个函数功能的实现感兴趣就重点用断点调试看对应的JS事件。
    3.2 在网页对通过找id来找到对应事件的入口函数,在vs code中用ctrl+F来搜索
    3.3 衍生看相关的下一个函数,Command+shift+F全局搜索嵌套函数方法
  2. 不断运行函数,看每次运行的含义和出错的地方,搞懂每一个相关函数的作用和实现原理,不要抄代码,要理解。
  3. 在当前文件夹下复制黏贴当前看的html文档作为副本删改测试各处代码的功能,弄完了再复制一份用于建立自己的网页。
  4. 将与自己想看功能有关的布局对应的JS分离出来到自己的文件下。

三、技巧篇

1.代码尽可能的在网页开发者模式中看,敲DEMO再使用编译器。
2.如果整个页面都看,尤其是公司大型页面,嵌套太多css或js一时半会看不完的,也不好分离。切记只看自己想学的或者急用的功能。
3.改公司页面之前,先把相似功能的源码看懂了再去要修改的页面中去编辑。(效率第一,思路理清了再编码)
4.平时多看公司常用组件内容,弄懂组件代码,再能快速阅读要维护的网页源码。
5.花更少时间看懂源码部分功能,重点是自己动手实现。
6.分块看:把功能分开,从一次看2个功能一直到一次看全部功能去完善自己的逻辑思维能力,每个功能都要做到自己会写才算学会。
7.快速看:保证理解掌握了代码写法,一天看1个网页肯定学的很慢,会被前端要求的快速学习能力给淘汰。
8.保持时刻的危机感!多学多思多问!
9.源码阅读过程关键代码黏贴到word上保存起来,日后做相应功能可以拿出来看。但是好看每个函数直接的关系时还是把黏贴的代码再扔到编译器上看。因为编译器的选取查找、切换上一个下一个也好理清思路。

四、断点调试方法(3种功能一致)

4.1 debugger;在对应函数里面写debugger;


写之后在页面刷新,点击页面上对应事件的位置。如一个button按钮,如果我们的断点位置打对了,那么刷新页面进入断点调试模式后,再去页面点击对应位置控制台的source就会跳转到对应的debugger位置开启断点调试模式。

4.2 控制台中找到对应的一行,最左侧点击一下出现红点,也是打了断点。同样的办法跳转到页面中。(@需了解编译器打红点调试的用法,自己百度一下,再来补充笔记@)

4.3 在控制台source中找到想打断点的代码,最左侧点击一下也是打了断点。后续同样的办法判断。


注:有些函数是我们进入断点调试模式后再去页面点击一些地方,或拖拉等手动方式才触发的效果。
通过这些办法我们可以知道自己看的函数是不是自己在页面上想看的位置。

五、调试bug的思路

1.js是否成功的执行进来;
2.js是否存在逻辑问题,变量问题,参数问题等;
3.如果上述都没有问题,请仔细查看各种符号。

六、源码阅读实践断点调试

在文件中找到入口函数,在入口函数里打断点或手写debugger;


大项目的代码冗长,最好每更改一个地方都标记一下,最后跑项目调试成功之后再删除注释。

/*Sf Change Start*/ /*Sf Change End*/
/*Sf Commit Start*/ /*Sf Commit End*/

七、总结

在实际情况下,我们应养成拿到问题的第一时间,自行在脑海中排查问题,找到最有可能出现问题的点,如没法迅速排查出最重要的点,那就使用最麻烦但是很靠谱的方法,用 按钮将整个和问题相关的js依次去执行一遍,执行的过程中,自己跟着理清思路,同时注意下每个变量的值以及选择器选中的元素是否正确,这样做一遍下来,bug都解决的差不多了!

大四实习中,如果写错的地方请大家留言指出,万分感谢。转载请注明出处。

原文地址:https://www.cnblogs.com/EdisonVan/p/10362784.html

时间: 2024-10-11 23:14:22

源码阅读心得的相关文章

commons-io源码阅读心得

FileCleanTracker: 开启一个守护线程在后台默默的删除文件. 1 /* 2 * Licensed to the Apache Software Foundation (ASF) under one or more 3 * contributor license agreements. See the NOTICE file distributed with 4 * this work for additional information regarding copyright ow

ThreadPoolExecutor源码阅读心得

ThreadPoolExecutor是JDK内置的线程池实现类,最初随JDK1.5发布.最近花了点时间看了下ThreadPoolExecutor的源码,JDK版本是JDK1.8.0_71. 整体结构 @startuml class LinkedBlockingQueue class SynchronousQueue class Thread class Worker interface BlockingQueue interface ThreadFactory class ThreadPoolE

Memcache-Java-Client-Release源码阅读(之七)

一.主要内容 本章节的主要内容是介绍Memcache Client的Native,Old_Compat,New_Compat三个Hash算法的应用及实现. 二.准备工作 1.服务器启动192.168.0.106:11211,192.168.0.106:11212两个服务端实例. 2.示例代码: String[] servers = { "192.168.0.106:11211", "192.168.0.106:11212" }; SockIOPool pool =

Redis源码阅读(一)事件机制

Redis源码阅读(一)事件机制 Redis作为一款NoSQL非关系内存数据库,具有很高的读写性能,且原生支持的数据类型丰富,被广泛的作为缓存.分布式数据库.消息队列等应用.此外Redis还有许多高可用特性,包括数据持久化,主从模式备份等等,可以满足对数据完整有一定要求的场景. 而且Redis的源码结构简单清晰,有大量材料可以参阅:通过阅读Redis源码,掌握一些常用技术在Redis中的实现,相信会对个人编程水平有很大帮助.这里记录下我阅读Redis源码的心得.从我自己比较关心的几个技术点出发,

CI框架源码阅读笔记3 全局函数Common.php

从本篇开始,将深入CI框架的内部,一步步去探索这个框架的实现.结构和设计. Common.php文件定义了一系列的全局函数(一般来说,全局函数具有最高的加载优先权,因此大多数的框架中BootStrap引导文件都会最先引入全局函数,以便于之后的处理工作). 打开Common.php中,第一行代码就非常诡异: if ( ! defined('BASEPATH')) exit('No direct script access allowed'); 上一篇(CI框架源码阅读笔记2 一切的入口 index

淘宝数据库OceanBase SQL编译器部分 源码阅读--生成逻辑计划

body, td { font-family: tahoma; font-size: 10pt; } 淘宝数据库OceanBase SQL编译器部分 源码阅读--生成逻辑计划 SQL编译解析三部曲分为:构建语法树,生成逻辑计划,指定物理执行计划.第一步骤,在我的上一篇博客淘宝数据库OceanBase SQL编译器部分 源码阅读--解析SQL语法树里做了介绍,这篇博客主要研究第二步,生成逻辑计划. 一. 什么是逻辑计划?我们已经知道,语法树就是一个树状的结构组织,每个节点代表一种类型的语法含义.如

JDK部分源码阅读与理解

本文为博主原创,允许转载,但请声明原文地址:http://www.coselding.cn/article/2016/05/31/JDK部分源码阅读与理解/ 不喜欢重复造轮子,不喜欢贴各种东西.JDK代码什么的,让整篇文章很乱...JDK源码谁都有,没什么好贴的...如果你没看过JDK源码,建议打开Eclipse边看源码边看这篇文章,看过的可以把这篇文章当成是知识点备忘录... JDK容器类中有大量的空指针.数组越界.状态异常等异常处理,这些不是重点,我们关注的应该是它的一些底层的具体实现,这篇

如何阅读Java源码 阅读java的真实体会

刚才在论坛不经意间,看到有关源码阅读的帖子.回想自己前几年,阅读源码那种兴奋和成就感(1),不禁又有一种激动. 源码阅读,我觉得最核心有三点:技术基础+强烈的求知欲+耐心. 说到技术基础,我打个比方吧,如果你从来没有学过Java,或是任何一门编程语言如C++,一开始去啃<Core Java>,你是很难从中吸收到营养的,特别是<深入Java虚拟机>这类书,别人觉得好,未必适合现在的你. 虽然Tomcat的源码很漂亮,但我绝不建议你一开始就读它.我文中会专门谈到这个,暂时不展开. 强烈

源码阅读笔记 - 1 MSVC2015中的std::sort

大约寒假开始的时候我就已经把std::sort的源码阅读完毕并理解其中的做法了,到了寒假结尾,姑且把它写出来 这是我的第一篇源码阅读笔记,以后会发更多的,包括算法和库实现,源码会按照我自己的代码风格格式化,去掉或者展开用于条件编译或者debug检查的宏,依重要程度重新排序函数,但是不会改变命名方式(虽然MSVC的STL命名实在是我不能接受的那种),对于代码块的解释会在代码块前(上面)用注释标明. template<class _RanIt, class _Diff, class _Pr> in