献给那些和我一样在前端领域学懵B的同学！

有段时期很迷茫，感觉什么都会，但是遇到实际项目的时候总是觉得有点力不从心。

我现在基本上还是处于这个阶段，好点的是找到了原因所在。

前端是一个知识提起及其庞大的专业。什么CSS HTML JS 基础部分就够喝一壶的。然后这种效果那种功能的，当代码写到一定规模后又发现来一个功能写一个功能的方式去写代码会让整个项目变得极其混乱，到最后自己都被绕进去了。

其实最根本的问题是“我们学的太快”。对于我们这样的新手，切莫贪多。前端知识体系绝非朝夕之前就能学完。所以我改变了自己的学习思路了。

大致分为3个阶段。

第一个阶段（打好基础）：

​把基础打好，HTML CSS JS。对照着权威指南好好的看几遍，不懂得地方来社区多问问。一般这个阶段的问题都很直接不会太过抽象。大家基本上都遇到过这些问题，也很乐意帮你解决。

这个阶段一定要把基础打扎实。不要贪多和贪深。别花太多时间去思考非基础类的东西。例如：什么设计模式，模块化，组件啊这些什么东西。不懂也不要紧，这是第二阶段要做的事情。

第二个阶段（建立项目意识）：

有了一定的基础后，现在这个阶段就是要去思考如何去动手打造一个项目。

html css js代码如何去规划，图片视频等一些资源如何去规划。这里的规划就是生产环境下去组织代码结构。

然后就是运行环境下如何去规划代码。让代码变得易于维护。

其实说白了，建立项目就是一个把代码按照一定的规则打散（开发环境下，做好关注的分离。）然后在把代码打包成一个整体（部署环境下，很多代码需要合并这样能较少请求达到优化的效果。）

这时候，就需要一些模块化，组件化的思想在里面了。透过整个项目的角度去思考这些思想在能正真学会其中的精髓。

（目前自己还刚处于这个阶段）

这时候就应该学习学习sass,less 这些事CSS工程化的语言。 其实目的也就是把CSS打散。把不同的业务代码分开维护。思路也清晰些。 require.js cmd amd 这些其实和sass less的价值一样，也就是打散代码。当然还有很多工具，其实大多都是这个思路，打散代码。

然后就是合并代码：

grunt glup webpack。 我觉得这些工具最重要的功能就是代码打包，把原本被才分的代码再打包到一起。利于部署环境。当然还有其他的功能。如代码校验，压缩，编译。 这些辅助类的功能虽然多但是很好学。不要被一大堆东西吓到很多东西其实很简单。

最后你要记住项目的思维就是：打散代码目的是让人看代码舒服点。打包代码目的是让机器运行代码舒服点。

第三个阶段（实际开发阶段）

你有了基础，和项目意识后。就可以真正去动手写一些实际项目了。这个过程才是真正学习很多慕课里教程的时候。什么瀑布流，什么tab , 什么fullpage，常见的弹窗，和表单验证啊什么的。 因为这些东西虽然你在第一阶段都能看懂。但是没有第二阶段的基础，是很难有效的把教程里面的思想抽象成自己的思想然后运用到自己的项目之中。 可能你会直接拿过来用。确实也可以用，但是你绝对会遇到项目混乱的问题。每个教程开发的思想都是不统一的，真正学会是需要有自己的项目实录，和教程里的解决方法进行结合。 

这个阶段就是一个积累的阶段，什么CSS3 什么 HTML 离线缓冲，异步，还有各种吊炸天功能也都是这个阶段再去学的东西。这时候你会发现编程变得有意思起来。很多奇特的功能拿过来就很用，很有意思也很好玩。慢慢的你就会有了开发新东西的欲望。有了这种欲望我觉得你已经踏上了大神之路。

最后，不同阶段去思考不同阶段重要的事情。有时候你发现原本简单的东西你却无从下手，其实这就是你某一方面的基础没打好。 静下心来去找到自己的薄弱环节，攻克掉。回过头你会发现那些问题还是那么简单。