抖音博主前端知识点（CSS/JS/VUE/React） | 邵预鸿|前端开发技术笔记

object-fit: cover

效果图

实现

img{
    width:200px;
    height:200px;
    object-fit: cover;
    object-position:left top;
    transtion: all .5s;
    &:hover{
        object-position:right bottom;
    }
}

mix-blend-mode

效果图

实现

body{
    height: 100vh;
    background-image: linear-gradient(0deg,#383737 50%,#fff 50%);
}
h1{
    text-align: center;
    line-height: 100vh;
    font-size: 200px;
    text-transform: uppercase;
    color: #fff;	            // 指定颜色
    mix-blend-mode: difference; // 反向差值
}

网页监听paste粘贴文件、文本

监听页面粘贴事件，GET 文本、文件

document.documentElement.onpaste = function (event) {
           let data = (event.clipboardData || window.clipboardData);
           let fileList = data.files;
    	    // 获取文件
           console.log('fileList:',fileList);
    	    // 获取文本
           console.log('text:',data.getData('text/plain'))
         
       }

另类方法二

document.body.onpaste = function (event) {
           let data = (event.clipboardData || window.clipboardData);
           let items = data.items;
           let fileList = [];
           //存储文件数据
           if (items && items.length) {
               //检索剪切板items
               for (let i = 0; i < items.length; i++) {
                   console.log(items[i].getAsFile()); 
                   /** 这里打印出来就就是你想要的文件**/
                  fileList.push(items[i].getAsFile());
               }
           }
       }

离开页面确认

onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。

该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。

对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 “确定要离开此页吗？”。该信息不能删除。

但你可以自定义一些消息提示与标准信息一起显示在对话框。

注意： 如果你没有在 <body> 元素上指定 onbeforeunload 事件，则需要在 window 对象上添加事件，并使用 returnValue 属性创建自定义信息(查看以下语法实例)。

注意： 在 Firefox 浏览器中，只显示默认提醒信息（不显示自定义信息）。

window.addEventListener("beforeunload", function (event) {
    event.returnValue = "我在这写点东西...";
}); 
document.body.onbeforeunload = function(){
    return 'text'
}

scrollTo()

表示滚动行为，支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto

1
2
3

window.scrollTo(x-coord,y-coord )

window.scrollTo(options)

两种语法，语法2掌握

window.scrollTo( 0, 1000 );

// 设置滚动行为改为平滑的滚动
window.scrollTo({
    top: 1000,
    behavior: "smooth"
});

径向渐变实例

这个效果有意思，body上有一张背景图

径向渐变，0-1px为透明，1-6px为白色

最后可以添加backdrop-filter

<style>
    #text {
        width: 400px;
        height: 400px;
        background-color: red;
    }
    .mask{
        width: 400px;
        height: 300px;
        position: fixed;
        top: 50%;
        margin-top: -100px;
        left: 50%;
        margin-left: -200px;
        background-size: 6px;
        background-image: radial-gradient(transparent 1px, #fff 1px);
        backdrop-filter: blur(1px) saturate(2) brightness(1.1);
    }
    body{
        background-image: url('./1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position:center;
        height: 100vh;
    }
</style>

 <div class="mask"></div>

效果

CND原理

cdn即内容分发服务，他的两个关键技术内容存储，分发内容。当客户端向服务端请求资源时，由全局负载均衡将请求指向离用户最近的缓存服务器（即CDN服务），由CDN代替服务端将静态资源返回给客户端。

减轻服务器压力
缩短客户端向服务端请求和响应时间。提高网站响应速度。增加用户体验。

CDN技术需要依赖于多种技术，如（负载均衡/ 内容分发 / 复制技术 / 缓存技术）

动静分离

动静分离是一种软件设计原则，旨在将动态内容和静态内容分离开来，从而提高系统的可维护性、可扩展性和性能。动态内容指的是需要经常变化的内容，如用户输入、数据库查询结果等，而静态内容指的是不需要经常变化的内容，如HTML、CSS、JavaScript等。

动静分离的主要思想是将动态内容和静态内容分别处理和存储，从而实现系统的解耦和优化。具体来说，可以采用以下几种方法实现动静分离：

缓存静态内容：将静态内容缓存到本地或CDN等地方，从而减少服务器的负载和响应时间。
使用模板引擎：将动态内容和静态内容分别处理，使用模板引擎将它们组合起来，从而实现动静分离。
使用前端框架：将动态内容和静态内容分别处理，使用前端框架将它们组合起来，从而实现动静分离。
使用API接口：将动态内容和静态内容分别处理，使用API接口将它们组合起来，从而实现动静分离。

动静分离可以带来以下几个好处：

提高系统的可维护性：将动态内容和静态内容分离开来，可以更容易地维护和修改系统。
提高系统的可扩展性：将动态内容和静态内容分离开来，可以更容易地扩展系统的功能和性能。
提高系统的性能：将静态内容缓存到本地或CDN等地方，可以减少服务器的负载和响应时间，从而提高系统的性能。
提高开发效率：使用模板引擎、前端框架和API接口等工具，可以更快速地开发和部署系统。

需要注意的是，动静分离需要根据具体的系统和需求进行设计和实现，需要综合考虑系统的性能、可维护性、可扩展性和开发效率等方面的因素。

外部操作vue内实例

通过new Function(参数1，参数2，…..表达式)，修改this指针完成外部js操作里面的数据

<template>
    <section class="home">
         <h1>首页</h1>
         <button @click="count++">+</button>
         <span>{{count}}</span>
         <button @click="apiClick(1000)">+100</button>
    </section>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import Vue from 'vue';
@Component({
    components:{

    }
})
export default class Home extends Vue {
   count: number = 100;
   str: string= '';
   async created(){
        const data: string = await new Promise(resolve=>{
             setTimeout(()=>{
                  const str = 'console.log(a);this.count+=a;document.body.style.backgroundColor="#ccc"';
                  resolve(str);
             },1000);
        });
        this.str = data;
   }
   public async apiClick(num: number){
        if(!this.str){
            return;
        }
        const func = new Function('a',this.str);
        func.bind(this)(num);
       // func.bind(this,num); 同理
   }
}
</script>

前端无法获取响应头 Response Header 原因

在使用CORS方式跨域时，浏览器只会返回 默认的头部 Header，认情况下可用的响应头包括：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

CORS规范将这些头称为 简单响应头 。要使用其他头可用于应用**Access-Control-Expose-Headers** ：…自定义头…

Access-Control-Expose-Headers 响应报头 指示哪些报头可以公开为通过列出他们的名字的响应的一部分
默认情况下，只显示6个简单的响应头，在上方也有介绍。

app.use((request,response,next)=>{
    response.setHeader('Access-Control-Expose-Headers','Content-Disposition');
    next();
})

flatMap

对复杂数组扁平化

1
2
3

const data = [{list:[1,2,3,4]},{list:[4,5,6,76]}]
data.flatMap(item=>item.list)
// [1, 2, 3, 4, 4, 5, 6, 76]

数字分隔符

用于开发时，对整数的分隔，更直观观看

1 2	123_456_789.01 === 123456789.01 // true

新增逻辑操作符

const a = false && 'aa';
// false

const a&&='aa'; // 写法等同于  a = a&&'aa'

const a||='bb'; // 等同于 a = a || 'bb'

const a??='bb'; // 等同于  a = a ?? 'bb'

双问号空值合并运算符

?? 判断除空值 null/undefined外，其它情况都为真,0 false NaN 返回自己

false || 'aa'; // 'aa'
false ?? 'aa'; // false

0 || 'aa'; // 'aa'
0 ?? 'aa'; // 0
NaN ?? 'aa'; // NaN

undefined ?? 'aa' // 'aa'
null ?? 'aa'   // 'aa'

可选链操作符

const obj = {}

// 以前判断一个对象是否存在 
if(obj && obj.info && obj.info.age)
   
// es12可选链
obj?.info?.age

Promise.allSettled

Promise.all([ajax1,ajax2]) 所有请求成功，执行.then，如果某个返回reject，会让promise执行.catch

Promise.allSettled([ajax1,ajax2]) 不管内部请求成功多少，失败多少，都会执行.then，最后结果中通过状态来判断成功请求和失败请求

const ajax1 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('ajax1 success')
        },100)
    })
}

