前端开发知识体系

2019-02-25 13:39:36   49  举报





AI智能生成

前端开发知识体系包括HTML、CSS和JavaScript等技术，以及React、Vue等主流框架。HTML是网页的结构语言，CSS用于美化网页样式，JavaScript用于实现网页交互功能。React和Vue是流行的前端框架，它们可以帮助开发者更高效地构建复杂的单页应用。此外，前端开发还需要了解浏览器的工作原理、网络协议、性能优化等方面的知识。总之，前端开发知识体系涵盖了从基础技能到高级应用的各个方面，是成为一名优秀前端工程师必备的知识储备。

前端

前端知识

前端技术

前端开发

软件开发

作者其他创作

大纲/内容

底层知识、基础原理

网络

网络协议

UDP

特点

不可靠性

无连接

不可靠

没有拥塞机制

高效

头部

端口号

数据报文长度

数据报文检验和（可选）IPV4

传输方式

一对一

一对多

多对一

多对多

TCP

特点

状态机

建立连接3次握手

断开连接4次握手

头部

序列号 Sequence number

Acknowledgement Number

数据窗口大小 Window size

标识符

子主题

ARQ

停止等待ARQ

连续ARQ

滑动窗口

拥塞处理

HTTP

基础

客户端请求

请求行

请求方法

GET

POST

...

POST和GET的区别

副作用和幂等

缓存

安全

数据传递request body

URL长度限制

编码和数据类型

URL

协议版本

请求头

空行

请求正文 Body

服务端响应

状态行

协议版本

状态码

响应头

空行

响应正文 Body

常见响应状态码

1XX 消息

2XX 成功

200 OK

...

204 No Content

205 Reset Content

206 Partial Content

3XX 重定向

301 Moved Permanetly

302 Found

303 See Other

304 Not Modified

307 Temporary Redirect

4XX 客户端错误

400 Bad Request

401 Unauthorized

403 Forbidden

404 Not Found

5XX 服务器错误

500 Internal Server Error

501 Not Implemented

503 Service Unavailable

常见头字段

通用头

请求头

响应头

正文头

代理 Proxies

底层协议

HTTPS

TLS加密

对称加密

非对称加密

公钥

私钥

TLS4次握手

SSL加密

HTTP/1.0

HTTP2/HTTP3

HTTP 2.0

二进制传输

多路复用

帧 frame

流 stream

header压缩

HPACK压缩

服务端Push

QUIK

DNS

输入URL到页面加载完成的过程

AJAX readyState

0 未初始化

1 启动

2 发送

3 接收

4 完成

websocket

什么是websocket

双向通信

应用层协议

基于TCP传输协议

复用HTTP进行握手

websocket的优点

双向通信，更加灵活

更好的二进制支持

较少的控制开销

支持扩展

websocket需要掌握的技术

如何建立websocket连接

如何进行双向通信

数据帧格式

如何维持websocket连接

Node中的websocket封装

socket.io

原理

建立webSocket连接(ws握手)

客户端发起协议升级请求

服务端响应协议升级

Set-Websocket-Accept值的计算

数据帧格式/原理

什么是数据帧

数据帧格式与规范

ws.send()

掩码算法

websocket数据通信

数据分片

连接保持/心跳

websocket安全防范

反向代理

安全

XSS攻击

转义字符

CSP

CSRF

SameSite

验证Referer

Token

点面劫持

X-FRAME-OPTIONS

JS防御

中间人攻击

HTTPS

Restful API

微服务

进制转换

二进制转十进制

十进制转二进制

数据结构与算法

数据结构

线性表

基础

定义

特点

线性表的抽象数据类型

ADT list

数据对象

数据关系

基本操作

结构化初始操作

结构销毁操作

引用型操作

加工型操作

线性表的简单操作-合并线性表

存储方式

链式存储

顺序存储

基本操作

应用

栈

队列

树

图

算法

查找

顺序查找

二分查找

索引查找

哈希查找

排序

插入排序

选择排序

交换排序

冒泡排序

快速排序

基数排序

外部排序

递归分治

尾递归优化

贪心算法

动态规划

背包问题

设计模式

浏览器机制

渲染

缓存

性能优化

网络相关优化

渲染过程相关优化

文件优化

其他优化

webpack优化

监控

requesyAnimation渲染庞大数据量

Git

提交新分支到远程分支

https://www.cnblogs.com/ydxblog/p/7988317.html

Git不再跟踪文件/文件夹（eg node_modules）

通过Git同步VsCode

git修改远程库

可视化

简介

所有方法链式调用

属性修改

.style('style',function(){ ... })

.attr()

.data()

dom操作

d3.selectAll()

d3.select()

.append()

.remove()

进入退出

.enter()

.exit()

转换

.transition()

.duration()

.delay()

事件处理

.on() 原生事件

方法分类

数据处理

DOM处理

事件处理

其他

Echarts

Canvas

初始化

设置宽高

html标签上设置

js设置

css设置（不推荐，会糊，css设置会按比例缩放）

SVG

WebGL

概览

标准接口

扩展接口

事件

常量与类型

WebGL2(最新版本)

WebGL入门

WebGL context WebGL上下文

绘制场景 scene

shader 着色器

Vertex shader 顶点着色器

Fragment shader 片段着色器

buffer 缓冲器

子主题

IDE

vscode

重构代码

找到所有引用 shift+F12

重命名所有关联部分 F2

代码标签打开

https://www.v2ex.com/t/399867

配置代码自动格式化

setting

默认配置

用户配置

工作区配置

同步setting

常用快捷键

vscode 命令行 ctrl+shift+p

