目录
- 前言
- 概念
- js基础知识
- Document基础知识
- 网络
- CSS
前言
常常有人问我，如何成为一名初、中、高级前端。并且发现我身边的大多数人知识面并不是很成体系，总会有各种知识漏洞。如果你还不清楚如何才算初级工程师，自己的知识体系有没有漏洞，可以参考这篇我整理的知识点及相应教程。
如果你的知识体系存在漏洞，那么所学的知识就很难融会贯通。初中高级是有条主线的。不要走歪路。
ps：红色需精通，绿色了解
一、概念
什么是javascript ： zh.javascript.info/intro
开发工具进阶：插件 及 Emmet语法 www.jianshu.com/p/182a67c32…
二、js基础知识
1、数据
变量 zh.javascript.info/variables
数字类型 zh.javascript.info/number
类型转换 zh.javascript.info/type-conver…
类型检测 zh.javascript.info/instanceof
2、运算
值的比较 zh.javascript.info/comparison
运算符 zh.javascript.info/operators
条件运算符 zh.javascript.info/ifelse
逻辑运算符 zh.javascript.info/logical-ope…
Switch zh.javascript.info/switch
ES5循环 zh.javascript.info/while-for
代码结构 zh.javascript.info/structure
3、对象
对象原始值转换 zh.javascript.info/object-topr…
构造函数和操作符 zh.javascript.info/constructor…
对象的键、值、项 zh.javascript.info/keys-values…
Object.prototype developer.mozilla.org/zh-CN/docs/…
4、数组
数组方法 zh.javascript.info/array-metho…
解构赋值 zh.javascript.info/destructuri…
Array.prototype developer.mozilla.org/zh-CN/docs/…
5、JSON
6、Date
时间和日期 zh.javascript.info/date
7、functions
函数简介 zh.javascript.info/function-ba…
函数对象 zh.javascript.info/function-ob…
new Function www.yuque.com/zhangbao/ja…
递归和堆栈 zh.javascript.info/recursion
this原理 www.ruanyifeng.com/blog/2018/0…
箭头函数 www.yuque.com/zhangbao/ja…
调度 zh.javascript.info/settimeout-…
柯里化 www.yuque.com/zhangbao/ja…
8、原型
原型简介 zh.javascript.info/prototype-m…
原生的原型 zh.javascript.info/native-prot…
9、继承
ES3、5、6中的继承 juejin.cn/post/684490…
10、Class
class基本语法 zh.javascript.info/class
类继承 zh.javascript.info/class-inher…
静态属性和静态方法 zh.javascript.info/static-prop…
11、错误处理
try catch zh.javascript.info/try-catch
12、Promise，async/await
回调 zh.javascript.info/callbacks
Promise zh.javascript.info/promise-bas…
Promise链 zh.javascript.info/promise-cha…
Promise错误处理 zh.javascript.info/promise-err…
PromiseAPI zh.javascript.info/promise-api
Async/await juejin.cn/post/684490…
11、模块
模块简介 zh.javascript.info/modules-int…
导入导出 zh.javascript.info/import-expo…
动态导入 zh.javascript.info/modules-dyn…
12、正则
正则用法 zh.javascript.info/localstorag…
三、Document基础知识
1、DOM
浏览器环境 zh.javascript.info/browser-env…
DOM树 zh.javascript.info/dom-nodes
DOM节点 zh.javascript.info/dom-navigat…
DOM获取 zh.javascript.info/searching-e…
DOM属性 zh.javascript.info/basic-dom-n…
DOM方法 zh.javascript.info/modifying-d…
DOM样式 zh.javascript.info/styles-and-…
元素尺寸与滚动 zh.javascript.info/size-and-sc…
zh.javascript.info/size-and-sc…
2、事件
浏览器事件 zh.javascript.info/introductio…
移动端事件 juejin.cn/post/684490…
监听事件 www.runoob.com/jsref/met-e…
事件冒泡 segmentfault.com/a/119000000…
事件委托 zh.javascript.info/event-deleg…
默认动作 zh.javascript.info/default-bro…
鼠标事件 zh.javascript.info/mouse-event…
移动事件 zh.javascript.info/mousemove-m…
拖放事件 zh.javascript.info/mouse-drag-…
键盘事件 zh.javascript.info/keyboard-ev…
滚动事件 zh.javascript.info/onscroll
防抖与节流 juejin.cn/post/684490… （第三期不用看）
四、网络
1、http
互联网模型 www.ruanyifeng.com/blog/2012/0…
互联网协议 www.ruanyifeng.com/blog/2016/0…
2、Storing data in the browser
Cookie zh.javascript.info/cookie
LocalStorage、SessionStorage zh.javascript.info/localstorag…
3、request
XMLHttpRequest segmentfault.com/a/119000000…
Axios 全攻略 ykloveyxk.github.io/2017/02/25/…
Axios官方文档 www.axios-js.com/zh-cn/docs/
五、CSS
1、基础css
css基础教程 www.w3cschool.cn/css/css-tut…
css rgba www.cnblogs.com/xiao-pang/p…
css 量度单位 blog.csdn.net/geekmubai/a…
2、布局
布局方式概念 www.jianshu.com/p/d9718a5be…
布局方式实践 segmentfault.com/a/119000001…
定位布局 www.cnblogs.com/Ry-yuan/p/6…
flex布局 www.ruanyifeng.com/blog/2015/0…
媒体查询 developer.mozilla.org/zh-CN/docs/…
3、css选择器
选择器 www.w3school.com.cn/cssref/css_…
伪类、伪元素 segmentfault.com/a/119000001…
4、动画
Transform www.w3school.com.cn/cssref/pr_t…
Transition juejin.cn/post/684490…
Animation www.php.cn/css-tutoria…
5、css变量
css变量 www.ruanyifeng.com/blog/2017/0…
END
这篇知识点干货是我在映客用于雏鹰培养计划用的。相应考题我就先不发出来了。如果someone很有需要，一样评论留言。当然，你也可以用于自己公司内部培养计划用，后续中高级知识体系，不久就会发布出来。
我总结的教程都是一些通俗易懂筛选出来的。方便大家学习，并不是官方晦涩难懂的文档。
下一篇在这里
