使用思维导图，来分析与设计代码的结构

今天这篇文章就跟大家聊一下如何通过思维导图来分析业务需求，在实际的课程中，我也是这么讲解的。因为篇幅所限，尽量挑主要的说了。

<!-- -->

现在我在网上随便找一张UI设计图，

这是一个很普通的转盘抽奖，也许正在读这篇文章的你， 可以很轻松的把它做出来，也许你是一个前端新人，你甚至根本不知道要如何下手。那么我建议你这样开始，

（1）先画一个思维导图，列出它所有的功能点；

（2）把（1）里面的事件的执行顺序标示出来，这个执行顺序有时也是调用顺序；

（3）写出伪代码；

现在大概的代码的逻辑就出来了；

（4）改成prototype原型模式。不会？先写伪代码，

（5）你公司使用ReactJs；依然是伪代码，演示思路嘛，

（6）你公司使用Vuejs；还是伪代码，

如果你公司使用ng，sorry，我不会ng。。不过想来大概也是这个套路，最关键的就是在思维导图上把它所有的功能点列出来，或是你在纸上用笔写出来也行，然后把它们的功能点用线连起来，就像这样，

<!-- -->

到这一步，相信你已经看出来了，无论你使用什么，原生Js、jQuery、ReactJs、VueJs...，其实它们的实现思路都差不多。

我建议同学们如果遇到想不清楚逻辑的时候，可以采取以下步骤，

1、如果有产品经理，把他叫过来再给你讲一下交互的顺序；

2、用笔在纸上来一遍它的顺序，先点哪个，再点哪个；

3、把它用伪代码，先写出来，可以是原生JS，可以是jQuery，可以是原型模式、React或其它的什么；

4、经过前三步理清思路之后，再把伪代码写为真正的可以执行的代码。

<!-- -->

这一套方法不是我一个人的，而是很多程序员都这么用。我就是这样，三天学会php，写了一个留言板之后，又在二天之内把php完全忘光。

我这么说，不是说PHP简单，更不是吹嘘我如何如何。我只是想说明，这是一套“学习方法论”，可以用于任何程序开发语言。而且在实际的讲课实践之中，这个方法被证明是确实有效的。希望也能帮助到正在看这篇文章的你。