前端基础
2021-07-27 13:47:14 2 举报
AI智能生成
前端基础
作者其他创作
大纲/内容
可视化 & 游戏
ts-node 编译
nodemon 监控
tsconfig.json配置
Typescript是可选的静态类型系统(编译原生js)
环境
array []
srting
number
object
null
undefind
基本类型
any
never
void
emum
字面量
as
<>
类型断言
扩展类型
类型别名
接口
泛型
Partial
Required
Readonly
Record
Pick
Exclude
Extract
Omit
NonNullable
Parameters
ReturnType
InstanceType
....
超链接
Utility Types
高级类型
类型
ES6 (推荐)
Command (改配置文件)
模块化
TypeScript 超集
Node是一个JS的运行环境
分支主题
BOM
DOM
AJAX
web api 提供了操作浏览器窗口和页面的能力
跨域问题
文件读写
这种能力是非常有限的
浏览器中的JS
Node Api 几乎提供了所有能做的事
Node中的JS
浏览器提供了有限的能力,JS只能使用浏览器提供的功能做有限的操作
Node提供了完整的控制计算机的能力,NodeJS几乎可以通过Node提供的接口,实现对整个操作系统的控制
分层结构对比图
它比浏览器拥有更多的能力
Node的官网
Node民间中文网
什么是Node
开发桌面应用程序
这种结构通常应用在微型的站点上
Node服务器要完成请求的处理、响应、和数据库交互、各种业务逻辑
结构1
这种结构非常常见,应用在各种规模的站点上
请求日志
用户偏好
广告信息
简单的信息记录
静态资源托管
缓存
Node服务器不做任何与业务逻辑有关的事情。绝大部分时候,只是简单的转发请求。但可能会有一些额外的功能
结构2
开发服务器应用程序
我们通常用Node干什么
网络通信
ES6
包管理器
前置课程
1-1. Node概述
setTimeout
setInterval
类似于 setTimeout 0
setImmediate
console
获取当前模块所在的目录
并非global属性
__dirname
获取当前模块的文件路径
__filename
类型化数组
继承自 UInt8Array
计算机中存储的基本单位:字节
使用时、输出时可能需要用十六进制表示
Buffer
返回当前nodejs进程的工作目录
绝对路径
cwd()
强制退出当前node进程
可传入退出码,0表示成功退出,默认为0
exit()
String[]
获取命令中的所有参数
argv
获取当前的操作系统
platform
根据进程ID杀死进程
kill(pid)
获取环境变量对象
env
process
1-2. 全局对象
根据绝对路径直接加载模块
相对于当前模块
转换为绝对路径
加载模块
相对路径 ./ 或 ../
检查是否是内置模块,如:fs、path等
检查当前目录中的node_modules
检查上级目录中的node_modules
相对路径
如果不提供后缀名,自动补全
js、json、node、mjs
关于后缀名
如果仅提供目录,不提供文件名,则自动寻找该目录中的index.js
表示包的默认入口
导入或执行包时若仅提供目录,则使用main补全入口
默认值为index.js
package.json中的main字段
关于文件名
模块的查找
记录当前模块的信息
module对象
require函数
当执行一个模块或使用require时,会将模块放置在一个函数环境中
1-3. Node的模块化细节
目前,Node中的ES模块化仍然处于试验阶段
默认情况下,都是commonjs
commonjs
文件后缀名为.mjs
最近的package.json中type的值是module
ES
模块要么是commonjs,要么是ES
当使用ES模块化运行时,必须添加 --experimental-modules标记
1-4. 【扩展】Node中的ES模块化
EOL
arch()
cpus()
freeman()
homedir()
hostname()
tmpdir()
os
basename
sep
delimiter
dirname
extname
join
normalize
relative
resolve
path
url
callbackify
inherits
isDeepStrictEqual
promisify
util
1-5. 基本内置模块
对外部设备的输入输出
磁盘
网卡
显卡
打印机
其他...
外部设备
IO的速度往往低于内存和CPU的交互速度
I/O:input output
读取一个文件fs.readFile
向文件写入内容fs.writeFile
size: 占用字节
atime:上次访问时间
mtime:上次文件内容被修改时间
ctime:上次文件状态被修改时间
birthtime:文件创建时间
isDirectory():判断是否是目录
isFile():判断是否是文件
获取文件或目录信息fs.stat
获取目录中的文件和子目录fs.readdir
创建目录fs.mkdir
判断文件或目录是否存在fs.exists
fs模块
name:文件名
ext:后缀名,目录为空字符串
isFile:是否是一个文件
size:文件大小
createTime:日期对象,创建时间
updateTime:日期对象,修改时间
属性
getChildren():得到目录的所有子文件对象,如果是文件,则返回空数组
getContent(isBuffer = false):读取文件内容,如果是目录,则返回null
方法
每个目录或文件都是一个对象
练习:读取一个目录中的所有子目录和文件
1-6. 文件I/O
流是指数据的流动,数据从一个地方缓缓的流动到另一个地方
数据从源头流向内存
可读流: Readable
数据从内存流向源头
可写流: Writable
数据即可从源头流向内存又可从内存流向源头
双工流:Duplex
流是有方向的
什么是流
其他介质和内存的数据规模不一致
其他介质和内存的数据处理能力不一致
为什么需要流
内存数据和磁盘文件数据之间的流动
什么是文件流
含义:创建一个文件可读流,用于读取文件内容
path:读取的文件路径
encoding:编码方式
start:起始字节
end:结束字节
如果encoding有值,该数量表示一个字符数
如果encoding为null,该数量表示字节数
highWaterMark:每次读取数量
options:可选配置
文件打开事件
文件被打开后触发
open
发生错误时触发
error
文件被关闭后触发
可通过rs.close手动关闭
autoClose配置项默认为true
或文件读取完成后自动关闭
close
读取到一部分数据后触发
注册data事件后,才会真正开始读取
每次读取highWaterMark指定的数量
若指定了编码,则读取到的数据会自动按照编码转换为字符串
若没有指定编码,读取到的数据是Buffer
回调函数中会附带读取到的数据
data
所有数据读取完毕后触发
end
暂停读取, 会触发pause事件
rs.pause()
恢复读取,会触发resume事件
rs.resume()
返回:Readable的子类ReadStream
创建一个写入流
path:写入的文件路径
w:覆盖
a:追加
其他
flags:操作文件的方式
highWaterMark:每次最多写入的字节数
options
写入一组数据
data可以是字符串或Buffer
true:写入通道没有被填满,接下来的数据可以直接写入,无须排队
要特别注意背压问题,因为写入队列是内存中的数据,是有限的
false:写入通道目前已被填满,接下来的数据将进入写入队列
返回一个boolean值
当写入队列清空时,会触发drain事件
ws.write(data)
是否自动关闭取决于autoClose配置
默认为true
结束写入,将自动关闭文件
data是可选的,表示关闭前的最后一次写入
ws.end([data])
返回:Writable的字类WriteStream
将可读流连接到可写流
返回参数的值
该方法可解决背压问题
rs.pipe(ws)
文件流的创建
文件流
1-7. 文件流
普通模式
长连接模式
回顾http请求
net是一个通信模块
进程间的通信 IPC
网络通信 TCP/IP
利用它,可以实现
net模块能干什么
socket是一个特殊的文件
在node中表现为一个双工流对象
通过向流写入内容发送数据
通过监听流的内容获取数据
返回:socket
创建客户端
net.createServer()
监听当前计算机中某个端口
server.listen(port)
开始监听端口后触发的事件
当某个连接到来时,触发该事件
事件的监听函数会获得一个socket对象
返回:server对象
创建服务器
1-8. net模块
无须手动管理socket
无须手动组装消息格式
http模块建立在net模块之上
请求:ClientRequest对象
响应:IncomingMessage对象
我是客户端
请求:IncomingMessage对象
响应:ServerResponse对象
我是服务器
总结
1-9. http模块
见源码中的ppt
1-10. https协议
服务器结构
准备好money
准备好服务器
准备好域名
该方式应用在部署环境中
方式1:网上购买权威机构证书
自己作为权威机构发布证书
下载源码,自行构建
下载windows安装包
mac下自带
通过输入命令openssl测试
安装openssl
openssl genrsa -des3 -out ca-pri-key.pem 1024
genrsa:密钥对生成算法
命令运行过程中会让用户输入密码,该密码将作为des3算法的key
-des3:使用对称加密算法des3对私钥进一步加密
pem:Privacy-Enhanced Mail (PEM)
-out ca-pri-key.pem:将加密后的私钥保存到当前目录的ca-pri-key.pem文件中
1024:私钥的字节数
生成CA私钥
openssl req -new -key ca-pri-key.pem -out ca-pub-key.pem
通过私钥文件ca-pri-key.pem中的内容,生成对应的公钥,保存到ca-pub-key.pem中
运行过程中要使用之前输入的密码来实现对私钥文件的解密
Country Name:国家名 CN
Province Name:省份名 Sichuan
Local Name:城市名
Company Name:公司名
Unit Name:部门名
Common Name:站点名
...
其他输入信息
生成CA公钥(证书请求)
openssl x509 -req -in ca-pub-key.pem -signkey ca-pri-key.pem -out ca-cert.crt
使用X.509证书标准,通过证书请求文件ca-pub-key.pem生成证书,并使用私钥ca-pri-key.pem加密,然后把证书保存到ca-cert.crt文件中
生成CA证书
------华丽的分割线-------
openssl genrsa -out server-key.pem 1024
生成服务器私钥
openssl req -new -key server-key.pem -out server-scr.pem
生成服务器公钥
openssl x509 -req -CA ca-cert.crt -CAkey ca-pri-key.pem -CAcreateserial -in server-scr.pem -out server-cert.crt
生成服务器证书
具体方法
方案2:本地产生证书
证书准备
https模块
1-11. https模块
timers:存放计时器的回调函数
除了timers、checks
绝大部分回调都会放入该队列
比如:文件的读取、监听用户请求
如果poll中有回调,依次执行回调,直到清空队列
等待其他队列中出现回调,结束该阶段,进入下一阶段
如果其他队列也没有回调,持续等待,直到出现回调为止
如果poll中没有回调
运作方式
poll:轮询队列
使用setImmediate的回调会直接进入这个队列
check:检查阶段
事件循环中,每次打算执行一个回调之前,必须要先清空nextTick和promise队列
笔记
1-12. node生命周期
node事件管理的通用机制
内部维护多个事件队列
1-13. [扩展]EventEmitter
1. Node核心
数据存储在硬盘文件中
持久的存储数据
备份和恢复数据
快速的存取数据
权限控制
数据库的能干什么
以表和表的关联构成的数据结构
特点
能表达复杂的数据关系
强大的查询语言,能精确查找想要的数据
优点
读写性能比较差,尤其是海量数据的读写
数据结构比较死板
缺点
存储结构复杂的数据
用途
Oracle
MySql
Sql Server
代表
关系数据库
以极其简单的结构存储数据
文档型
键值对
格式灵活
海量数据读写效率很高
难以表示复杂的数据结构
对于复杂查询效率不好
存储结构简单的数据
MongoDB
Redis
Membase
非关系型数据库
略
面向对象数据库
数据库的类型
DB: database 数据库
DBA:database administrator 数据库管理员
DBMS:database management system 数据库管理系统
DBS包含DB、DBA、DBMS
DBS:database system 数据库系统
术语
2-1. 数据库简介
关系型数据库
已被Oracle收购
瑞典MySQL AB
开源
轻量
快速
MySql特点
官方下载源
腾讯下载源
下载
安装
安装MySql
mysql -uroot -p:进入mysql命令交互
show variables like 'character\\_set\\_%':查看当前数据库字符编码
C:\\ProgramData\\MySQL\\MySQL Server 8.0
修改my.ini文件中的默认字符编码
net stop mysql80
net start mysql80
show databases:查看当前拥有的数据库
使用
navicat
2-2. MySql的安装
Structured Query Language 结构化查询语言
大部分关系型数据,拥有着基本一致的SQL语法
Data Definition Language 数据定义语言
库
表
视图
存储过程
操作数据库对象
DDL
Data Manipulation Language 数据操控语言
操作数据库中的记录
DML
Data Control Language 数据控制语句
操作用户权限
DCL
分支
SQL
创建库
切换当前库
删除库
管理库
字段名
bit:占1位,0或1,false或true
int:占32位,整数
char(n):固定长度位n的字符
varchar(n):长度可变,最大长度位n的字符
text:大量的字符
date:仅日期
datetime:日期和时间
time:仅时间
字段类型
是不是null
自增
默认值
字段
创建表
修改表
删除表
管理表
根据设计原则,每张表都要有主键
唯一
不能更改
无业务含义
主键必须满足的要求
主键
用于产生表关系的列
外键列会连接到另一张表(或自己)的主键
外键
主键和外键
一个A对应一个B,一个B对应一个A
例如:用户和用户信息
把任意一张表的主键同时设置为外键
一对一
一个A对应多个B,一个B对应一个A,A和B是一对多,B和A是多对一
例如:班级和学生,用户和文章
在多一端的表上设置外键,对应到另一张表的主键
一对多
一个A对应多个B,一个B对应多个A
例如:学生和老师
需要新建一张关系表,关系表至少包含两个外键,分别对应到两张表
多对多
表关系
1. 要求数据库表的每一列都是不可分割的原子数据项
2. 非主键列必须依赖于主键列
3. 非主键列必须直接依赖主键列
三大设计范式
2-3. 数据库设计
增 CREATE
查 Retrieve
改 UPDATE
删 DELETE
CRUD
DMLData Manipulation Language 数据操控语言
2-4. 表记录的增删改
select ...from ...where ...order by ...limit ...
别名
*
case
distinct
select
from
=
in
is
is not
> < >= <=
between
like
and
or
where
asc
desc
order by
limit
运行顺序
2-5. 单表基本查询
笛卡尔积
左连接,左外连接,left join
右连接,右外连接,right join
内连接,inner join
2-6. 联表查询
ABS(x) 返回x的绝对值
CEILING(x) 返回大于x的最小整数值
FLOOR(x) 返回小于x的最大整数值
PI() 返回pi的值(圆周率)
RAND() 返回0到1内的随机值
数学
AVG(col) 返回指定列的平均值
COUNT(col) 返回指定列中非NULL值的个数
MIN(col) 返回指定列的最小值
MAX(col) 返回指定列的最大值
SUM(col) 返回指定列的所有值之和
聚合
TRIM(str) 去除字符串首部和尾部的所有空格
LTRIM(str) 从字符串str中切掉开头的空格
RTRIM(str) 返回字符串str尾部的空格
字符
CURDATE()或CURRENT_DATE() 返回当前的日期
CURTIME()或CURRENT_TIME() 返回当前的时间
MICROSECOND
SECOND
MINUTE
HOUR
DAY
WEEK
MONTH
QUARTER
YEAR
日期
内置函数
自定义函数
函数
join ... on ...
group by
having
分组后,只能查询分组的列和聚合列
分组
2-7. 函数和分组
操作视图属于DDL
2-8. 视图
2. MySql
驱动程序是连接内存和其他存储介质的桥梁
mysql驱动程序是连接内存数据和mysql数据的桥梁
mysql
mysql-native
mysql2
mysql驱动程序通常使用
什么是驱动程序
mysql2的使用
用户通过注入sql语句到最终查询中,导致了整个sql与预期行为不符
sql注入
变量的内容不作为任何sql关键字
mysql支持变量
防止sql注入
3-1. mysql驱动程序
Object Relational Mapping 对象关系映射
通过ORM框架,可以自动的把程序中的对象和数据库关联
见源码中的「ORM原理图」
ORM框架会隐藏具体的数据库底层细节,让开发者使用同样的数据操作接口,完成对不同数据库的操作
开发者不用关心数据库,仅需关心对象
可轻易的完成数据库的移植
无须拼接复杂的sql语句即可完成精确查询
ORM的优势
ORM
JS
TS
成熟
Sequelize
不成熟
TypeORM
Node中的ORM
3-2. Sequelize简介
id
账号
密码
姓名
管理员
名称
开班时间
班级
出生日期
性别
联系电话
所属班级
学生
图片
出版时间
作者
书籍
案例:学校数据库
3-3. 模型定义和同步
3-4. 模型的增删改
3-5. 模拟数据
抓取豆瓣读书中的书籍信息
发送一个http请求,得到服务器的响应结果
客户端和服务器通用
axios
Jquery的核心库
与dom无关
cheerio
涉及到的库
3-6. 数据抓取
查询单个数据:findOne
按照主键查询单个数据:findByPK
查询多个数据:findAll
查询数量:count
包含关系:include
3-7. 数据查询
hash加密算法的一种
可以将任何一个字符串,加密成一个固定长度的字符串
单向加密:只能加密无法解密
同样的源字符串加密后得到的结果固定
md5加密的特点
3-8. MD5加密
官网
民间中文网
utc:世界协调时
以英国格林威治时间为标准
utc时间和北京时间相差8小时
utc的凌晨相当于北京时间的上午8点
utc和北京时间
也可以是秒数,用小数部分记录毫秒
某个utc时间到utc1970-1-1凌晨经过的毫秒数
时间戳表示的是utc时间的差异
注意点
时间戳 timestamp
服务器可能会部署到世界的任何位置
服务器内部应该统一使用utc时间或时间戳,包括数据库
对于服务器的影响
客户端要给不同地区的客户友好的显示时间
客户端应该把时间戳或utc时间转换为本地时间显示
对于客户端的影响
见源码中的图例
概念
3-9. moment
前端(客户端):为了用户体验
路由层:验证接口格式是否正常
业务逻辑层:保证业务完整性
数据库验证(约束):保证数据完整性
数据验证的位置
用于验证某个字符串是否满足某个规则
validator
用于验证某个对象的树形是否满足某些规则
validate.js
相关库
3-10. 数据验证
3-11. 访问器和虚拟字段
log4js
例如调试日志、信息日志、错误日志等等
见源码中的示意图
level:日志级别
例如:sql日志、请求日志等等
category:日志分类
应该把日志写到哪?
日志的书写格式是什么(layouts)
appender:日志出口
3-12. 日志记录
3. 数据驱动和ORM
4-1. express的基本使用
nodemon是一个监视器,用于监控工程中的文件变化,如果发现文件有变化,可以执行一段脚本
4-2. nodemon
交给第一个处理函数处理
函数中需要手动的交给后续中间件处理
当匹配到了请求后
express发现如果响应没有结束
express会响应404
如果后续已经没有了中间件
不会停止服务器
相当于调用了 next(错误对象)
如果没有,则响应500
寻找后续的错误处理中间件
如果中间件发生了错误
中间件处理的细节
4-3. express中间件
express.static()
express.json()
express.urlencoded()
4-4. 常用中间件
4-5. express路由
见课件
4-6. cookie的基本概念
使用 cookie-parser
通过cookie给予:适配浏览器
通过header给予:适配其他终端
登录成功后给予token
解析cookie或header中的token
通过:继续后续处理
未通过:给予错误
验证token
对后续请求进行认证
4-7. 实现登录和认证
node进程会监听9229端口
node --inspect 启动模块
4-8. 断点调试
协议
端口
主机名
完全相同
同源
浏览器不允许使用非同源的数据
同源策略
JSONP
CORS
解决方案
1. 浏览器端生成一个script元素,访问数据接口
2. 服务器响应一段JS代码,调用某个函数,并把响应的数据传入
会严重影响服务器的正常响应格式
只能使用GET请求
JSONP的缺陷
4-9. 跨域之JSONP
4-10. 跨域之CORS
4-11. CORS中间件
存储在客户端
存储在客户端,不占用服务器资源
只能是字符串格式
sessionStorage
localStorage
存储量有限
数据容易被获取
数据容易被篡改
容易丢失
cookie
存储在服务器端
可以是任何格式
存储量理论上是无限的
数据难以被获取
数据难以篡改
不易丢失
占用服务器资源
session
universal unique identity
uuid
4-12. session
4-13. jwt
express-jwt
jsonwebtoken库
确定过期时间
确定主体
确定密钥
authorization
确定传输方式
颁发jwt
从cookie中
带bearer
不带bearer
从authorization中
获取jwt
验证jwt
认证jwt
添加whoami接口
4-14. 登录和认证-服务器开发
history api fallback
4-15. 登录和认证-客户端开发
4-16. 场景 - 日志记录
\b文件上传使用的http报文格式
multer
服务器解析处理请求体
4-17. 场景 - 文件上传
4-18. 场景 - 文件下载
Jimp
4-19. 场景 - 图片水印
4-20. 场景 - 图片防盗链
原理图,见课件
http-proxy-middleware
4-21. 重要场景 - 代理
见源码中的图片
在静态内容中插入动态内容
mustache
ejs
常见模板引擎
模板引擎
4-22. 扩展场景 - 模板引擎
通常是白色或黑色的小点
深色表示1
白色表示0
矩阵点
三个位于角落的嵌套矩形
用于定位二维码图片的方向
位置探测组
1~40的数字
1是21*21
40是177*177
数字越大,表示整个二维码的矩阵越大
Version
Numeric
Alphanumeric
Kanji
Byte
字符编码方式
mode
L
M
Q
H
纠错等级越高,能够表达的字符量越少
纠错等级
二维码的概念
生成二维码
4-23. 场景 - 生成二维码
防止机器提交
验证码作用
普通验证码
行为验证码
验证码类型
客户端通过img元素的src地址获取验证码图片
服务器生成随机图片
服务器保存随机图片中的文字
获取验证码图片
服务器判断是否对验证码进行验证
验证客户端传递的验证码是否和服务器保存的一致
验证
流程
4-24. 场景 - 生成验证码
缓存原理:见课件
4-25. 场景 - 客户端缓存
一个可以被编辑的div
编辑后得到的结果是一个html字符串
富文本框的本质
wangEditor
4-26. 场景 - 富文本框
4. express
Node
微信小程序
微信公众号
微信开发
属性使用小驼峰命名法
防止注入攻击
React.Fragment
1. JSX
constructor
componentWillMount
render
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
React < 16.0 旧
通过参数可以获取新的属性和状态
该函数是静态的
该函数的返回值会覆盖掉组件状态
该函数几乎是没有什么用
getDerivedStateFromProps
真实的DOM构建完成,但还未实际渲染到页面中。
在该函数中,通常用于实现一些附加的dom操作
该函数的返回值,会作为componentDidUpdate的第三个参数
getSnapshotBeforeUpdate
性能优化
React > 16.0 新
生命周期
类组件
函数组件
父 ->子:props
参数验证 prop-Types
子->父:父通过props传回调函数,子调用
组件通信
2. 组件
setState的回调获取更新后状态
生命周期中获取
通过setState更新
在组件生命周期或React合成事件中,setState是异步;
在setTimeout或者原生dom事件中,setState是同步;
异步还是同步?
3. state
受控
非受控
4. 表单
核心概念
Refs
HOC
Ref转发
context
高级进阶
Hooks
React.js 界面构建库
Vue 2.x
多页面挂载不同插件依赖
this将指向 代理(代理调用vue实例)
删除 new Vue 构造函数
Proxy 监听无深度回调,可监听对象的增删改查
响应式数据监听不同
v-model 支持多次使用
v-if 的优先级 现在高于 v-for
key 值绑定问题
新的异步组件(asyncComponent)
Teleport 任意传送门
与2.x 的不同
静态提升
预字符串化
缓存事件处理函数
Block Tree
PatchFlag
效率的提升
新特性Api
vue 3.x
Vue.js 渐进式框架
框架
属性篇
标签篇
geoLocation 位置
deviceoriention
devicemontion
requestAnimationFrame 每秒60帧动画
localStorage 本地存储
history 历史
worker 多线程
API 篇
螺旋仪
HTML5
HTML
!important-无限大
内联-1000
id-100
class,伪类,属性-10
元素,伪元素-1
通配符,子代>,兄弟+-0
权重
*{}
标签名{}
.className{}
.idName{}
:link{},访问前
:hover{},移入时
:active{},按下激活时
:visited{},访问后
:focus{},表单获取焦点时
:before{},添加子元素
:after{},添加子元素
:first-letter{},第一个文字
:first-line{},第一行文字
伪类
父子选择器,E>F
紧邻选择器,E+F,紧邻E的F
兄弟选择器,E~F,E之后所有的F
具有attr属性的元素
E[attr]
attr为value的元素
E[attr="value"]
attr包含value的元素
E[attr~="value"]
attr以value开头的元素
E[attr^="value"]
attr以value结尾的元素
E[attr$="value"]
E[attr*="value"]
attr以value或value-开头的元素
E[attr|="value"]
属性选择器
:first-child
:last-child
:nth-child(num)
:nth-last-child(num)
只有一个子元素
:only-child
child组
:first-of-type
:last-of-type
:nth-of-type(num)
:nth-last-of-type(num)
此类子元素只有一个
:only-of-type
type组
等价于html
:root
没有任何内容的元素
:empty
结构性伪类
元素被<a>指向,并进行跳转操作,用于锚点
:target
目标伪类
指向lang为对应语言的元素,翻译后属性失效
:lang(语言)
语言伪类
:enabled
:disabled
:checked
选中的文本
:: selection
UI元素状态伪类
表单元素,有这些属性会被选中
li:not(:last-child)
:not()
否定伪类
选择器
IE 盒模型
标准盒模型
border-box width = border + width + padding
content-box width = width
box-sizing
盒模型
relative 相对(占据原有位置,相对自身定位)
absolute 绝对(脱离原有位置,相对Fiji定位元素定位)
fixed 固定(相对浏览器视口定位)
sticky 粘性
定位position
z-index,有定位才有效
left/ right/ none
clear:both
清除浮动
:after{display:block;content:"";clear:both}
:after{display:block;content:"";clear:both};父元素{zoom:1}
清除浮动影响
浮动float
BFC定义
触发BFC
BFC
rgba,无继承性
opacity,有继承性
filter:alpha(opacity=60)
透明度
兼容,opacity:0.6;background;filter:alpha(opacity=60);
background-color
background-image:url("")
repeat/ repeat-x/ repeat-y/ no-repeat
background-repeat
值x:left/ center/ right/ px值
值y:top/ center/ bottom/ px值
background-position:值x 值y
fixed,背景不随容器滚动,视觉上元素滚动,背景不动
scroll,背景跟随容器一起滚动,视觉上元素背景一起滚动
background-attachment
背景填充从padding区域开始,默认
padding-box
填充从border区域开始
border-box
填充从content区域开始
content-box
background-origin背景填充原点
背景裁切到border区域,默认值
背景裁切到padding区域,默认值
背景裁切到content区域,默认值
background-clip背景裁切
横向值:px/ %,纵向值:px/ %
填充满至一个维度最大值,保持图片比例
contain
填充至所有维度都到最大值,保持图片比例
cover
background-size:值1 值2
url("图1"),url("图2")
背景在前的写前面
多背景图
背景background
CSS 2
@keyframes name{0%{}; 100%{};}
定义
animation:动画名称 过渡时间 过渡速度 延迟时间 重复次数 是否反向-alternate
执行
animation-style-state: paused
暂停
动画animation
left/ center/right top/center/bottom
X轴坐标 Y轴坐标[相对于左上角]
transform-origin
translateX( )
X轴
translateY( )
Y轴
translateZ( )
Z轴
translate(X轴,Y轴)
translate3d(X轴,Y轴,Z轴)
translate
rorate()
rorate
scale(倍数)
scaleX(倍数)
scaleY(倍数)
scale
skewX(角度deg)
skewY(角度deg)
倾斜
变换 transform
perspective: 视距px(设置给父元素)
transform-style:preserve-3d (保留子元素3D效果,设置给父元素)
transform-3D
repeating-linear-gradient(角度,颜色1 起始位置,颜色2 结束位置)
linear-gradient(角度,颜色1 百分比1,颜色2 百分比2,颜色n 百分n)
线性
repeating-radial-gradient(渐变起始位置,渐变形状,渐变大小,颜色1,颜色2,颜色n)
radial-gradient(渐变起始位置,渐变形状,渐变大小,颜色1,颜色2,颜色n)
径向
渐变
过渡的属性,all
时间
linear
https://cubic-bezier.com/
速度曲线
延迟时间
transition(属性1 时间1 过渡效果,属性2 时间2 过渡效果)
过渡transtion
display: flex
默认情况,主轴元素上排不下,自动压缩不换行
row
倒序排列
row-reverse
column
column-reverse
flex-direction
flex-start,默认值
flex-end
center
space-between
space-around
space-evenly
jusitify-content
flex-start
以基线进行对齐
baseline
默认值,项目拉伸适应容器【子元素无高度时】
stretch
align-items
子元素压缩大小,不换行
nowrap
wrap
flex-wrap
flex-start,无行间距
flex-end,无行间距
center,无行间距
stretch,默认值,拉伸适应容器
align-content,行间对齐方式
父元素
align-self,侧轴对齐方式
数字越大越靠后,默认0,可以用负数
order,排序优先级
flex-grow:n
分到空间比例,元素flex-grow/flex-grow总和
flex-grow,放大-平分剩余空间
flex-shrink:0,元素不缩小
flex-shrink,缩小-压缩空间
flex-basis,元素的长度
子元素
弹性flex
水平阴影px 垂直阴影px 模糊距离px [阴影尺寸px] 阴影颜色 [内阴影inset]
盒子阴影box-shadow
文本阴影text-shadow
阴影
grid布局
媒体查询
CSS 3
容器display:flexjustify-contentalign-items
flex
元素position:absolutetop/left:50%transform:translate(-50%,-50%)
容器position:relative
定位+transform
元素position:absoluteleft/right/top/bottom:0margin:atuo
定位+margin:auto元素尺寸小于容器
元素position:absoluteleft/top:50%margin-left/margin-top
定位+margin已知元素尺寸且固定
元素jusitify-self:centeralign-self:center
容器display:grid
grid
元素display:inline-block
容器display:table-celltext-align:centervertical-align:middle
table-cell
元素margin:50% autotransform: transformY(-50%)
容器overflow:hidden
margin+transform已知子元素尺寸且固定
元素display:inline-blockvertical-align:middle
容器text-align:centerline-heigh
inline-block+vertical-align
元素居中
CSS
变量
循环
运算符
条件语句
显式类型转换
隐式类型转换
类型转换
数字.Number
字符串. String
布尔.Boolean
空对象指针.Null
未定义.Undefined
大整形.Bigint
唯一.Symbol
基本数据类型 (堆)-原始值
对象数据类型 Object
命名函数
匿名函数
立即执行函数
函数数据类型 Function
数组数据类型 Array
引用数据类型 (栈)-引用值
数据类型
基础语法
全局作用域(Global scope)
局部作用域 (Activation scope)
当内部函数被保存到外部时,将会生成闭包。闭包会导致原有作用域链执行上下文不释放,造成内存泄露。
实现公有变量
可以做数据缓存
可以实现封装,属性私有化
闭包会导致多个执行函数共用一个公有变量,如果不是特殊需要,应尽量防止这种情况发生。
闭包
作用域
原型链
继承
原型
全局上下文对象 (Global Object)
局部上下文对象 (Activation Object)
执行期上下文
未经声明的变量直接赋值,此变量归全局所有
1. 创建(上下文对象 Ao/Go)
2. 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3. 将实参值和形参统一
4. 在函数体里面找函数声明,值赋予函数体
预编译四步骤
预编译
String / Number / Boolean
1. 创建一个和基本类型相同的对象
2. 调用包装对象下的方法
3. 销毁这个新生成的对象
理论上对于原始值是无法添加属性的,但是当你对原始值添加属性时,内部会调用 new 关键字生成新的原始值对象,操作这个对象,再销毁。
包装类
1. 创建一个空对象var thiis = {}
2. 绑定 -> 隐式属性 __proto__:构造函数.prototype
3. 绑定-> this指向,执行构造函数,存属性
4. 如果无返回值,则隐式返回this
new
构造函数
1. 以函数的形式调用时,this永远都是window
2. 以方法的形式调用时,this是调用方法的那个对象
3. 以构造函数的形式调用时,this是新创建的那个对象 new ()
4. 使用call和apply调用时,可以改变函数运行时this指向并且执行
this指向
进阶内容
ECMAScript
dom.style
dom.currentStyle / IE独有的属性
window.computedStyle(dom)
dom.getBoundingClientRect()
获取盒子宽高
1. 针对HTML 标签独有特性(可添加自定义特性到HTML 标签上),在HTML行间显示
2. 同过getAttribute、setAttribute、removeAttribute 操作
3. 只读行间属性,如果propety和setAttribute修改一个相同的特征值,以行间为准
attribute 特性
1. JS的对象形式展现使用,不在行间显示,可操作标签上所有自带官方属性
property 属性
attribute 和 property
DOM操作
事件捕获
事件目标
事件冒泡
事件流
事件委托
事件级
event.preventDefault() / 阻止默认单击处理
event.stopPropagation() / 阻止冒泡等
event.stopImmediatePropagation()
event.currentTarget
event.target
事件对象
自定义事件
DOM事件
Javascript
初始网络五层模型
图解
三次握手过程
避免资源被浪费掉。如果在第二步握手时,由于网络延迟导致确认包不能及时到达客户端,那么客户端会认为第一次握手失败,再次发送连接请求,服务端收到后再次发送确认包。在这种情况下,服务端已经创建了两次连接,等待两个客户端发送数据,而实际却只有一个客户端发送数据。
为何要三次握手?
TCP 三次握手 建立连接
第一次挥手:客户端发送FIN=1,seq=x的包给服务端,表示自己没有数据要进行传输,单面连接传输要关闭。发送完后,客户端进入FIN_WAIT_1状态。
四次握手过程
由于TCP的连接是全双工,双方都可以主动传输数据,一方的断开需要告知对方,让对方可以相关操作,负责任的表现。
为何四次握手?
TCP 四次握手 断开连接
TCP 握手规则
1. 相同协议
2. 相同域名
3. 相同端口
什么是同源策略?
浏览器对不同域、议、口之间的保护策略, 出于对网站的内容,数据的保护所有的策略。同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
为什么要有同源策略?
策略
document.domain 共享 Cookie。
Cookie
document.domain + iframe。
window.name + iframe
location.hash + iframe
iframe
Cors
Ajax
postMassage
WebSocket
nginx 反向代理
node 中间件代理
跨域
9 种跨域解决
proxy对象(脚手架node 反向代理)
Vue.config.js
开发环境
proxy_pass http://127.0.0.1:8080;
生产环境
部署
GET在浏览器回退是无害的,POST会再次请求
GET产生的URL可以收藏
GET会主动缓存,POST需要手动设置
GET只进行URL编码,POST支持多种
GET请求URL参数会完整保留在浏览器历史,POST 不会保留
GET请求的URL参数存在长度限制
GET只接受ASCII参数字符
GET 参数暴露在URL中不安全
GET 产生一个TCP数据包,POST产生两个
GET 与 POST 区别
GET 与 POST
无状态
无连接
灵活
通信使用明文,可能被窃听
http
与http相比 多了一层TLS/SSL协议
信息加密与完整性校验
消耗性能 增加延迟 建议引入CDN
https
HTTP 与 HTTPS
cookie的SameSite
验证referer和Origin
使用非cookie令牌(token等)
验证码
表单随机数
二次验证
CSRF
对用户的输入进行转码或者过滤。
XSS
前端安全
网络
计算机网络基础
浏览器内核
浏览器
WEB 开发基础
前端 工具库
移动端适配
响应式布局
移动端事件
H5 移动端
字典树
后缀树
KMP
AC自动机
字符串
数组
单链表
双链表
循环链表
分类
链表的9个基本操作
链表
栈 (后进先出)
队 (先进先出)
队列,栈
最近公共祖先
并查集
树的遍历
树,图
哈希表
大,小根堆
可并堆
堆
数据结构
快速排序
冒泡排序
计数排序
归并排序
插入排序
选择排序
排序算法
回溯算法
递归
剪枝
DFS 和 BFS
搜索算法
最短路径
最小生成树
网络流
图论
分治思想
贪心思想
二分法
倍增法
基础技巧
背包九讲
计数问题
解题思路
动态规划分类
动态规划
算法
数据结构与算法
前端模块化
包管理工具
Git 版本控制工具
1. 基础配置
loaders
plugins
原理
2. 进阶内容
Webpack
前端工程化
前端
0 条评论
回复 删除
下一页