const ajax2 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('ajax2 success')
        },200)
    })
}

const ajax3 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('ajax3 fail')
        },300)
    })
}


Promise.all([ajax1(),ajax2(),ajax3()]).then(res=>{
    console.log(res);
}).catch(e=>{
    console.log('err',e);
})
/**
err ajax3 fail
**/


Promise.allSettled([ajax1(),ajax2(),ajax3()]).then(res=>{
    console.log(res);
}).catch(e=>{
    console.log('err',e);
})
/**
0: {status: 'fulfilled', value: 'ajax1 success'}
1: {status: 'fulfilled', value: 'ajax2 success'}
2: {status: 'rejected', reason: 'ajax3 fail'}
**/

Promise.any

Promise.any任何一个执行成功，都会走.then

const ajax1 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('ajax1 fail')
        },100)
    })
}

const ajax2 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('ajax2 success')
        },200)
    })
}

const ajax3 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('ajax3 success')
        },300)
    })
}


Promise.any([ajax1(),ajax2(),ajax3()]).then(res=>{
    console.log(res);
}).catch(e=>{
    console.log('err',e);
})

/**
 * ajax2 success
**/

Promise.race

Promise.race靠拼网速，谁响应最快，谁走.then

可能存在返回的结果是请求失败的，race只关注谁最快响应，不管结果成功还是失败