文件查找 ctrl+p

在所有文件中查找 ctrl+shift+F

在当前文件中查找 ctrl+F

代码格式化 shift+alt+F

JavaScript

基本概念

关键字和保留字

变量

数据类型

基本类型

string

字符字面量

+ concat()

转换为字符串

.toString()

String()

ACCII码转换

str.charCodeAt()

String.fromChartCode(charcode)

number

浮点数

数值范围

NaN

数值转换

Number()

parseInt()

parseFloat()

toString(n)

包装类型 new Number()

重写的 valueOf() toLocaleString() 和toString()

boolean

包装类型 new Boolean()

重写的 valueOf()

Undefined

Null

引用类型

Object

Object.entries()

Object.fromEntries()

Object.values()

Object.keys()

Object.assign(target,source1,source2)

删除对象属性

delete someObj.name

Array

特点

数组基本操作

创建

new Array()

数组字面量 []

访问

方括号访问索引 arr[idx]

length属性可读可写

检测数组

arr instanceOf Array

isArray(arr)

安全的类型检查

转换方法

对象基本方法

valueOf()

toString()

toLocaleString()

join()

ES6 Array.from()

ES6 Array.of()

栈方法 LIFO 和队列方法 FIFO

push()

pop()

shift()

unshift()

重排序方法

reverse()

sort()

操作方法

concat()

slice()

splice()

位置方法

indexOf()

lastIndexOf()

迭代方法

forEach()

filter()

map()

数组中的项是否满足某条件

every()

some()

ES6 find() findIndex()

归并方法

reduce()

reduceRight()

ES6+数组方法

扩展运算符 ...

替代函数的 .apply()方法

数组浅拷贝

合并数组

与结构赋值结合使用

字符串转数组

Iterator对象转数组

Map和Set

gernerator

Array.from

类数组对象转数组

iterable对象转数组

字符串转数组

Array.of()

arr.copyWithin()

arr.find() arr.findIndex()

arr.fill()

arr.entries() arr.keys() arr.values()

arr.includes()

arr.flat() arr.flatMap()

数组的空位

RegExp

Function

rest参数和arguments

Date

根据毫秒数返回日期

new Date()

+操作符

返回日期毫秒数

Date.parse()

Date.now()

Date.UTC()

继承的对象方法

valueOf()

toString()

toLocaleString()

格式化方法

toDateString()

toTimeString()

toLocaleDateString()

toLocaleTimeString()

toUTCString()

toLocaleString()

直接取得和设置日期值中特定部分的方法

getTime()

setTime()

getMonth()

getYear()

内置对象

Global

Math

操作符

&& ||

编码

https://www.cnblogs.com/xianyulaodi/p/6052334.html

结构控制语句

函数

ES6 解构赋值

数组解构赋值

对象解构赋值

字符解构赋值

数值和布尔值解构赋值

函数参数解构赋值

圆括号问题

应用场景

交换变量的值

提取数据

取 (函数return) 对象的值

提取JSON数据

函数参数

函数参数的定义

函数参数的默认值

遍历 Map结构/ Object.entries() /Array.from()

ES6 proxy

example

面向对象

对象基础

创建对象

对象字面量 { }

从构造函数中实例化对象 new SomeObject()

对象成员

名字

值

属性

方法

访问/设置对象的属性和方法

点表示法

括号表示法

小技巧

深入了解对象属性

对象的属性

数据属性

特性

[[Configurable]]

[[Enumerable]]

[[Writeble]]

[[Value]]

访问器属性

特性

[[Configurable]]

[[Enumerable]]

[[Get]]

[[Set]]

对像属性的操作

定义/修改属性的特性

Object.defineProperty()

Object.defineProperties()

读取属性的特性

Object.getOwnPropertyDescriptor()

对象的遍历

for of

Object.keys()

Object.values()

Object.entries()

for in

创建对象实例

创建对象基础

工厂模式

构造函数模式

普通构造函数模式

new操作符

构造函数创建对象实例的问题

原型模式

理解原型对象

原型对象

普通原型模式

内置对象的原型

原型模式创建对象实例的问题

组合使用构造函数和原型模式

更多创建对象实例的方式

动态原型模式

寄生构造函数模式

稳妥构造函数模式

继承

原型链

基于原型链的继承

基于构造函数的继承

组合继承

其他继承方式

原型式继承 Object.Creat()

寄生式继承

寄生式组合继承

ES6 class继承

class基本语法

类中this的指向

默认指向类实例

类方法单独使用时，遵循this指针的指向规则

使类方法this保持指向类实例的解决方法

静态方法 static

取值函数get和存值函数set

set methodName() {}

get methonName() {}

类方法名表达式 [变量]() { }

类名表达式

私有方法和私有属性

class继承

extends关键字

super关键字

mixin模式实现

变量、作用域、闭包、this、内存

作用域

Js编译器原理

编译步骤

分词/词法分析

解析/语法分析

代码生成

理解作用域

处理涉及模块

引擎

工作流程

编译器

LHS

RHS

变量未声明

作用域

作用域嵌套（作用域链）

工作模型

词法作用域（Js）

修改作用域

eval

with

try/catch

let

动态作用域（Perl、Bash等，作为了解）

函数作用域和块作用域

提升

闭包

作用域和闭包

setTimeout()

闭包函数导致Js不会对其进行垃圾收集，因还有引用

事件监听函数

只要使用了回调函数，实际上就产生了闭包

实际问题

循环和闭包

块级作用域

this

箭头函数

bind() 更好的解决方案

隐式传递对象引用

ES6/7/8 新基础特性

