看公司历史代码总结

这是我实习第三周了，然后导师终于让我开始看公司代码了，由于公司的代码用的
是新技术，我是前端，我们用的是react＋redux＋less＋webpack，导师应该是怕我直接看代码看不懂，所以先让我学习公司用到的技术，于是我先从要用的技术的基础学起，我开始就学习了react。看她的官方文档，官方文档的由于是英文版的，幸亏我以前看过一次中文版的，所以看起来还好，没有那么吃力，建议英语好的直接看官方文档的英文，因为他是最新的，react这个东西更新还是比较快的，看完之后按照她的文档做了几个小例子，发现react其实学问也挺深的，但是今天主要讲看代码的总结，就先不说了，后面就是redux的学习，这个框架当时是看的是这个网址的，redux中文文档。这个当时第一次接触这个前端框架，看了一遍之后，真的脑袋都要炸了，完全不知道说什么，然后导师给我讲了一遍原理，然后根据我都实践，我发现要想学的快一点，首先是文档看一遍就行了，不理解也可以，然后我们可以把自己先前作的react的例子，拿过来进行改造，然后我就进行改造，边改造边查文档，不懂的再看人家文档上的例子源代码，这样进行摸索着运行就发现慢慢的我理解起来了，进入状态了，再第二天学redux的时候，我基本算是入门了，可以理解她的思想，然后按照她的框架进行写代码，然后接着又用高级技巧进行改写，但是这里还没有完成，又一个异步数据的，需要我自己模拟后端写代码，这个可以等下次接着写，希望不要忘记。
自己写后端模拟数据 这个任务希望可以做下去。
就这样，我算是把redux拿下来。为我后面看公司代码打下了基础，像less这个就比较简单了，因为我以前学过sass，然后这个就会比较得心应手，只不过在表达手法上不一样罢了，这个我看的是慕课网上的这个视频less即学即用,这个视频挺简单的，可以作为入门使用，对于喜欢使用命令行的人来说使用webpack或者gulp做相应的代码转换工作，是很不错的。哦，对了，怎么把webpack忘了，webpack这个他的教程也讲了很多，但是还是要一点一点来，只要看前面一点，然后照着执行测试，成功之后，再进行下面的工作就很快，我当时是太急，直接想看完，发现纯粹是在浪费时间，根本没有那么多的时间消化，而且会很苦恼怎么感觉那么难，这次又想说linux的设计哲学了，一次只干一件事，这样既有成就感，而且便于你的学习。所以我总结起来，再学一项新的技术的时候，有以下几点经验：

• 就是从大处着眼，小处着手，意为从大的目标去观察，从小的地方去动手。比喻既要从全局和长远的观点出发去考虑问题，也要在具体事情上一件件地做好。我们可以大概的看一下文档的介绍，一直看下去等到看不懂的时候就不看了，看看目录即可。然后就可以从他开始讲的最小的例子，开始着手练习了，把每一步都做好，都运行起来，这样就会慢慢的懂了。一点一点往上加功能。
• 学知识不能太死板，有些东西可以结合起来的，以前的东西也是有的，像动画问题，我以为react实现动画会不一样，然后上网一查发现其实前端实现动画简单来说只有两种方式，》一种是使用css的动画，通过变换css，比如css3动画，hove等 》第二种就是使用js改变元素等css属性达到实现动画的原理，那么react实现动画也就只能采用这两种方式，那么他就是和以前一样的道理。H5动效的常见制作手法 －恬恬,详情可以看这篇文章，写的很好，基本上把前端实现动画的所有方法都列了出来。

第三周就正式开始了看公司代码，直接把一个code给拉下来，在本地看代码，然后在线上测试环境看运行状况，这个期间，我还发现一个bug，算是意外收获了吧，开始看着这么多的代码，起码有几万行了，不知道如何下手，简直看不下去，这时候就回想redux的设计思路，于是我就从action开始看起来了，他action都用大写的常量，这个很符合redux在高级篇的建议写法，很正确，其实发现从action看起来都是一些调度，结合一些中间件，就有了actiontype这些，可是看了还是没有感觉不知道看什么，不知道干嘛，于是想着问导师有没有文档，可以看了文档之后还是没有感觉，不知道要干嘛，这时候我导师就提醒我了，看代码是后面给你一些小任务，然后会让你改代码，然后给我举个例子，比如我要要一个按钮的逻辑，比如把一个加菜的逻辑一改，然后他让我改，我一下子不知道该怎么改，于是我顺着这个思路下去，开始了看代码，一个组件一个组件进行寻找，一个props一个props进行查看，一个一个文件之间进行跳转，这个有一个技巧，在你找到某个组件的时候，想要往上找，发现线索断了，你也不知道该找谁，这时就可以使用编辑器的快捷键进行制定文件夹下所有文件中正文的查找，我用的是sublime编辑器，mac就是使用command＋shift＋f，编辑器上就是那个上键，就是朝上的箭头，mac就把他就是shift键了，和window还是不一样，这样就可以在多个文件中进行找到你要找的边框还是组件模块等，这时候遇到看不懂的就会去查看档，看逻辑文档，看前后端接口文档，然后就发现这样慢慢进入状态了，看到的东西还是蛮多的，好多东西隐隐约约也知道是干嘛的了，这时候我感觉如果让我改一个逻辑我应该就可以改了。总结起来还是有几点要注意的。

• 还是前面所说的大处着眼，小处着手，先给自己提一个问题，然后找这个问题的解决办法，就会满满的进入到代码里面去
• 看代码一定要看命名，通过命名基本可以锁定你要查找文件的范围，这样就会加快速度。
  好找到可能是目标代码的时候，会发现线上代码怎么使用本地修改过的进行测试呢？这时候就该代理工具出场了，这时有mac有一个很好的工具叫做charles，这个代理工具，可以用本地的代码替换线上的文件，这个工具在window下有一个也好用的工具叫fiddler，这个工具也很强大，以前用window的时候这个真心很好，可以抓很多包。

公司的代码其实还是很好的，基本上是按照规范来的，命名什么的也很清晰，文件模块组织的也很到位，希望自己以后写代码，命名和文件组织都要好，开始模范一点无所谓，以后就会看到效果，我最好再加一点注释，不用加很多就行，简单明了就行。
再分享一下网上别人的建议，有些自己还没尝试过，给大家一点借鉴：

• 在网上还看到有人分享说自己尝试给代码的写文档和说明，这也不失为一个好方法，下次看代码可以尝试写一下，还能锻炼自己写文档的能力
• 运行程序，断点跟踪！
• 先了解功能。然后看懂一个功能实现，最后把整个结构搞懂

• 大部份函数的功能都清楚了，再来重新看一下整个程序流程（这时应该很快就能看懂了）
  这里的看功能和写文档，下次可以尝试一下，感觉有用。

  希望大家可以和我交流你是怎么看公司历史代码的。

ok！这就是今天我总结的看公司代码的心得，