const ajax1 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            reject('ajax1 fail')
        },100)
    })
}

const ajax2 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('ajax2 success')
        },200)
    })
}

const ajax3 = ()=>{
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('ajax3 success')
        },199)
    })
}


Promise.race([ajax1(),ajax2(),ajax3()]).then(res=>{
    console.log(res);
}).catch(e=>{
    console.log('err',e);
})
/**
  err ajax1 fail
**/

at

字符串/数据 . at(下标) 可能直接得到数据

-1代表最后一个元素，-2倒数第二个

const arr = [1,2,3,4]
arr.at(1); // 2
arr.at(-1); // 4

const str = 'abcdefg';
str.at(-1) // g
str.at(1) // b

findLastIndex findLast

1
2
3

const arr = ['a', 'b', 'c', 'd', 'e', 'g']
arr1.findLast(item=>item ==='f')   // f
arr1.findLastIndex(item=>item ==='f') // 6

class static代码块

class 类，static支持写入代码块

执行时，在创建main类就执行完成，而不是在new Main时才调用执行

class Main{
     static name = 'xiaoming';
     static  age= '22';
     static {
         this.name = 'xiaohomng';
     };
     static log(){
         console.log(this)
         return {
             name: this.name,
             age: this.age
         }
     }
}

Promise.finally

es12支持promise.finally语法

Object.fromEntries

将二维数组转一个对象

1 2	const arr = [['name','xiaoming']]; Object.fromEntries(arr); // { name: 'xiaoming' }

Object.entries

将对象转二维数组

const obj = {name: 'xiaoming',age: 22,info: {id: 2222}}
/*
* 0: (2) ['name', 'xiaoming']
  1: (2) ['age', 22]
  2: (2) ['info', {…}]
*/

new URLSearchParams(str)

将字符串URL参数快速提出为对象

const str = 'name=xiaoming&age=22&id=33&handleType=add';
Object.fromEntries(new URLSearchParams(str));
/**
 * {name: 'xiaoming', age: '22', id: '33', handleType: 'add'}
**/

通过new URL

1 2	const url = new URL(`http://www.programmer.com?a=1&b=2`); const searchParams = Object.fromEntries(new URLSearchParams(url.search));

exce

const str2 = 'sifodj122ljsdofj3224osjfdo2823'
str2.match(reg2); // ['122', '3224', '2823']

reg2.exce(str2) // 122
reg2.exce(str2) // 3224
reg2.exce(str2) // 2823

Map

const map1 = new map([
    ['name','xiaoming'],
    ['age', 22],
    [{}, 'school']
]);

map1.set(key,value);

map1.get(key);

map1.delete(key);

map1.keys() // 返回KEY
map1.values()  // 返回values
map1.entries()  // 返回key value的二维数据

[...map1]   // 返回二维数据

// 可以使用foreach  for of遍历

前瞻

在JavaScript中，前瞻（Lookahead）是一种正则表达式的语法，用于匹配一个字符串的前面或后面是否存在某个模式，但不包括这个模式本身。前瞻可以分为正向前瞻和负向前瞻两种类型。

正向前瞻（Positive Lookahead）：正向前瞻用于匹配一个字符串的前面是否存在某个模式，语法为 (?=pattern)。例如，正向前瞻 (?=JavaScript)可以匹配字符串中前面存在JavaScript的位置，但不包括JavaScript本身。
负向前瞻（Negative Lookahead）：负向前瞻用于匹配一个字符串的前面是否不存在某个模式，语法为 (?!pattern)。例如，负向前瞻 (?!JavaScript)可以匹配字符串中前面不存在JavaScript的位置。

以下是正向前瞻和负向前瞻的示例代码：

javascript复制// 正向前瞻示例
const str1 = 'JavaScript is a popular programming language';
const pattern1 = /Java(?=Script)/;
console.log(str1.match(pattern1)); // 输出["Java"]

// 负向前瞻示例
const str2 = 'Python is a popular programming language';
const pattern2 = /Java(?!Script)/;
console.log(str2.match(pattern2)); // 输出null