let、const

let

块级作用域

不存在变量提升

暂时性死区

不允许重复声明

const

原型继承和Class继承

模块化

浏览器模型 BOM

浏览器缓存机制

缓存位置

缓存策略

强缓存

协商缓存

网页模型 DOM

Node-节点

12种Node类型 someNode.nodeType

Document类型

Element类型

Node属性

nodeType

nodeName

nodeValue

childNode

childNode[idx]

childNode.item(idx)

.length

nodeList转数组

firstChild

lastChild

parentNode

nextSibling

previousSilbling

节点关系

父子节点

兄弟节点

Node节点方法

someNode.appendChild( Node)

someNode.insertBefore( 带插入Node, 带插入位置Node/null)

someNode.replaceChild( 带插入Node, 待插入位置childNode)

someNode.removeChild( 带插入Node, 待插入位置childNode)

someNode.cloneNode( true/false) 深拷贝（含子节点）/浅拷贝（不含子节点）

DOM操作常见问题

原生拖放dragable https://segmentfault.com/a/1190000019554950

缩放 https://segmentfault.com/q/1010000016883342

Element

.scrollIntoView(true/false)

属性

宽高

client

Element.clientHeight

Element.clientWidth

Element.clientLeft

Element.clientTop

scroll

Element.scrollHeight 只读

Element.scrollWidth 只读

Element.scrollLeft 可读可写

Element.scrollTop 可读可写

offset

offsetTop

offsetWidth

offsetHeight

offsetLeft

HTML事件模型

事件委托

事件绑定常见问题

非表单元素绑定键盘事件

tabindex属性

contenteditable属性

模拟事件

模拟鼠标hover

Js图形

Canvas

Svg

WebGL

three.js

原生WebGL

JSON

网络编程

fetch

常用头字段

网络通讯数据类型

子主题

异步编程

EventLoop

调用堆栈 the call stack

消息队列 message queue

Heap

事件循环

宏任务与微任务

Promise是微任务

setTimeout是宏任务

回调函数

回调地狱

事件监听

发布/订阅

Promise 异步操作状态机

特点

对象的状态不受外界影响

一旦状态改变，就不会再变

优点

缺点

无法取消Promise

如果Promise没有回调函数，内部的异常不能捕获到

pending状态时无法得知Promise的进展

代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。

Promise新建后就会立即执行

Promise会吃掉错误

对象的状态不受外界影响

一旦状态改变，就不会再变

Promise实例基本用法

创建Promise

指定回调函数 Promise.prototype.then()

捕获异常 Promise.prototype.catch()

ES2018 Promise.prototype.finally()

Promise对象用法

Promise.all()

p1,p2,p3状态都fullfilled时候，新promise才fullfilled，返回值为三个p返回值组成的数组

p1,p2,p3其中一个状态rejected时候,新promise就会rejected，返回的是第一个reject传递的值

Promise.race()

p1,p2,p3中先改变状态的决定新promise的状态，返回最先改变状态的返回值

Promise.resolve() 将对象/function封装为一个Promise

参数是Promise实例

参数是一个thenable对象

参数不是具有then方法对象，或者根本不是对象

无参数

Promise.reject()

参数直接会作为rejected的返回值

提案 Promise.try()

async实现

new Promise实现立即执行的匿名函数

应用

promise封装异步加载图片

promise封装AJAX操作

resolve的也是Promise对象的情况

generator与Promise结合

Iterator 迭代器

.next()

for...of

其他遍历方比较

for...in

forEach

for()

Generator 可遍历状态机

创建generator

调用Genrator函数

调用指针.next()

特性

yield表达式

yield 函数，则交出当前函数的执行权给yield跟的函数（即暂停执行）

没有yield的generator函数

普通yield

yield *

执行另一个Generator

遍历iterator

遍历数组

遍历字符串

遍历二叉树

.next()

.next()无参数

next()带参数

generator实例方法

Generator.prototype.throw()

Generator.prototype.return()

g.next() g.return() g.throw()区别

G中的this new

状态机

协程

上下文

应用

异步操作同步化表述

控制流管理

封装Iterator接口

for...of遍历generator

斐波那契数列

作为数据结构

Thunk

Async/Await

调用Async

await

返回的值是后面跟的异步操作返回的值

后面跟promise，返回类似.then()方法接收的参数

await等到promise对象状态改变，才继续执行

实现原理

自动执行的generator

并发

嵌套Async函数

async函数执行返回的是一个Promise对象，所以直接调用其是异步的操作

并发和并行

《你不知道的JavaScirpt》

console.log()也可能被异步化，解决是使用Debuuger

竞态条件（并发时 race）

并发协作

响应大批量数据时候阻塞UI、界面操作的解决方案

事件循环（宏任务）和任务队列（微任务）

离线应用（PWA）与客户端存储

WebWorker

注意点

同源限制

DOM限制

全局对象限制

通信限制

脚本限制

文本限制

主线程 main.js

新建worker线程

消息通信

发送 woker.postMessage()

响应

成功响应 worker.onmessage()

错误响应 worker.onError()

关闭 worker.teminate()

worker线程 woker.js

监听主线程事件

self.onmessage('message',cb)

self.addEventListener()

加载脚本

importScripts()

关闭 self.close()

存储方式

数据生命周期

数据存储大小

与服务端通信

模块化

CMD规范 nodeJS

导出

module.exports 和 exports变量

引入

require()

require只能在Node端使用动态（变量）加载

浏览器端require只能根据webpack的规则进行动态（变量）加载，即'文件路径+文件名变量' 的方式

require.resolve()

AMD规范客户端JS

