2016年个人前端学习思考

部长镇楼

年前受Cherry邀请，在FCC广州群组织的2月code and coffee聚会里做一次分享，当时没有多想就答应了，结果最后报名参加的同学竟然有50多人，实际到场也有20来位。其实比之群里的诸多同学，自知技术弗如远甚，尚在追赶学习阶段，所以只敢分享点自己的经验和想法，一来希望对想做前端的同学提供少许借鉴；二来也想借此机会总结自身，印照前路；三则为了锻炼自己讲话发言的能力。分享结束，思路也清晰了很多，整理成文，算是对过去一年自己前端学习和思考的小小总结。

2.25广州FCC线下面基~(@^_^@)~

---

自学经历

正式开始学习前端是在2016年2月15日，当时应该是刚过春节不久，由于之前的工作是在学校里，那段时间是寒假的最后几天，加上头天正好是虐狗的情人节，所以时间点记得特别清楚。在此之前，要说我是完全对前端和编程一点都不了解倒也不至于，以前玩游戏的时候会想着去修改游戏的代码来调节配置属性；大学的时候有学过一门叫网页设计的课程，教的还是table布局；在开始学习之前也做了很多了解，权衡，包括零散地看了一些基础内容，其实严格说来应该是复习网页设计课的内容。

• 大龄文科生的选择迷茫
  知乎上有很多类似的提问，说：多少多少岁学开始编程还来得及吗？文科生转前端可以吗？学历不足能学习编程吗？我曾经也面临这样的问题，从2014年开始，我就在思考自己未来的职业规划，需要怎么样转型，自己能做什么，想做什么，而更早的时候，基于自己过去的懈怠，从大四毕业到工作一两年之后，整个人都还是迷茫的状态，要说有什么事情是贯穿这一阶段一直坚持的，那就是学英语了。看了一下自己在扇贝（英语学习的网站，也有app）上的打卡，今年3月下旬将达到1700天，除了吃喝拉撒睡这应该是我坚持最长的一件事了，英语的收获还在其次，关键是让我明白了坚持的力量。

  对于像我这样文科出生的同学，在毕业之后，相信或多或少也会面临同样的职业方向问题，毕竟比起其他专业，文科的性质注定除了教师，律师，公务员等工作外，就是万金油的行政，人事之类了，而在你自己没有明确规划的情况下，这个问题会一直存在，很可能就让你浑浑噩噩过下去了。所以一开始就想好自己要做什么的同学我觉得是非常幸运的。

  面对这样的迷茫，我查了很多资料，也向周围一些朋友特别是业内的朋友请教，关于前端，关于编程，关于程序员，关于互联网行业。我发现业内有很多优秀的大神级的人物也不是科班出身，比如离得近的，Vue.js的作者尤雨溪是学艺术和设计的，更早的王江民老前辈（年龄大点的应该都听说过江民杀毒软件），他是38岁才开始学习计算机的。
  然后我抛开技术层面，抛开物质层面，问自己是不是真的喜欢，是不是真的想学，能不能坚持？我得到的是肯定的答案。这个时候我发现，在得到前面问题的答案之后，我要做的无非是坚持学习，看看自己能走多远罢了。这几年的工作经验，社会经验和自己平时看书的一些思考让我认为，虽然这是一个技术工作，但看看行业现状，并不是门槛高到让人望而却步，而且之所以选择前端也是考虑到这确实是目前转行程序员最好的一个切入点了。再者，做一个初级的前端需要你过早考虑高数，考虑计算机原理，考虑数据结构等等那些科班学习的专业知识吗？这些知识不能在后面慢慢再弥补吗？立志成为一名优秀的工程师，并不是说要成为行业顶尖的人，顶尖的永远只有那么几个，我可以把眼界放在他们身上，向他们努力，而通过坚持自己能达到行业内中等偏上的水准，这个信心我还是有的，毕竟大家智力都差不多嘛。

  想清楚了这些关窍，我就准备先开始尝试一下。有一句鸡汤叫“种一棵树最好的时间是十年之前，其次就是现在”，与其天天纠结迷茫，一年之后还是如此；不如先开始做，一年之后多少也会点什么了，不是吗？

• 入门学习：看书，看视频，网站
  基础学习阶段，其实不外乎就是那些套路。我个人是耐得下性子看书的人，所以主要通过看书来系统学习一门知识。整理了一下，前后看得书主要是这些：

  1. HTML&CSS三本书：headfirst系列，CSS那些事儿，HTML&CSS设计与构建网站
  2. JS三本书：DOM编程艺术，趣学Javascript，JS高级程序设计

