近期学习杂记
akino ... 2021-11-12 23:19 大约 5 分钟
# 一些乱起八糟的东西
最近学习有点疲惫了，就随便学学吧，记下来主要是为了不白看，记忆深刻一点。
# OPTIONS 请求
# 用途
- 获取服务器支持的 HTTP 请求方法
- 检查服务器的性能
# 为什么需要它？
这个请求方法一般和跨域挂钩，使用 OPTIONS 旨在发送正式请求前先探测目标地址具有什么约束，类似 TCP 的探测报文，这一行为也可以称为“预检”。
# 手写 call、apply、bind
# call
Function.prototype._call = function(thisArg, args) {
thisArg = thisArg || window;
let _fn = Symbol('_fn'); //创建唯一键值，防止键名冲突
thisArg[_fn] = this; //将函数挂载到thisArg上，可以通过this访问上面的值
let res = thisArg[_fn](...args);
delete thisArg[_fn]; //删除对象方法，恢复原对象内容
return res;
};
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# apply
原理一样，参数传递不同
Function.prototype._apply = function(thisArg, ...args) {
thisArg = thisArg || window;
let _fn = Symbol('_fn'); //创建唯一键值，防止键名冲突
thisArg[_fn] = this; //将函数挂载到thisArg上，可以通过this访问上面的值
let res = thisArg[_fn](...args);
delete thisArg[_fn]; //删除对象方法，恢复原对象内容
return res;
};
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# bind
Function.prototype._bind = function(thisArg, ...args) {
let _fn = Symbol('_fn');
thisArg[_fn] = this;
return function(...rest) {
thisArg = thisArg || window;
let res = thisArg[_fn](...args.concat(rest)); //原bind方法会拼接之前传递的参数
delete thisArg[_fn]; //删除对象方法，恢复原对象内容
return res;
};
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 水平垂直居中的方法
/* 方法1 利用定位居中 */
position: relative;
top: 50%;
left: 50%
transform: translate(-50%);
/* 方法2 父盒子使用display布局 */
display: flex;
justify-content: center;
align-items: center;
/* 方法3 脱离文档流式居中 */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 浮动布局实现三栏自适应
如果要实现左右定宽、中间自适应只需要把注释样式生效即可。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
left: 50%;
width: 90vw;
height: 50vw;
margin-top: 50%;
transform: translate(-50%, -50%);
}
.left {
float: left;
/* min-width: 200px; */
min-height: 100%;
background-color: #ccc;
}
.center {
/* margin: 0 200px; */
min-height: 100%;
background-color: bisque;
}
.right {
float: right;
/* min-width: 250px; */
min-height: 100%;
background-color: #ccfac2;
}
</style>
</head>
<body>
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 效果
# 三栏自适应
# 两栏定宽中间自适应
# js 宽松模式和严格模式区别
这里只记录一下我能理解的
- 严格模式下，
call、apply传入null或undefined不会转换为window，而是保持原样。 - 严格模式下，变量需要在使用前声明，直接给变量赋值，不会隐式创建全局变量。
- 严格模式下，不允许直接使用八进制字面量。
- 严格模式下，函数形参同名会报错。
- 严格模式下，对象中定义同名属性会抛出语法错误。
- 严格模式下,
delete运算符后跟随非法标识符(即delete不存在的标识符)会抛出语法错误； 非严格模式下，会静默失败并返回false
# vue3.0 新增内容
- 响应式将
defineProperties更换为Proxy，提升了性能，但是降低了兼容性，当然，vue 还是提供了旧观察模式的编译方式。 - 组件逻辑都写进函数，
setup()(Composition API)取代data()，该函数返回一个对象暴露给模板使用，并且只在初始化时调用一次。 - 生命周期变更。
beforeCreate和created被setup替代，beforeDestory和destoryed更名为onBeforeUnMount和onUnmouted，新增onRenderTriggered和onRenderTracked，其它生命周期名称前都加了一个on。另外，钩子是需要从vue中导入。
。。。。。。。
暂时先写这些，毕竟也没有正经学 vue3，以后有机会再补充吧！
# 图片懒加载实现
传统的实现是通过监听滚动条滚动来实现，然而这种方法计算太频繁了，性能不好，故采用IntersectionObserver这个对象来监听元素是否出现在视窗内，因为它的性能比监听滚动条要好。
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
left: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
margin-top: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
}
.img {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<img
class="img"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
alt=""
data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
/>
<img
class="img"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
alt=""
data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
/>
<img
class="img"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
alt=""
data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
/>
<img
class="img"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
alt=""
data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
/>
<img
class="img"
src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
alt=""
data-src="https://ts1.cn.mm.bing.net/th?id=OIP-C.M9CUntHQGPvSO5JkAn5Y4AHaFA&w=136&h=100&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"
/>
</div>
</body>
<script>
let imgs = Array.from(document.getElementsByClassName('img'));
let io = new IntersectionObserver(lazyLoad);
imgs.forEach((img) => {
io.observe(img); //监听img
});
function lazyLoad(entry) {
entry.forEach((el) => {
//遍历每个img的状态
console.log(el.isIntersecting);
if (el.isIntersecting) {
el.target.src = el.target.getAttribute('data-src');
} else {
el.target.src = '';
}
});
}
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79