define()

UMD兼容AMD和CMD

ES6 规范（ES Moudle）ESM

导出

export命令

export 普通输出

export default 默认输出

普通输出和默认同时输出

导入

import命令

import anyName from 'export-default.js'

import { name, name2} from ' filaname.xx'

import * as somename from 'filenaem.xx'

import 'lodash'

导入导出复合写法

模块的继承

跨模块常量

import( ).then( ) 函数

按需加载

条件加载

前端框架

MVVM原理

概念

View 页面

Model 数据模型

ViewModel View和Model之间的媒介

核心

数据绑定

单向绑定

双向绑定

主流框架的实现

Angular 脏数据检测

Vue 数据劫持

路由原理

hash实现模式

history实现模式

Virtual Dom

JS模拟创建DOM对象

判断差异

比较差异的算法

判断属性的差异

判断数组的差异

渲染差异

遍历树

局部更新DOM

React

基础

HelloWorld

JSX表达式

使用时候的注意点

属性值

“ 字符串”

{ 变量/表达式 }

无值的属性默认为True

展开属性 { ...多个属性构成的对象}

属性名

class => className

tabindex => tabIndex

JSX嵌套

嵌套JSX

嵌套React组件

JSX防注入攻击

react元素语法糖方法 React.creatElement()

JSX点表示法

Fragment <></>

元素渲染

vitualDOM

ReactDOM.render( JSX/reactElement, DOMelement )

组件

定义

定义组件必须首字母大写

class 定义首字母大写

function 定义首字母大写

组件渲染到页面

ReactDOM.render( JSX/reactElement, DOMNode )

组件嵌套

定义中的this.props.属性名对应 => 组件实例中自定义属性

自顶而下编写模式

自底而上编写模式

生命周期

constructor

getDefaultProps

getInitialState

componentWillMount

componentDidMount

shouldComponetUpdate

componentWillUnMount

事件处理

class constructor中需绑定onClick的回调函数this，以使得其this生效

onReact合成事件= { JS表达式}

条件渲染

JS写if else渲染条件

&&运算符

三元运算符？:

不渲染 return null

列表（循环）渲染和key属性

JSX中嵌入map

表单

双向绑定的实现

状态提升

深入React

类型检查 'prop-types'

比较完整的验证器实例

限制只能传递单个子代

为属性制定默认值

‘defaultProps’

static defaultPros = { } 提案

静态类型检查

flow

typescript

非受控组件

性能优化

高阶组件

React-Router

安装

导航

Link

to=

NavLink

to=

activeClassName=

to=

属性

exact

path=

渲染

component=

render=

传参 props

children=

<Switch> 排他性路由

<Fade >

Router Hook

<ScrollTop />组件

应用

默认路由

嵌入HTML

懒加载/代码分割

切换动画

react-transition-group

CSSTransition

css-class

timeout

unMountonExit

classNames

按需加载

asyncComponent

配合router

import()

webpack 代码分隔

快照 reactSnapShot

常见问题

批量加载图片

map

src={require('./'+imgName+'.png')}

setState什么时候是同步的什么时候是异步的

生命周期的Update更新机制，非想象中那样

DOM操作

ref

优点

DOM选择限制在当前组件作用域中(当有复用的组件时候，优势就显现了)

使用ref

React.creatRef()

回调ref

document 选择器（不推荐）

和普通DOM一样

数据模型总结

单向数据流 props

只读性

状态数据流 state

setState()

反向数据流

input

value

onChange

子组件input绑定onChange事件为父组件props传来的回调函数，

父组件通过props向子组件传递处理数据改变的回调函数，state在父组件中定义和改变

跨层级反向数据流context

跨层级数据流

context

const contextName=React.createContext( defaultValue )

父组件传值 ContextName.Provider

任意层级子组件接收 ContextName.Consumer

refs

使用场景

处理焦点、文本选择或媒体控制。

触发强制动画。

集成第三方 DOM 库

注意点

复杂数据通讯

Redux

什么情况下需要用到Redux

mobx

Virtual Dom

diff算法

key

React Hook

使用React Hook的动机

组件状态逻辑复用

优化复杂组件可读性

拥抱函数式编程的优点

可与Class组件共存

state Hook

基础Hook

useState

useEffect

useContext

特殊Hook

useReducer

useContext+useReducer 实现Redux/mox

useCallback

useMemo

useRef

自定义Hook ：复用状态逻辑

useXXX

理解useEffect

使用useEffect模拟componentDidMount

class中的心智模型 mount/update/unmount

如何在useEffect中正确地请求数据

[]

useReducer

useCallback

setXXX的处理

注意useState中的闭包

上一次的effect会在重新渲染后被清除

effect中mount和update皆为渲染

effect心智模型

渲染

清除(上次)渲染

告诉React去比对你的Effects

依赖数组参数[deps]

只在某个useState改变时候使用effect

关于依赖项不要对React撒谎

让Effects自给自足 setXXX(xxx=>xxx+1)

useReducer

useCallback

React-redux

store

reducer

action

connect()

store.dispatch()

action对象/action创建函数

React工程配置（徒手）

项目目录指南

babel

依赖包

babel-core

babel-cli

preset-env

preset-react

@babel/plugin-proposal-class-properties

@babel/plugin-syntax-dynamic-import

webpack

依赖包

webpack

webpack-cli

webpack-dev-server

style-loader

css-loader

babel-loader

react

react-dom

less

依赖包

less

less-loader

配置指南

antd

redux

React源码阅读

.fixtures

.pakages

react

npm/

src/

index.js

pakage.json

readme.md

.scripts

