前端新人之“不知所措”

前几天发了“前端工程师都能做什么”这篇文章，

此文的末尾有这样一句话：“...毕竟，无限可能嘛...”

有同学留言给我，

“可是新手往往望着无限可能而不知所措”

这句话我当时回复的是，“请先从切图开始”。

这个回复本身是没有问题的，

切图就是制作页面的过程，

熟悉切图，就是熟悉页面。

页面熟悉了，才谈得上控制页面，

也就是JS操作前端交互。

但今天有空的时候，我又想起来这事来，

他说的不是不会，也不是容易，

而是不知所措。。

让我们先来看看前端的技术构成吧，

html，有html4、html5；

css，有css2、css3

js，有javascript，jQuery，ES6，typeScript，...

框架就更多了，数不胜数，...

它们中的任何一项都不是web前端开发，

而是它们加在一起才叫前端开发，

更晕的是，其中有些是可学可不学的，而有些是必须要学的。

所以，这位留言的同学，他不知所措了。

要我说，任何技术都不是单一的，它都是多个相关技术的集合。

如果用一栋“商场”来比喻前端开发的话，

那么每个单元每一层都是一个技术分支；

每个房间，就是每个技术节点；

也许你得走遍每个单元，每个房间，

你才能真正窥得整个“商场”的内在，

然后你再回到“商场”的外面，

这时，这个“商场”，在你眼中又是另外一个样子了。

那么这就有一个问题，从哪开始呢？

就像真实的商场一样，有东南西北四个入口，

还有地下四个车辆入口，

还有二个过街天桥的直通二楼的入口，

这些入口之间，互相又是相通的，，

从哪进入呢？

好像从哪进去，都有些找不到方向。

想想我们线下是怎么逛商场的？

--走正门；

--正门进去之后会有个室内广场，应该会有个引导图，广场四周至少会有几个电梯，写着每层有什么。

这就是线索，按着这些走，就不会晕。

学习前端开发也是这样，

首先，“找到正门”。

切图，就是正门；

切图里面要用html、css，这二个就是引导图；

切图熟悉了，会有同事让你用JS写效果，

这个就是电梯，带你到第二层，简单页面交互；

再往后，

商场的第二层，第三层你都熟悉了，

慢慢的往上几层你也知道怎么个方向了。。