前端——WEB-API那些有意思的api

森果源码

已于 2024-02-27 18:48:42 修改

阅读量196

点赞数 1

文章标签：前端

于 2024-02-27 18:22:44 首次发布

本文链接：https://blog.csdn.net/qq_31539817/article/details/127264322

版权

1.URL和URLSearchParams

一个用于解析URL，一个用于查询URL的Parmas

  <script >
    let url = 'http://zyfp-fof.ss.gofund.cn/list?type=0&dst=1'
    let urlApi=new URL(url)
    let dst=new URLSearchParams(urlApi.search).get('dst')
    console.log(dst);
  </script>

我们可以使用api来实现URL序列化

JsonParseUrl(url) {
     if (!url.includes('?')) {
        return new Error('链接无法被序列化')
     }
    // 获取到URL的search
    const queryUrl = new URL(url).search
    //获取到search键值对
    const entries = new URLSearchParams(queryUrl)
    // 將map转成对象
    const obj = Object.fromEntries(entries.entries())
    return obj
}

2.IntersectionObserver

监视元素是否交叉，可用于观察目标元素与其祖先元素或顶级文档。懒加载，视口加载都可以使用这个方法。

IntersectionObserver构造函数提供了两个方法用于对目标元素进行观察和取消观察。

observe(DOM节点)：观察元素

unobserve(DOM节点)：取消观察

创建实例：

  let observer=new  IntersectionObserver(callBack)

callBack是一个回调函数，它执行两次，一次是目标元素和可视窗口发生交叉时调用，一次是不发生交叉时调用（看见时调用一次，看不见时调用一次）

callBack回调函数接收一个参数，该参数包含被观察DOM节点相关信息和观察状态的数组

target：被观察的DOM节点实例

isIntersecting：是否被观察到

经典用法：懒加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        height: 100vh;
        width: 1000px;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(50% 50%);
    }
    img {
        padding-top: 50px;
        margin-bottom: 50px;
        height: 500px;
        width: 500px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: inline-block;
        border-top: 2px solid red;
    }
</style>

<body>
    <div>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>11111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>11111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>11111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>11111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <img data-src="./img/7ff513a853b6d50887606dc436b1ddff.jpeg" alt="">
        <img data-src="./img/8a728780b5ddd5672eb5bf8a4ce23c86.jpeg" alt="">
        <img data-src="./img/ec6c60c8c5de6d7fa899807cfa8d46f1.jpeg" alt="">
        <img data-src="./img/7ff513a853b6d50887606dc436b1ddff.jpeg" alt="">
        <img data-src="./img/8a728780b5ddd5672eb5bf8a4ce23c86.jpeg" alt="">
        <img data-src="./img/ec6c60c8c5de6d7fa899807cfa8d46f1.jpeg" alt="">
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
        <p>3ewrw山东省地方第三方的范德萨发水电费第三方第三方电风扇方式对方水电费</p>
        <p>1111111111111111111111111111111111111111111111111111111111111111</p>
        <p>22222222222222222222222222222222222222222222222222222222222222</p>
    </div>
</body>
<script>
    let imgs = document.querySelectorAll('img')
    let  observer=new  IntersectionObserver(callBack)
    imgs.forEach(imgItem=>{
        // 观察节点，触发new  IntersectionObserver(callBack)内的回调函数
        observer.observe(imgItem)
    })
    // IntersectionObserver会向回调函数传入一个参数
    function callBack(observerArray){
        // observerArray：每个被观察元素对象的实例和观察状态集合
        observerArray.forEach(item=>{
             // item：被观察元素对象的实例和观察状态信息
            //  isIntersecting：是否被观察到
            if(item.isIntersecting){
                // item.target:被观察到实例
                let imgDom=item.target
                imgDom.setAttribute('src', imgDom.getAttribute('data-src'))
                // 被观察到取消观察
                observer.unobserve(imgDom)
            }
            console.log(item);
        })
    }
</script>
</html>