Vue

Vue基础

基础知识

Vue实例

创建一个Vue实例 new Vue()

Vue选项对象

DOM选项

templete

render

renderError

数据/方法选项

data

props

propsData

computed

method

watch

生命周期钩子选项

实例的生命周期

new Vue()

beforeCreate()

Created()

beforeMount()

Mounted()

BeforeUpdate()

Updated()

Activied

Deactivied

beforeDestroy()

Destroyed()

errorCaptured

资源选项

directive

filters

component

组合选项

其他选项

Vue对象内置方法

Vue.extend

Vue.nextTick

Vue.set

Vue.use

...

Vue实例的数据、属性与方法

响应式数据

实例属性

vm.$data

vm.$props

vm.$el

vm.$options

vm.$parent

vm.$root

vm.$children

vm.$slots

vm.$scopedSlots

vm.$refs

vm.$isServer

vm.$attrs

vm.$listners

实例方法

数据方法

vm.$on

vm.$once

vm.$off

vm.$emit

事件方法

vm.$mount

vm.$forceUpdate

vm.$nextTick

vm.$destroy

实例的生命周期

new Vue()

beforeCreate()

Created()

beforeMount()

Mounted()

BeforeUpdate()

Updated()

beforeDestroy()

Destroyed()

Vue选项对象中的内置属性

Vue计算属性 computed

getter

setter

Vue方法 method

Vue监听属性 watch

Vue语法

数据绑定的语法

Mustache写法 {{ }}

指令 v-

v-for

v-if

v-show

v-else

v-else-if

v-on 缩写 @

v-bind 缩写 :

v-model

Vue组件

组件注册

全局注册Vue.component

局部注册

单文件组件

new Vue({ ..., components:{...} , ....})

模块系统

组件通信

父子组件通信

父>子

props

子>父

$emit

v-on

$event

自定义输入组件v-model

兄弟组件通信

查找父组件中的子组件

跨多级组件通信

provide/inject

任意组件通信

Vuex

插槽slot

动态组件

is属性

常见问题

生命周期钩子函数

组件通信

父子组件通信

props emit v-model

$emit的使用

子组件 this.$emit( )

父组件

v-on:emitEvnet/@emitEvnet="emitParam=>handleMethod(emitParam,otherParam)"

v-on:emitEvnet/@emitEvnet="handleMethod(arguments(接收emitParams),otherParam)"

兄弟组件通信

查找父组件中的子组件

跨多级组件通信

provide/inject

任意组件通信

Vuex

computed和Watch的区别

computed()

computed传参

keep-alive组件有什么用

v-show和v-if的区别

组件中的data什么时候可以使用对象？

extend能做什么

mixin和mixins的区别

子主题

vue原理

响应式原理

object.defineProperty的缺陷

编译过程

NextTick原理

服务端渲染SSR

react next.js

vue nuxt.js

多媒体

音频 audio

视频

动画

帧动画 window.reqyestAnimationFrame( func )

其他常考知识点

call、apply、bind

手写call、apply、bind

区别

call()、apply()

bind()

new的原理

instanceof的原理

数据计算精度问题？怎么解决

垃圾回收机制

常见问题

Js工具库

Lodash深拷贝

markdown 解析

remarkble

markdown-it

Js动画

utils

根据userAgent判断访问平台

<ScreenScroll> react移动端滚屏组件

函数重载

ECMA规范阅读计划

Statement and Declaration 定义和声明

Statement 语句

BlockStatement 块

VariableStatement 变量

EmptyStatement 空

ExpressionStatement 表达式

IfStatement if语句

BreakbleStatement break语句

IterationStatement 迭代器

SwitchStatement Switch

CountinueStatement countinue语句

ReturnStateMent return语句

WithStateMent with语句

LablledStateMent 标记性语句

ThrowStatement 抛出异常语句

TrySatement try语句

DebuggerStatement debugger语句

Decalaration 声明

HoistableDeclaration 可撤销声明

FunctionDeclaration 函数声明

GeneratorDeclaration Generator声明

AsyncFunctionDeclaration Async函数声明

AsyncGeneratorDeclaration Async-Generator声明

ClassDeclaration 类声明

LexicalDeclaration 词汇声明

Functions and Classes 函数和类

Function Definitions 函数的定义

Syntax 语法

FunctionDeclaration 函数声明

如何高效阅读懂ECMA规范？

TypeScript

简介

什么是TypeScript

安装TypeScript

子主题

HelloTypeScript

Babel

使用场景

转换JSX

语法兼容编译

兼容语法特性Polyfill

代码压缩

跨平台开发

移动端

禁用设备旋转

JS根据设备高度宽度比例动态判断

使用vmax、vmin单位解决高度宽度问题

整屏滚动

transform

touchstart touchmove touchend

https://www.jianshu.com/p/3f7dfa92f044

轮播图

transform

touchstart touchmove touchend

移动端点击(tap touch)高亮

浏览器兼容样式

浏览器前缀

小程序

下拉刷新

https://blog.csdn.net/ruffaim/article/details/78839214

html标签使用

容器

div - view

包装元素

block

渲染html元素

<rich-text node="{{html}}"></rich-text>

swiper

不能随内容自适应高度，只有Js计算出子元素高度做数据绑定或者设置overflow

尺寸单位

rpx

数据绑定

api

wx.showloading

wx.makecall

wx.clipboard

滚动问题

微信小程序

配置

api

路由

wx.redirectTo

wx.navigateTo

提示

wx.showLoading

wx.toast

基础使用

wx:for循环

事件

事件类型

传参

绑定传参数据 data-dataName

