前端
2022-03-07 10:56:37 21 举报AI智能生成
前端知识
作者其他创作
大纲/内容
参数
拼接数组或者将多个元素一次性添加进去
Array.concat()
必须是正数
指定数组的一个片段或者子数组
Array.slice()
将数组连接起来构建一个字符串
Array.join()
数组长度
Array.length()
向数组最后添加一个元素，并返回数组新的长度
Array.push()
删除并且返回最后一个元素
Array.pop()
删除并且返回数组的第一个元素
Array.shift()
向数组的开头添加一个元素，并返回数组新的长度
Array.unshift()
颠倒数组中元素的顺序
Array.revese()
在数组中插入或者删除数组
splice会修改数组
会返回一个由删除数组组成的数组
Array.splice()
对数组进行排序
Array.sort()
返回该对象的源代码
toSource()
把数组转换成字符串，并返回结果
toString()
把数组转换本地字符串，并返回结果
toLocaleString()
返回数组对象的原始值
valueOf
for...in..
item
数组元素
index
元素的索引
array
数组本身
函数
特性()
forEach()
map(映射)
不会改变原数组
可以用来将稀疏数组转为稠密数组
filter(过滤)
当有一个为false后就停止
every
当一个为false的时候停
some
从左到右
reduce
从右到左
reduceRight
Subtopic
将一个数组转换为逗号分隔的参数序列
与函数结合使用
扩展运算符可以放置表达式
由于扩展运算符可以展开数组，所以不再需要apply方法，将数组转为函数的参数了。
替代apply
es5复制数组
es6复制数组
数组的复制
合并数组
只能放在最后一位不然会报错
与结构赋值结合
[...'hello']
将字符串转为真正的数组
任何 Iterator(迭代) 接口的对象，都可以用扩展运算符转为真正的数组
应用
三个点(...)
扩展运算
类数组的例子
DOM操作返回的NodeList集合
函数内部的arguments对象
常见类数组
类数组
Summary
set
map
可遍历对象
用于将两类对象转为数组
Array.from()
用于将一组值转为数组
总是返回一个数组
Array.of()
从该位置开始替换数据。如果为负值，表示倒数
target
从该位置开始读取数据，默认为 0。如果为负值，表示倒数。
start
到该位置前停止读取数据，默认等于数组长度。如果为负值，表示倒数。
end
copyWithin()
当前值
当前位置
原数组
回调函数的参数
都不符返回undefined
用于找出第一个符合条件的数组成员
find()与findIndex()
给定的值
替换的起始位置
替换的结束位置
例子
fill
原数组有空位会跳过空位
flat()
只能展开一层数组
flatMap
空位不是undefined
数组的空位指数组的位置上没有值
ES5
ES6 则是明确将空位转为undefined。
ES6
数组的空位
数组的方法
数组
constructor
字符串长度
length
允许您向对象添加属性和方法
prototype
对象属性
I.E.不能使用
方法用于显示闪动的字符串。
blink
返回指定位置的字符
charAt
返回指定位置的字符的unicode编码
charCodeAt()
方法用于连接两个或多个字符串
语法
返回
concat()
返回某个指定的字符串值在字符串中首次出现的位置。
必须.需要检索的字符串(多个字符)
searchvalue
fromindex
indexOf()对于大小写敏感
如果检索的字符串没有会返回-1
注意
indexOf()
从后向前搜索字符串。
lastIndexOf()
方法可返回 String 对象的原始值。
valueOf()
不可以全局
search（）搜索
匹配的字符串
有多少个分组就写几个
正则表达式分组类容，无则省略
匹配项在字符串中的Index值
原字符串
传入四个值
第二个参数是函数
replace（）替换
返回匹配的字符串
input:声明对string对象的引用
全局
返回匹配字符串的一个数组
不全局
match（）匹配
把字符串分割成片段来创建一个字符串数组
limit限制分割片段的数量
split()
大写转小写
toLowerCase
小写转大写
toUpperCase()
对象方法
字符串对象
字符串
每个函数都有原型
可以使用 函数.prototype 来访问
原型
有构造函数的属性
也有构造函数原型的属性
由构造函数创建的函数，继承了构造函数的属性
会屏蔽自己的公共原型上面的属性
不修改公共原型上的属性
如果属性名等于构造函数属性名
实例也可以有自己的独有属性
各实例互补影响
在构造函数中添加
在公共的原型中添加
需要向所有实例中添加属性或则方法时
实例
构造函数
js
生成环境构建代码
build.js
检查node npm等版本
check-verson.js
热重载相关
dev-client.js
构建本地服务器
dev-server.js
构建工具相关
utils.js
webpack基础配置
webpack.base.conf.js
webpack开发环境配置
webpack.dev.conf.js
webpack生成环境配置
weppack.prod.conf.js
build
开发环境变量
dev.env.js
项目一些配置变量
index.js
生成环境变量
prod.env.js
测试环境变量
test.env.js
config
vue公共组件
components
vuex的状态管理
store
页面文件入口
App.vue
main.js
src
ES6语法编译
.babelrc
群聊分析得到的数据用于数据可视化
data
static
定义代码格式
.editorconfig
git上传需要忽略的文件格式
.gitignore
项目说明
README.md
favicon.ico
入口页面
index.html
项目基本信息
package.json
VUE文件结构图
定义name
在页面上用$router.name 接受参数
name传参
接受参数在页面总用$router.params.username
router-link 传参
路由传参
路由导航
router 路由
读取不到methods里面定义的方法
读取不到data里面的数据
beforeCreate
数据观测(data observer) 拿到data里面的数据
属性与方法的计算
watch/event事件回调
实例完成了如下配置
异步数据的请求获取
数据的处理好
获取本地的缓存
应用场景
实例创建完成后立即被调用
created
相关的render函数首次被调用
开始挂载编译生成的HTML到对应位置时触发的钩子函数
此时还没有将编译的html渲染到页面上
挂载开始之前被调用
beforeMount
将编译好的html挂载到页面完成后的钩子函数此时可以进行ajax请求获取数据的操作
在生命周期里面只执行一次
mounted
数据更新时候调用
发生在虚拟DOM重新渲染和打补丁之前
作用:可以在这个钩子进一步更改状态这不会触发附加的重渲染过程
beforeUpdate
数据更改导致虚拟DOM重新渲染和打补丁后调用
可以执行依赖于DOM的操作
不会承诺所有子组件都会被重绘.可以使用vm.$nextTick
update
keep-alive组件激活时调用
activated
keep-alive组件停用时调用
deactivated
beforeDestroy
实例销毁后调用.调用后.
vue实例指示所有东西都会解绑
所有事件监听器会被移除
所有的子实例也会被销毁
destroyed
生命周期(函数)
将数据绑定在视图上
视图修改会影响数据
v-model
v-once
将html字符串转化成html
v-html
DOM的属性
指令
string
HTMLElement
类型
只能在new创建的实例中创建
css选择器
ID选择器
不推荐挂载在body和html标签上
页面上已经存在的DOM元素作为VUE实例的挂载目标
详细
el
String
一个字符串模版作为bue实例的标识对哟呵你
模版会替换挂载的元素
template
DOM
boolean
fasle
默认值
取消vue所有日志与警告
vue.config.silent
用法
silent
{[key:string]:number|array<number>}
{}
给v-on自定义键位别名
keyCodes
属性
vue.config
全局配置
{function} [callback]
{object} [context]
在下次DOM更新循环结束之后执行延迟回调
方法
{object |array} target
{string | number} key
{any} value
参数
设置的值
返回值
全局API
所有的方法与DOM都会全部执行
刷新
这是渲染了页面上的DOM节点
重新渲染
就是当页面重新渲染（不是刷新）的时候，计算属性不会变化，直接读取缓存使用，
适合计算量大和改变频率较低的属性
适用地方
get()
通过js赋值其他值或者表单元素设置值得时候
set()
两个方法组成
计算属性
计算属性/监听器
v-on:click.stop="doThis"
只能点击一次
.once
.stop
只要点击自己的时候才有用
.self
添加事件监听器时使用事件捕获模式
.capture
比如:a标签的跳转
表达提交不刷新页面
<form v-on:submit.prevent="onSubmit"></form>
即取消事件的默认动作
.prevent
意思就是当你给一个vue组件绑定事件时候，要加上native！如果是普通的html元素！就不需要
.native
分类
<a v-on:click.stop.prevent="doThat"></a>
串联使用
事件修饰符
对应⌘
mac
win键
windows
.meta
.shift
.alt
.ctrl
.enter
.tab
.delete(捕获"删除"和"退格"键)
.esc
.space
.up
.down
.left
.right
Vue.config.keyCodes.f1 = 112
全局属性来自定义按键的修饰符
config.keyCodes
按键修饰符
修饰符
小程序的data
用纯js对象表示
Model
view是页面的显示
View
view-model
定义
单向邦定
表单里面输入的值也会存到model层
双向绑定
MVVM模式
VUE
指定属性中的值等于给定值，或为给定字符串的前缀
$("[attribute|=value]")
$("div[title=test]
指定属性的值等于给定的值
$("[attribute=value]")
$("div[title*=te]")
属性值中包含value的元素
$("[attribut*=value]")
$("[attribut~=value]")
选择具有选定属性的元素，值可以是任何值（包括空）
$("[attribut]")
值为以value为开头的元素。
$("[attribut^=value]")
值为以value为结尾的元素。
$("[attribut$=value]")
选择不存在的属性或则值不等于value的元素
$("[attribut!=value]")
$("div[id][title*=es]")
属性筛选选择器
选择所有的input元素
$(":input")
匹配所有的文本框
$(":text")
匹配所有的按钮
$(":button")
匹配所有的提交按钮
$(":submit")
所有的重置按钮
$(":reset")
匹配所有单选按钮
$(":radio")
匹配所有图像域
$(":image")
匹配所有文件域
$(":file")
表单选择器
$('.class a:first-chile')
类名为class中的第一个a标签子元素
所有父元素中的第一个子元素
$('[:first-child]')
$('.class a:last-chile')
类名为class元素中的最后一个a标签子元素
所有父元素中的最后子元素
$('[:last-child]')
选择某个父元素是其父元素下的唯一一个子元素（有则选中）
$('[:only-child]')
n是索引值从1开始
选中所有父元素中的第n个子元素
$('[:nth-child]')
选中所有父元素中的第n个子元素（从最后一个算）
$('[:nth-last-child]')
子元素筛选选择器
匹配第一个a元素
$(a:first)
匹配第一个元素
$(":first”)
匹配最后一个元素
$(:"last")
匹配所有索引值为index的元素
$(":eq(index)")
匹配所有索引值大于index的元素
$(":gt(index)")
匹配所有索引值小于index的元素
$(":lt(index)")
匹配所有索引值为偶数的元素
$(":even")
匹配所有索引值为奇数的元素
$(":odd")
匹配根目录
$(":root")
h1 h2
选择所有的标题元素
$(":header")
选择指定语言的所有元素
$(":lang(language)")
正在执行的动画元素
$(":animted")
基本选择器
选择子元素，孙元素....
$("ancestor descandent ")
后代选择器
选择子元素（只能是子节点）
$("parent>child ")
子带选择器
$(".one + div")
$("pre+next")
相邻选择器
选择类one的所有div兄弟元素
$(".one ~ div")
$("pre~sibling")
兄弟选择器
$("#two").siblings("div")
$("prev").siblings("siblings")
同辈元素查找
层级选择器
$("selector:visible")
可见性
$("selector:hidden")
不可见性
display:none
height:0
width:0
type="hidden"
visibility:hidden
透明度为100%
opacity:0
父元素为不可见其子元素也为不可见
常见的可见性方法
可见性过滤
选取含有文本内容的text的元素
：contains(text)
选取不包含子元素或文本的空元素
:empty
获取含有给定选择器匹配元素的元素
:has(selector)
选取含有子元素或文本的元素
:parent
内容过滤器
jQuery选择器
jQuery( )是全局函数
快捷别名：$( )
基础
丰富强大的语法
高效的查询方法
有用的方法，来操作选中元素
批量操作元素
链式调用
特性
事件类型
type
作为event.data属性传递给事件对象的额外数据
绑定的处理函数
事件的绑定
参数1: 事件类型
参数2:将有移除的函数
事件的移除
事件
无则添加
有则修改
attr（）方法
在所有选中元素中移除某个属性
removeAttr（）
HTML属性
有则获取
value值
复选框
单选按钮
获取
无则设置
设置
value（）方法
HTML表单值
不能获取复合值：font
可以获取单个样式的值：font-size
有属性就获取
多个样式
复合样式
无属性则设置
浏览器实际显示的值
style
或CSS样式
值（来）
CSS( ) 方法
CSS属性
addClass（） 添加类
removeClass（）删除类
toggleClass( )
hasClass（）判断有无
CSS类
将所有相同元素的html文本内容改为传入的参数的
传参
返回所有匹配元素子节点内容
不传参
text（）
返回第一个匹配元素的html内容
htm( )
元素内容
尺寸
传入数字
width的属性
传入字符串
W=内容宽度
width( )
height的属性
H=内容高度
height( )
wl=w+内左/右边距
innerWidth( )
hl=h+内上/下边距
innerHeight( )
wl+边框
outWidth（）
hl+边框
outHeight（）
宽/高
获取元素相对于文档的位置
传入带有属性的对象，会设置元素位置
表示X轴
属性：left
表示Y轴
属性：top
带有属性的对象
offset( )
获取元素相对于偏移的父元素
position( )
scrollTop
scollLeft
获取元素滚动条位置
位置
文档元素
document
window
获取数据
date（）
元素数据
设置和获取是相同方法
插入
替换
复制
修改文档结构
jQuery
$ git init
在当前目录新建Git代码库
$ git init [project-name]
$ git init [url]
克隆一个远程代码库
新建代码库
$ git config --list
显示当前的Git配置
$ git config -e [--global]
编辑Git配置
$ git config [--global] user.name "[name]"
$ git config [--global] user.name "[email address]"
提交代码的用户信息
配置
$ git add [file1] [file2]
添加指定文件到暂存区
$ git add [dir]
$ git add .
$ git rm [file1] [file2]
$git rm --cached [file]
$ git mv [file-original] [file-rename]
增/删文件
$ git commit -m "[message]"
提交暂存区到仓库
$ git commit [file1] [file2] ... -m [message]
提交暂存区的指定文件到仓库区
$ git commit -a
$ git commit -v
提交时候显示所有的diff 信息
代码提交
$git branch -r
列出所有远程分支
$git branch -a
列出所有本地分支和远程分支
$git branch [branch-name]
$git branch -b [branch-name]
$git branch [branch-name] [commit]
$ git branch --track [branch] [remote-branch]
$git checkout [branch-name]
$git checkout --
切换到上一个分支
$git merge [branch]
合并指定分支到当前分支
$ git branch -d [branch-name]
删除分支
$ git push origin --delete [branch-name]
$ git branch -dr [remote/branch]
删除远程分支
分支
$git tag
列出所有的标签
$git tag [tag]
新建一个tag在当前commit
$git tag [tag] [commit]
新建一个tag在指定的commit
$git tag -d [tag]
删除本地tag
$ git push origin :refs/tags/[tagName]
删除远程tag
$ git show [tag]
查看tag消息
$ git push [remote] [tag]
提交指定tag
git push [remote] --tags
提交所有tag
标签
$ git status
显示有变更的文件
$ git log
显示当前分支的版本历史
$ git log --stat
$ git blame [file]
显示指定文件是什么人在什么时间修改过
$ git shortlog -sn
$ git diff
显示暂存区和工作区的差异
$ git diff --cached [flie]
显示暂存区和上一个commit的差异
$ git diff HEAD
显示工作区与当前分支最新commit之间的差异
$ git diff [first-branch] ... [second-branch]
显示两次提交之间的差异
$ git diff --shortstat "@{ 0 day ago }"
今天你写了多少代码
$ git show [commit]
显示某次提交的元数据和内容变化
$git reflog
显示当前分支的最近几次提交
查看信息
$ git fetch [remote]
下载远程仓库的所有变动
$ gti remote -v
显示所有远程仓库
$ git remote show [remote]
显示某个远程仓库的信息
$ git push [remote] [branch]
上传本地分支到远程仓库
$ git push [remote] --force
$ git push [remote] --all
推送所有分支到远程仓库
远程同步
$ git checkout [file]
恢复暂存区的指定文件到工作区
$ git checkout [commit] [file]
恢复某个commit的指定文件到暂存区和工作区
$ git checkout .
恢复暂存区的所有文件到工作区
$ git reset [file]
$ git reset --hard
重置暂存区与工作区与上次commit提交的一致
撤销
$ git archive
生成一个可供发布的压缩包
其他
常用的命令
git
Trident内核
IE
webkit内核
谷歌
Gecko内核
火狐
Safari
Blink内核
Opera
浏览器内核
浏览器
FTP文件传输协议
HTTP超文本传输协议
IP地址<-->域名
DNS域名系统
应用层
三次握手详情
TCP传输控制协议
UDP用户报文协议
传输层
IP网际协议
网络层
链路层
TCP/IP协议族
请求的URL
Request URL
请求方法
Request Method
状态码
Status Code
要做什么(请求行)
请求报文
发生了什么(响应行)
响应报文
所有HTTP报文都已起始行开始
起始行
用户代理可以处理的媒体类型
Accept (接受)
优先字符集
Accept-Charset
优先的内容编码
Accept-Encoding
优先的语言
Accept-language
web认证信息
Authorization
期待服务器的特定行为
Expect
用户的电子邮箱
From
请求资源的所在服务器
Host
比较实体标记(Etag)
If-Match
比较资源的更新时间
if-Modified-Since
比较实体标记（与if-Match相反）
if-None-Match
资源未更新时发送实体Byte的范围请求
if-Range
比较资源的更新时间（与if-Modified-Since相反）
if-Unmodified-Since
最大传输逐跳数
Max-Forwards
代理服务器要求客户端的认证信息
Proxy-Authorization
实体的字节范围请求
Range
对请求中 URI 的原始获取方
Referer
传输编码的优先级
Te
HTTP客户端程序信息
User-Agent
请求报文首部
是否接受字节范围请求
Accept-Ranges
推算资源创建经过时间
Age
资源的匹配信息
ETag
令客户端重定向至指定URL
Location
代理服务器对客户端的认证信息
Proxy-Authenticate
对再次发起请求的时机要求
Reter-After
HTTP服务器的安装信息
Server
代理服务器缓存的管理信息
Vary
服务器对客服端的认证信息
www-Authenticate
响应报文首部
控制缓存的行为
Cache
逐跳首部/连接的管理
Connection
创建报文的日期时间
Date
报文指令
Pragma
报文末端的首部一览
Trailer
升级为其他协议
Upgrade
代理服务器的相关信息
Via
错误信息
Warning
通用首部
资源可以支持的HTTP方法
Allow
实体主体的适用的编码方式
Content-Encoding
实体主体的自然语言
Content-language
实体主体的大小(单位:字节)
Content-length
替代对应资源的URI
Content-Location
实体主体的报文摘要
Content-Md5
实体主体的位置范围
Content-Range
实体主体的媒体类型
Content-Type
实体主体过期的日期时间
Expires
资源最后修改日期时间
Last-Modified
实体首部
报文首部
图片
视频
HTML文档
软件应用程序
信用卡事物
电子邮件
报文实体
HTTP报文
HTTP报文内的HTTP信息
websorck 表示连接中
接受的请求正在处理
1XX
200 ok
204 no content
206 partial content
2XX 成功
永久移动到新位置
301 Moved Permanently
临时重定向
302 found
303 See Other
上次请求后网页没有修改
304 Not Modified
3XX 重定向
服务器无法理解请求格式客户端不应该再次请求
400 Bad Request
请求未授权
401 Unauthorized
禁止访问
403 Forbidden
找不到如何与URL相匹配的资源
404 Not Found
4XX 客服端错误
服务器端错误
500 Internal Server Error
服务器端暂时无法处理请求（可能是过载或维护）
503 Service Unavailable
5XX 服务端错误
HTTP常见状态码
转发功能的应用程序(可以有多个)
利用缓存技术减少流量
组织内部针对特定网站的访问控制
作用
首次访问会将数据缓存在代理服务器上再次接受相同的请求会直接使用代理服务器上的资源
缓存代理
不对报文最任何加工的代理
透明代理
非透明代理
代理
转发其他服务器数据的服务器
提高通信安全性
网关
隧道
客户端和代理服务器本地磁盘保存的资源副本
避免多次从源服务器获取
源服务器资源未更新
有效期
缓存
通信数据转发程序
Web服务器
HTTP报文使用明文方式发送
通信加密
将报问内容加密
内容加密
加密处理防止被窃听
无法判断响应的服务器是你请求的服务器
无法判断请求的客户端是你的客户端
无法判断通信的 是否有访问权限
任何人都可以发起请求
查明对手的证书
SSL解决办法
没有办法保证发出的请求和响应是相同的
HTTP的不足
HTTP+加密+认证+完整性保护
添加了加密以及认证的HTTP称为HTTPS
附件
https通讯流程.pdf
HTTPS通信步骤
HTTPS
HTTP
用户在商户APP中选择商品，提交订单，选择微信支付。
商户后台收到用户支付单，调用微信支付统一下单接口
统一下单接口返回正常的prepay_id，再按签名规范重新生成签名后，将数据传输给APP。参与签名的字段名为appId，partnerId，prepayId，nonceStr，timeStamp，package。
商户APP调起微信支付。
商户后台接收支付通知。
商户后台查询支付结果。
微信支付
支付宝支付
支付
$git branch
列出所有本地分支
前端
收藏
收藏
0 条评论
回复 删除
下一页