需要注意的是，前瞻只是一种匹配模式，不会改变正则表达式的匹配结果。在使用前瞻时，需要注意正则表达式的语法和匹配规则，以便正确地匹配字符串。

后顾

在JavaScript中，后顾（Lookbehind）是一种正则表达式的语法，用于匹配一个字符串的后面是否存在某个模式，但不包括这个模式本身。后顾可以分为正向后顾和负向后顾两种类型。

正向后顾（Positive Lookbehind）：正向后顾用于匹配一个字符串的后面是否存在某个模式，语法为 (?<=pattern)。例如，正向后顾 (?<=JavaScript)可以匹配字符串中后面存在JavaScript的位置，但不包括JavaScript本身。
负向后顾（Negative Lookbehind）：负向后顾用于匹配一个字符串的后面是否不存在某个模式，语法为 (?<!pattern)。例如，负向后顾 (?<!JavaScript)可以匹配字符串中后面不存在JavaScript的位置。

以下是正向后顾和负向后顾的示例代码：

javascript复制// 正向后顾示例
const str1 = 'JavaScript is a popular programming language';
const pattern1 = /(?<=Java)Script/;
console.log(str1.match(pattern1)); // 输出["Script"]

// 负向后顾示例
const str2 = 'Python is a popular programming language';
const pattern2 = /(?<!Java)Script/;
console.log(str2.match(pattern2)); // 输出null

需要注意的是，后顾只是一种匹配模式，不会改变正则表达式的匹配结果。在使用后顾时，需要注意正则表达式的语法和匹配规则，以便正确地匹配字符串。另外，后顾在JavaScript中的支持程度较低，只有部分浏览器和JavaScript引擎支持，因此在使用后顾时需要注意兼容性问题。

toLocaleString千分位问题

部分国家，如巴西，千分位展示方式与国内日常看到的是不一样的，相比于国内，在巴西等国家会把逗号和点互换

国内:

123,4.01

巴西

123.4,01

在巴西默认为巴西本地，显示与在国内不一样，需要加上参数

1	1234.01.toLocaleString('zh')

正则千分位

"9902939023.222".replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
// 思路
// [023., 939023.,902939023.]
// "9,902,939,023.222"

css Grid布局

CSS Grid 布局是一种新的布局方式，它可以让开发者更加灵活地控制网页布局。但是，由于 CSS Grid 布局是比较新的技术，因此在一些旧版本的浏览器中可能存在兼容性问题，包括一些手机浏览器。

手机上：以下是一些不支持 CSS Grid 布局的手机浏览器：

Android 4.4 及以下版本的浏览器：Android 4.4 及以下版本的浏览器不支持 CSS Grid 布局，需要使用其他布局方式来实现相同的效果。
iOS 9 及以下版本的 Safari 浏览器：iOS 9 及以下版本的 Safari 浏览器不支持 CSS Grid 布局，需要使用其他布局方式来实现相同的效果。
UC 浏览器：UC 浏览器在一些旧版本中可能存在 CSS Grid 布局的兼容性问题，需要使用其他布局方式来实现相同的效果。

需要注意的是，虽然一些手机浏览器可能存在 CSS Grid 布局的兼容性问题，但是随着浏览器的更新和升级，这些问题可能会得到解决。因此，建议在使用 CSS Grid 布局时，尽可能考虑兼容性问题，并使用一些技术手段来解决这些问题，例如使用 Autoprefixer、CSS Grid 布局的 Polyfill 或其他布局方式。

电脑上:

以下是 CSS Grid 布局的兼容性情况：

支持 CSS Grid 布局的浏览器：Chrome、Firefox、Safari、Edge、Opera 等现代浏览器都支持 CSS Grid 布局。
部分支持 CSS Grid 布局的浏览器：IE 10 和 11 支持 CSS Grid 布局，但是需要使用 -ms- 前缀来实现。另外，iOS Safari 10.3 和 11.0 也支持 CSS Grid 布局，但是需要开启实验性功能。
不支持 CSS Grid 布局的浏览器：IE 9 及以下版本的浏览器不支持 CSS Grid 布局，需要使用其他布局方式来实现相同的效果。

为了解决 CSS Grid 布局的兼容性问题，可以使用一些技术手段，例如：

使用 Autoprefixer：Autoprefixer 是一个 PostCSS 插件，可以自动为 CSS 添加浏览器前缀，以实现更好的兼容性。
使用 CSS Grid 布局的 Polyfill：Polyfill 是一种 JavaScript 库，可以在不支持 CSS Grid 布局的浏览器中模拟实现 CSS Grid 布局的功能。
使用其他布局方式：如果需要在不支持 CSS Grid 布局的浏览器中实现相同的效果，可以使用其他布局方式，例如 Flexbox 布局、表格布局等。

