如何高效阅读代码

       阅读代码是任何一个专业程序员所必备的基础技能。掌握一定的阅读技巧和工具不止能帮我们快速的去学习一个知识点、一种编程理论也能帮助我们快速的接手别人的工作或者修改别人的一段代码。那么如何才能去高效的阅读代码哪？接下来用一段代码为例说一下我是如何去阅读一段代码，以及在阅读过程中使用那些工具去协助整理收集知识点的。

      在阅读代码的时候，我基本上是遵循下面四个步骤来阅读的。

      1、首先要了解这段代码的作用，越详细越好。

      2、调试跟踪代码，整理出代码的逻辑线，并且按代码块或函数简单注释出代码块或函数实现功能以及简单逻辑。

      3、逐块或函数从语法、知识点和调用函数三个方面去分析代码。

      4、如果有可能则试着重构或重写这段代码，如果时间不够至少也要重构或重写一些核心代码。

      示例代码选用jquery（3.3.1）的extend函数。函数位于jquery源码的227行处。源码如下：

        extend的主要作用是将一个或多个对象的内容合并到目标对象。如果只指定一个参数的话，则目标对象为jquery本身。如果有多个源对象的且他们有共同的属性，目标对象只保留最后一个被合并的对象的值。语法如下：

        $.extend( [deep ], target, object1 [, objectN ] )

        deep：是否为深层拷贝（可选），默认为false，为true的时候，如果多个对象的某个同名属性也都是对象，那么改属性也会被合并，为false则会只保留最后一个含有该属性对象的值。

        target：目标对象。

        object1：源对象1；

        object2：源对象2；

        .................

        具体用法请参考博客    jQuery.extend 函数使用详解

       这段代码的结构比较简单，只是实现了一个功能。整个功能的实现可以分为五个小的逻辑代码块。为了能够更直观的展现代码的逻辑线，使用了脑图的垂直时间线结构把他们顺序的列出来，这个过程也是了解代码作者设计思路过程。脑图软件用的xmind（下载地址），脑图效果如下：

        梳理好逻辑线并将它们以脑图的形式画出来以后，接下来就从语法、知识点和调用函数三个方面去逐行的分析代码。这个过程也是了解掌握语言特性，书写语法的过程。需要我们去耐心的查找学习每行陌生的代码，了解里面的知识点以及作者为什么要这个知识点，还有没有其他的特性能够实现相同的功能、他们之间有什么优劣。对于没用过的语法也需要去了解并且和自己常用的语法对比，分析其优劣。最终去伪存真的将这些知识点和语法应用到自己的代码中去，提高自己的代码水平。这段店面整理出来的脑图效果如下：

        整理到这一步，单就extend这个函数来说就算是整理完了，但是对于整个JS语言体系的掌握来说才是刚开始。一门语言经过多年的发展以后都会形成一个很庞大的体系。没有任何一本书或者一个教程能够全面的介绍它，作为一个处于生产单位的开发人员来说更不可能有成块的充足的是时间去掌握一门语言。我们只能像盲人摸象一样，摸到一块就把他记下来，然后有机会摸到下一块再记下来。经过若干年的积累或许可以勾画出这个大象的一部分。

       这里再给大家推荐一个把的知识从点到面形成体系的工具。微软office工具包里的OneNote。下图是我整理的JS相关知识的目录。

       最后当我们去评价一段代码的时候，我觉的最高评价就是“改无可改”。jquery的这段代码也是完全有资格获得这句评价的。所以就不在班门弄斧了。但是在最初看这段代码的时候还是照着抄了一遍。并且在后来搭建自己的JS框架的时候也原封不动的抄了进去。这里也建议有兴趣的朋友可以去认真的读一遍，然后再重写或者抄一遍，真的是一件百利而无一害的事情。