Headfirst是一系列入门书籍，我看了HTML和CSS第二版，这本书非常基础，甚至唠唠叨叨废话挺多的，但是该提到的基础知识基本都有，搭配<a href="https://developer.mozilla.org/zh-CN/">MDN</a>或者<a href="http://www.runoob.com/">菜鸟教程</a>相关的文档内容来看对于HTML和CSS入门已然足够。

这个系列的书作为入门还是挺好的

《HTML&CSS设计与构建网站》是我看得最早的一本书籍，只能说是一些标签和属性的罗列，书很美，内容也还好，但中文版的装帧实在不敢恭维，还没看完就先翻烂了，不值得入手。

其实可以看看英文版

《CSS那些事儿》是一本很老的书了，实体书绝版，现在只能在网上找盗版的PDF来看。书虽然老，但是很多内容放在今天依然是值得一看的，特别是讲CSS布局内容，对理解和拓展经典的圣杯、双飞翼布局挺有帮助的。有幸和作者林小志大神在一个微信群里，受益良多，也推荐他的微信公众号：CSS那些事儿。

CSS那些事儿

然后是JS的《DOM编程艺术》，这本书很多人都认为是JS的最佳入门书籍，我记得应该是公众号“前端早读课”曾做过一期JS入门书籍投票，这本书远远超过包括高程，犀牛在内的其他书籍居于榜首（这里也推荐情封大大的公众号“前端早读课”，从我刚开始学前端就在关注，每天一篇推文，365天雷打不动）。如果说学习DOM操作的话，本书确实当之无愧。书的开头也介绍了一部分JS语言的基础内容，如果看高级程序设计前面三章都感到吃力的同学可以先看这本书缓解一下。然后还提到了重要的渐进增强和优雅降级的概念，虽然实际项目中目前我还没有严格运用这个思想，但对前端也是一个必须要理解的东西。

DOM入门最佳

《趣学Javascript》是国外为孩子学编程写的书，可能知道的人不多，但是同系列的另一本《教孩子学Python》知名度就比较大了。该书讲的内容也很基础，还略有提到jQuery，Canvas的一些基础内容，最后会做一个贪吃蛇的小游戏，而且整本书也是以讲一个个程序实践来的，跟着敲一遍还挺好玩的。

确实非常有趣

惭愧的是《Javascript高级程序设计》这本书我现在都还没有看完，这是今年得啃完的第一本技术书，特别是在积累了一定工作经验和代码量之后，回过头来看当时觉得晦涩，难以理解的内容，会有感觉清晰很多。

红宝书

另外，除了看书就是看视频学习了。看视频主要是看别人怎么去写代码，听听别人的思路，相当于手把手实践一些东西，就像老师讲课一样吧。我是在妙味看了一个HTML&CSS整站制作的视频，花了几天时间跟着做了一遍，就学会了切图，学会了雪碧图，学会了从设计图到页面转化的这么一个过程，中间做好笔记。妙味也有很多其他的视频，有兴趣的同学可以去看看。还有在慕课网做了一些JS的练习，当时还不知道<a href="https://www.freecodecamp.cn/home">FCC(Free Code Camp)</a>这个网站。其实这个过程主要就是练习，光看不行，必须得敲代码，自己实现一遍，踩坑了，印象才深刻。

最后就是了解了一下Bootstrap，主要是它的栅格系统和一些组件，比如模态框，下拉菜单之类的。能照着文档用就行，也没有多深究。

关于找工作

在学到一定程度之后就准备开始找工作了，当然这中间也发生了一些其他事情，让自己动摇，耽误了些时间，直到6月才定下来最终要做什么。

• 尽快进入行业，用工作来锻炼提升
  其实在找工作之前，我感觉自己并没有学到多好，多扎实，但我也意识到，你其实永远不可能完全准备好，很多时候需要你硬着头皮上去。所幸自己并没有经济上的负担，所以我考虑有机会就要先进入这个行业，薪水低点也在所不惜，哪怕实习也肯干，只要有人收留，尤其是对像我这样毕业几年之后转行的人来说。

• 明确就业环境和自己的目标，不好高骛远
  放好自己的位置之后就是找相应地肯收留自己的公司了。现在很多人简历造假，我个人认为还是明确说清楚自己会什么，能做什么最好。求职是一个双向选择的过程，企业觉得你符合要求会录用你的，他们固然会希望招到熟手，但是他们也有自己的成本考量，而且很多负责技术的主管确实有心自己培养一些人。

最近就业季这张图好火哈哈哈

