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

原文地址：github.com/ruizhengyun… 做为前端新人，咱们常以菜鸟自居，主要是专业程度不高，还有就是自谦。其实，做为菜鸟的咱们也想撕掉这类标签，咱们也努力，可仍是学很差前端，是真的不适合作这行仍是方法不对，没人告诉咱们？若是你以为本身还处在菜鸟阶段的迷茫区，那能够看看本篇文章，但愿看完以后你能获得想要的。若是你要阐述你的想法，请在评论区留下你的文字。

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

个人逻辑是：现实咱们是改变不了了，咱们能掌握的是改变本身的学习方法和思惟逻辑。咱们常说万变不离其宗，对于前端来讲，这个宗个人理解就是 html + css + js。

• 建体系。将现有知识作个体系架构，而后将市场上前端技术点填入到这个体系架构中，无论新出现的知识是怎样的，都在这个体系架构内，无非是对架构的补充或完善（新增和修改），咱们要作的不就不断完善这个体系架构，体系架构可参考《8年前端知识点沉淀》；
• 深刻。在每一个分类中择其一，而后深耕；
• 浅出。用本身的语言将深耕的知识点输出出来，能够文字，能够声音（分享）；

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

学习方法

代码管理

1.在 github 建个仓库，好比 html-note，只在 master 主分支上开发便可，完成一类知识点打个标签

git tag -a 0.1.0 -m "这一类知识的说明"
git push origin --tags
复制代码

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

.
├─ package.json      # 依赖包
├─ SUMMARY.md        # 文档大纲
├─ book.json         # 小书配置信息
├─ assets/           # 静态资源，主要是图片
├─ notes/            # 文档中示例存放

复制代码

前端基础

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% 就能够了，主要有个先入为主的概念，之后碰到这类问题，知道怎么去描述问题，培养独立解决问题的能力。

最后，祝你好运。有什么补充，请按文章看头说的方法给出你的想法。前端中级，我会尽快写完，不要离开哦。