获取传参数据 (事件处理函数中)

使用组件

组件定义

tagName.js

Component API

Compoenent Doc

tagName.json

tagName.wxml

tagName.wxss

组件引用

parent.json

组件通信

父组件>子组件

数据绑定

子组件>父组件

监听事件

子组件触发事件

组件生命周期

BUG

小程序中margin问题

ios Date.parse()失效问题

Chrome插件

入口文件-manifest.json

插件窗口页面-popup.html

插件窗口逻辑-popup.js

NodeJs

《深入浅出NodeJs》

Node简介

诞生历程

2009 Ryan Dahl(C/C++)

起源

JavaScript

Node的特点

异步I/O

事件与回调函数

单线程

Node的应用场景

I/O密集型

不擅长CPU密集型？No，诀窍是合理调度

和遗留系统和平共处

分布式应用

Node使用者

为了前后端编程环境统一

高性能I/O实时应用

并行I/O高效利用分布式环境

并行I/O抛弃同步式顺序任务

云计算平台提供Node的支持

游戏开发

工具类应用

Node模块机制

Js的变迁

工具类库 > 组件库 > 前端框架 > 前端应用

commonJS规范

模块规范

模块引用

模块导出

模块标识

Node的模块实现原理

Node原生核心模块

编写供Node使用的C/C++模块

模块调用栈

包与NPM

包结构

package.json

bin

lib

doc

test

包描述文件和npm

package.json

name

description

version

keywords

maintainers

contributors

bugs

licences

dependencies

hompage

cpu

engine

builtin

directories

implements

scripts

前后端公用模块

AMD规范

CMD规范

异步I/O

同步/异步阻塞/非阻塞

为什么要用异步I/O

用户体验

资源分配

多线程

异步I/O实现现状

异步I/O和非阻塞I/O

操作系统内核对于I/O的调用方式

轮询

轮询技术

read模式-最原始、性能最低

select模式-在read上改进

poll

epoll-Linux下效率最高的轮询方式

kqueue-FreeBSD下的epoll

IOCP-windows下近似理想的异步I/O

理想的非阻塞异步I/O

真实的非阻塞异步I/O

Node采用了libv作为抽象封装层，使得在各平台中的异步I/O模式可以兼容

Node是单线程？No!

Node的异步I/O

事件循环

Tick

事件循环原理

观察者（生产者/消费者模型）

请求对象

执行回调

模型

(执行中的) 主线程

（Node内核操作中的）线程池（I/O线程）

异步调用操作

非I/O的异步API

定时器

process.nextTick()

setImmediate()

事件循环中的观察者是有优先级的

子主题

事件驱动的高性能服务器

异步编程

函数式编程

高阶函数

数组函数forEach()、map()等

函数中封装Promise return new Promise()

偏函数用法

异步编程的优势与难点

传统模式

同步I/O，使用多线程

问题

多线程的上下文切换开销

线程锁

编写C/C++调用系统底层接口，自己实现异步I/O

问题

可以达到很高的性能，但是调试和开发门槛太高，花费大量精力

Node的优势

基于事件驱动的非阻塞I/O模型

并行

分布式计算

云

异步编程的难点/解决

异常处理

Promise

Async/Await

事件发布/订阅模式

回调地狱

Promise

Async/Await

事件发布/订阅模式

难以阻塞代码

Async/Await + Promise

多线程编程

WebWorker

child_process

cluster

异步编程解决方案

事件发布/订阅模式

Promise/Deffered模式

generator

Async/Await

异步并发控制

内存控制

V8垃圾回收机制

高效使用内存

作用域/作用域链

闭包

内存泄漏

慎将内存用作缓存

关注队列状态

内存泄漏排查

大内存应用

理解Buffer

网络编程

构建TCP服务

构建UDP服务

创建HTTP服务

HTTP

HTTP报文

tcp握手 3次握手/4次握手

http/https模块

http模块

事件驱动模式

http模块原理

ServerRequest和ServerResponse对象

二进制模块http_parser

HTTP请求与响应

请求

响应

HTTP服务的事件

connection

request

checkContinue

connect

upgrate

clientError

HTTP客户端

请求头

响应

代理

构建webSocket服务

Node使用websocket的优势

websocket中事件的模式和Node事件模型几乎无差

websocket实现了客户端与服务器的长连接，而Node擅长与大量客户端保持高并发连接

websokect与传统http服务相比的优势

基本使用

客户端

服务端

通过http发起websokect请求

socket.io

网络服务安全

构建Web应用

基础功能

数据上传

路由

restful

页面渲染

玩转进程

服务模型的变迁

多进程

核心概念

基础

版本管理 nvm

repl 命令行环境

包管理 npm

Node命令

异步操作

全局对象和全局变量

全局对象

global

process

console

全局函数

setTimeout()

clearTimeout()

setInterval()

clearInterval()

require()

Buffer()

全局变量

_filename

_dirname

模块化

CommonJS规范

事件-Events模块

Node原生模块

path

__dirname

path.resolve()

path.join()

http

事件

clientRequest

abort

connect

continue

information

response

socket

timeout

upgrade

server

checkContinue

checkExpectation

clientError

connect

connection

request

upgrade

serverResponse

finish

incomingMessage

aborted

子主题

创建HTTP服务

.exec()

发出请求

http.get() 发送get请求

http.request(options, [callback(res)] ) 发送HTTP请求

writeFile(dir, data, callback())

readFile(dir, (err,data)=>{ })

Node包管理

npm

官网

npm CLI命令行

基本命令

安装/卸载 npm install/uninstall

pakage.json保存位置

-P 默认

