近期学习杂记

AmsChan ... 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

# 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

# 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

# 水平垂直居中的方法

/* 方法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

# 浮动布局实现三栏自适应

如果要实现左右定宽、中间自适应只需要把注释样式生效即可。

<!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

# 效果

# 三栏自适应

三栏自适应

# 两栏定宽中间自适应

两栏定宽中间自适应

# js 宽松模式和严格模式区别

这里只记录一下我能理解的

  • 严格模式下,callapply传入nullundefined不会转换为 window,而是保持原样。
  • 严格模式下,变量需要在使用前声明,直接给变量赋值,不会隐式创建全局变量。
  • 严格模式下,不允许直接使用八进制字面量。
  • 严格模式下,函数形参同名会报错。
  • 严格模式下,对象中定义同名属性会抛出语法错误。
  • 严格模式下, delete 运算符后跟随非法标识符(即 delete 不存在的标识符)会抛出语法错误; 非严格模式下,会静默失败并返回 false

# vue3.0 新增内容

  • 响应式将defineProperties更换为Proxy,提升了性能,但是降低了兼容性,当然,vue 还是提供了旧观察模式的编译方式。
  • 组件逻辑都写进函数,setup()(Composition API)取代data(),该函数返回一个对象暴露给模板使用,并且只在初始化时调用一次。
  • 生命周期变更。beforeCreatecreatedsetup替代,beforeDestorydestoryed更名为onBeforeUnMountonUnmouted,新增onRenderTriggeredonRenderTracked,其它生命周期名称前都加了一个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