前台初级新人，如何撕去菜鸟标签

前台路上我们都会碰到这类情景：现有技术体系已经很庞大了，还没学个遍，新技术又频繁涌出，发现有太多太多东西要学，隐隐有点学不动的趋势。不知不觉就在这条路上迷茫了，发现自己原来那么渺小。正所谓登高极目，知天地之大；置己苍茫，知寸身之微。

我的逻辑是：现实我们是改变不了了，我们能掌握的是改变自己的学习方法和思维逻辑。我们常说万变不离其宗，对于前台来说，这个宗我的了解就是 html + css + js。

建体系。将现有知识做个体系架构，而后将市场上前台技术点填入到这个体系架构中，不论新出现的知识是怎么的，都在这个体系架构内，无非是对架构的补充或者完善（新添加和修改），我们要做的不就不断完善这个体系架构，体系架构可参考《8年前台知识点沉淀》；

深入。在每个分类中择其一，而后深耕；

浅出。用自己的语言将深耕的知识点输出出来，可以文字，可以声音（分享）；

不论现在处于初级、中级、高级、资深还是大前台阶段，学习的通用方法大抵如此，当然小异部分我会在各个阶段单独指出。以上纯属个人观点，如有补充和指正可按文章开头方法在评论区评论（即 github 上登录后评论）。

学习方法

代码管理

2.利用 gitbook 库来打包成小书，而后利用 github 自带功能生成在线的，而后自己没事的时候，看看自己学的东西，而后再查缺补漏，不断完善； 3.学习文档用 markdown 语法来写，养成写文档的好习惯，对于为什么写文档和项目开发中前台需要写哪些文档，我会在后续的文章中阐述，这里不开展； 4.编码工具可用 Vscode，整个目录可参考

前台基础

HTML5 + CSS2.1

这部分建议在 w3school 在线教程或者MDN 上学习，边学边练，学习过程中请打开 chrome 浏览器调试工具，辅助学习和调试。

ECMAScript

这部分学的内容会很多，假如没有编程语言的基础的话，会吃些力。建议先在 w3school 在线教程或者MDN 上学习。

犀牛书《javascript语言精粹》或者红宝书《Javascript 高级程序设计》，前期看其中的一本就好，这个时候你可以建仓库 ecmascript-note 了;

数据结构和算法

实践开发中，和后台提供的接口交互以及前台自身的逻辑解决，而后将数据渲染到页面，往往离不开数据结构和算法这块的知识。

前台初级

CSS

有了 CSS 基础知识，还需要继续深入，理解

css3 规范；

预编译语言：less 或者 sass；

只有经历这个过程，你才会发现 less 的美。看完这块，你的理解选择器、盒模型、弹性布局、媒体查询等概念。

ECMAScript

Zepto.js 或者 jQuery.js。完成少量简单项目，熟习 API；

推荐小黄书《你不知道的 JS》上中下三册；

ES5 知识点掌握，能区分 ES5 与 ES3 常用的少量知识点；

ES6 常用的少量知识点，暂时不推荐阮一峰老师的 ES6 教程，太多了，怕你会迷茫和陷入无聊区，找少量总结小书（少量常用的 ES6 语法总结）看看，一直想写，没时间；

常用概念（面试也会碰到）弄清楚。比方变量作用域、传递方式、执行上下文、闭包、apply/call/bind、this 指向等；

网络编程。Ajax、fetch、websocket、cors、jsonp、formData等知识。

浏览器

常用跨域；

存储机制；

性能

常用性能优化；

安全

理解 XSS 和 CSRF 攻击；

正则表达式

基础知识，视频或者少量文档，此刻不建议看官方文档；

常用正则表达式会写；

工程化

npm 常用命令和简单应用；

git 常用命令和简单应用；

webpack 能搭建一个应用；

React.js

对于面前前台三大框架，大家都不陌生了。建议择其一，而后理解入门知识。我安利的是 React.js，个人倾向，无外乎其余。主要学习中英文官网入门知识。结合 create-react-app 脚手架。

Node.js

基础知识；

express 或者 koa2 简单应用；

说明：上面学习内容不求学完都记得，能掌握 70%-80% 即可以了，主要有个先入为主的概念，以后碰到这类问题，知道怎样去形容问题，培养独立处理问题的能力。

最后，祝你好运。有什么补充，请按文章看头说的方法给出你的想法。

我目前是在职前台开发，假如你现在也想学习前台开发技术，在入门学习前台的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，你都可以申请加入我的前台学习交流裙：前面：603 中间：985 最后：993。里面聚集了少量正在自学前台的初学者裙文件里面也有我做前台技术这段时间整理的少量前台学习手册，前台面试题，前台开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。