• 准备简历、作品、面试
  这是技术层面的准备，简历不罗嗦了。作品个人认为一定要有，可以是项目，可以是仿站，可以是自己做的其他东西，但必须是你从头到尾自己做的，全部代码，逻辑，流程都很熟悉；另外考虑到现在的竞争性，其实更推荐大家做一些个人性质的东西，不一定是个人网站，关键是你用程序，用学到的知识去实现你的一个想法，而不是一窝蜂都去仿京东首页，天猫首页。还有就是做出来的东西是有交互的，不要太死板，有条件可以放网上，没条件自己带电脑本地演示也行。面试的话，对于初级前端来说网上的面试题绝对能够应付了，甚至用来做自己知识的查漏补缺也是可以的。

• 诚实，谦逊，明码标价推销自己
  前面也提到了，清楚地展示自己，在待遇上了解所在城市的行业标准，不狮子大开口，但也不姿态低到“心甘情愿受剥削”，相信会有伯乐的。

• 广交朋友，尽可能地结识业内人士
  在公司工作的程序员绝大部分不是单打独斗，与人交往是必要的技能。关注业内大牛有助于了解行业最新动向，开拓眼界，始终让自己保持谦虚学习的心态；认识业内的朋友也会多一层获取信息的渠道，平时可以请教业务上的技术难题，有时也可以得到一些额外的招聘信息或者内推。不要认为做了程序员一门心思敲代码就行了，学会沟通，学会提问是两个非常重要的技能。闭门造车是不行的，但也要记住党国教诲，打铁还需自身硬。

初级前端的技能

这里我想总结一下自己入行半年多时间之后认为初级前端应该具备的一些技能点，一家之言，仅供参考。

• 硬技能：
  HTML（常用标签非常熟悉）, CSS（常用属性，布局排版非常熟悉）, JS（至少DOM操作层面的原生JS非常熟悉，JS语言的基本概念和特性都知道）, 设计图到页面转化非常熟练
• 工具技能：
  PS切图肯定得会，轻量的编辑器，重一点的IDE都有一款自己比较熟悉的（主要是快捷操作技巧这些，提高生产力），会用Markdown写文档
• 经验技能：
  项目经验对新手来说一般不太会有，可以从作品下手，自己有实践就有积累。另外，个人觉得没有项目经验可以自己去找网站理解，熟悉业务功能，比如一个网站常见的东西，如导航，下拉，选择，表单，选项卡，复杂一点的如轮播，分页等等这些细小的功能模块，自己都去考虑如何实现，有哪些细节问题需要注意。最后就是调式的经验了，网上也有介绍JS调试技巧的文章，踩的坑多，经验就多。
• 相关技能：
  Web开发者肯定得了解HTTP协议的相关知识，比如常见状态码，报文识别；公司肯定会有代码版本管理，有的公司会用SVN，一般是TortiseSVN这个工具，不难上手，也有的公司会自己搭gitlab或者直接用github等git仓库服务，这需要会用git，推荐<a href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/">廖雪峰的git教程</a>；然后是了解windows命令行或者mac终端的操作，熟悉常用命令。
• 软技能：
  相比硬技能，软技能的提升需要更长久的坚持训练。个人认为包括分析问题的能力，团队协作的能力，自我管理的能力，还有用心和认真的态度。这一点不敢多说，提出来也是提醒自己时刻保持要提升这些能力的意识。

工作以后的学习

在工作和业务中学习，确实是最快的成长方式，总结一下自去年入行到现在学到的东西：Sass预处理来组织CSS代码；jQuery从陌生到熟练，再到可以编写插件；用require.js和sea.js做模块化；使用gulp积累一些粗浅的工程化思考，并且搭建前后分离开发前端构建环境；用selenium-webdriver写一些前端行为验收测试；node.js算是入门；PHP的可以用yii做数据库增删查改，完成不复杂接口....

这些东西有的本来就在计划之列，有的是工作需要进而推动去学习，看上去很多，其实感觉自己也只是停留在应用的层面，并没有学得多么深入和扎实。如果我一直是在自学，未必会掌握这么多东西，却也可以能把基础打得更好。个中优劣，难以区分，但我时刻都在提醒自己，就像是练武，工作和业务是实战，应对这些场景的就是招式套路，我们固然要丰富自己的实战经验，然而更重要的还是得想办法提升自己的内力。

关于前端学习和编程学习的思考

