前端项目补充问题

最新推荐文章于 2024-06-13 02:48:16 发布

春緋

最新推荐文章于 2024-06-13 02:48:16 发布

阅读量227

点赞数 3

文章标签：前端

本文链接：https://blog.csdn.net/2302_80391964/article/details/138756953

版权

一、学习过程

一、查找最近的元素方法

partent()、partents()、closeset()区别

closest()从自身开始向上遍历所有祖先元素,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;
parents()从自身的父节点开始向上遍历，返回所有祖先节点,然后根据选择器对这些节点进行筛选，最终返回的jQuery对象可

partent()选择DOM元素或者DOM元素集的父节点,只向上搜索一层,只可以逐级往上查找父级，最先找到的是直接父级

二、js对于字符串操作

js对于字符串操作substring（），slice（)，substr（ECMAscript 没有对该方法进行标准化，因此反对使用它。）

substring(start, stop) ; 返回下标start 到 stop -1 之间的字符串；原字符串不会改变

string.slice(start,end)；slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。；原字符串会改变

三、解决display：none与height：auto动画冲突问题

因为display：none使得盒子高度不确定，所以transition无法确定长度如何变化，是的动画效果失效。

一般有以下几种解决方案：

1.使用max-height


.div {
	max-height: 120px;
	overflow: hidden;
	transition: max-height .3s;
}
.div.a{
	max-height: 30px;
}

优点：使用简单
缺点：需要了解最大的高度值，这个值即要满足最大高度，又不能设置太大。对于一些动态渲染的部分，无法感知具体的高度，具体值，效果会偏差较大

2.使用js解决

四、js无限滚动实现懒加载

使用IntersectionObserver对象

js文件

const pngs = [
    //图片自定
]
 
async function lazyLoaderDom(end, total) {
  let start_teep = 0
  return function start() {
    for (let st = start_teep; st < start_teep + end; st++) { 
      if (st + 1 > total) { 
        break
      }
      resolvePngs(pngs[st])
    }
    start_teep = start_teep + end
  }
}
 
async function resolvePngs(href) {
  const container = document.querySelector('.container')
  container.insertAdjacentHTML('beforeend', `
    <div class="role-item">
        <img src="${href}">
        <div>
            <span>AI娃娃</span>
        </div>
    </div>
  `)
}
 
const callback = lazyLoaderDom(18, pngs.length)
 
const observer = new IntersectionObserver(async (entries) => {
  const intersection = entries[0]
  if (intersection.isIntersecting) {
    (await callback)()
  }
})
 
observer.observe(document.querySelector('.footer-loading'))

html

<!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>
    <style>
        * { margin: 0; padding: 0 }
        body { background: rgb(253, 253, 253) }
        .container {
            padding: 1vw;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem
        }
        .footer {  
            height: 20vh;
            background: #ffffff;
            box-shadow: 3rem -.7rem .5rem #e7e7e7;
            display: flex
        }
        .footer-loading {
            margin: auto;
            color: rgb(98, 98, 98)
        }
        .role-item {
            width: 15vw;
            height: 37vh;
            border: .05rem solid #ccc
        }
        .role-item > img {
            height: 30vh
        }
        .role-item > div {
            padding: 1rem
        }
        .role-item > div > span {
            font-size: 1rem;
            color: rgb(98, 98, 98)
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 加载容器 -->
        <div class="container">
            <!-- 渲染区 -->
        </div>
        <div class="footer">
            <div class="footer-loading">
                <span>到底了，哥哥~</span>
            </div>
        </div>
    </div>
    <script src="./lazyloader.js"></script>
</body>
</html>

五、async 函数

async 函数是一种声明异步函数的方式。当函数被声明为 async 时，它将始终返回一个 Promise 对象。
在 async 函数内部，可以使用 await 关键字等待一个 Promise 对象的解决。

async function myAsyncFunction() {
  return 'Hello, async!';
}

// 调用 async 函数
myAsyncFunction().then(result => {
  console.log(result); // 输出: Hello, async!
});

await关键字

await 只能在 async 函数内部使用。它暂停异步函数的执行，等待 Promise 对象解决，然后继续执行下面的代码

在 await 后面可以放置任何返回 Promise 对象的表达式，包括调用 async 函数。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Resolved after 2 seconds');
    }, 2000);
  });
}

async function asyncExample() {
  console.log('Start');
  const result = await resolveAfter2Seconds();
  console.log(result);
  console.log('End');
}

// 调用 async 函数
asyncExample();
// 输出:
// Start
// Resolved after 2 seconds
// End

春緋

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端项目补充问题

closest()从自身开始向上遍历所有祖先元素,直到找到一个适合的节点,返回的jQuery对象包含0个或者1个对象;parents()从自身的父节点开始向上遍历，返回所有祖先节点,然后根据选择器对这些节点进行筛选，最终返回的jQuery对象可partent()选择DOM元素或者DOM元素集的父节点,只向上搜索一层,只可以逐级往上查找父级，最先找到的是直接父级。
复制链接

扫一扫