前端-基础知识体系(初级-上)

14,464 阅读3分钟

目录

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

前言

常常有人问我,如何成为一名初、中、高级前端。并且发现我身边的大多数人知识面并不是很成体系,总会有各种知识漏洞。如果你还不清楚如何才算初级工程师,自己的知识体系有没有漏洞,可以参考这篇我整理的知识点及相应教程。

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

ps:红色需精通,绿色了解

一、概念

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

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

二、js基础知识

1、数据

字符串 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

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

对象原始值转换 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

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

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

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

5、JSON

JSON zh.javascript.info/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…

函数绑定 zh.javascript.info/bind

声明提升 zh.javascript.info/var

箭头函数 www.yuque.com/zhangbao/ja…

闭包 zh.javascript.info/closure

调度 zh.javascript.info/settimeout-…

柯里化 www.yuque.com/zhangbao/ja…

8、原型

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

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

9、继承

继承 juejin.cn/post/684490…

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很有需要,一样评论留言。当然,你也可以用于自己公司内部培养计划用,后续中高级知识体系,不久就会发布出来。

我总结的教程都是一些通俗易懂筛选出来的。方便大家学习,并不是官方晦涩难懂的文档。

下一篇在这里

前端-基础知识体系(初级-下)