资讯专栏INFORMATION COLUMN

一个前端菜鸟的成长历程

SHERlocked93 / 2260人阅读

摘要:张鑫旭老师的文章写的很棒,解决了我的许多困惑。所以,基础知识的牢固就显得尤为重要是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑,钻研的魔法,可见其中技术细节有多复杂。

  从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉及前端的知识,当时对自己的定位很迷茫,不知道毕业之后何去何从。所以盲目的报了很多学习班,还考了思科认证的网络工程师,虽然没走网络方向,但是这一块的知识在工作后确实对我的帮助很大,毕竟网络是基础。

  那时候,在我的认知里,前端只是写写页面,做做交互,切切图。那时候,我还没听说过什么脚手架,什么构建工具,甚至没听说过ES6。觉得jQuery真的是救世主一样的存在。

  第一天进入公司,心情是完全不一样的,尽管那时候没有小猪佩奇的手表,但也深感自己是个社会人了。

  入职第一天,我被要求先搭开发环境,给了我一个Excel表格,是一个长长的清单,一个一个安装,然后拉取代码,还要执行一大堆的命令,这都是什么鬼东西!完全不知道自己在干什么。就记得一直报错,各种看不懂!不管怎么说,花了整整一天,总算是搞定了!就这样,凭着崴脚的基础就上手了。刚开始看不懂别人写的代码,全凭自己天马行空的想法去做,一行行流水账似的代码写的我开始怀疑人生。

  直到有一天,leader看了我写的一坨代码之后,点了点头,然后选中,删除。紧接着,画了一个下划线,又点了个小数点,后面还跟了个单词,寥寥几句,代码居然还能正常跑通!我勒个去!代码原来还能这么写!从此开始,我认识了Underscorelodash。在没有使用ES6的时候,这个库真的是万能工具箱,操作起数据来得心应手,只要把数据结构整明白,剩下的都是一句话的事。那时候,真的是喜欢上了操作数据的过程。但是目前看来,babel的引入,代码里开始支持ES6、7的语法,很多Underscore中的高频函数都被原生实现了,为了缩减代码体积,这样的类库在逐渐淡出人们的视线。说道这里,必须要提一提阮一峰老师的《ES6入门教程》了,不仅详细介绍了语法内容,还给出了大量的使用案例和技巧,可以说是一本经典之作了。

  入职不久后,,我接触到了第一个前端框架Angular1.x,基于yeoman脚手架,整合了grunt,那时候才知道了前端还有构建这个概念。相较于grunt晦涩难懂的配置文件,gulp的管道思想似乎更容易让人理解。使用了框架,数据更新后页面自己就变了,也不用再去操作dom。在grunt和各种插件的帮助下,代码还可以边修改,边自动刷新,哇!真的是高效!又一次刷新了我对前端的认识。然后开始恶补框架的知识,各种指令,各种service,让开发过程越来越简单。我们不再需要关注过多诸如事件委托之类的优化,框架都会自己做掉,于是有更多的时间放在了业务本身。Angular1.x是不支持服务端渲染的,也就是说,它对seo不友好,所以当时我们使用jade来渲染需要服务端直出的页面,依稀记得严格的语法缩进搞得我痛不欲生。

  Sassless等的使用,让css变得更强大,配合postcss的使用,我不再关注不同浏览器的差异。在重度依赖bootstrap的时候,栅格布局的出场率总是那么高。后来,我认识了flex,生活仿佛都变得更美好了!

  之后,我们开始使用UI组件来提升效率。UI组件库可以说是遍地开花。在PC端,Element UIAnt Design是比较主流的。实际使用的时候,还是要结合自身业务和使用场景,例如是否需要支持ssr。后来我也使用过一些移动端和小程序的组件库,总结一下,一定要使用长期维护的,issue更新较快的,不然遇到坑会很烦恼,别问我是怎么知道的。

    再后来,我逐渐能胜任更多的任务,开始参与数据可视化这块的开发,于是,我又见到了echartsd3.js。说起d3.js,真的是让我爱恨交加。为了画出我想要的图形,我又找回了已经还给老师的数学知识,每天就像在做数学卷子,似乎又回到了那个高中的时代!还把svgcanvas的基本概念也撸了一遍。张鑫旭老师的svg文章写的很棒,解决了我的许多困惑。

  16年小程序首发的时候,为了探索流量红利,我们也想要抢占这个首发的优势,那时候,我辅助开发小程序,文档看了好几遍,还是理不清小程序的思想。而且由于首发之后,维护的比较少,所以也就再没过多涉猎。今年,小程序突然大规模爆发,我又开始了重新整理小程序的内容,时隔近一年,再次打开文档,原先看了一周都不明白的文档,竟然可以两小时上手了,而且自己又独立开发了一个完整的小程序,或许这就是成长。也有很多小程序的框架涌现出来,比如官方的wepy,美团的mpvue。类vue的思想让开发者的学习成本再次降低。对于最近炒的也挺火的pwa和快应用,个人建议需要用的时候补充即可,没有业务需求自己去实践成长速度是比较慢的,而且容易遗忘。

  17年是Vue辉煌的一年,这一年来,它的生态系统如雨后春笋般的发展。webpack也似乎成了前端er的标配。Vuex借助Flux的思想而设计。它改变了我对状态数据管理的认识。在庞大的应用面前,状态管理变得让人头疼。Vuex集中化的管理可谓是一剂良药!为了支持SEO,我在项目中使用了Nuxt实现了前后端同构。第一次听说同构这个概念还是在17年的全国前端开发者大会上,那时候感觉离自己很遥远。现在回忆,当时会议分享的很多内容都在一年内飞速的发展并逐渐应用起来。所以,多参加一些交流分享会还是很有必要的。

  后来尝试自己去做一些东西的时候,开始涉及到服务端和运维相关的知识,一点一滴去优化每一个环节。逐渐去提升性能。从页面上的小图标开始。不再使用大量的png小图片,而是使用iconfont,减少http请求,而且矢量可以保障显示的清晰度;代码打包压缩合并,自动上传到对象存储,减小服务器压力,并使用cdn进行加速;使用gzip压缩代码减少网络传输量;nginx做反向代理和缓存;pm2守护node进程,保证服务的可用性;使用docker镜像部署服务简化部署流程而且避免环境差异导致的问题等等。总之每个环节都是一门学问。

  个人感觉这一年多来,除了学会了不少新东西,更重要的是学会了如何去学习新知识,如何去发现未知的领域,如何去解决问题。刚开始,遇到问题直接百度或者谷歌关键词,或者stackoverflow找一把,选出高票回答,总能有效的解决问题。但是,很多时候都不知道具体的原因。

  在同事的引导下,我逐渐开始重视文档这个东西。最初我认为他只是写给初学者看的,枯燥乏味。但事实上,文档写明了需要的大部分东西。特别是第三方插件的文档,如果遇上问题解决不了,那就把文档过一遍。还没有解决?那么,再细致地看一遍!还是不行?打开github,去插件的issue里面搜一搜,如果还是不行,再去借助搜索引擎等的帮助。如果源码不复杂,就看看源码怎么写的吧!这是我总结的比较快速定位和解决问题的方式,屡试不爽。在使用现成的插件的时候,尝试猜测代码的实现原理,有条件可以阅读源码,这样会有利于规避错误的的使用方式,也更容易提升自己。所谓错误的使用方式,我这么解释一下吧,如果你发现你的代码变得复杂而又难看,像流水账,那么尝试去换个角度实现它吧,要始终相信代码里有魔法的存在!

  前端这个领域的发展日新月异,不必要精通每个前端框架,而是要理解框架的设计思想,理解他们的差异。而且无论现代前端技术再怎么玩,终归还是要回归到htmlcssjavascript上来。所以,基础知识的牢固就显得尤为重要!

  css是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来!张鑫旭老师十年磨一剑,钻研css的魔法,可见其中技术细节有多复杂。当然,对于大部分开发者来说,可能没那么多时间与精力来投做到这样,但是大部分的基础概念还是要烂熟于心的。javascript嘛,业界经典的两本书(红宝书、犀牛书)选一本啃好了(惭愧惭愧,我还没啃完)!但是对于入门者来说,《head first》系列的可能更适合,一上来就读经典,难免会望而却步。入门的时候还读过《JavaScript DOM编程艺术》,也推荐给初学者。

  设计模式这个东西不算神秘,如果你是一个有追求的人,很可能不知不觉已经在代码里面使用到了,只不过你不认识他而已。比起后端,前端对于设计模式的使用不算太多。多了解一下,可以让你更容易理解大神的代码,而且,自己写的代码也会越来越漂亮。这里安利一把曾探老师写的《JavaScript设计模式与开发实践》。

  数据结构就不多说了,还是推荐一本书吧,《学习javascript数据结构与算法》,这本书很适合入门者,进阶的话,大家给我推荐推荐啦。

  http也是比较重要的一门知识,比如http缓存,缓存的重要性我就不多讲了。之前读过《图解http》这本书,读漫画一样的就下来了,通俗易懂。

  突然间意识到,文章里安利了太多的书籍,有点打广告的嫌疑。各位看官莫见怪,这里列出的都是本人读过而且觉得有帮助的,大家选择性采纳。声明一下,我真不是卖书的!

  我有个习惯,就是每隔一段时间就回去看一波招聘的JD和面经,并不是为了跳槽,而是关注一下最近大家都需要什么样的人才,需要补充自己哪方面的知识。知己知彼,方能百战百胜!平日里还喜欢逛技术论坛,看看大家都在玩啥黑科技。有什么技术沙龙偶尔也去参加一下,得时刻关注技术的发展,学习大厂的解决方案。

  最后感谢那些一路走来给予我帮助的人!

  好了,今天的分享就到这里,欲知更多技术细节,且听下回分解!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107963.html

