不掉队的前端知识成长体系

青旅半醒 2022-05-28 02:44 159阅读 0赞

前端发展日新月异，好的框架技术层出不穷，想成为一名优秀的前端开发工程师，那么一个完备的知识体系是必要的，本文结合他人的意见与自己的思考总结了近些年(写于2018/03)前端几乎必备的知识栈，如有遗漏/错误欢迎补充或提建议：

1.  [ES6][]：现今前端从业者学习ES6的必要性不言而喻，ES6借鉴很多其他的语言或框架的优秀思想，将一些内容直接集成到了原生语言中，借助这些新特性可以完全很多我们用。
2.  [Vue][]：前端三剑客之后出现前端三大将，Vue在国内的市场持续上升，其精简的语法和近乎同步的中文文档大大降低了高级框架的学习门槛，学的人多公司招的多社区活跃形成一个良性循环，所以勇敢的进击Vue稳赚不赔。附Vue全家桶：[vue-router][]，[vuex][]， [vue-resource][][vue-devtools][]
3.  [React][]：说了Vue那自然免不了国内最大竞争对手React，其卓越的思想强大的团队蓬勃的生态吸引着越来越多的从业者“入坑“，配合蚂蚁金服的[Ant-Design][]，可以极为快速的搭建一个后台管理平台。附React小全家桶：[redux][]、[react-router][]、[react-router-redux][]
4.  [NodeJS][]：随着技术的演进迭代，node前当开发环境后任中间层，还能直接当小项目的后台“取代“Java，实乃神器，前端搭建界面写组件交互之余多加了解node，可以充实自己的知识体系，结合后台思想编写更为优秀的前端。
5.  [Webpack][]：提及webpack总让人联想到类似的[grunt][]/[gulp][]，后二者是构建工具，而webpack是模块打包工具，在项目中充当的角色是不同的，不过随着webpack的日趋健壮，各式各样的loader/plugin使得很多场景下使用webpack就能完成业务需求，开发时可根据实际需求进行选择。
6.  [Less][]/[Sass][]/[stylus][]：一直写原生CSS的时候没太多感觉，就有层级嵌套书写累赘、文件很长不够灵活，兼容性问题处理麻烦······后来逐渐接触来sass和less等CSS预处理器，其提供了众多新语法使得我们能更轻便的编写更强大的样式文件，通过loader编译成原生CSS后也不会出现兼容性问题，极大加快了开发效率。
7.  数据结构与基础算法：现如今职能划分越来越细，前端在数据上所需要做的处理越来越少，但这不意味着我们就要做一个简单的数据展现师，而且json本身就是一种类Tree的数据结构，数据复杂度高时如果凭借自己得到想要的部分就需要花点功夫了，数据结构中基本的树深度优先遍历广度优先遍历、算法中几大排序算法js实现得跟着尝试一下，不求把代码记住，思考的过程最让人受益，好的思想可以让你用更优异的代码使得同等功能更为高效。  
    ······  
    最后说说：语言追根只是一种写代码的工具，和我们打字组成一段话是类似的，框架使得我们说话更快更简单。新技术的迭代是技术发展必然趋势，尤其在还是成长期的前端领域，想要赶上每一种新技术显然是不现实的，但又不想被历史抛弃怎么办？以我个人的观点是回到最初说话的形态，熟悉原生语言的使用方式和特性等，之后一步步的往上层走，框架的出现必然是为了解决某写原生不容易解决的问题，还是那句话：知道框架为什么出现和框架如何实现远比知道框架怎么使用对成长的帮助要大得多，趁还年轻，多了解原理，相信基础知识根基稳固到了一定程度时想学会用一个新框架绝对不是难事，当然，我相信那时你肯定会自己造轮子装跑车了。

献上一张知乎盗来的图：![这里写图片描述][70]

[ES6]: http://es6.ruanyifeng.com/%29
[Vue]: https://cn.vuejs.org/v2/guide/
[vue-router]: http://router.vuejs.org
[vuex]: http://vuex.vuejs.org
[vue-resource]: https://github.com/pagekit/vue-resource
[vue-devtools]: https://github.com/vuejs/vue-devtools
[React]: https://reactjs.org/docs/hello-world.html
[Ant-Design]: https://ant.design/docs/react/introduce-cn
[redux]: https://redux.js.org/
[react-router]: https://www.npmjs.com/package/react-router
[react-router-redux]: https://www.npmjs.com/package/react-router-redux
[NodeJS]: https://nodejs.org/en/docs/
[Webpack]: https://webpack.js.org/concepts/
[grunt]: https://gruntjs.com/getting-started
[gulp]: https://gulpjs.com/
[Less]: http://lesscss.org/usage/
[Sass]: http://sass-lang.com/documentation/file.SASS_REFERENCE.html
[stylus]: http://stylus-lang.com/
[70]: /images/20220528/617acef9292a4531bd00e254336d403e.png