我的前端入门经历

前言

大致想来，接触前端已有两年左右的时间，也曾迷茫过，所幸坚持了下来，也终于入门了。两年来看过不少书，接触过不少新技术，随着知识边界的不断扩展，也越来越感觉到自己的不足，还有更多的知识点需要掌握。平时，有不少人问我怎么学习前端的，一般我是不回复这类问题，不是不愿意，而是回答不了。因为自己也才刚入门，没有什么能力指导别人，还有就是不同的人有不同的知识储备和编程基础，总的来说就是各有各的情况，我的学习方法或许只适合我本人。这篇文章并不是为了指引其他小伙伴入门，仅仅是一个个人的阶段性回顾。

初始接触

最初接触前端还是本科时候，是大二还是大三业已忘记，学了一些HTML/CSS，并没有深入了解，毕竟年轻嘛！不知道学什么，什么又都想了解一点。只是感觉，自己可以用程序写出来一张页面是很酷的事情，做页面远比写C++代码有趣多了。硕士阶段，一个项目需要一个完整登陆模块，那个网站是ASP.NET做的，为此就学习了两个月左右的ASP，做了一个完整的登陆注册模块，算是对web开发有了一个粗浅的认识。一位师兄是前端方向的，导师也让跟着他学点东西，看他拿到了网易的offer，就感觉到前端还是很有前途的，就转向了前端。当时也没想着毕业后从事前端工作，仅仅是为了学点东西而已，对于未来择业还是偏向于事业单位或研究所。没想到接触的越多，了解的越多，越就喜欢从事这个行业。

知识储备

本人接触或学习一门知识或者技术，一般先把背景知识了解后，知道其应用场景及意义后才会进行系统学习，学习前端知识也是这样。先去w3school学习了前端包括的几大核心知识HTML/CSS/Javascript，当然也把网站上所有的知识点都浏览了一遍，包括PHP、XML等等。对web开发有了一个大概认知之后，就开始系统的学习前端知识。

在学习基础的知识的过程中，并没有忘记拓展自己的知识边界，也看了不少其他相关书籍。下面是一些书籍列表：

• 《Javascript基础教程》
• 《Javascript基础与实例教程》
• 《Head First HTML与CSS》
• 《HTM5与CSS3权威指南》
• 《响应式Web设计 :HTML5和CSS3实战》
• 《网页设计与配色经典案例解析》
• 《超人气网站是这样建成的》
• 《网站设计解构 :有效的交互设计框架和模式》
• 《Web 2.0界面设计模式》
• 《CSS创意课 :全球优秀交互页面设计》
• 《响应式Web图形设计》
• 《Sass与Compass实战》

在学习的过程中，为了练习网站布局，大致重构了HTML5中国、京东等网站的网页。

在掌握了一定的前端基本知识后，感觉Javascript是前端里面最核心的一部分，就把学习重心放在了Javascript上，看了下列书籍：

• 《Javascript高级程序设计》
• 《Javascript启示录》
• 《高性能Javascript》

高级程序设计本书无疑是一本经典之作，讲解的非常全面、细致，但个人感觉并不适合初学者，因为里面有不少知识点并不是初学者可以深刻理解的。同一句话的含义对于资深程序猿和菜鸟程序猿是不同的，高级程序设计本书适合有一定基础的人阅读，最好读多遍，这样才能深刻理解Javascript语言本质。

对高质量代码的不懈追求是一个优秀工程师必备的素质，要想写出高质量的代码就需要对web性能优化相关知识有一定的了解，我就阅读了以下书目：

• 《高性能网站建设进阶指南 :Web开发者性能优化最佳实践》
• 《Javascript设计模式》
• 《编写可维护的Javascript》
• 《Javascript函数式编程》
• 《WEB性能权威指南》
• 《WebKit核心技术揭秘》
• 《Web前端黑客技术揭秘》

很多招聘前端工程师的职位要求往往都会对后端知识储备有所要求，LAMP是很多公司的后台技术选型搭配，就学习了最好的语言--PHP，看了：

• 《PHP与MySql程序设计》

代码是写出来的，只有多写代码，才能养成良好的编程习惯，写出高质量、可维护的代码，在储备知识的过程中不要忘记动手实践，只有在不断的实践才能不断的提高自己的编程水平。

项目实践

对于大部分在校学生来说，并没有多少好的项目让你去做，没有项目做也就不能积累项目经验。不少人做的第一个项目就是自己的个人博客，我也不例外。下面就是关于这个个人博客的一些经验：

这是一个闲来无事练手之作，也是对自己长时间学习前端知识的一个检验。从需求的分析、页面的设计，再到概要设计及编程实现，以及上线和测试，一个完整的流程走下来，对软件开发有了更深刻的认识，收获了很多。由后台管理系统和用户浏览页面两个部分构成。下面就详细的叙述一下这个博客所用到的一些编程语言和框架类库及收获。   

• 前端实现

Javascript/HTML/CSS毫无疑问是必不可少的，在写Javascript代码时用的jQuery库，它是轻量级的js库，兼容CSS3和各种浏览器，jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery给开发者提供了很大的便利，当然如果写的是一个复杂的应用或者调用很频繁的程序，最好还是用原生的JS写，毕竟最高效的还是原生的。推特的开源框架 BootStrap是一款很流行的前端框架，Bootstrap 让前端开发更快速、简单，本博客也使用了它。为对HTML进行更新时简化代码，提高代码利用率，还使用百度前端团队开发JS模板引擎。为了使博客的界面更加的漂亮，为博客注入一丝活力，也使用了粒子跟随插件。为了更好的管理博客，使用Datatables插件，以及一个所见即所得的基于BootStrap的富文本编辑器。

• 后端实现

关于后端，本来准备学一点Node.js，把博客放在我们实验室自己的服务器上，但一想离开后就不容易维护了，就选择了PHP和MYSQL，这样方便在新浪SAE上发布。以前也看过一些PHP的教程，但没怎么使用过，很快也就把知识还给作者了。所以为了搭建后台，就选择了一款轻量级的框架-CodeIgniter。简单易学，很快就可以上手，对于新浪SAE上也有专门的优化。CodeIgniter 是一个小巧但功能强大的 PHP 框架，作为一个简单而“优雅”的工具包，它可以为 PHP 程序员建立功能完善的 Web 应用程序。这个框架很容易上手，想自己做一些网站的小伙伴可以学习一下，在学习之前最好对PHP和MYSQL有一些了解，从w3school可以了解一些基础知识。磨刀不误砍柴工，对基础知识有一定的了解之后，可以快捷高效的使用CodeIgniter框架，也可以避免一些低级错误。新浪SAE上的MYSQL版本较低，你在本地上创建的数据库可能不可以直接导入到SAE平台数据库中，这时候你就得自己动手从新创建了。 

还做一些其他的项目练手，比如老年卫视，钟表式日历插件，故事续写网站等。

新技术

一入前端深似海，有太多的知识需要学习，也有不少的新技术、新概念不断涌现。学习或者了解过less/sass、angular、node、react、grunt等，但于学生的我来说缺少一些应用场景，也仅仅停留在学过而已，只对其概念有所了解。

个人感觉对于新技术不要盲目，打好基础才是王道，无论是什么样的技术只有结合具体项目才有用武之地，不能人云亦云，一拥而上。我们要随着项目实践不断拓展自己的知识边界，而不是闭门造车。