前端-基础知识体系（初级-上）

目录

• 前言
• 概念
• js基础知识
• Document基础知识
• 网络
• CSS

前言

经常有人问我，如何成为一名初、中、高级前端。而且发现我身边的大多数人知识面并非很成体系，总会有各类知识漏洞。若是你还不清楚如何才算初级工程师，本身的知识体系有没有漏洞，能够参考这篇我整理的知识点及相应教程。

若是你的知识体系存在漏洞，那么所学的知识就很难融会贯通。初中高级是有条主线的。不要走歪路。

1、概念

什么是javascript ： zh.javascript.info/intro

开发工具进阶：插件 及 Emmet语法 www.jianshu.com/p/182a67c32…

2、js基础知识

一、数据

字符串 zh.javascript.info/string

变量 zh.javascript.info/variables

数据类型 zh.javascript.info/types

数字类型 zh.javascript.info/number

类型转换 zh.javascript.info/type-conver…

类型检测 zh.javascript.info/instanceof

二、运算

值的比较 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

三、对象

对象 zh.javascript.info/object

对象原始值转换 zh.javascript.info/object-topr…

构造函数和操做符 zh.javascript.info/constructor…

对象的键、值、项 zh.javascript.info/keys-values…

Object.prototype developer.mozilla.org/zh-CN/docs/…

四、数组

数组 zh.javascript.info/array

数组方法 zh.javascript.info/array-metho…

解构赋值 zh.javascript.info/destructuri…

Array.prototype developer.mozilla.org/zh-CN/docs/…

五、JSON

JSON zh.javascript.info/json

六、Date

时间和日期 zh.javascript.info/date

七、functions

函数简介 zh.javascript.info/function-ba…

函数对象 zh.javascript.info/function-ob…

函数表达式 zh.javascript.info/function-ex…

递归和堆栈 zh.javascript.info/recursion

this原理 www.ruanyifeng.com/blog/2018/0…

函数绑定 zh.javascript.info/bind

声明提高 zh.javascript.info/var

Rest与Spread zh.javascript.info/rest-parame…

闭包 zh.javascript.info/closure

调度 zh.javascript.info/settimeout-…

柯里化 zh.javascript.info/currying-pa…

八、原型

原型简介 zh.javascript.info/prototype-m…

原生的原型 zh.javascript.info/native-prot…

九、继承

继承 juejin.im/post/5d7f3b…

ES三、五、6中的继承 juejin.im/post/5a4852…

十、Class

class基本语法 zh.javascript.info/class

类继承 zh.javascript.info/class-inher…

静态属性和静态方法 zh.javascript.info/static-prop…

十一、错误处理

try catch zh.javascript.info/try-catch

十二、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.im/post/5a9516…

十一、模块

模块简介 zh.javascript.info/modules-int…

导入导出 zh.javascript.info/import-expo…

动态导入 zh.javascript.info/modules-dyn…

十二、正则

正则用法 zh.javascript.info/localstorag…

3、Document基础知识

一、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…

二、事件

浏览器事件 zh.javascript.info/introductio…

移动端事件 juejin.im/post/59ede9…

监听事件 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.im/post/5b8de8… （第三期不用看）

4、网络

一、http

互联网模型 www.ruanyifeng.com/blog/2012/0…

互联网协议 www.ruanyifeng.com/blog/2016/0…

二、Storing data in the browser

Cookie zh.javascript.info/cookie

LocalStorage、SessionStorage zh.javascript.info/localstorag…

三、request

XMLHttpRequest segmentfault.com/a/119000000…

Axios 全攻略 ykloveyxk.github.io/2017/02/25/…

Axios官方文档 www.axios-js.com/zh-cn/docs/

5、CSS

一、基础css

css基础教程 www.w3cschool.cn/css/css-tut…

css rgba www.cnblogs.com/xiao-pang/p…

css 量度单位 blog.csdn.net/geekmubai/a…

二、布局

布局方式概念 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/…

三、css选择器

选择器 www.w3school.com.cn/cssref/css_…

伪类、伪元素 segmentfault.com/a/119000001…

四、动画

Transform www.w3school.com.cn/cssref/pr_t…

Transition juejin.im/post/5b137e…

Animation www.php.cn/css-tutoria…

五、css变量

css变量 www.ruanyifeng.com/blog/2017/0…

END

这篇知识点干货是我在映客用于雏鹰培养计划用的。相应考题我就先不发出来了。若是someone颇有须要，同样评论留言。固然，你也能够用于本身公司内部培养计划用，后续中高级知识体系，不久就会发布出来。

我总结的教程都是一些通俗易懂筛选出来的。方便你们学习，并非官方晦涩难懂的文档。

下一篇在这里

前端-基础知识体系（初级-下）