-D

-E

-O

--no-save

-E

-B

包保存位置

项目目录安装无参数

全局安装 -g

更新 npm update

搜索 npm search

依赖 dependencies

pakage.json & pakage.lock.json

生成pakege.json-npm init

淘宝镜像cnpm

registry

yarn

Node自动化测试/爬虫

selenium-webdriver 【测试老手】

drivers

Chrome

edge

Firefox

Safari

useAge

builder() 浏览器实例

浏览器实例配置

.forBrowser( 'browserName')

.setChromeOptions()

.usingServer()

（最终调用）.build() 实例化

.get( url ) 异步

.findElement( By.css('') )

.getText()

getAttribute("innerHTML")

.wait( )

.sendKeys( )

.quit( )

BY() 选择器

Key 封装键鼠事件

until 等待模块

API文档

chromeOption

puppteer 【Chrome官方新】

Node多进程开发

Node Cluster原理-Taobao FED

利用所有的CPU内核 nodebestpractices-github

Cluster

PM2

cluster多进程运行原理

主进程

cluster 主进程

工作进程

worker 工作进程

process 当前进程

Node服务器框架

http服务器

http

发出请求

.get()

.request()

创建服务器实例

const server=new http.server()

const server=http.createServer( function(reqest,response){ } )

request对象

.url

.method

.headers

.setEncoding("utf8")

.addListener()

"data"

"end"

处理异步操作

response对象

writeHead()

write()

end()

实例方法

.listen()-启动服务器实例，并指定监听端口、IP

子主题

https

自制证书

openSSL

创建https

express

koa

安装

基本使用

创建koa服务器

const Koa=require('koa')

const app=new Koa()

app.listen(port,ip)

中间件

app.use()

常用组件

路由 koa-router

异步、同步组件

koa-mongo

context ctx

ctx.req

ctx.res

ctx.request

ctx.response

ctx.state

ctx.app

.listen()

单页应用路由路径rewrite

代理

nginx rewirte

websocket服务器

socket.io

服务端

客户端

http-proxy代理服务器

使用

Node-开发C/C++模块

Node封装小工具

log单行输出

https://segmentfault.com/a/1190000009152318

vscode js输出https://www.jianshu.com/p/2a2df9c73fee

apidoc

数据库操作

MongoDB

子主题

前端工程化

webpack

基本概念

entry 入口

output 出口

path

filename

loader 处理非Js文件

test

use

babel

plugin 定制打包任务

mode dev/prod环境

resolve 定制模块路径解析(Module resolution)

devServer

historyApiFallback: true 使用router时候...

配置文件

webpack.config.js

webpack.dev.config.js

webpack.prod.config.js

安装

基本使用

安装webpack

配置config

编译

Loader:管理(非Js)资源

样式依赖

css-loader

style-loader

loader基本使用

常见loader

file-loader

csv-loader

xml-loader

markdown-loader

输出控制 output

mode

sourceMap

inline-source-map

打包模式

build模式

watch模式

dev模式

devServer

resolve

.alias

plugins

html-webpack-plugin

代码拆分

entry手动拆分

SplitChunksPlugin （optimization中-去重插件）

chunks

动态入口

借助ES6 import

output/chunkFilename

打包分析

source-map-explorer

webpack-bundle-analyzer

target:'node' 打包Node

external: 不打包某些依赖

项目目录生成md

mddir

生成项目目录

服务端渲染SSR

HTML

C Primer Plus(第六版)

1 初识C语言

2 C语言概述

#include <studio.h> 模块预处理

变量申明

short

int

long

unsigned

char

float

double

_Bool

_Comples

_imaginary

void

int main() 函数申明

数据类型

3 数据和C

数据类型申明关键字

K & R

int

short

long

unsigned

float

double

C90

signed

void

C99

_Bool 布尔型

_Complex 复数

_Imaginary 虚数

位、字节和字

整数和浮点数、数据精度

进制

sizeof()

字符串

转义

scanf()

4 字符串和格式化输入/输出

strlen()

常量

const

#define

常量 #define TAXRATE 0.015

格式化输入/输出

printf()

scanf()

5 运算符、表达式和语句

while

typedef

运算符

运算符优先级

表达式和语句

复合语句、自动类型、强制类型转换

函数参数

6 7控制语句

循环

分支与跳转

8 字符输入/输出验证

9 函数

10 数组和指针

11 字符串和字符串函数

12 存储类别、连接和内存管理

13 文件输入/输出

14 结构和其他数据形式

15 位操作

16 C预处理器和C库

17 高级数据表述

链表

ADT

队列ADT

二叉树ADT

C和指针

1 快速上手

2 基本概念

3 数据类型

4 控制语句

5 操作符和表达式

6 指针

7 函数

8 数组

9 字符串、字符和字节

10 结构和联合

11 动态内存分配

12 使用结构和指针

13 高级指针话题

14 预处理器

15 输入输出函数 I/O

16 标准库函数

17 经典抽象数据类型

18 运行时环境

Learn C

Basic

变量和数据类型 Variables and Types

数据类型

K & R

int

short

long

unsigned

float

double

C90

signed

void

C99

_Bool 布尔型

_Complex 复数

_Imaginary 虚数

变量申明

使用数据类型申明

#define关键字申明常量

const 关键字申明常量

数组 Arrays

Multidimensional Arrays

Conditions

Strings

For loops

While loops

Functions

Static

Advance

指针 Pointers

Structures

Function arguments by reference

Dynamic allocation

Arrays and Pointers

递归 Recursion

链表 Linked lists

二叉树 Binary trees

Unions

