前端入门
2023-12-25 11:54:10 25 举报AI智能生成
前端开发入门，是学习构建网页和应用程序的第一步。它涵盖了HTML、CSS和JavaScript等核心技能，通过这些技术，你可以创建出美观且功能丰富的网页。HTML用于定义网页的结构和内容，CSS则负责样式和布局，而JavaScript则赋予网页交互性和动态性。学习前端开发需要掌握基本的编程概念和技术，如变量、函数、条件语句等。同时，了解浏览器的工作原理和常用的调试工具也是必备的技能。通过不断实践和项目经验，你将逐渐熟悉前端开发的流程和常用工具，从而能够独立完成网页和应用的开发。无论是初学者还是有一定基础的人，前端开发都是一个有趣且具有挑战性的领域，它将为你打开通往Web世界的大门。
作者其他创作
大纲/内容
学习资料
HTML+CSS
https://www.bilibili.com/video/BV17z4y1D7Yj/?spm_id_from=333.999.0.0
JS
基础
https://www.bilibili.com/video/BV1ay4y1r78B/?spm_id_from=333.999.0.0
进阶
https://www.bilibili.com/video/BV1AT4y1v75t/?spm_id_from=333.999.0.0
VUE
https://www.bilibili.com/video/BV1Zy4y1K7SH/?spm_id_from=333.999.0.0
微信小程序
https://www.bilibili.com/video/BV1834y1676P/?spm_id_from=333.999.0.0&vd_source=2f0871ea1f78232f9798f6c8915f6915
uniapp
https://www.bilibili.com/video/BV1oy4y1j75s/?spm_id_from=333.999.0.0
域名/服务器/DNS
https://www.bilibili.com/video/BV1ma4y1h79M/?spm_id_from=333.337.search-card.all.click&vd_source=2f0871ea1f78232f9798f6c8915f6915
前端生态
前端优化
前端基础
前端基础知识
互联网
定义
凡是能彼此通信的设备组成的网络就叫互联网
域名
分类
顶级域名
国家和地区
通用
新通用
一级域名
二级域名
DNS
定义
域名系统（DNS，Domain Name System），将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串
服务器
数据接收和传递
存储
处理
浏览器
JS引擎
渲染引擎
HTTP
常见协议
请求类别
常见状态码
Cookie
HTTPS
计算机基础
数据结构
与算法基础
基本结构
数据结构的基本概念
数据结构
定义
相互存在关系的数据元素集合
内容
逻辑结构
定义
数据元素之间的逻辑关系
种类
划分类型1
线性结构
有且仅有一个开始和一个终端节点，所有节点最多只有一个直接前驱和一个直接后继
非线性结构
一个节点可能有多个直接前驱和直接后继
划分类型2
集合结构
结构元素同属一个集合
线性结构
结构元素存在一对一的线性关系
树形结构
结构元素存在一对多的层次关系
图状结构
结构元素存在多对多的任意关系
存储结构
定义
数据元素及其关系在计算机内存中的表示(映像)
种类
顺序
一组【连续】的存储单元依次存储数据元素，并用【存储位置】表示逻辑关系
链式
一组【任意】的存储单元依次存储数据元素，并用【指针】表示逻辑关系
索引(了解)
存储节点信息的同时， 建立附加的索引表
散列(了解)
根据节点的关键字直接计算出该节点的存储地址
数据运算
定义
对数据结构可以施加的操作及其存储结构上的实现
数据类型
同性质值集合 + 集合上的一组操作
抽象数据类型
数学模型 + 模型上的一组操作
定义
数据对象
逻辑关系
基本操作
数据术语
数据
数值
非数值
数据对象
性质相同的数据元素集合
数据元素
组成数据的基本单位
数据项
构成数据元素不可分割的最小单位
算法与算法分析
定义
解决问题的方法和步骤，指定的有限序列
描述
自然语言
流程图
伪代码
程序代码
特性
有穷性
步骤有穷
时间有穷
确定性
明确无歧义指令
可行性
输入
零个或多个
输出
一个或多个
要求
正确性
可读性
健壮性
输入非法数据时有相对响应
高效性
时间
事后统计
事前分析
∑语句频度(执行次数) * 语句执行一次所需时间
语句执行一次所需时间由硬件决定，故假设其均为单位时间 ==> 语句频度之和决定算法运行时间
==> 比较算法数量级n^m(渐进时间复杂度) ==> 基本语句(语句频度最大/嵌套层次最深)重复执行的次数T(n)=O(n^m)
时间复杂度
T(n)=O(f(n))
最坏
平均
最好
常数阶<对数阶<线性阶<线性对数阶<平方阶<立方阶<K次方阶<指数阶
存储
空间复杂度
S(n)=O(f(n))
占据空间
本身占据空间
输入/输出
指令
常数
变量
辅助空间
基本的数据结构
线性结构
线性表
定义
具有相同特性的数据元素的有限序列
存储结构
顺序表示(常用)
链式表示
数据域 + 指针域
存储元素 + 下一个元素地址
栈和队列
(操作受限的线性表)
栈 Stack
(后进先出)
入栈
定义
push插入元素到栈顶(表尾)
顺序栈实现
上溢
栈已满仍然压入元素，一种错误
下溢
栈已空仍然弹出元素，问题处理结束
出栈
pop删除栈顶(表尾)元素
递归
分治法求解
队列 Queue
(先进先出)
插入
push表尾
删除
pop表头
串 String
(内容受限的线性表)
零个或任意字符组成的有限数列
数组和广义表
(线性结构推广)
非线性结构
树
基本术语
根节点
度
定义
节点拥有的子树数
分类
树的度
树内各节点度的最大值
叶子
终端节点，度 = 0
树的深度
树的最大层次
森林
m(m ≥ 0)棵互不相交的树的集合
二叉树
定义
结构简单、规律性强，所有树都能转为唯一对应的二叉树，简化存储和运算
特点
度 ≤ 2
子树分左右，空也占位置
可以存在空集(空左/右树)
哈夫曼树
(最优二叉树)
基本概念
路径长度
节点之间的分支之和
树的路径长度
树根到每个节点的路径长度之和
权
将树中节点赋于某种含义的数值为该节点的权
节点带权路径长度
根节点到该节点之间的路径长度与该节点权的乘积
树的带权路径长度
WPL
树中所有叶子节点的带权路径长度之和
定义
带权路径长度(WPL)最短的二叉树(多为完全二叉树)
特点
满二叉树不一定是哈夫曼树
哈夫曼树中权越大的叶子离根越近
具有相同带权节点的哈夫曼树不唯一
贪心算法
构造哈夫曼树时首选权值小的叶子结点
总结
初始有n棵二叉树，n - 1次合并形成哈夫曼树
n - 1次合并产生n - 1个新节点
共2n - 1个节点，度均不为1
图
定义
定点和边的集合
分类
有向图
带箭头的边
无向图
无箭头的边
完全图
任意两点有边
稀疏图
边或弧很少(e < nlogn)
稠密图
边或弧很多
网
边/弧带权
邻接
有边/弧相连的两个顶点之间的关系
关联
边/弧与顶点之间的关系
顶点的度
与该顶点相关联的边的数目
基本的数据处理技术
查找技术
排序技术
课程介绍
B站链接：https://ock.cn/bpmjj
青岛大学-王卓
计算机网络
概述
概念
计算机是互联、自治的自算计集合
组成
计算机系统
工作站
终端设备
客户机
PC机
网络服务器
高性能计算机
网络通信设备
网络交换设备
互联设备
传输设备
网络外部设备
高性能打印机
大容量硬盘
网络软件
网络操作系统
客户连接软件
网络管理软件
功能
资源共享
数据通信
远程传输
集中管理
分布式处理
负载均衡
分类
规模/距离
广域网
城域网
局域网
个人区域网
使用者
公用网
专用网
交换技术
电路交换
报文交换
分组交换
传输技术
广播式
点对点
拓扑结构
星状网
环状网
树状网
网状网
总线型网
体系结构
OSI
应用层
表示层
会话层
传输层
网络层
数据链路层
物理层
TCP/IP
应用层
TELNET
FTP
SMPT
传输层
TCP
UDP
网际层
IP
网络接口层
五层协议
应用层
DNS
域名
域名解析
DNS劫持
DNS污染
DNS查询算法
DNS服务器搭建
FTP/TFTP
FTP服务器搭建
DHCP
静态IP
动态IP
DHCP服务器搭建
TELNET
远程登录的应用
HTTP
概念
请求方式
响应状态码
协议格式
HTTP1.1
HTTP2.0
HTTP与HTTPS
SMTP
SNMP
传输层
协议
TCP
特征
面向连接
点对点通信
可靠交互
全双工通信
面向字节流
保证可靠传输
确认和超时重传
数据合理分片与排序
流量控制
拥塞控制
数据校验
报文结构
粘包问题
流量控制
拥塞控制
连接管理
建立连接:三次握手
断开连接:四次挥手
有限状态机
UDP
特征
无连接
尽最大努力交付
面向报文
无拥塞控制
支持一对一、一对多、多对多的交互通信
首部开销小
报文结构
端口号
FTP:21
TELNET:23
SMTP:25
DNS:53
TFTP:69
HTTP:80
HTTPS:443
SNMP:161
网络层
IP
作用
构成
分类
A类
B类
C类
D类
E类
IPv6
特殊IP地址
专用IP地址
特殊IP地址
0.0.0.0
127.0.0.1
255.255.255.255
子网掩码
ARP
ICMP
报文格式
应用
PING
TTL
IGMP
VPN和NAT
VPN
NAT
路由与转发
静态路由
动态路由
内部网关协议
RIP
OSPF
外部网关协议
BGP
路由表
数据链路层
主要信道
点对点
数据单元:帧
三个基本问题
封装成帧
透明传输
差错检测
点对点协议
广播信道
硬件地址（MAC地址）
单播帧（一对一）
广播帧（一对全体）
多播帧（一对多）
物理层
传输数据的基本单位
数据传输系统
通道
单向通道（单工通道）
双相交替通信（半双工通信）
双向同时通信（全双工通信）
通道复用技术
频分复用
时分复用
波分复用
码分复用
操作系统
移动端
分辨率
物理分辨率
物理屏幕
逻辑分辨率
软件驱动
代码参考
视口
viewport
实现 => 网页宽度 = 设备宽度
二倍图
工具：像素大厨
uniapp
软件开发基础
设计模式
Git版本控制
Git
常用指令
git config
用于获取并设置存储库或全局选项（一般刚下载的git需要配置用户名和用户邮箱，以获取获取代码的权限）
git clone
将远程仓库的资源克隆到本地
git pull
将远程仓库的资源拉取到本地
git fetch
从远程仓库中下载资源，且和pull不一样，pull会合并资源，fetch不会
git status
查看当前项目中源代码的状态
git add
把所有的文件都提交到暂存区
git rm
git rm <file>
将文件从工作区和暂存区删除
git rm -f <file>
强行将文件从工作区和暂存区中删除，如果删除之前修改过并且已经放到暂存区的话，则必须要用强制删除选项-f
git rm --cached <file>
将文件从暂存区中移除，但仍然希望保留在当前工作目录中
git commit -m "提供信息"
将暂存区中的内容添加到本地仓库中
git branch
查看本地的分支
git checkout
git checkout -b 分支名
新建一个分支并切换到该分支
git merge
将某个分支合并到当前所在分支
git rebase
在另一个分支基础之上重新应用，用于把一个分支的修改合并到当前分支，解决代码冲突
git push <远程主机名> <本地分支名>:<远程分支名>
将本地分支的更新，推送到远程仓库中
git log
用于显示提交的日志信息
代码托管
Github
Linux服务商
正则表达式
基础三件套
HTML
概述
定义（Hypertext Markup Language）
【创建】
超文本标记语言，它不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。然后浏览器读取HTML文档，使用标签来解释页面的内容，以网页的形式显示。
工具
记事本.html
VScode
html（html/head/body）
title
description
keywords
标签
常用标签
历史标签
块元素
block element
元素名
div
h1-h6（文本标题）
p（段落）
列表
ul>li
ol>li
dl>dt>dd
table
form
hr（水平线）
br（换行）
特点
元素显示为矩形区域
独占父元素一行，默认自上而下排列
宽度默认父元素宽度，高度内容撑开，宽高自定义
一般作为其他元素的容器
行内元素
inline element
元素名
a（链接）
span（文本独立修饰，内容宽度占空间距离）
u(下划线)
b/strong(加粗)
i/em(倾斜)
s/del(删除线)
小标
sup(上标)
sub(下标)
特点
父元素内同行显示，默认横向排列
不能定义宽高，只能根据所包含的文本决定
遵循盒模型基本规则
行内块元素
inline-block element
元素名
img
input
textarea
button
select
特点
同时具备块和行内元素特点
一行可以显示多个
可以设置宽高
ico图标
<link rel="shortcut ico" href="ico图片路径" type="image/x-icon">
H5语义化标签
header/section/footer
nav/main/aside
figure/article
标签属性
color/width/height/align/style...
特殊标签
列表
有序列表（ol>li）
ol属性
type="1/a/A/i/I"
start="取值为数字，代表type开始位置"
无序列表（ul>li）
ul属性
type=
disc（默认实心圆）
circle（空心圆）
square（实心方块）
none（无）
自定义列表（dl>dt>dd）
图片（img）
属性
src="图片路径"
./当前路径
../返回上一级文档路径
title="鼠标悬停后的提示信息"
alt="图片加载失败后的提示信息"
width="默认单位px"
height="默认单位px"
超链接（a）
属性
href="引用路径"
title="鼠标悬停后的提示信息"
target="文档打开位置"
_self（默认原页面打开）
_blank（新页面打开）
表格（table>tr>td）
table
背景
width
height
bgcolor
边框
border（外边框）
solid
dotted
dashed
bordercolor
border-collapse:collapse
合并边框
表格
cellspacing
单元格与单元格的间距
cellpadding
单元格与内容的间距
align（表格对齐)
left
center
right
结构
thead
tbody
tfoot
caption
标题，仅一个，居中显示
th
table head
表头，内容居中，加粗显示
tr
table row
height
行高
bgcolor
文字对齐
align（水平对齐)
left
center
right
valign（垂直对齐）
top
middle
bottom
td
table data
width
列宽
bgcolor
文字对齐
align（水平对齐)
left
center
right
valign（垂直对齐）
top
middle
bottom
表格合并
colspan
合并单元格列数
rowspan
合并单元格行数
表单（form>input）
form
method=
get（从服务器获取数据）
post（向服务器发送数据）
action="发送表单数据的位置"
input（输入框）
type=
历史属性
text
password
submit
button
<button>按钮名称<button>
reset
H5新增属性
color（颜色选择）
tel（电话号码，仅适用手机端）
search（搜索）
range（滑块效果）
min=“最小值”
max=“最大值”
value=“初始值”
step=“步长”
number（数字类型）
email（邮箱）
url（完整http地址）
date（日期选择）
month（月份选择）
week（周数选择）
time（时间选择）
datetime-local（当地时间选择）
H5数据/选项
<input type="text" list="mylist" name="">
<datalist id="mylist">
<option value="手机"></option>
<option value="手表"></option>
<option value="手镯"></option>
<option value="手环"></option>
</datalist>
其他属性
历史属性
name="必须设置，用于准确发送对应用户数据给服务器"
value="修改按钮上显示的文字"
placeholder=“输入框内提示必须按照1个数字，3个大写字母填写”
title=“悬浮提示必须按照1个数字，3个大写字母填写”
H5新增
autofocus(获取焦点）
required（必填项）
pattern=“[0-9][A-Z]{3}"（正则表达式）
mutiple（支持多个邮箱地址，逗号隔开）
select（选择框）
<option value=‘选项’>
选项
</option>
H5音/视频
audio属性
scr="引用地址"
controls（播放按钮）
loop（循环）
autoplay（自动播放）
muted（静音）
video属性
scr="引用地址"
controls（播放按钮）
loop（循环）
autoplay（自动播放）
muted（静音）
poster=“海报”
width=“宽度”
height=“高度”
特殊符号
尖角
<
>
空格
（文本影响宽度）
&emsp（一个中文宽度）
版权
©
商标
&trade
®
快捷键
注释：crtl+/
换行：ctrl+enter
标注：alt+w
复制：alt+shift+↓
快速创建：标签名a>标签名b*N
CSS
概述
定义（Cascading Style Sheet）
【美化】
层叠样式表，是一种样式表语言用来渲染HTML网页，可以更改颜色、字体、位置等等属性，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
样式
样式模板
<style>
选择符{属性1：属性值； 属性2：属性值……}
样式表类型
内部样式表
html内部使用
行内样式表
style行内嵌入
外部样式表
新建CSS文档
link
引用
<link href='' rel="stylesheet">
位置
head最下方
位置
head最下方
特点
XHTML的标签
兼容性强
与html同步展示页面
属性
rel=stylesheet
type=text/CSS
href=CSS文件路径
@import
特点
CSS的语言
语言较新，兼容性较差
会出现延迟加载CSS情况
属性
url（地址）
样式表优先级
外部<内部<行内（就近原则）<!important
特性
继承性
color
font
style
weight
size
family
text
indent
align
line-height
层叠性
同一标签
(相同优先级)
不同样式 => 样式叠加
相同样式 => 样式覆盖
优先级
公式
继承<通配符＜标签＜类＜id＜行内样式＜!important
!important
实际开发不建议使用
位置：属性值后面，分号前面
继承：不支持继承优先级
书写顺序
布局属性
display/position/float/clear/visibility/overflow
盒子模型+背景
width/height/margin/padding/border/background
文本内容属性
color/font/text-decoration/text-align/line-height
点缀属性
cursor/border-radius/text-shadow/box-shadow
选择器
类型
element
含义：元素/类型选择器
语法：元素名{属性：属性值；}
特点：批量操作，无法精确定位
class
含义：类选择器
语法：.class名{属性：属性值；}
特点：批量选择某类信息，class顺序决定优先级，后覆盖前
id
含义：ID选择器
语法：#id名{属性：属性值；}
特点：精准一一对应
*
含义：通配符选择器
语法：*{margin：0； padding:0;}
清除所有元素默认的边距和填充
特点：一般用做清理
群组
含义：群组选择器
语法：选择符1，选择符2……{属性：属性值；}
特点：批量添加任意选择符，统一操作
包含/后代
含义：包含选择器
语法：选择符1 选择符2{属性：属性值；}
特点：选择符1包含选择符2
a
定义：伪类选择器（超链接）
语法
a:link{属性：属性值；} 初始时※
a:visited{属性：属性值；} 访问后
a:hover{属性：属性值；} 悬停时※
a:avtive{属性：属性值；} 点击时
特点：语法顺序不能更换
权重
高权重覆盖低权重
相同权重，就近原则
CSS3新增
层级
ul>li（亲儿子）
li1+li2(同等级后第一个亲兄弟）
li1~li2（同等级后所有亲兄弟）
属性[]
属性选择
[class]
完全匹配
[class=box]
特点：仅属性为需求属性值时选取
包含匹配
[class~=box]
特点：无论元素同时包含几个属性值，只要含有需求属性值就选取
模糊匹配（字母）
[class^=a] 以a开头元素
[class$=a] 以a结尾元素
[class*=a] 包含a的元素
伪类
结构伪类
多子
:first-child
:last-child
:nth-child()
n
even/2n
odd/2n-1/2n+1
独生子
:only-child
无子
:emtpy(空格、回车等文本均不允许存在)
根
:root(等同html)
目标伪类:target
手风琴
UI状态伪类
input:disabled（输入框失效）
input:focus（焦点选择器）
checkbox
去除默认值：
input[type=checkbox]{
apprearance:none}
点击后属性：
input:checked{}
::selection()
否定伪类
:not(其他选择器)
动态伪类
a选择器
:link
:visited
:active
:hover
属性
文本
字体
font
font-style：倾斜
italic
oplique
normal
font-weight：粗细
100px slighter
400px normal
700px bold
900px holder
font-size：大小
12px（设计偏好）
16px（系统默认）
font-family：字体
font-align：对齐
left
center
right
justify
合并
font: style weight size/line-height family
对齐
line-height：垂直对齐
text-align：水平对齐
文本
行内(块)元素
color：字体颜色
red/green/blue...
rgb（255，0，0）
#fff
text-transform：英文大小写
capitalize：首字母全部大写
uppercase：字母全部大写
lowercase：字母全部小写
C3字体引入
@font-face:{\nurl(地址);}
字体图标
iconfont
添加至项目后下载
文章
text-indent：字符缩进，常用2em
letter/word-spacing：字体、字符间距
text-decornation：线修饰
underlin
overline
line-through
none
背景
width
height
background
列表
list-style-type
disc
circle
square
none
list-style-image:url(地址）
list-style-position:
outside（默认）
inside
复合
list-style：square url(地址) inside
背景
背景块
width/height：大小
background-color
red...
#fff
rgba(0,0,0,0.5)
a表示透明度
HSLA
H：Hue(色调)，取值0 - 360：
0(红)-120(绿)-240(蓝)-360(红)
S：Saturation(饱和度)，取值0.0% - 100.0%
L：Lightness(亮度)，取值0.0% - 100.0%
A：Alpha(透明度)，取值0-1
图片
background-image:url（）:插入
background-repeat：平铺
repeat（默认）
repeat-x
repeat-y
no-repeat
background-position:位置
px px
% %
left/right/center top/bottom/center
background-size:大小
px px
% %
cover
放到最大，铺满背景
contain
图片边长放到背景最大，无法铺满背景，留白
background-attachment
scroll(默认)
随背景滚动离开
fixed
相对浏览器页面固定（位置）
复合
background：color url(地址）repeat position/size
background中未填写的属性值会覆盖之前数据
background-size不可以复合
透明
opacity
包含盒子内容一同影响
0-1：全透明-不透明
box
标准盒模型
边框
padding（内边框）
border（边框）
边线
solid（默认）
double
dashed
dotted
三角形
width: 0px;
height: 0px;
border: 50px solid transparent;
border-bottom/top: 50px solid black;
margin（外边框）
margin：0 auto（屏幕内居中）
支持负距离
特性
块元素
兄弟背景
水平求和
垂直合并
父子背景
(塌陷现象)
互相嵌套的块级元素，子margin-top👉父padding-top，导致父元素一起下移
解决方法
分隔父子上边框 =>
父元素设置border-top/padding-top/输入文本
给父盒子或子盒子添加浮动
overflow：hidden
行内元素
margin/padding布局
水平方向：有效
垂直方向：无效
性质
box-sizing:content-box（默认）
盒子大小=padding+margin+width/height
CSS3新增
边框/阴影
阴影
box-shadow:
水平偏移 垂直偏移 模糊距离 阴影大小 阴影颜色 inset(内外)
text-shadow:
水平偏移 垂直偏移 阴影宽度 阴影颜色
边框
border-radius:
圆角边框
circle
正方形
border-radius:
边长(border+padding+width/height)一半
50%-100%
ellipse
矩形
border-radius:50%;
halfcircle
矩形（长宽2：1）
border-radius:宽 宽 0 0;
sector
正方形
border-radius:宽 0 0 0;
怪异盒模型
box-sizing:border-box;
盒子大小=width/height（自动调整）
浮动
逻辑
浮动到上层脱离标准流，不能撑开父元素，未浮动盒子补位
定义网页中其他文本如何环绕该元素显示
实现横向排列，可以设置宽高
受上面元素边界影响
添加浮动
float
left
right
none
清除浮动
父元素高度
height
浮动过多，换行会出现问题
额外标签法
clear
none
left
right
both
增加空标签，不利于代码可读性；行内元素不支持
伪元素清除法
(CSS模拟标签)
::after
父元素内容之后添加
单伪元素清除法：
father::after{
content:'';
display:block;
clear:both;
//补充代码：网页中伪元素隐藏
height:0;
visibility:hidden
}
::before
父元素内容之前添加
双伪元素清除法：
.clearfix::before,
.clearfix::after{
content:'';
display:table; //表格
}
.clearfix::after{
clear:both;
}
同时可以解决margin塌陷问题
overflow:hidden
块元素相互影响，溢出内容隐藏
块格式化上下文
Block Formatting Content
定义
Web页面可是CSS渲染的一部分，块盒子布局过程发生区域，浮动元素与其他元素交互区域
创建方法
html标签
float
display:inline-block
overfolow:auto/hidden...(非visible)
应用
清除浮动
BFC盒子会默认包裹住内部子元素(标准流、浮动)
解决margin塌陷
BFC盒子本身与子元素不存在margin塌陷
溢出
overflow（容器）:
属性
visible（默认，溢出内容显示在元素外）
hidden（溢出内容隐藏）
scroll（固定滚动条）
auto（溢出时添加滚动条）
inherit（遵从父元素继承overflow属性值）
x（x轴溢出）
y（y轴溢出）
特殊用法
子盒子滚动条
父盒子设置overflow保持其他盒子正常显示
子盒子设置overflow单独设置滚动条
隐藏滚动条
::-webkit-scrollbar{
display:hidden}
white-space（文本空白）:
normal（默认，浏览器忽略空白）
nowrap（不换行）
pre（不换行，显示空格、tab、回车）
pre-wrap（换行，显示回车、空格）
pre-line（换行，显示回车，不显示空格）
word-break（字内换行）：
normal
按语音折行
亚洲文字换行规则
非亚洲文字换行规则
“-”处折行
纯字母/数字无法折行
break-all
亚洲文字换行规则：字母数字都是字符可以任意换行，会破坏掉英文的组词
keep-all
非亚洲文字换行规则：英文内容换行，文字无法换行
word-wrap（文字边界） :
normal
允许内容顶开容器边界
break-word
文字在边界内换行
text-overflow（溢出文本）:
clip（默认）
ellipsis（省略号）
背景声明
width
white-space:nowrap
overflow:hidden
text-overflow:ellipsis
position（定位）:
static（默认静态定位）
标准流情况
relevant（相对定位）
定义
相对于自己原来的位置进行移动
特点
子绝父相
小范围移动
页面中占位置，没有脱标
absolute（绝对定位）
特点
祖先元素定位
无
默认相对于浏览器可视窗移动
有
相对 最近 & 有定位 的祖先元素移动
全脱离文档，不会出现文字环绕
父元素有定位即可，一般选相对定位不影响布局
水平垂直居中
position：absolute
top:50%
left:50%
margin-left: -half width
margin-top: -half height
z-index
值越大，层级越大越靠上，支持负数
父子元素中，添加到子元素
兄弟元素中，添加两者均可
fixed（固定定位）
相对浏览器进行定位移动
特点
页面中不占位置，已脱标
相对固定在浏览器可视页面
sticky（粘性定位）
inherit（继承定位）
锚点
<a herf="#页面内引用元素名称“>点击文字</a>
精灵图
background-image
background-position
自适应
宽高
auto（不写时默认自适应）
min/max控制最小和最大长度
窗口
html,body{height 100%}
两栏布局
三栏布局
N栏布局
进阶表单
分类
input
radio：单选框
name=“同组内容单选”；id=“提供标签实现文字点选”；checked（默认选择）
label：for=“input内的id名称”
checkbox：复选框
file：上传文件
image：上传“提交”标志
hidden：隐藏文件
select：下拉菜单
size=“显示几个选项”
multiple=“同时支持选择几个选项”
option：value（回传前端信息，用户不可见）；selected（默认选择）
textarea：文本域
<textarea placeholder=“输入提示”>有我没提示，空格也占位的意见输入框</textarea>
fieldset：字段集
<fieldset>
<legend>外框显示内容</legend>
<input type="radio" name="aaa" id="man"><label for="man">选项</label>
</fieldset>
对齐
垂直对齐
vertical-align
baseline(默认)
top
middle
bottom
针对：行内(块)元素
input & button
input & img
div & input
div & img
动画
gradient
渐变
background:linear-gradient(
direction,color-stop1,color-stop2,...);
线性渐变
direction
to right/top/bottom left...
0-180deg
color-stop
pink,blue(渐变控制百分比位置)...
background:radial-gradient(
center,shape,size,start-color,...,last-color);
径向渐变
shape
ellipse(默认)
circle
size
closest
side
corner
farthest
side
corner
background:repeating-linear/radial-gradient(pink, lightblue 10%, yellow 20%)
重复渐变
transition：
过渡
propery
width/height
transform
duration
持续多久
delay
timing-function
linear(匀速)
ease(逐渐变慢的减速)
ease-in(加速）
ease-out（减速）
ease-in-out（先加速，后减速）
cubic-bezier(贝塞尔曲线网站复制属性值)
steps(1,start/end)
直接关键帧跳跃
两个关键帧之间的帧数，数值越大越接近linear
start 保留下一帧，看不到第一帧 === step-start
end保留当前帧，看不到最后一帧（闪现太快），因此最后一页多为空白用于跳过，有n个关键帧就用100除n得到百分比 === step-end
复合：all/具体属性值 运动时间 延迟时间 动画类型
transform：
变形
2d变形
translate
平移
类别
translateX（右正左负）
translateY（下正上负）
translate(Xpx,Ypx)
特点
先移动再缩放/旋转，否则影响图片坐标轴方向
scale
缩放
类别
scaleX
scaleY
scale(X,Y)
scale()
支持负值缩放，倒向放大效果
rotate
旋转
类别
rotateX
rotateY
rotate(Xdeg,Ydeg)
数值
正值 顺时针
负值 逆时针
skew
倾斜
类别
skewY
skewX
skew(Xdeg,Ydeg)
中心点修改
transform-origin：left bottom;
3d变形
特殊要求
transform-style：
flat（默认2d舞台）
preserve-3d（3d空间）
perspectice:800-1200px
景深/透视
添加到父级
类型
平移
缩放
旋转
立方体
animation：
关键帧动画
语法
使用动画
animation
animation:动画名称1* 动画时长* 速度曲线 延迟时间 重复次数 动画方向 执行完毕状态，动画名称2* 动画时长*，...;
速度曲线
补间动画(多)
liner
steps(n):逐帧动画
咔咔表
精灵图动画
n=精灵图个数
重复次数
n
infinite
动画方向
alternate
执行完毕状态
backwards(默认)
动画停留在最初状态
forwards
动画停留在结束的状态
暂停动画
animation-play-state
paused
配合:hover使用
定义动画
@keyframes 动画名称{}
from{}
to{}
0%{}
n%{}
100%{}
注意
animation-fill-mode:
none（默认值）
forwards（动画停在最后一帧）
backwards（动画停在初始化面，第一帧）
使用案例
抽屉
轮播
多张图片横向排列为一张长图轮流在盒子显示
@keyframes name{}
匀速播放，重复画面短暂停下
为实现无缝隙轮播，最后一份与第一份一致
布局
基础布局
类型
标准流
(文档流)
块级元素
从上往下，垂直布局，独占一行
行内(块)元素
从左往右，水平布局，自动折行
浮动
垂直布局块级元素 => 水平布局
定位
元素在网页任意位置摆放，用于盒子层叠情况
特点
定位后的元素层级最高，可以层叠在其他盒子上
可以让盒子始终固定在屏幕中某位置
百分比布局
(流式布局)
宽度自适应
古老布局，目前使用较少
层级
不同布局
标准流＜浮动＜定位
不同定位
相对 = 决定 = 固定
HTML位置：越靠后，层级越高
z-index：数值越大，层级越高
多列布局
column-count:
元素应该被分隔的列数
column-gap:
列之间的间隔大小px
column-rule:
列边框分割线px
width
style
color
column-fill:
设置或检索对象所有列高度是否统一
auto
列高度自适应内容
balance
所有列的高度以其中最高的一列统一
column-span:
设置或检索对象元素是否横跨所有列
none
不跨列
all
横跨所有列
column-width:
设置或检索对象每列的宽度px
break-inside:avoid;
禁止盒子内部折行
响应式布局
定义
一套代码适配不同尺寸网页
媒体查询
@media screen and(媒体特性){
body{}
}
width
min-width
从小到大写
max-width
从大到小写
height
orientation
portrait
landscape
布局变动
布局不变（内容）
内容挤压、拉
换行、平铺
删减、增加
布局改变
模块位置变换
模块展示方式（隐藏，展开）
特点
优点
灵活适配不同分辨率设备
快捷解决多设备显示适应问题
缺点
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用元素，加载时间长
这种设计解决方案，多方面因素印象导致达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆情况
BootStrap
框架
栅格系统
定义
将整个网页宽度分为12等份
分类
超小屏幕
<768px
col-xs-份数
小屏幕
＞=768px
col-sm-份数
中等屏幕
＞=992px
col-md-份数
大屏幕
＞=1200px
col-lg-份数
移动适配
rem布局
单位区分
px
绝对长度
em
相对父辈字体的倍数
rem
root em相对根元素字体倍数
100%
vh
视口高度
vw
视口宽度
rem单位
相对于HTML标签字号计算结果
1rem = 1HTML字号大小
媒体查询
定义
检查视口宽度，设置差异化CSS样式
目的
实现在不同宽度设备中，网页元素尺寸等比缩放效果
语法
@media (width: 视口宽度px){
html{font-size:字号px}
}
视口宽度vw
参考设备宽度
基准根字号
vw/10
rem单位尺寸
px单位数值/基准根字号
flexible.js
vw/vh
定义
相对视口尺寸计算结果
尺寸
viewport width
1vw = 1/100视口宽度
viewport height
1vh = 1/100视口高度
grid
网格布局
触发网格布局
display:
grid（块网格）
容器从上向下排列
inline-grid（行内网格，行内块）
容器从左向右排列
行列属性
grid-template-rows/columns:
固定值
px px px...;
百分比
% % %...;
repeat
(n, %)
repeat(auto-fill,%)
fr(fraction)
nfr nfr nfr...
px nfr nfr
px px nfr
min/max
minmax(px,px) px px
auto
px auto px
auto auto px
区域命名与合并
grid-template-areas:
父盒子
指定区域
'a a a d'
'e e g d'
'e e k l'
子盒子
指定项目
grid-area:
a;
d;
e;
对齐方式
间距
grid-gap:
gap:
排序方式
grid-auto-flow:
row（默认）
column
项目对齐
place-content:
justify-content:
align-content:
元素对齐
place-items:
justify-items:
align-items:
项目属性
grid-row/column:
grid-column/row-start:
grid-column/row-end:
start/end
弹性盒
display:flex;
特点
新布局方式，适合移动端，浏览器提倡
子元素（项目）默认横向排列
行内元素转化为块元素
轴
定义
主轴：默认情况下弹性盒水平排列的轴，可以修改为垂直排列
侧轴：垂直于主轴的默认竖向排列轴，可以修改为水平排列
flex-direction:
修改主轴方向
row/row-reverse
column/column-reverse
轴对齐
justify-content:
主轴对齐
flex-start(默认初始位置对齐)
flex-end(结尾对齐)
center
space-between（两端对齐）
space-evenly（等距对齐）
space-around（距离求和）
align-items:
侧轴对齐
flex-start（默认）
flex-end
center
stretch
子盒子
无高度
默认沿侧轴拉伸
无宽度
默认主轴宽度为内容大小
盒子
align-self:
单个项目对齐
flex-start（baseline）
flex-end
center
stretch
主轴水平
不固定高度情况下，默认stretch
主轴垂直
不固定宽度情况下，默认stretch
flex:
伸缩比
按比例填充主轴宽度
数值越大填充越多
占用父盒子剩余尺寸的份数
flex-wrap:wrap;
折行
项目（小盒子）边长可以参考容器（大盒子）边长等分值
align-content:
行间距
flex-start（默认）
flex-end
center
space-between（两端对齐）
space-around（距离求和）
order:数字
值越大，越靠后
值越小，越靠前（含负数）
display
block/list-item（块元素）
div/p/ul li/h1-h6...
转化方法
display:block/inline-block
position:absolute
float:left/right
inline（行内元素）
a/b/em/i/span/strong...
inline-block（行内块元素）
img/input...
JS
概述
定义（JavaScript）
【交互】
一种运行在浏览器上的直译式脚本语言，通常JavaScript脚本通过嵌入在HTML中来实现自身的功能。语法上与Java有类似之处，一些名称和命名规范也借自Java。
组成
ECMAScript
定义（ES)
标准，语法
BOM
定义（Browser Object Model）
JS操作浏览器发生变化的属性和方法
DOM
定义（Document Object Model)
JS操作文档流发生变化的属性和方法
样式
行内式
定义
直接把代码书写在标签上
语法
a 标签
书写在href属性上
<a href="javascript:JS代码；">点我</a>
非 a 标签
书写在行为属性上
<div onclick="alert('百日梦想家')">点我</div>
特点
容易导致html文件臃肿且不易维护，不推荐
内嵌式
定义
把代码书写在一个script标签对内
语法
<script>
alert('百日梦想家')
</script>
特点
不依赖任何行为，打开页面就会执行
不需要建立太多js文件，讲课多用，不推荐
外链式
定义
建立.js外文档，使用script的src引入
引用
<script src="外链接名称.js" rel='text/javascript></script>
位置
body最下方
特点
不依赖任何行为，打开页面就执行，最推荐
输出方式
alert（）
浏览器弹窗
console.log()
浏览器控制台
prompt()
浏览器输入框
document.write()
页面显示，css选择用法
语言
编程语言
翻译器
js引擎(解释器)
运行机制
第一步：
预解析
变量提升
【变量声明】提到【当前作用域】最前面
【不提升】【赋值】操作
函数提升
提到当前作用域最前面
【不调用】函数
第二步：
代码执行
按代码书写顺序从上往下执行
翻译方式
(时间点差异)
编译
代码执行之前进行编译，形成中间代码文件文件
如：Java
解释
运行时及时解释，立即执行
如：JavaScript
机器语言(二进制)
基础语法
变量
定义
程序运行过程中，使用一个中间值
语法
变量声明
var
let
声明变量
禁止重复声明
块级作用域
不存在变量提升
不影响作用域链
const
声明常量
必须有初始值
一般常量使用大写（编程规范）
常量的值不能修改
支持对数组和对象的元素修改
块级作用域
构成
变量声明
const
constant
常量声明，定义不可改变的值
let
变量声明，定义可以改变的值
var
variable
旧版本变量声明，尽量使用前两个
标识符
定义
开发人员为变量、属性、函数、参数取的名字
用法
有效字符
字母、数字、下划线、美元符号
命名要求
使用有意义的名称，如英文或全拼
首字母小写，后续单词均首字母大写
禁止JS关键字或保留字
弱引用类型，但是不建议改变变量的数据类型，容易引起歧义
赋值
=
定义
把一个值放到一个变量内保存
类型
初始化
声明变量时直接赋值
空值
声明变量时没有值，可以设置为空值
值
特点
值可以被修改
数据类型
基本/简单数据类型
<栈==执行代码>
数字
>number
正负数值
科学计数法
2e5（2*10^5)
十六进制
0x开头
八进制
0o开头
二进制
0b开头
字符串
>string
定义：一切单双引号包裹内容
转义符\
\n
换行符，newline
\\
\'
\"
\t
缩进，tab
\b
空格，blank
用法
长度
length
拼接
+
' ' + ' '字符/变量
数值相加，字符相连
模板字符串
定义：反引号包裹内容
`字符 + ${变量}`
布尔
>boolean
ture
false
空
null
>object
值存在，为空
undefined
>undefined
定义变量，没有赋值
引用/复杂数据类型
<堆==存储对象>
函数
数组
对象
更新
Symbl（ES2015）
对象添加属性
up:Symbols()
[Syobol('say')]:fn
内置属性
Symbol.iterator
迭代器
定义
自定义遍历数组
for...of遍历数组，返回对象
特点
唯一值，解决命名冲突
不能与其他数据或自身运算
不能用for...in遍历，可以用Reflect.ownKeys获取对象所有键名
创建
let s = Symbol('张三')
'张三'作为描述，作用相当于注释
即使描述一致，实际返回值不同
let s = Symbol.for('张三')
传入描述一致，实际返回值一致
返回唯一值
BigInt（ES2020）
typeof
数据类型检测
语法
typeof 要检测的变量
结果
该变量存储数据的类型
数据类型转换
转化类型
转字符串
String(变量)
变量.toString()
隐式转换
+ 拼接字符串
转数值
parseInt()
特点
从第一为开始检测是否为合法数字，保留数字直到非数字类型出现
仅解析整数
parseFloat()
特点
从第一为开始检测是否为合法数字，保留数字直到非数字类型出现
支持解析小数
number()
合法数字
转化成功
非合法数字
NaN（数值类型，非数字）
隐式转换
算术运算
- * / %
转布尔
Boolean()
false
0
NaN
' '
undefined
null
ture
其他
自动数据类型转换
不同数据类型无法进行运算，后台自动转化为同一数据类型再计算
特点
一个变量仅存储一个值，再次赋值覆盖前者
根据等号右边的值确定变量数据类型
数据类型根据等号右边的值变化
运算符号
算数运算符
运算符
+
-
*
/
%
取余运算，用来判断数字是否可以被整除
**
幂
注意
浮点数精度有问题，尽量避免小数计算/比较
%取余运算导致百分比需要用小数表示
赋值运算符
递增/减
(仅搭配变量)
符号
++（在自身的基础上加1）
n++;👇
n=n+1
--（在自身的基础上减1）
n--;👇
n=n-1
位置
前置
先自增/减，后返回值
先己后人
后置
先返回原值，后自增/减
先人后己
=（右边的值赋给左边的变量）
先 左侧(+ - * / %)自身运算
后 右侧 = 赋值
+=
n+=10;👇
n=n+10
-=
*=
n*=10;👇
n=n*10
/=
%=
比较运算符
符号
>
>=
<
<=
===（全等）
对比值和数据类型，用用用
==（等于）
对比值，不考虑数据类型，最好不用
!==（不全等于）
对比值和数据类型，任意一个不等即true，用用用
!=（不等于）
对比值，不考虑数据类型，最好不用
结果
ture
false
逻辑运算符
运算符
&&（与）
两边同时为true，结果true
||（或）
两边同时为false，结果false
！（非）
本身为true👉false
本身为false👉true
注意
一元运算符内 ! 优先级很高
&& 优先级高于 ||
短路运算(逻辑中断)
定义
有多个表达式(值)时，左边表达式可以确定结果时，不再继续运算右边表达式的值
逻辑
表达式1 && 表达式2
表达式1
真
返回表达式2
假
返回表达式1
表达式1 || 表达式2
表达式1
真
返回表达式1
假
返回表达式2
扩展运算符
...
数组的合并
const zuixuanxiaopingguo =[...kuaizi, ...fenghuang];
把数组转化为参数序列
数组的克隆
[...克隆数组名称]
将伪数组转为真数组
[...伪数组名称]
条件（三元）运算符
? :
条件表达式?
表达式1：
表达式2；
语句
(流程控制)
顺序结构
(顺序执行)
按照代码的先后顺序，依次执行
分支结构
(条件执行)
语句
if/else
一个条件
if(条件表达式){
执行语句；//true }
else{}
多个条件
if(条件表达式1{
执行语句1}
else if(条件表达式2){
执行语句2}
.
.
else{执行语句n}
特点
匹配判断条件
三元表达式
语法
条件表达式1 ？ 结果表达式2 ：结果表达式3；
本质
if双分支语句的简写
switch/case
语法
const num = n;
switch(n){
case value1：
n=== value1 时执行代码；
break；
case value2：
n === value1 时执行代码；
break；
...
default：
n !== 任意 value 时执行代码;
}
特点
匹配确定的结果
区别
一般情况
二者可以互换
判断条件
switch用于处理 case 比较确定值；
if用于范围判断
效率
switch语句条件判断后直接执行符合程序的语句，效率高
if判断所有条件，效率较低
分支
少，if 执行效率高于 switch
多，switch 执行效率高于 if，结构清晰
循环结构
(循环执行)
for loop
特点
需要计数，适合数组
语法
for( let i = 1; 条件表达式; 变量计数){
循环语句;}
for( let i = 1; i<=mxj.length; i++){
正循环语句;}
for( let i = mxj.length-1,;i>=0,;i--){
反循环语句;}
双重 for 循环
语句
for( let i = 1; i<=mxj.length,;i++){
循环语句;
for( let j = 1; j<=mxj.length; j++){
内循环语句;}
}
特点
外循环执行一次，内循环全部执行
外循环控制行数，内循环控制列数(个数)
组件
计数器：
初始化变量
let i = n;
终止条件：
条件表达式
i取值范围;
递增/递减：
操作表达式
i++/--
中断对比
continue
退出当前循环
符合条件后跳过
if(typeof mxj[i] !== 'string')continue;
break
退出整个循环
复合条件前停止
if(typeof mxj[i] === 'number')break;
return
退出当前函数
while loop
特点
计数器独立，可自由设置条件
较复杂的条件判断
语法
let i =0;
while(条件表达式){
循环语句;
i++;
}
do while
特点
至少执行一次循环体
语法
let i = 1;
do {
循环语句；
i++;
} while (条件表达式)
数组
new Array
定义
一组数据的集合，存储在单个变量下
特点
有序信息，顺序取值
操作
创建数组
(放入数据)
const arr=[元素1,元素2,...]
const arr = new Array (元素1,元素2,...)
内容仅一个数字时，无数据，声明长度
访问数据
形式
const 函数名=函数(arr[i])
const 函数名=[函数(arr[0]), 函数(arr[1]),...函数(arr[i])]
数组遍历
for(let i = 0,i<arr.length,递增/减){
console.log(arr[i]);
}
索引
arr[i]
i初始值为0
长度
arr.length
操作
修改
arr[i]='新内容'
增加
arr.push('last内容')
arr.unshift('first内容')
splice(index, n, insertValue)
支持查看length
删除
arr.pop(last)
arr.shift(first)
splice(index, num)
支持查看取下元素名
替换/删除
splice(index, n, insertValue)
index：起始位置
n：删除的项数
insertValue：插入任意数量的项数
函数
arr.indexOf('内容')
查询位置
arr.includes('内容')
查询存在（区分数字和字段）
冒泡排序
定义
一种算法，把一系列数据按顺序进行排列显示(从小到大/从大到小)
原理
重复走访要排序的数列，一次比较两个元素，如果顺序错误就交换，重复执行到没有需要交换的数据
语法
趟数
外层for循环：arr.length - 1
次数
内层for循环：arr.length - i - 1
交换两个变量
temp = arr[i]
arr[i] = arr[j]
arr[j] = temp
函数
function
定义
封装一段可以被重复执行调用的代码块
类型
声明函数
函数关键字
利用 function 自定义命名
结构
函数声明
无参数，无返回值
function 函数名(){
函数体(具体执行代码);}
如hello world
有参数，无返回值
function 函数名(形参1,形参2,...){
函数体(具体执行代码);}
如定义几次hello world
有参数，有返回值
function 函数名(形参){
函数体(具体执行代码);
return 表达式;}
return
返回值
到达后停止运算
函数名() = return 后表达式结果
逗号分割仅支持返回最后一个值，通过数组返回多个值
调用函数
函数名(实参1, 实参2, ...);
匿名函数
(函数表达式)
特点
声明变量模式
无函数名，仅变量名
支持传参，需要调用函数
const 变量名 = function(){}；
function();
箭头函数
const 变量名 = 参数=> 函数体(具体执行代码);
注意
函数功能
函数名必须体现其功能
函数不调用就不执行
实际开发中，引用变量接收函数返回结果
参数
形参
parameter=the placeholder
不确定的值
实参
argument=real value
实际数值
传参
用实参给形参赋值
arguments
——数组
语法
function date(){
console.log(arguments):}
date('小白','小黑')
意义
用伪数组的形式，存储所有传递过来的实参(不清楚用户传递实参个数时使用)
特点
伪数组，不是真正意义数组
按照索引方式进行存储
有length/遍历属性，没有pop(),push()等方法
只有函数含arguments对象，且均提前内置
rest
——对象
function date(a,b,...args){
console.log(a);
console.log(b);
console.log(args);}
fn(1,2,3,4,5,6,7);
函数调用
全局调用
构造函数调用
函数方法调用
apply
call
作用域
定义
代码名字(变量)的有效作用范围
意义
划分不同作用域提高程序可靠性，减少命名冲突
作用域
全局作用域
在函数外 ，整个script标签
页面打开时创建，页面关闭时销毁
局部/函数作用域
在函数内部
块级作用域
{被花括号包裹的区域}
变量作用域
全局变量
全局作用域下的变量，全局可以使用
注意：函数内部，没有声明直接赋值也属于全局变量(不建议使用)
效率：任意作用域引用，只有在浏览器关闭时被销毁，比较占内存
局部变量
局部作用域下的变量，函数内部可以使用
注意：函数形参也可以看做局部变量
效率：仅在函数内部使用，所在代码块被执行时初始化；代码块运行结束后被销毁，节省内存空间
作用域链
内部函数访问外部函数的变量，用链式查找方式决定取值(就近原则，由内到外逐层查找，查到即停)
对象
objects
定义
复合数据类型，是一组无序的相关【属性】和【方法】的集合
属性
依附在对象上的变量
方法
依附在对象上的函数
语法
let obj = {
属性名：属性值 ,
方法名：(匿名)函数}
操作数据
访问对象
（查）
属性访问
(获得对象里的属性值)
obj.属性名
obj['属性名']
方法访问
(获得对象里的函数)
obj.方法名()
重新赋值
（改）
obj.属性名 = 值
obj.方法名 = function(){}
添加数据
（增）
obj.新属性名 = 新值
删除属性
（删）
delete obj.属性名
遍历对象
for in
for (let k in obj){
console.log(k) //属性名
console.log(obj[k]) //属性值
}
k 是 key 的缩写，
键值对(key:value)(属性:属性值)中的键
k 是一个变量，不能加 ''
分类
自定义对象
开发人员自己创建
内置对象
定义
js语言自带对象供开发者使用，并提供一些常用或基本而必要的功能（属性和方法）
常用
Math
random()：生成[0,1)随机数
Math.floor(Math.random() * (M - N + 1)) + 1
trunc()：保留小数点左侧取整
ceil()：向上取整
floor()：向下取整
round()：就近取整
特殊情况- .5往大取整：
round(-1.5) //-1
max/min
pow：幂运算
abs：绝对值
Number
String
Date
类型
时间戳：
从1970.1.1距今总毫秒数
.parse()
getTime()
.setTime()
日期
new Date()
Date.now()
valueOf()
返回指定对象的原始值
倒计时
Array
Boolean
Math
random
floor
ceil
round
trunc
查文档
MDN
W3C
宿主对象
JS运行环境提供对象
BOM
Browser Object Model
console
DOM
Document Object Model
document
操作
创建对象
字面量
const mxj = {
属性名1:'字符',
属性名2:['数组','',...],
属性名3:数字,
属性名4:布尔,
属性名5:函数表达式
}
new Object
var obj = new Object();
obj.name = '';
obj.sex = '';
obj.friends = function(){}
构造函数
function Mxj(uname,sex,...){
this.name = uname;
this.sex = sex;}
var liu = new Mxj('小白','男');
把对象中相同的属性和方法抽象出来封装到函数里
添加/修改属性
对象.属性名='';
对象['属性名']='';
读取属性
对象.属性名
点后面必须输入已有属性
对象['属性名']
方括号内可以添加表达式
对象.方法名()
for in
遍历属性
for(var k in obj){
console.log(k);
console.log(obj[k])
}
属性名
属性值
删除属性
delete 对象.属性名
delete 对象['属性名']
检查属性是否存在
"属性名" in 对象；
true
false
方法
methods
定义
添加在对象上，作为属性保存的函数表达式
this
为避免重复，使用this.对象名来引用内容
指向调用者
全局作用域或普通函数——window
方法调用——调用者
构造函数——构造函数实例
.this
静态属性，作用域固定指向函数声明时所在作用域下的this值
不能作为构造实例化对象
简写
一个形参，省略形参小括号
一行代码，省略花括号和return
使用范围
适合
无关this
定时器
数组
不适合
有关this
事件回调
对象方法
Web APIs
DOM
基础
定义
文档对象模型(Document Object Model)操作html和css，浏览器提供的专门用来【操作网页内容】的功能
作用
开发网页内容特效(改变网页内容、结构、样式)、实现用户交互
DOM树
定义
HTML内容完整呈现，利用DOM树进行复杂交互操作
作用
直观体现标签与标签之间的关系
内容
文档
document:网页的一个页面
元素
element:页面所有标签
节点
node:网页中所有内容(标签、属性、文本、注释等)
DOM对象
定义
浏览器根据html标签生成的JS对象
特点
所有的标签属性都可以在这个对象上找到
修改对象的属性会自动映射到标签上
核心思想
把网页内容当做对象来处理
获取元素
通过CSS选择器
查询选择器
.querySelector('CSS选择器')
选取第一个元素对象，可以直接操作
.querySelectorAll('CSS选择器')
有长度、索引值的伪数组；
无pop()、push()等数组方法；
需要遍历for获得里面每一个对象
其他(了解)
ID
.getElementID('html id名')
标签名
.getElementsByTagName('html 标签名')
类名
.getElementsByClassName('html 类名')
特殊元素
body
document.body
html
document.documentElement
节点
父
parentNode
子
children
兄
previousElementSibling
nextElementSibling
设置/修改元素
内容
document.write()
只能将文本内容追加到</body>前面的位置
文本中包含的标签会被解析
obj.innerText
将文本内容添加/更新到任意标签位置
【不识别标签】
obj.innerHTML
将文本内容添加/更新到任意标签位置
【解析标签】
属性
常用
.src/.href/.title
样式
.style
样式
.className
操作类名
修改样式较多，借助css类名修改style属性
新值覆盖旧值，如果需保留旧值同时引用
.classList
类属性
.add('类名')
.remove('类名')
.toogle('类名')
表单
.value
值
.type
类型
text
password
checkbox
.checked
选中
.disabled
禁用
定时器
一次性延时
window.setTimeout(函数，延迟的毫秒数)
clearTimeout(timerName)
间歇函数
语法
setInterval(函数，间隔毫秒数)
clearInterval(timerName)
特点
timerName返回定时器序号
事件监听
定义
事件
编程时系统内发生的动作或事情
事件监听
程序检测是否有事件发生，一旦触发事件立即调用相应函数响应
语法
语法
L0
事件源.on事件 = fn(){}
特点
同一事件&对象
后注册事件覆盖之前
执行
冒泡阶段
解绑
null覆盖
L2
元素源.addEventListener("事件", fn(){},是否使用捕获)
特点
同一事件&对象
后注册事件不会覆盖之前
执行
第三个参数
false(默认)
冒泡阶段
true
捕获阶段
解绑
removeEventListener("事件", fn(){},捕获/冒泡)
匿名函数无法解绑
三要素
事件源
DOM元素
事件操作接受对象
事件
触发方式
鼠标事件
click
鼠标点击
mouseenter
鼠标经过
mouseleave
鼠标离开
焦点事件
(表单光标)
focus
获得焦点
blur
失去焦点
键盘事件
(全局事件)
keydown
按键后触发，长按重复触发
任意键
keypress
点击后触发，长按重复触发
字符键
keyup
释放时触发事件
字符键
文本事件
(表单输入)
input
用户输入
元素.value.length
事件调用函数
事件操作影响对象
拓展
高阶函数
函数表达式
当做值使用
回调函数
当做参数使用
环境对象
this
谁调用，this指向谁
箭头函数this指向全局
排他思想
当前元素为A状态，其他元素为B状态
方法
for循环
干掉别人
for循环
复活自己
this/下标
预加active
css预填加唯一类，js找到并删除
添加类属性
去收尾空格
trim
' str '.trim()
DOM节点
定义
DOM树里每一个内容
分类
元素(标签)
属性
文本
操作
查找节点
父节点
parentNode.属性
子节点
childNodes
获得所有子节点，包括文本节点(空格、换行)、注释节点等
父元素.children
(重点！)
仅获得所有元素节点
返回伪数组
兄弟节点
previousElementSibling属性
nextElementSibling属性
增加节点
普通操作
创建节点
语法
createElement('标签')
innerHTML赋值
追加节点
父元素的最后一个
父元素.appendChild('标签')
父元素的某元素前
父元素.insertBefore('标签',某元素)
高级操作
创建节点
var li = ``
追加节点
insertAdjacentHTML(position,'字符串')
beforebegin
元素自身前面
afterbegin
元素内部第一个子节点前面
beforeend
元素内部最后一个子节点后面
afterend
元素自身后面
克隆节点
复制原有节点
元素.cloneNode(布尔值)
true
包含后代节点
false
不包含后代节点(默认)
追加节点
删除节点
原理
JS的原生DOM中，必须通过【父元素】删除节点
语法
父元素.removeChild(要删除的元素)
特点
无父子关系，无法删除
从html中删除节点，与隐藏节点(display:none)不同
时间对象
实例化(new)
new Date()
(空)
获得当前时间
(指定时间)
返回指定时间
时间对象
getFullYear()
四位年份
getMonth() + 1
取值[0,11]
getDate()
几号
getDay()
星期，取值[0,6]
定义arr星期数组显示
getHours()
getMinutes()
getSeconds()
toLocalString()
简化获取当地时间
时间戳
(倒计时)
定义
从1970年1月1日0是0分0秒起现在的【毫秒数】，一种特殊计量时间方式
方式
new Date()
getTime()
+new Date()
利用 new Date 隐式转换，
强烈推荐！！
Date.now()
仅得到当前时间戳
事件对象
定义
有事件触发时相关信息的对象
如：鼠标点击事件中，保存鼠标点击位置的信息
获取
事件绑定回调函数的第一个参数(event/evt/e)
常用属性
type
clientX/Y
可见窗口
获取光标相对于【浏览器可见窗口】左上角位置
pageX/Y
文档
获取光标相对于【文档】左上角位置
常用
offsetX/Y
盒子
获取光标相对于【当前DOM元素】左上角位置
不常用
key
用户按下键盘的键值
keyCode已失效不提倡
事件流
定义
事件完整执行过程中的流动路径
阶段
捕获阶段
(父到子)
事件捕获
从DOM根元素开始去执行对应事件，需要写对应代码
代码
DOM.addEventListener(事件类型,事件处理函数,是否使用捕获机制)
true
捕获阶段触发(用得少)
false
冒泡阶段触发(默认)
L0(onclick)
只有冒泡没有捕获
冒泡阶段
(子到父)
事件冒泡
元素触发事件后，依次向上调用所有父级元素的【同名事件】
阻止
事件流动
事件对象.stopPropagation()
默认行为
事件对象.preventDefault()
鼠标经过事件
冒泡效果
mouseover
mouseout
无冒泡效果
(推荐)
mouseenter
mouseleave
事件委托
定义
利用事件流特征解决一些开发需求
操作
父元素添加事件，触发子元素
真正触发元素：事件对象.target
优点
避免使用for循环，提高性能
重绘和回流
浏览器界面渲染
解析(Parser)
HTML，生成DOM树
CSS，生成样式规则
渲染树(Render Tree)
根据DOM树和样式规则生成
重绘和回流
布局(Layout)
回流/重排
得到节点几何信息(位置、大小、布局等)
影响布局，
导致回流
页面首次刷新
浏览器窗口大小变化
元素大小/位置变化
字体大小变化
内容变化(input输入，图片大小)
激活css伪类(:hover)
脚本操作DOM(添加或删除可见的DOM元素)
重绘(Painting)
根据计算和获取信息进行整个页面绘制(颜色、阴影等)
展示(Display)
展示在页面上
重构
分支主题
分支主题
网页特效
监听事件
滚动事件
scroll
定义
页面进行滚动时触发的事件
语法
window/document/box
.addEventListener('scroll', fn(){})
加载事件
load
定义
外部资源(图片/外联CSS/JS等 加载完毕时触发)
背景
需要页面资源全部加载后进行
script写进head内时，无法直接找到DOM元素
语法
window
.addEventListener('load', fn(){})
document
.addEventListener('DOMContentLoaded', fn(){})
DOM树加载完就进行，不等图片/样式表加载，速度更快
改尺寸事件
resize
定义
窗口尺寸改变的时候触发
语法
window
.addEventListener('resize', fn(){})
元素大小和位置
scroll
意义
获取滚动距离(像素)
获取宽高
【内容】
scrollWidth
scrollHeight
获取位置
【内容】
scrollLeft
scrollTop
定义
相对浏览器可见窗口上边界，向上滚动的不可见内容距离（卷去的头部）
语法
document.documentElement.scrollTop
documentElement ==> html所有标签
offset
意义
获取元素自身宽高、padding、bordor
获取宽高
(整个盒子)
offsetWidth
offsetHeight
获取位置
(定位父级)
offsetLeft
offsetTop
client
意义
获取当前可视区域宽高，不含滚动条和bordor
获取宽高
(可视区域)
clientWidth
clientWidth / n ==> 获取 rem
clientHeight
获取边框
(元素边框)
clicentLeft
clientTop
BOM
window对象
BOM
定义
浏览器对象模型(Browser Object Model)，提供独立于内容而与浏览器窗口交互的对象，核心对象是window
window
全局对象
navigator
location
document
DOM
history
screen
函数
定时器
延时函数
语法
let timer = setTimeout(回调函数，等待毫秒数)
clearTimeout(timer)
递归函数
定义
自己调用自己的函数
语法
fn(){ fn() }
fn()
特点
易造成死递归，必须添加退出条件
window对象常用事件
窗口加载
load
Dom元素、图片、css等全部加载完毕后
DOMContentLoaded
DOM加载完毕后，速度更快
窗口大小
resize
响应式布局
innerWidth
当前屏幕宽度
定时器
一次性延时
window.setTimeout(调用函数，[延迟的毫秒数])
clearTimeout(timerID)
重复延时
setInterval(调用函数，[延迟的毫秒数])
clearInterval(调用函数)
JS执行机制
event loop
JavaScript
单线程，同一时间只能做一件事
任务
分类
同步任务
<执行栈>
单线程/按顺序执行
异步任务
<任务队列>
普通事件
click
resize
资源加载
load
error
定时器
setInterval
setTimeout
回调函数
promise
async await
ajax
事件循环
event loop
定义
主线程不断地重复获得、执行任务，再获得、再执行任务
执行机制
同步任务=>JS主线程
【主线程/执行栈】中同步任务执行完毕，查询【任务队列】，推入主线程处理
异步API(web API)
异步任务提交对应【异步进程】，根据任务先后顺序排列，推入任务队列
异步任务=>任务队列
微任务
宏任务
location对象
window提供本属性用于获取或设置窗体的URL，且可用于解析URL
URL
链接
定义
统一资源定位符(Uniform Resource Locator)，互联网标准资源的地址
语法
protocol://host[:port]/path/[?query/#fragument
location
属性/方法
href
获取或设置整个URL
search
返回参数，符号？后面部分
hash
返回哈希值，符号#后面部分
reload()
刷新按钮
空值
刷新(本地缓存)，等同F5
true
强制刷新(网络更新)，等同ctrl+F5
assign()
跳转页面，记录浏览历史支持后退
replace()
跳转页面，不记录浏览历史支持后退
navigatior对象
userAgent
返回客户机发送服务器的useragent头部值，配合前端代码判断终端类型，实现跳转
history对象
定义
window提供一个history对象（含用户浏览器窗口中访问过的URL），与浏览器历史记录交互
方法
back()
forward()
go(参数)
前进后退功能
参数为1，前进1个页面
参数为-1，后退1个页面
swiper插件
官网查看使用方式
本地存储
分类
localStorage(常用)
操作
简单数据
存储数据
setItem('key','value')
获取数据
getItem('key')
删除数据
removeItem('key')
全部删除
clear()
复杂数据
存储数据
【复杂数据】转为【JSON字符串】
setItem('obj',JSON.stringify(obj))
获取数据
【JSON字符串】转为【对象】
getItem('JSON.parse(localStorge.getItem('obj'))')
删除数据
removeItem('key')
sessionStorage
特点
生命周期到浏览器关闭
多窗口(页面)共享(同一浏览器)
键值对形式存储使用
操作
与localStorge基本相同
特点
在用户浏览器中存储数据
设置、读取方便，页面刷新不丢失数据
容量较大，sessionStorage和localStorage约5M
仅存储字符串
自定义属性
固有属性
标签自带属性
自定义属性
程序员自主添加属性
data-自定义属性
正则表达式
Regular Expression
介绍
用户匹配字符串组合的模式，通常用于查找、替换符合正则表达式的文本
匹配：表单验证
替换：过滤页面敏感词
提取：获取特定部分
语法
定义
let reg = /obj/
/ / => 字面量
查找
reg.test('包含obj吗?')
true
false
regObj.exec('包含obj吗?')
['obj', index, input:' ', groups ]
null
字符
普通字符
仅描述自身
字母
数字
元字符
(特殊字符)
边界符
(开头/结尾)
/^开头/
/结尾$/
/^精确匹配$/
量词
(重复次数)
*
重复零次或多次
n >= 0
+
重复一次或多次
n >= 1
?
重复零次或一次
n = 0 || n = 1
{n}
重复n次
{n,}
重复n次或多次
{n,m}
重复n-m次
字符类
(简写形式)
[类选一]
[a-zA-Z-]
[0-9_]
[\u4e00-\u9fa5]
中文一到九，含所有汉字
符号
[^]
取反，禁止输入某字符
.
匹配除换行符之外的任意单个字符
预定类
\d
[0-9]
\D
[^0-9]
\w
[a-zA-Z0-9_]
\W
[^a-zA-Z0-9_]
\s
[\t\r\n\v\f]
匹配空格(换行符、制表符、空格符等)
\S
[^\t\r\n\v\f]
修饰符
(约束细节)
/表达式/i
ignore，匹配字母不区分大小写
/表达式/g
global，匹配所有满足结果
字符串.replace(/表达式1|表达式2/g，'**')
替换敏感词
JS高级
ES6新增
ECMAScape6.0
是JS的规格，JS是其实现
声明命令
let
特点
声明变量仅在【块级作用域】有效
无变量提升
暂时性死区
区块中存在let/const，区块内声明变量形成封闭作用域覆盖全局变量，声明前使用这些变量会报错
不允许重复声明
let不允许相同作用域内，重复声明同一个变量
块级作用域
内层代码块不影响外层代码块
外层作用域无法读取内层作用域的变量
声明的函数类似var，会提升到块级作用域头部
尽量写成函数表达式
const
声明一个只读的常量，必须初始化
特点同let
import
class
解构赋值
解构
赋值运算符的扩展，从数组和对象中提取
let {}/[] = 变量名
允许指定默认值
仅数组成员严格等于 undefined 时，默认值生效
默认值为表达式时惰性求值，用到时才会求值
分类
数组
数组元素按照次序排列，变量取值由位置决定
对象
对象属性没有次序，变量必须与属性同名
先找到同名属性，然后赋值给对应变量
字符串
字符串转换为类似数组的对象
数值/布尔值
只要等号右边值不是对象，先转换为对象
undefined/null无法转换对象，进行结构赋值会报错
函数参数
对象
{x=0, y=0}
为变量x，y指定默认值
默认值
{x:0, y:0}
为函数参数指定默认值
圆括号
禁用情况
变量声明语句
函数参数
赋值语句整个模式，或嵌套模式中的一层
使用情况
赋值语句的非模式部分
用途
交换变量的值
从函数返回多个值
将一组参数与变量名对应
提取JSON数据
函数参数的默认值
遍历Map结构
输入模块的指定方法
字符串扩展
Unicode表示法
\uxxxx表示一个字符，xxxx为字符码点
字符范围超过\uFFFF，将码点放入大括号
实例对象.codePointAt()
正确处理4个字节储存的字符，返回一个字符的码点
测试字符的字节为2/4
String.fromCodePoint()
用于从码点返回对应字符
遍历器接口
for...of 循环遍历
识别大于0xFFFF的码点
at()
识别大于0xFFFF的码点，返回正确字符
normalize()
表示欧洲语言的语调和重音符号
模板字符串
用法
`字符串${变量/表达式/调用函数}`
保留空格、缩进、换行
功能
实例：模板编译
标签模板
(函数调用)
模板字符串紧跟在一个函数名后面，该函数被用来处理这个模板字符串
标签`字符串` => 函数(参数)
String.raw()
模板字符串处理函数，返回的字符串斜杠也被转义(斜杠前面再加一个斜杠)，对应替换变量后的模板字符串。原字符串斜杠已经转义，则不做处理
正则扩展
RegExp构造函数
new RegExp('字符串','flag') =>
/字符串/flag
new RegExp(字符串/flag1,'flag2') =>
/字符串/flag2
忽略原有的正则表达式修饰符，使用新指定修饰符
字符串的正则方法
match()
replace()
search()
split()
u修饰符
含义
Unicode模式，用来正确处理大于\uFFFF的Unicode字符
正则表达式行为
点（.）字符
除换行符以外的任意单个字符
Unicode字符表示法
大括号表示Unicode字符
量词
预定义模式
i 修饰符
y修饰符
粘连(sticky)修饰符，类似g修饰符全局匹配，后一次匹配从上一次匹配成功的下一个位置开始
g修饰符在剩余未知中存在匹配即可
y修饰符确保匹配从剩余的第一个位置开始
stycky属性
是否设置y修饰符
flags属性
返回正则表达式修饰符
断言
先行(否定)断言
x只有(不)在y前面才匹配
后行(否定)断言(ES7提案)
x只有(不)在y后面才匹配
数值扩展
进制表示法
二进制前缀
0b/0B
八进制前缀
0o/0O
Number.
isFinite()
isNaN()
parseInt()
parseFloat()
isInteger()
是否为整数
EPSILON()
极小常量，用于为浮点数计算设置误差范围
Max/Min_SAFE_INTEGER
JS准确表示的整数范围(-2^53,2^53)，两个常量用于表示该范围上下限
isSafeInteger()
判断一个【整数】是否落在范围(-2^53,2^53)
Math.
rtrunc()
数值
去除一个数的小数部分，返回整数部分
非数值
内部使用Number方法将其先转为数值
空值/无法截取整数
NaN
sign()
正数
+1
负数
-1
0
0
-0
-0
其他值
NaN
cbrt()
计算一个数的立方根
clz32()
JS正数用32位2进制表示，该方法返回数值的32位无符号【整数】有多少前导0
imul()
返回两个数以32位带符号整数相乘的结果，精度更高
fround()
返回数值的单精度浮点数形式
hypot()
返回【所有参数】平方和的平方根
数组扩展
Array.from(伪数组名, fn处理每个元素)
将类伪数组转为真正数组
Array.of()
将一组值(任意数据类型)转为数组
copyWithin(target, start = 0, end = this.length)
target(必填)
从该位置开始替换数据
start/end
开始/停止读取数据，负值表示倒数
find(fn(value, index, arr)){}
找出第一个符合条件的数组成员并返回
value
当前值
index
当前位置
arr
原数组
findIndex(fn(value, index, arr)){}
返回第一个符合条件的数组成员位置
fill(value, start, end)
用于空数组的初始化，数组原有元素被覆盖
遍历数组
for...of/next()
keys()
键名遍历
values()
键值遍历
entries()
键值对遍历
includes(value, start)
数组是否包含给定值vaule，start为起始位置
空位
ES6明确将空位转为undefined，函数对空位的处理规则不统一，尽量避免出现空位
函数扩展
函参的默认值
参数变量在参数定义后面默认声明，不能用let/const再次声明
fn(a = 1, b = fn1){}
剩余参数
...value
用法
与解构赋值默认值结合使用
参数默认值位置
尾参数
非尾参数
参数无法只省略该参数而不省略后面参数，除非显示输入undefined
length
返回没有指定默认值的参数个数，length属性不计入参数后面的值
作用域
当参数默认值是变量，其作用域规则等同其他变量，即先当前函数作用域，后全局作用域
扩展运算符
剩余运算符
(...value)
含义
形参 => 获取函数多余参数并放入数组
特点
只能放在最后，不在length属性内
扩展运算符
(...)
含义
函数调用 => rest参数逆运算，将数组分隔为参数
替代数组apply方法
扩展运算符可以展开数组，无需apply方法
例子
Math.max(...[])
push(...[])
应用
合并数组
[...arr1, ...arr2, ...arrn]
与结构赋值结合
函数返回值
返回多个值
字符串
将字符串转为真正数组
正确返回32位Unicode字符长度
实现Iterator接口对象
任何Iterator接口的对象，均可用扩展运算符转为真正数组
Map/Set/Generator
name属性
返回函数的函数名
箭头函数
基本用法
const/let 变量 = (参数1,参数2...) => {
return {}}
const/let 变量 = (参数1,参数2...) => ({})
注意
this静态，指向函数定义生效时所在对象
不能作为构造函数 new 实例化对象
不能使用arguments变量，可以使用Rest参数
不能使用yield命名，不能用作Generator函数
嵌套
函数绑定运算符
（::）
对象::函数
自动将左边的对象，作为this对象绑定到右边函数上
尾调用优化
尾调用
尾调用
(Tail Call)
某函数的【最后一步】是调用另一个函数
调用帧
(call frame)
函数调用在内存形成的调用记录，保存调用位置和内部变量等信息。所有的调用帧形成一个调用栈(call stack)
尾调用优化
(Tail call optimization)
指不再用到外层函数的内部变量，仅保留内层函数调用帧，仅严格模式开启
严格模式
正常模式下，函数内部有两个变量arguments和caller可以跟踪函数调用栈；严格模式禁用这两个变量
正常模式
采用“循环”换掉“递归”，自己实现尾递归优化
递归
递归
函数调用自身
同时保存成千上百个调用帧，非常消耗内存，易发生“栈溢出”错误
尾递归
尾调用自身
只存在一个调用帧，不会发生“栈溢出”错误
递归函数改写
所有用到的内部变量改写为函数的参数
柯里化
(curring)
将多参数的函数转为单参数形式
函数参数的尾逗号
对象扩展
属性的简洁表示法
大括号内直接写变量(属性)和函数(方法)
属性名 = 属性值 => 直接写属性名，省略属性值
属性名表达式
标识符 作为属性名
[表达式] 作为属性名
方法的name属性
返回函数名
特殊情况
bind()方法创造函数
返回bound 函数名
Function构造函数创造函数
返回anonymous
Symbol值
返回该Symbol值的描述
方法
Object.is()
(严格相等判断)
类似(===)，差异
+0 不等于 -0；
NaN 等于自身
Object.assign(target, obj1, obj2...)
对象合并，将源对象(obj)所有可枚举属性复制到目标对象(target)
目标对象与源对象或源对象之间有同名属性，后覆盖前
参数
一个
返回该参数
非对象
先转为对象再返回
undefined/null
报错
无限/不可枚举
拷贝失败
非首参数
所有参数转为对象
无法转为对象即跳过
undefined/null不会报错
其他类型值(数值、字符串、布尔值)
不报错，除字符串以数组形式拷入目标对象，其他值不产生效果
注意
浅拷贝，目标对象仅拷贝源对象的对象值引用，对象任何变化直接反映到目标对象
嵌套对象中遇到同名属性，直接替换
数组视为属性名index的对象，不同数组形成覆盖
常见用途
为对象添加属性
为对象添加方法
克隆对象
合并多个对象
为属性指定默认值
属性的可枚举型
getOwnPropertyDescriptor()
对象的每个属性都有一个描述对象(Descriptor)来控制该属性行为，本方法可以获取属性描述对象
enumberable属性
可枚举性
尽量使用Object.keys()
属性遍历
方法
for...in
Object.keys()
getOwnPropertyNames()
getOwnPropertySymbols()
Reflect.wonKeys()
遍历次序规则
①数值，按数字排序
②字符串，按生成时间排序
③Symbol值，按生成时间排序
_proto_属性
含义
用于读取或设置当前对象的prototype对象，不建议使用
属性
setPrototypeOf(写操作)
getPrototypeOf(读操作)
creat(生成操作)
扩展运算符
（...）
Symbol
概述
独一无二的值，通过Symbol函数产生
不能与其他类型值进行计算，可以显式转为字符串/布尔值
作为属性名
使用[]
消除魔术字符串
定义
在代码中多次出现，与代码形成强耦合的某一个具体字符串或数值
方法
将魔术字符串写成一个变量
属性名遍历
Object.getOwnPropertySymbols()
获取指定对象的所有Symbol属性名，返回数组
调用
Symbol.for()
接受字符串作为参数，搜索以该参数命名的Symbol值
存在
返回该Symbol值
不存在
返回一个以该字符串命名的Symbol值
生成的新Symbol登记在全局环境供搜索，每次调用先检查给定的key是否存在
Symbol.keyFor()
返回一个已登记的Symbol类型值的key
内置Symbol值
hasInstance
指向一个内部方法，其他对象使用instanceof，判断是否为该对象实例
isConcatSpreadable
布尔值，表示该对象使用Array.prototype.concat()时，是否可以展开
species
指向一个方法，该对象作为构造函数创造实例时会调用
match
指向一个函数，当执行str.match(myObject)时如果该属性存在会调用，返回该方法的返回值
replace
指向一个方法，当该对象被String.prototype.replace方法调用，会返回该方法的返回值
search
指向一个方法，当该对象被String.prototype.search方法调用，会返回该方法的返回值
split
指向一个方法，当该对象被String.prototype.split方法调用，会返回该方法的返回值
iterator
指向该对象的默认遍历器方法
toPrimitive
指向一个方法，该对象被转为原始类型的值时，会调用该方法，返回该对象对应的原始类型值
Proxy和Reflect
二进制数组
对象
ArrayBuffer对象
TypedArray视图
DataView视图
Set和Map
数据结构
Set
基本用法
定义
无重复值的有序列表
属性和方法
实例属性
prototype.constructor
构造函数，默认时Set函数
size
返回集合的元素个数
实例方法
操作方法
(操作数据)
add(value)
添加元素
delete(value)
删除元素
has(value)
校验某个值是否存在
clear()
清除所有成员，没有返回值
遍历方法
(遍历成员)
keys()
返回键名
values()
返回键值
entries()
返回键值对
forEach()
使用回调函数遍历每个成员
WeakSet
定义
与Set类似是不重复的值的集合
区别
成员值类型只能是对象
弱引用，不可遍历
Map
基本用法
定义
键值对的有序数列，键和值是任意类型
属性和方法
size
返回Map的元素个数
set(key, value)
增加一个新元素，返回当前Map
get(key)
读取key对应键值，找不到key返回undefined
has(key)
检测Map中是否包含某个元素，返回Boolean值
delete(key)
删除某个键
true
false
clear()
清除所有成员，没有返回值
遍历方法
(遍历成员)
keys()
返回键名
values()
返回键值
entries()
返回键值对
forEach()
遍历Map每个成员
WeakMap
定义
与Map结构基本类似，区别是仅接受对象作为键名(null除外)
区别
没有遍历操作
无法清空
Interator
遍历器
定义
一种新遍历机制接口，能快捷访问数据
核心
通过Symbol.interator创建迭代器，与生成器一起使用
通过迭代器next()获取迭代结果
迭代器时用于遍历数据结构的指针(数据库游标)
区别
for...of
返回键值，只返回具有数字索引的属性
可以与break、continue、return配合使用
Set和Map
遍历顺序是各成员被添加进数据结构的顺序
Set结构 => 值
Map结构 => 数组
for循环
写法较麻烦
forEach
数组内置，无法中途跳出循环
for...in
返回键名，遍历数组时以字符串作为键名
除遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键
某些情况下，以任意顺序遍历键名
适合遍历对象，不适合数组
Generator
生成器
定义
异步编程，通过yield关键字将函数挂起，可以改变执行流
特征
function关键字与函数名之间有一个*
yield只能在此函数内部使用，让函数挂起
=> 暂停执行
next(value, done)指针下移，首个/前一个yeild()执行传入实参
=> 恢复执行
第一个next()
不能带参数
第二次及之后next()
有参数
参数为上个yield的返回值
无参数
上个yield的返回值undefined
使用场景
为不具备Interator接口的对象提供遍历操作
应用
异步操作的同步化表达
控制流管理
部署Iterator接口
作为数据接口
遍历器接口
for...of
无需调用next()进行遍历，但是next()返回对象done属性为true，循环终止且不含该返回对象(return表达式无法返回)
原生JS对象无遍历接口，通过Generator函数加上接口，可以使用for...of循环
扩展运算符
解构赋值
Array.form()
yeild*
在一个Generator函数里执行另一个Generator函数
作为对象的属性
*Generator函数名
Pormise
定义
异步编程的新解决方案，用来封装异步操作并可以获取其成功或失败的结果
特点
对象状态不受外界影响
Pending（进行）
Resolved（成功）
Rejected（失败）
状态改变后不能逆转，随时可以得到此结果
语法
Promise构造函数：Promise(excutor){}
Promise.prototype.then()
Promise.prototype.catch()
异步操作和Async函数
异步编程
含义
JS执行环境为“单线程”，有异步编程才正常执行
方法
回调函数
事件监听
发布/订阅
Promise对象
Async函数
含义
Generator函数的语法糖，使异步操作更加方便
基本操作
返回一个romise对象
then
catch
class和对象
类
(抽象)
定义
抽取【对象】共用的【属性/方法】封装成一个类(模板)
创建
语法
class Name{
constructor(形参1,形参2...){
this.形参1 = 形参1；
this.形参2 = 形参2；
}}
实例
var xx = new name(形参1,形参2...)
注意
类内构造函数constructor(默认)，可以接收参数返回实例对象
类必须使用new实例化对象
类里面所有函数不需要写function，禁止逗号分隔
类的继承
语法
class Son extends Father{
constructor(x,y){
super.Father.fn();
this.x = x;
this.y = y;
}}
extends
继承父类属性和方法
super
调用父类函数
必须放到构造函数的参数之前
构造函数
constructor()
共有的属性和方法必须全部加this
this指向实例化对象，方法的this指向调用者
逻辑
实例化子类输出一个方法，先检测子类，子类无此方法再检测父类(就近原则)
对象
(具体)
定义
对【类】进行【实例化】，获取类的对象
修饰器
Decorator
一个函数，在代码编译时修改类的行为
编程思想
面向过程
POP
分析步骤，用函数一步一步实现步骤，调用函数
特点
性能高，适合硬件关联任务
没有面向对象容易维护、复用、扩展
面向对象
OOP
分解对象，由对象之间分工与合作，每个对象都是功能中心
特性
封装性
继承性
多态性
特点
容易维护、复用、扩展，由于特性可以设计低耦合系统
性能比面向过程低
第三方库
jQuery
定义
跨浏览器的JS库，封装JS方法，简化DOM操作
包装集
将Dom对象封装为jQuery包装集 => $()
art-template
Ajax
初识Ajax
简介
全称为Asynchronous Javascript And Xml，是异步JS和XML
无刷新获取数据
缺点
无浏览历史，无法退回
存在跨域问题（同源）
SEO不友好
工作原理
在用户和服务器之间的中间层(AJAX引擎)，使用户操作与服务器响应异步化
—些数据验证和处理交给Ajax引擎做，需要新数据由Ajax引擎代为向服务器提交请求
XMLHttpRequest
属性
onreadystatechange
存有处理服务器响应的函数
readyState
存有服务器响应的状态信息
0 请求未初始化（在调用 open() 之前）
1 请求已提出（调用 send() 之前）
2 请求已发送（这里通常可以从响应得到内容头部）
3 请求处理中（响应中通常有部分数据可用，但是服务器还没有完成响应）
4 请求已完成（可以访问服务器响应并使用它）
responseText
取回由服务器返回的数据
方法
open(method, URL, 是否异步处理)
参数1：设置请求类型
GET
POST
参数2：文件在服务器上的位置
参数3：是否异步处理请求
true
false
send(null)
HTTP协议
定义
超文本传送协议 (HTTP-Hypertext transfer protocol)，定义浏览器和万维网服务器之间互相通信的规则
步骤
创建XMLHttpRequest对象
new XMLHttpRequest()
设置请求方式
GET
POST
更新服务器上的文件或数据库
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
调用回调函数
发送请求
JSON
定义
JavaScript 对象表示法（JavaScript Object Notation）轻量级的文本数据交换格式
语法
数值
{ “key” : value}
字符串
{ “key” : “value”}
数组
{ “key” : [value]}
对象
{ “key” : {value}}
对象数组
{ “key” : [{“key1”: “value1”},{“key2”: “value2”}]}
数组对象
{“key”:{“key1”:[value1,value2]}}
进程与线程
定义
进程
cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
线程
cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
比喻：
进程(工厂)和线程(工人)
- 工厂的资源 -> 系统分配的内存（独立的一块内存）
- 工厂之间的相互独立 -> 进程之间相互独立
- 多个工人协作完成任务 -> 多个线程在进程中协作完成任务
- 工厂内有一个或多个工人 -> 一个进程由一个或多个线程组成
- 工人之间共享空间 -> 同一进程下的各个线程之间共享程序的内存空间（包括代码段、数据集、堆等）
浏览器
多进程
原理
系统给其进程分配资源（cpu、内存），每打开一个Tab页，就创建一个独立的浏览器进程
主要进程
Browser进程
特点
浏览器的唯一主进程（负责协调、主控）
作用
负责浏览器界面显示，与用户交互。如前进、后退等
负责各个页面的管理，创建和销毁其他进程
将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
网络资源的管理，下载等
渲染进程（浏览器内核）
特点
默认每个Tab页面一个进程，互不影响
作用
页面渲染，JS 执行，事件循环
主要常驻线程
GUI渲染线程
负责渲染浏览器界面，解析HTML，CSS，构建DOM树和RenderObject树，布局和绘制等
当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
GUI渲染线程与JS引擎线程互斥：
当JS引擎执行时GUI线程被挂起；当GUI更新会被保存在一个队列中等到JS引擎空闲时立即执行
JS引擎线程
JS内核，负责解析、运行JS脚本程序
JS引擎等待任务队列中的任务，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序
GUI渲染线程与JS引擎线程互斥：
如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞
事件触发线程
归属浏览器而非JS引擎，用来控制事件循环（JS引擎忙不过来，需要浏览器另开线程协助）
当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
由于JS单线程，待处理队列中的事件必须排队等待JS引擎处理（JS引擎空闲时执行）
定时触发器线程
setInterval与setTimeout所在线程
浏览器定时计数器并不是由JS引擎计数（JS引擎单线程, 处于阻塞线程状态会影响计时准确性）
通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms
异步http请求线程
XMLHttpRequest在连接后是通过浏览器新开一个线程请求
将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中，再由JS引擎执行
第三方插件进程
每种类型的插件对应一个进程，仅当使用该插件时才创建
GPU进程
最多一个，用于3D绘制等
特点
优势
避免单个page/插件崩溃影响整个浏览器
多进程充分利用多核优势
方便使用沙盒模型隔离插件等进程，提高浏览器稳定性
缺点
内存等资源消耗会更大，用空间换时间
线程
前端工程化
MVVM
定义
Model
业务逻辑和数据库
生成数据
View
页面视图
视图UI
ViewModel
视图数据模型和展现逻辑
请求数据及业务逻辑
结论
data中所有属性，最终出现在vm身上
vm身上所有属性及Vue原型上所有属性，在Vue模板中都可以直接使用
node.js
模块
终端
win+R或文件内shift+右键打开powershell
cd
修改路径
node
后置准确地址/文件名
cls
清空屏幕
esc按键
清空一行
分类
内置API
fs/path/http
fs文件系统模块
定义
官方提供的用来操作文件的模块（file system)
语法
导入
const fs = require('fs')
类型
fs.readFile(path [,options], callback)
读取文件内容
参数1：必选参数，字符串，表示文件路径
参数2：可选参数，表示以什么编码格式来读取文件（一般UTF-8）
参数3：必选参数，文件读取完成后，通过回调函数function(err, dataStr)拿到读取的结果
读取成功
err:null
读取失败
err:错误对象
dataSTR:undefined
fs.writeFile(path, data [,options], callback)
写入文件内容
参数1：必选参数，字符串，表示文件路径
参数2：必选参数，表示要写入的内容
参数3：可选参数，表示以什么编码格式来读取文件（一般UTF-8）
参数4：必选参数，文件读取完成后，通过回调函数function(err, dataStr)拿到读取的结果
读取成功
err:null
读取失败
err:错误对象
路径动态拼接问题
原因
相对路径
./
../
方案
绝对路径
注意
\为转义符，需将路径反斜杠全部修改为\\
缺点
移植性差，不易维护
当前文件所处目录
__dirname
path路径模块
定义
官方提供用于处理路径的模块
语法
导入
const path = require('path')
类型
path.join([...paths])
多路径片段拼接为完整路径字符串
'../'可以抵消前一个路径
__dirname当前文件所处目录
path.basename(path[, ext])
路径字符串中解析出文件名
参数1：必选参数，路径
参数2：可选参数，扩展名
path.extname(path)
获取路径中文件扩展名
http路径模块
定义
官方提供用于创建web服务器的模块，将普通电脑转为web服务器，对外提供web资源
创建基本web服务器
导入
const http = require('http')
创建web服务器实例
const server = http.creatServer()
为服务器实例绑定request事件，监听客户端请求
server.on('request', (req,res) =>{
事件处理函数}
req(request)
res(response)
解决中文乱码问题
res.setHeader('Content-Type', 'text/html; charset=utf-8')
启动服务器
server.listen()端口号，cb回调
服务器相关
IP地址
定义
互联网上每台计算机的唯一地址
点分十进制
(a.b.c.d)
a,b,c,d均为0-255之间的十进制整数
IP地址查询
Windows终端运行ping 网址
127.0.0.1
域名和域名服务器
localhost
端口号
定义
标识主机上进行通信的不同应用程序
注意
实际应用中URL的80端口可以被省略
第三方API模块(包)
express/mysql
npm与包
优点
基于内置模块封装出来，极大地提高了开发效率
来源
npm包共享平台
node package manager
搜索
www.npmjs.com
下载
registry.npmjs.org
安装
终端内操作：
npm install 包完整名称/
nmp i 包完整名称
包管理配置文件
项目开发中把node_modules文件夹，添加到.gitignore忽略文件中
npm init -y快捷在项目根目录中创建package.json配置文件，自动记录项目中安装的包
下包速度慢
原因
国外下载，海底电缆速度受限
方案
切换npm淘宝下包镜像源
查看当前镜像源
npm config get registry
修改镜像源为淘宝
npm config set registry=https://registry.npm.taobao.org/
安装nrm工具，快速切换下包镜像源
npm i nrm -g
nrm ls
nrm use taobao
分类
项目包
定义
安装到项目node_modules中的包
分类
开发依赖包
记录到dependencies节点，开发和项目上线后都需要用到包
核心依赖包
npm i 包名-D
记录在devDependencies节点，项目开发阶段使用，项目上线后不会用到
全局包
定义
执行npm install命令时提供了-g参数
分类
安装
npm i 报名 -g
卸载
npm uninstall 包名 -g
介绍
nrm
i5ting_toc
express
定义
优于http内置模块并基于此封装的第三方包，专门用来创建web网站/API接口的服务器
语法
导入express
const express = require('express');
创建web服务器
const app = express();
监听客户端请求并响应
get
app.get('路径后缀', (req, res) => {
res.send({JSON对象})})
post
app.get('路径后缀', (req, res) => {
res.send('文本字符串')})
调用app.listen(端口号，启动成功后的回调函数)，启动服务器
app.listen(80, (){console.log('server running at http://127.0.0')});
内容
托管静态资源
[./路径前缀,]express.static(‘文件夹’)
路由
定义
客户端请求与服务器处理函数之间的映射关系，业务处理最后环节
语法
app.get/post('路径', function(req, res){
rest.send();}
请求类型
get
post
请求的URL地址
处理函数
function(req, res)
模块化
背景
为方便对路由进行模块化管理，不建议将路由直接挂载到app上，推荐由路由抽离为单独模块
步骤
创建路由模块对于.js文件
调用express.Router()函数创建路由对象
向路由对象上挂载具体路由
使用module.exports向外共享路由对象
使用app.use()注册路由模块
中间件
定义
业务处理过程中的中间环节，包含输入和输出，本质是一个函数
调用流程
当一个请求到达express服务器后，可以连续调用多个中间件，从而对本次请求预处理
多个中间件和路由间共享一份req和res，因此可以在上游【统一定义】中间件req和res自定义属性和方法，供下游使用
语法
const mw = function(req, res, next){
调用函数;
next();}
next函数是实现多个中间件连续调用的关键，表示把流转关系转交给下一个中间件或路由
全局生效
app.use(mw)
简化全局生效
app.use((req, res){
调用函数;
next();})
局部生效
不使用app.use(mw)
路由内添加中间件名称
app.get/post('路径', mw, function(req, res){}
多个局部中间件
app.get/post('路径', mw1, mw2, function(req, res){}
app.get/post('路径', [mw1, mw2], function(req, res){}
分类
应用级别
绑定到app实例上
app.use()
app.get()
app.post()
路由级别
绑定到router实例上
router.post()
错误级别
形参提示错误
function(err, req, res, next){}
用来捕获整个项目发生的异常错误，防止项目异常崩溃
错误级别中间件必须放在所有路由之后
express内置
.static
.json
配置解析json格式数据
app.use(express.json())
req.body
.urlencoded
配置解析x-www-form-urlencoded格式数据
app.use(express.urlencoded({ extended: false}))
req.body
第三方
body-parser
const parser = require('body-parser')
app.use(parser.urlencoded({ extended: false}))
注：urlencoded根据此中间件封装
API接口
创建基本服务器&API路由模块
编写GET/POST接口
接口跨域问题
CORS（推荐使用）
Corss-Origin Resource Sharing
定义
由一系列HTTP响应头组成，并由其决定浏览器是否组织前端JS代码跨域获取资源
步骤
安装
npm i cors
导入
const cors = require('cors')
配置
app.use(cors())
注意
主要在服务器进行配置
在浏览器有兼容性
CORS响应头部
Access-Control-Allow-
Origin
res.setHeader('Access-Control-Allow-Orgin', '*'/ '具体域名')
Headers
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, X-custom-Header, ...')
注意
额外请求头信息需要在服务器端，通过本代码声明
Methods
res.setHeader('Access-Control-Allow-Methods', 'DELETE, PUT, ...'/ '*')
注意
默认支持GET/POST/HEAD请求
额外请求头信息需要在服务器端，通过本代码声明
分类
简单请求
请求方式
GET/POST/HEAD
HTTP头部信息
无自定义头部字段
Option
预检请求
请求方式
GET/POST/HEAD外的请求类型
HTTP头部信息
自定义头部字段
向服务器发送数据
JSON格式
JSON（仅支持GET请求）
cors跨资源共享
nodemon
终端命令从node app.js 修改为nodemon app.js实现项目自动重启
mysql
定义
数据库
组织、存储和管理数据的仓库
数据组织结构
数据库
数据表
数据行
字段
数据类型
安装/配置
MySQL Server
专门用来提供数据存储和服务的软件
MySQL Workbench
可视化的MySQL管理工具，操作MySQL Server中数据
安装教程：https://ock.cn/1emg9
基本使用
express中操作
前后端身份认证
自定义模块
使用require()加载自定义模块必须指定以./ 或../ 开发的路径标识符，否则node将其作为内置模块或第三方模块进行加载
模块化
定义
遵守固定规则，将大文件拆成独立且相互依赖的多个小模块。加载模块路径——require()
优点
代码复用性高
代码可维护
按需加载
分类
内置模块
官方提供，如fs、path、http等
自定义模块
用户创建的每个.JS文件
第三方模块
第三方开发模块，使用前需下载
模块作用域
自定义模块中定义的变量、方法等只能在当前模块内被访问，模块级别的访问限制
向外共享模块作用域中的成员
module对象
存储和当前模块有关的信息
module.exports === exports
require()模块时，恒得到module.exports指向对象
为防止混乱，同一模块中仅使用一个
CommonJS
模块化规范
定义
规定模块的特性和各模块间如何相互依赖
内容
module变量代表当前模块
module变量是一个对象，其exports属性是对外接口
require()方法用于加载exports属性
定义
一种基于chromeV8引擎的JS运行环境，不是独立语言
区别
浏览器
JS的前端运行环境，支持调用BOM/DOM等浏览器内置API
node.js
JS的后端运行环境
Vue
一、Vue核心
基础
定义
一套用于构建用户界面的渐进式JS框架
将原始数据排版为面向用户的界面
自底层向上逐层应用，支持小巧核心库和引入各式插件
初识Vue
特点
组件化，复用代码，提高可维护性
声明式，无需直接操作DOM，提高开发效率
虚拟DOM+Diff算法，复用DOM节点
过程
创建Vue实例，传入配置对象
root容器内代码（vue模板）符合html规范，混入一些特殊vue语法
Vue实例与容器必须一一对应
现实开发中只有一个Vue实例，配合组件一起使用
{{js表达式}}可以自动读取到data中所有属性
data中数据发生改变，页面中引用该数据的地方也会自动更新
语法
模板语法
（容器）
插值语法
{{js表达式.属性}}
解析标签体，可以直接读取data属性
指令语法
v-bind:href='表达式.属性'
:href='表达式.属性'
解析标签(标签属性/标签体内容/绑定事件...)，可以直接读取data属性
阻止提示
<script type="text/javascript">
Vue.config.productionTip = false;
创建Vue实例
const vm = new Vue({
el: "#demo",
data: {},
...
});
el
关联模板
创建new Vue时
el:'容器名称'
创建new Vue后
v.$mount('容器名称')
data
数据
对象式
data:{}
函数式
data:function(){
return{
}}
data(){
return{
}}
组件必须使用函数式，否则报错
Vue管理的函数禁止使用箭头函数，会改变this指向
methods
数据代理
computed
计算属性
filters
过滤器
定义
对要显示的数据进行特定格式化后再显示（适用于简单逻辑处理）
语法
注册
全局
Vue.filter(name, callback)
局部
new Vue{filters:{}}
使用
{{ xxx | 过滤器名 }}
v-bind:属性 = 'xxx | 过滤器名'（不常用）
注意
过滤器可以接收额外参数，多个过滤器可以串联
没有改变原数据，产生新对应数据
mounted
挂载后调用
Vue完成模板解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
数据绑定
单向(v-bind:)
数据只能从data流向页面
v-bind: ==> :
双向(v-model:)
数据支持data与页面相互流动
v-model:value= ==> v-model=
用于【表单/输入】
条件(v-if)
监听(v-on)
MVVM模型
model（模型储存data数据）
view（页面）
viewmodel（页面模型，即vue实例）
主要内容
数据代理
定义
通过一个对象代理对另一个对象中属性的操作（读/写）
语法
Object.defineProperty(变量名, '属性', {
value: })
属性
enumerable:true
是否可枚举，默认false
writable:true
是否可修改，默认false
configable:true
是否可删除，默认false
get(){
return 变量
}
读取数据属性时，get函数(getter)被调用，返回变量值
set(){
return 变量
}
修改数据属性时，set函数(setter)被调用，返回修改值
事件处理
语法
v-on:xxx ==> @xxx
click
keyup
位置
事件=>按钮标签内
@click='引用事件函数'
事件函数=>Vue实例内
methods:{
事件函数(){
}}
注意
this
methods中配置函数，禁止使用箭头函数，否则导致this作用域成为window
methods中配置函数，均为Vue管理，this指向 vm 或 组件实例对象
$event
传参
@click='demo($event)'
事件修饰符
语法
常用
prevent
阻止默认事件
stop
组织事件冒泡
once
事件仅触发一次
不常用
capture
使用事情的捕获模式
self
仅当前操作元素为event.target时触发
passive
事件的默认行为立即执行，无需等待事件回调
注意
修饰符可以连续写
键盘事件
常用9键
enter
delete
esc
space
tab(特殊：必须配合keydown使用)
up
down
left
right
系统修饰键
4键
ctrl
alt
shift
meta(win键)
特殊用法
keyup
按下修饰键的同时按任意其他键，释放其他键时触发事件
keydown
正常触发事件
自定义别名按键
（不推荐）
Vue.config.keyCodes.别名=n
计算属性与监视
函数
computed:{}
计算属性
定义
需要属性不存在，通过对已有属性计算得到
语法
computed:{
fn{
set(){},get(){}
}}
只读不写无setter
简写 ==>
computed:{
fn(){
}}
底层借助Object.defineproperty方法提供的getter和setter
特点
与methods相比，内部有缓存机制(复用)，效率高，调试方便
get执行条件
初次读取执行一次
依赖数据发生改变再次调用
计算属性
体现在vm上，直接读取即可
set函数修改计算属性，且必须改变计算依赖数据
watch:{}
监视
范围
全局
vm.$watch('监控对象'，{
immediate:true,
handler(newValue, oldValue){}
})
无immediate/handler
简写 ==>
vm.$watch('监控对象'，function(){})
immediate
初始化时调用handler
Vue实例
methods:{
watch:{
监视对象:{
immediate:true,
handler(newValue, oldValue){}
}}}
无immediate/handler
简写 ==>
watch:{监视对象(newValue, oldValue){}}
属性
immediate
初始化值，由handler调用
handler
监控值前后变化
deep:true
深度监控
Vue中的watch默认不监测对象内部值改变
配置deep:true可以监测对象内部值改变
Vue自身可以监测对象内部值变动，但Vue提供的watch默认不可以，需根据数据结构决定是否使用deep
对比
功能
watch >= computed
watch支持异步操作
this必须指向
vm或组件实例对象
Vue管理函数，写成普通函数
非Vue管理函数(回调函数:定时器、ajax、Promise)，写成箭头函数
绑定样式
class样式
字符串写法
语法
class='basic'
正常样式正常写
:class='变量'
变化样式绑定写
适用
样式类名不确定，动态指定
数组写法
语法
:class='classArr'
适用
样式个数/名字不确定
对象写法
语法
:class='classObj'
适用
样式个数/名字确定，动态决定使用情况
style样式
对象写法
:class='styleObj'
数组写法
:class='styleArr'
条件渲染
v-show
语法
v-show='表达式'
true
false
隐藏样式，适合高频切换
v-if
语法
v-if='表达式'
v-else-if='表达式'
v-else='表达式'
template v-if
多数据同条件使用
删除样式，适合低频切换
列表
渲染
v-for
遍历
分类
数组
v-for='(数组成员,index)' in/of Arr
对象
v-for='(对象成员,type,index)' in/of Obj
字符串
v-for='(字符构成,index)' in/of Str
次数
v-for='(计数,index)' in/of Num
:key=''
工作流程
key是虚拟DOM对象标识，当数据发生改变时，Vue根据【新数据】生成【新虚拟DOM]
新旧虚拟DOM对比
相同key
DOM内容不变
直接使用之前真实DOM
DOM内容改变
生成新的真实DOM，替换页面中之前的真实DOM
不同key
创建新的真实DOM，渲染到页面
index缺点
(索引值)
进行逆序添加/删除等
破坏顺序操作
不含输入类DOM
产生不必要的真实DOM更新，效率低下
含输入类DOM
产生错误DOM更新，界面有问题
选取规则
推荐使用数据唯一标识作为key，如id、手机号、身份证号等
不存在破坏顺序操作，仅用于渲染列表展示，可以使用index，且不设置时自动默认key值为index
过滤
watch
computed
排序
监测数据
监测data中所有层次数据
通过setter实现监视
在new Vue时传入要检测数据
后追加属性默认非响应式处理
后追加属性响应式处理需使用API
Vue.set(target, propertyName/index,value)
vm.$set(target, propertyName/index,value)
修改数组中某元素
push/pop/shift/unshift/splice/sort/reverse
Vue.set()/ vm.$set()
不支持给vm/vm根数据添加属性
收集表单数据
input type
text
v-model收集value值，用户输入value值
radio
v-model收集value值，给标签配置value值
checkbox
未配置value属性，收集checked（布尔值）
配置value属性，
v-model初始值：
非数组
收集checked（布尔值）
数组
收集value组成的数组
v-model修饰符
lazy
失去焦点后收集数据
number
输入字符串转为有效数字
trim
输入收尾空格过滤
内置/自定义指令
内置指令
v-bind
单向绑定，简写为冒号 :
v-modul
双向绑定
v-for
遍历数组、对象、字符串
v-on
绑定事件监听，简写为@
v-if
条件渲染
v-else
条件渲染
v-show
v-text
文本渲染，替换节点内容，不常用
v-html
渲染包含html结构内容，替换节点内容
有安全性问题，禁用在用户提交内容上
条件渲染，是否展示
v-cloak
没有值的特殊属性，vue实例创建完毕并接管容器后删除
配合css的display:none 解决网速慢时显示裸露模板问题
v-once
没有值的指令，所在节点初次动态渲染后视为静态内容
后续数据变动不会引起v-once所在结构的更新，可用于优化性能
v-pre
没有值的指令，跳过所在节点的编译过程
跳过：没有使用指令语法/插值语法的节点，加快编译
自定义指令
分类
函数式
对象式
语法
局部指令
new Vue({
directives:{指令名：配置对象}
})
new Vue({
directives{指令名：回调函数}
})
全局指令
Vue.directive(指令名：配置对象)
Vue.directive(指令名：回调函数)
常用回调
bind
指令与元素成功绑定时调用
inserted
指令所在元素被插入页面时调用
update
指令所在木板结构被重新解析时调用
注意
定义指令时不加v-，使用时加v-
指令名多个单词时，使用kebab-case命名，不要使用camelCase命名
生命周期
定义
Vue在关键时刻调用的特殊名称函数，又名生命周期回调函数、生命周期函数、生命周期钩子
特点
生命周期函数的名字不可更改，函数具体内容由程序员根据需求编写
生命周期函数中this指向是vm或组件实例对象
vm生命周期
调用函数
beforeCreate
将要创建
created
创建完毕
beforeMount
将要挂载
mounted
挂载完毕
发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
beforeUpdate
将要更新
updated
更新完毕
beforeDestroy
将要销毁
清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
destroyed
销毁完毕
销毁vue实例
销毁后借助vue开发工具看不到任何信息
销毁后自定义事件会失效，但原生DOM事件依然有效
一般不会在beforeDestroy操作数据，即使操作也不再触发更新流程
过度&动画
自定义插件
二、Vue组件化编程
模块与组件
模块化与组件化
模块
理解
向外提供特定功能的js程序，一般就是一个js文件
作用
复用js，简化编写，提高js运行效率
组件
理解
实现应用中局部功能代码和资源的集合(html/css/js/image/mp3/mp4...)
作用
复用编码，简化项目编码，提高运行效率
模块化
全部js都是以模块来编写的应用
组件化
全部功能都是以多组件方式编写的应用
非单文件组件
定义
一个文件中包含n个组件
组件使用三步骤
创建组件
语法
Vue.extend(options)
注意
禁写el
所有组件由一个vm管理，vm的el决定服务容器指向
data函数式
避免组件复用时，数据引用
template
配置组件结构
注册组件
局部注册
靠new Vue传入的components选项
全局注册
靠Vue.component('组件名',组件)
使用组件
写组件标签：<组件名></组件名>
注意
组件名
一个单词
word
Word
多个单词
kebab-case
CamelCase
需要vue脚手架支持
备注
回避html已有元素名称
可以使用name配置项指定组件在开发者工具中呈现的名字
组件标签
<组件名></组件名>
<组件名/>
仅限脚手架下使用
简写
const school = Vue.extend(option)
==>
const school = options
VueComponent
组件本质是一个名为VueComponent的构造函数，非程序员定义，由Vue.extend生成并返回不同的VueComponent
data函数
methods/match/computed中的函数
this指向
组件配置
组件实例对象 vc
new Vue(options)配置
Vue实例对象 vm
单文件组件（推荐）
定义
一个文件中只包含1个组件
三、使用Vue脚手架
初始化脚手架
创建vue脚手架
步骤
命令运行
win + r ==> cmd
全局安装
npm i -g @vue/cli
创建项目
vue create xxx
启动项目
npm run serve
注意
npm镜像
npm config set registry https://registry.npm.taobao.org
查看影藏配置
vue inspect > output.js
脚手架结构
main.js
引入vue的注册容器，是入口文件，管理App
App.vue
项目主组件，是所有组件的父组件，汇总所有组件
components
存放所有的组件（App.vue除外）
异版Vue
区别
vue.js
完整版
核心功能
模板解析器
vue.runtime.xxx.js
运行版
核心功能
render函数
运行版vue没有模板解析器，不能使用template配置项，需要使用render函数接收到createElement函数指定具体内容
配置项
ref属性
作用
用来给元素或子组件注册引用信息（id替代）
应用
html
真实DOM元素
组件标签
组件实例对象 vc
用法
标识
ref = 'xxx'
获取
this.$refs.xxx
props配置
mixin混入
插件
功能
用于增强Vue
本质
包含install(Vue,插件使用者传递数据)方法的一个对象
语法
定义
对象.install = function(Vue, options){}
添加全局过滤器
添加全局指令
配置全局混入
使用
Vue.use()
scoped样式
作用
让样式在局部生效，防止冲突
写法
<style scoped>
组件化编码流程（通用）
实现静态组件
抽取组件，使用组件实现静态页面效果
展示动态数据
数据类型/名称
数据保存的组件位置
交互
从绑定事件监听开始
组件的自定义事件
定义
一种组件间通信的方式，子组件 ==> 父组件
场景
B（子组件）传A（父组件），A中给B绑定自定义事件（事件回调在A）
过程
绑定事件
(父组件中)
v-on/ @
ref = 'xxx'
绑定原生DOM事件
native修饰符
触发事件
this.$emit('xxx', 数据)
解绑事件
this.$off('xxx')
组件通信
全局事件总线
GlobalEventBus
定义
一种组件间通信方式，适用于任意组件间通信
步骤
安装
new Vue({
...
beforeCreate(){
Vue.prototype.$bus = this
},...
})
$bus是当前应用vm
使用
接收数据
接收数据A绑定自定义事件，回调留在A自身
methods(){
demo(data){
}}
...
mounted(){
this.$bus.$emit('xxx',数据)
}
提供数据
this.$bus.$emit('xxx',数据)
解绑
在beforeDestory钩子中，用$off解绑当前组件所用事件
消息订阅与发布
pubsub
定义
一种组件间通信方式，适用于任意组件间通信
步骤
安装
npm i pubsub-js
使用
引入
import pubsub from 'pubsub-js'
接收数据
接收数据A绑定自定义事件，回调留在A自身
methods(){
demo(data){
}}
...
mounted(){
this.pid = pubsub.subscribe('xxx',this.demo)
}
提供数据
pubsub.publish('xxx',数据)
解绑
在beforeDestory钩子中，用pubsub.unscribe(pid)取消订阅
Vue封装的
过渡与动画
作用
插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
步骤
元素样式
进入
v-enter
v-enter-active
v-enter-to
离开
v-leave
v-leave-active
v-leave-to
transition
使用<transition>包裹过渡元素，配置name属性
包裹元素
单一元素
<transition name='demo' appear>
<h1 v-show='isShow'>你好</h1>
</transition>
appear：初始动画
多个元素
<transition-group name='demo'>
<h1 v-show='isShow' key='1'>你好</h1>
<h1 v-show='!isShow' key='2'>你好</h1>
</transition-group>
四、Vue中的ajax
五、vuex
六、vue-router
相关理解
路由
url 地址与资源之间的对应关系
SPA
单页面应用程序（Single Page Application），全部只有一个页面，内容变化通过 ajax 局部更新实现，支持浏览器地址栏的前进与后退
Vue Router
引用语法
export default new VueRouter({
mode: 'history',
routes: [
{ path: "/user", component: User },
{ path: "/login", component: Login }
]
})
重定向
{ path:"/",redirect:"/user" }
嵌套路由
{ path: '/register',
component: Register,
children: [
{ path: '/register/tab1', component: Tab1 },
{ path: '/register/tab2', component: Tab2 }
]
}
基本路由
基本使用
安装 Vue-Router
npm i vue-router
应用插件
Vue.use(VueRouter)
编写 router 配置项
import VueRouter from 'vue-router'
// 引入 VueRouter
import Login from '../components/Login'
import Home from '../components/Home'
// 引入路由组件
export default new VueRouter({
routers:[
{path:'/login', component:Login},
{path:'/home', component:Home}
]
})
// 创建 router 实例对象，按组管理路由规则并暴露
实现切换
<router-link to='/login'>Login</router-link>
指定展示位置
<router-view></router-view>
分类
components
一般组件
pages
路由组件
嵌套路由
路由传参
编程式路由导航
七、Vue UI组件库
elementUI
网络安全
网络安全
主机安全
数据安全
web安全
1、注入攻击: 检测Web网站是否存在诸如SQL注入、入、Ldap注入、Xpath注入等漏洞，如果存在该漏洞，攻击者对注入点进行注入攻击，可轻易获得网站的后台管理权限，甚至网站服务器的管理权限
2、X55跨站脚本: 检测Web网站是否存在XSS跨站脚本漏洞，如果存在该混洞，网站可能遭受Cookie欺狼、网页挂马等攻击
3、网页挂马:检测Web网站是否被黑客或恶意攻击者非法植入了木马程序
4、缓冲区溢出检测Web网站服务器和服务器软件，是否存获得网在缓冲区溢出混洞，如果存在，攻击者可通过此混洞，站或服务器的管理权限
5、上传漏洞:检测Web网站的上传功能是否存在上传漏洞，如果存在此混洞，攻击者可直接利用该混洞上传木马获得WebShell
6、源代码泄重:检测Web网络是否存在源代码泄重潺洞如果存在此混洞，攻击者可直接下载网站的源代码
7、隐藏目录泄露:检测Web网站的某些隐藏目录是否存在泄露混洞，如果存在此混洞，攻击者可了解网站的全部结构
8、数据库泄露:检测Web网站是否在数据库泄露的混洞如果存在此混洞，攻击者通过暴库等方式，可以非法下载网站教据库
9、弱口令:检测Web网站的后台管理用户，以及前台用户，是否存在使用弱口令的情况
10、管理地址泄露:检测Web网站是否存在管理地址泄露功能，如果存在此漏洞，攻击者可轻易获得网站的后台管理地址
0 条评论
下一页