相关文章

  • 一个前端菜鸟成长历程

    摘要:张鑫旭老师的文章写的很棒,解决了我的许多困惑。所以,基础知识的牢固就显得尤为重要是个不怎么听话的孩子,总是会搞出一些奇奇怪怪的事情来张鑫旭老师十年磨一剑,钻研的魔法,可见其中技术细节有多复杂。   从实习算起,到现在工作了也有一年半的时间了,在这期间,深深感受到了前端领域的飞速发展,在这里记录一下自己的成长历程,算是对知识的一个梳理,也希望帮助到刚入行的同学们。说来惭愧,大学里并没有涉...

    lieeps 评论0 收藏0
  • 菜鸟前端101历程 #001

    摘要:捣鼓多维度模糊查询及结果处理封装上述功能新技能声明格式中与中区别及其封装官方文档简易优劣区分同一页面无法多次使用的误区待拓展架构 捣鼓 多维度模糊查询及结果处理(Fuse plugin + perfect-scrollbar plugin) jQuery plugin 封装上述功能 新技能GET CSS position box-sizing Media...

    fai1017 评论0 收藏0
  • Android 研发工程师图书一览(2016年版)

    摘要:番茄工作法简约而不简单,本书亦然。在番茄工作法一个个短短的分钟内,你收获的不仅仅是效率,还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的,不开放全文转载许可,谢谢! showImg(/img/remote/1460000007319503?w=728&h=792); 广而告之时间:我的新书《Android 高...

    MadPecker 评论0 收藏0
  • Android 研发工程师图书一览(2016年版)

    摘要:番茄工作法简约而不简单,本书亦然。在番茄工作法一个个短短的分钟内,你收获的不仅仅是效率,还会有意想不到的成就感。 @author ASCE1885的 Github 简书 微博 CSDN 知乎本文由于潜在的商业目的,不开放全文转载许可,谢谢! showImg(https://segmentfault.com/img/remote/1460000007319503?w=728&h=792...

    NoraXie 评论0 收藏0
  • 【总结】我们2018年关键词-坚持学习

    摘要:因为涉及业务敏感话题,本文只记录我们学习的历程。我由衷的感谢团队的小伙伴们,感谢你们的坚韧不拔,感谢你们的持续成长。这个变化只是在每天的坚持和刻意练习中发生的,是那么的神奇。 因为涉及业务敏感话题,本文只记录我们学习的历程。 关于坚持   从2016年起,我们团队坚持每天早晨8:50-10:30的100分钟早晨讨论,到现在已经两年了,期间没有中断过。我由衷的感谢团队的小伙伴们,感谢你们...

    Imfan 评论0 收藏0

发表评论

0条评论

SHERlocked93

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<