总之，CSS Grid 布局在现代浏览器中得到了广泛的支持，但是在一些旧版本的浏览器中可能存在兼容性问题。为了解决这些问题，可以使用 Autoprefixer、CSS Grid 布局的 Polyfill 或其他布局方式来实现相同的效果。

浏览器内核

-webkit -o -moz -ms

浏览器内核是指浏览器的核心部分，它是浏览器的基础，负责解析网页代码、渲染页面、处理用户交互等功能。不同的浏览器有不同的内核，常见的浏览器内核包括以下几种：

Trident 内核：Trident 内核是由微软公司开发的浏览器内核，包括 Internet Explorer 和 Microsoft Edge 浏览器。
Gecko 内核：Gecko 内核是由 Mozilla 公司开发的浏览器内核，包括 Firefox 浏览器。
WebKit 内核：WebKit 内核是由苹果公司开发的浏览器内核，包括 Safari 浏览器和一些其他浏览器，例如 Chrome 浏览器的早期版本。
Blink 内核：Blink 内核是由 Google 公司开发的浏览器内核，包括 Chrome 浏览器、Opera 浏览器等。
Presto 内核：Presto 内核是由 Opera Software 公司开发的浏览器内核，包括 Opera 浏览器的早期版本。

需要注意的是，一些浏览器可能采用多个内核，例如早期的 Chrome 浏览器同时采用了 WebKit 和 Blink 内核。此外，不同的浏览器内核对网页的解析和渲染方式也有所不同，因此在开发网页时需要考虑浏览器内核的兼容性问题。

总之，浏览器内核是浏览器的核心部分，不同的浏览器有不同的内核。常见的浏览器内核包括 Trident 内核、Gecko 内核、WebKit 内核、Blink 内核和 Presto 内核等。在开发网页时需要考虑浏览器内核的兼容性问题。

幽灵依赖

https://www.codingsky.com/doc/2022/8/18/616.html

水滴消融动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            height: 100vh;
            position: relative;
            width: 100vw;
            overflow: hidden;
        }

        .footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 30vh;
            width: 120%;
            margin-left: -10%;
            background-color: #6a90aa;
            filter: url(#dynamicBlend);
            z-index: 1;


        }

        .footer:before {
            content: '';
            display: block;
            width: 100%;
            height: 5px;
            background-color: #6a90aa;
            position: absolute;
            left: 0;
            top: -2px;
        }

        .white-bar {
            position: absolute;
            height: 70vh;
            z-index: 2;
            background: linear-gradient(transparent 0%, transparent 99.9%, #6a90aa 99.9%, #6a90aa 100%);
            left: 0;
            right: 0;
            bottom: 0;

            top: 0;
        }

        .dot-list {
            /* filter: url(#dynamicBlend); */
            animation: move2 10s linear alternate infinite;
        }

        .dot-list span {

            background-color: #6a90aa;
            border-radius: 50%;
            display: inline-block;
            position: absolute;
            transition: all 3s linear;
            animation: move linear 3s;
            z-index: 3;
        }

        @keyframes move {
            100% {
                transform: scale(0);
                top: -1000px;
            }
        }
    </style>
</head>

<body>
    <div class="container">

        <div class="footer">
            <div class="dot-list">
            </div>
        </div>

    </div>

    <svg style="visibility: hidden; position: absolute; left: 0; top: 0" width="400" height="200" viewBox="0 0 400 200">
        <defs>
            <filter id="dynamicBlend">
                <feGaussianBlur stdDeviation="8" result="blur" edgeMode="duplicate" />
                <feColorMatrix type="matrix" values="
                  1 0 0 0 0
                  0 1 0 0 0
                  0 0 1 0 0
                  0 0 0 16 -6" />
            </filter>
        </defs>


    </svg>
</body>

</html>

<script>
    function createElemetSpan() {
        const dostList = document.querySelector(".dot-list");
        const createLength = Math.ceil(Math.random() * 80);
        for (let i = 0; i < createLength; i++) {
            const span = document.createElement("span");
            const width = 50 + Math.ceil(Math.random() * 400);
            const left = 40 + Math.random() * 20;
            const top = Math.random() * 200;
            span.style.cssText = `width: ${width}px; height: ${width}px;left:${left}%; top: ${top}px`;
            dostList.appendChild(span);
            setTimeout(() => {
                dostList.removeChild(span);
            }, 4000);
        }
    }
    createElemetSpan();
    setInterval(createElemetSpan, 1000);
</script>