• 自学 or 培训
  这些年程序员培训一直都很火爆，作为跨界入行的新人，虽然自己没有参与任何的培训，但也感谢这些机构推出的一些免费视频，确实能解决自己入门学习的些许疑问。很多朋友都在问要不要花钱去培训，个人认为培训其实就是花钱买时间，让原本自学需要时间去探索，去理解消化的东西，由老师直接教给你，遇到良心的老师能学到一些私货就更好了。培训本身并不能保证什么，还是要你去学，去用，才能掌握，指望靠交钱，靠培训机构的保证，最后找到工作，在这个行业立足，只能说Too Young。也有的同学说自己自制力不行，得有一个学习环境，有一个机构或者学校逼着自己学习，对于这样的情况，我想说愿意花钱培训就去，但从问题来看这是很明显的治标不治本啊。最后，无论培训也好，自学也罢，完成初期阶段的学习，只是成为一个低级码农而已，和工厂流水线的工人没有本质的区别，之后的发展还是得回归到自学的道路上来，还没见过哪里有中高级工程师培训、架构师培训、技术总监培训的。

• 兴趣和不断练习
  编程绝对是需要不断练习的，和钢琴，篮球这些都一样，包括枯燥的练习。就拿前端来说，接触到有的人很厌烦调样式，我自己有时也会调到心浮气躁，甚至有时做一些重复性质的工作也觉得没意思，这时会提醒自己一方面是熟练基础技能，熟能生巧；另一方面也会问自己有没有办法可以避免重复低效的事情，作为程序员的我们是否可以用代码让偷懒更美好，还是走沟通途径调整低效的流程。不断练习的另一个好处就是代码量的积累和投入时间的积累，量变到一定程度一定会产生质变，自己感觉工作之后的进步远远比前期自学快得多，我想这和每天上班几百行代码的积累也是息息相关的。

编程同样也是需要兴趣的。小则看到一段更好的代码，看到一个没见过的实现方法；大到这个领域内的各种新技术，新工具，新玩意，特别是前端还可以做出那么多酷炫的效果，光是想想都觉得兴奋不已，值得自己花时间精力去了解，学习，实现。

• 学会抓大放小
  这是个人自学时的一点经验。学习的时候肯定会遇到很多问题，绝大多数问题善用搜索引擎能帮我们解决掉。经过自己思考，搜索，还是不能得出答案，我们再整理清楚思路和代码，到相关的社区去提问，请求前辈解答疑惑，这是非常正确的提问姿势。我的经验则是针对问题的另一个层面来说的。学马哲的时候我们经常在背，矛盾有主要矛盾和次要矛盾，要抓主要矛盾。放在自学，我们也要学会分清主要问题和次要问题，学会抓大放小。当遇到想破头也想不明白的问题时，不妨站在宏观的立场上来考虑这个问题对近期的学习影响有多大，是不是此刻必须弄明白的。还有的问题我们本身也要判断，它是属于初级阶段的疑问，还是高级深入的疑问，不属于当前学习阶段的问题就记录下来，以后再解决也不迟，执着于当前弄清楚，不能说错，但是花的时间成本不值得，况且也未必说就能真的清楚明白了。我一开始自学的时候开了一个word文件，记录每天学了什么，遇到了哪些问题，踩了哪些坑，想不明白的问题也不纠结，就记在上面，因为我明白，随着学习的深入，这些问题迟早会有答案，会得到解决，而且越是重复遇到的问题越会提早被解决掉。记下来表明自己并非对这些问题视而不见，犯的愚蠢的错误也记下来不断提醒自己不要再犯。这个过程一直从2月坚持到了6月，现在回过头来看当时记录的东西，原来自己不知不觉已经走了那么远了。

• 明确需求
  在写一段代码，做一个程序之前，明确需求是非常重要的一件事。我们要写一个程序，在动手之前我们肯定得明白这个程序是要干什么，要实现哪些功能，但其实在这之前我们更应该首先明确为什么要写这个程序，它的意义和价值何在，是不是必须写它？这个问题决定了我们是要认真完成这个程序还是说通过取巧的手段简单实现，还是干脆砍掉不做。在此基础上思考要实现哪些东西，如何去实现的问题才更有针对性，也更有价值。

• 抽象，简化问题，多写demo
  编程其实是把一个个复杂的问题抽象简化出来。一个给定的需求可以有N多种方案去实现，然后通过抽象，封装，让它变得可扩展，可复用。这是一个从复杂到简单再到复杂的过程。个人在实现一些较为复杂的功能的时候，会将它拆解开来，通过小demo一步步实现想要的效果，然后再不断丰富代码，最后再从整体上审视，或许会有更好的方案。

以上是我在过去一年时间里学习前端到从事前端开发工作的经历和思考，正如开头所说，分享出来如果对很多想做前端的朋友能提供少许参考，也是一件令人愉悦的事情。就个人而言，2017年给自己定下的要求是静心学习，抵制浮夸，好好沉淀技术。毕竟前端日新月异，而我所学不过还在追赶前人的脚步。