Pointer Arithmetics

Function Pointers

IDE

vim

vscode

小结

指针

数组操作

普通数组

定义

访问

指向数组的指针

定义

访问

作用域

寄存器

多文件

常见问题

代码格式化 clangformat

{ BasedOnStyle: LLVM, IndentWidth: 4 }

设置编码（中文乱码问题）

数据类型

并发

标准库

math

方法

.Abs()

子库

math/rand

重学 Python

基本数据类型

str 字符串

.split(' ')

list 列表(数组)

解构赋值

队列 deque

CSS

基础

语法

选择器

值和单位

盒模型

外边距 margin

简写属性 margin

margin-left

margin-top

margin-buttom

margin-right

边框 border

内边距 padding

内容区域 content

outline

BFC 块级格式化上下文

属性详细

背景 backgrounds

盒模型相关 box model

外边距 margin

轮廓 outline

盒子边框 border

内边距 padding

content

文字 text

颜色 color

位置 text-align

下划线 text-decoration

大小写变换 text-transform

字间距

首行缩进 text-indent

字母间距（中文汉字间距）letter spacing

单词间距（词语间的空格长度）word spacing

行高 line-height

文字方向 text-direction

文字阴影 text-shadow

字体 fonts

字体 font-family

字体大小 font-size

字体风格 font-style

font-variant

字体粗细 font-weight

简写属性 font

图标 icon

link 引入图标库

链接样式 :link

:link

:visited

:hover

:active

列表 list-style-

列表前缀样式 list-style-type

列表前缀图标 list-style-image

列表前缀位置 list-style-position

简写属性 list-style

表格 tables

表格边框 border

表格宽高 width和height

水平位置 text-align

垂直位置 vertical-align

表格内边距 padding

表格聚焦 :hover

交叉样式 :nth-child()

颜色 background-color和color

自适应表格 overflow

display

max-width

position

overflow

float

inline-block

align

combinators

CSS布局

层叠上下文 z-index

居中布局

水平居中

通用方法被居中元素高度未知

css3 transform

flex

常规文档流中

内联元素

text-align

块元素

margin

display改为内联元素

float文档流

绝对定位元素 position:absolute/fixed

垂直居中

通用方法被居中元素宽高未知

css3 transform

flex

被居中元素为单行文本

已知元素宽高

水平垂直居中

绝对定位元素 position:absolute/fixed

负边距

transform

flex

table-cell

font-size配合vertical-align

文本内容

display:table-cell

table-cell的妙用

absolute模拟绝对定位fixed

grid布局

minmax(300px,1fr)

CSS动画

transition

@keyframe

transform

CSS文字排版

连字符换行

hyphens: auto

文字换行

行尾元素::after{ content:'\A'; white-space: pre }

white-space

pre-line

pre

pre-wrap

文本行斑马条纹

:nth-child(even)

调整tab宽度

tab-size: 2;

连字

文字溢出

text-overflow

overflow:hidden

width

white-space

nowrap

wrap

div文字单行显示

不换行

不换行多余文字显示点

多行文字显示省略号

换行

文字设置不能选中

溢出

overflow

去除浮动影响，防止父级高度塌陷

link与@import的区别

CSS预处理器（Sass/Less/Postcss）

https://blog.csdn.net/u012302552/article/details/77923348

input

input placeholder样式

微信小程序placeholder样式

input 选中的outline

input 密码圆点格式

<a />

链接样式定制

移动端布局

《精通CSS》

相邻元素border重叠变宽

相邻选项边框

https://juejin.im/post/5d75adfbe51d4561e84fcc9c

scroll-snap-*

overscroll-behavior 阻止滚动传播

scroll-behavior: smooth;

阻止事件冒泡

touchmouve

scroll

滚动条定制

::-webkit-scrollbar

::-webkit-scrollbar-button

::-webkit-scrollbar-thum

::-webkit-scrollbar-track

::-webkit-scrollbar-track-piece

::-webkit-scrollbar-corner

::-webkit-resizer

BEM命名规范

容器组件状态

webpack限制CSS作用域

参考资料合集（主要部分）

MDN文档

《JavaScript高级编程》

《你不知道的JavaScript系列》

阮一峰博客系列

Js入门

ES6入门

掘金

《前端面试之道》

WIKI

《剑指offer》

面试的流程

面试的基础知识

编程语言

数据结构

高质量的代码

解决面试题的思路

优化时间和空间效率

面试中的各项能力

面试的流程

流程

环节

行为面试 5~10min

技术面试 90%

基础知识是否扎实

能否写出高质量的代码

思路是否清晰

是否有优化效率的能力

学习能力、沟通能力等综合素质

面试者提问

禁忌

别问面试结果

别问薪水

别问和自己职位不相干的问题

推荐的问题：

与应聘职位或者项目相关的问题

让面试官对自己提供一些技术上建议

重新回答刚才没有答好的问题

项目

聊天室ChatRoom Vue+nodeJs+mogoDB

PC端

功能

先使用JSON做注册登陆的增删该查

子主题

页面

首页

登陆/注册页面

注册页面

注册信息

基本信息入库

头像上传

登陆验证

工具

nginx

nodeJS

koa

Vue

todoList

基础功能

记录代办事项完成情况

架构

react

less

https://carbon.now.sh/

线性表-数据结构关系

操作限制

栈

队列

节点变化

线性表的变型

维数扩展

数组

数据元素扩展

广义表

数据元素限制

串

前驱后继数

树

图

 收藏

立即使用

前端开发知识体系

LeoooY

职业：本科

去主页





0 条评论

下一页

为你推荐

查看更多

