内容字号:默认大号超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到微软雅黑切换到宋体

每日30秒之chunk

2019-03-06 11:14 出处:清屏网 人气: 评论(0

简介

把数组按指定大小进行分组,可以用于分页、数据切割、异步操作数据。

// 该源码来自于 https://30secondsofcode.org
const chunk = (arr, size) =>
  Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
    arr.slice(i * size, i * size + size)
  );

代码分析

Array.prototype.from 从一个类似数组或者可迭代对象中创建一个新的数组实例, 类似数组 这个词可能很多人都不是很清楚,类似数组是 javascript 中一个神奇的对象,只要拥有 length 就算是类似数组了。

最常见的 类似数组 是函数中的 arguments 有长度和 arguments[0] 的调用方法,但是却没有数组的 push 等函数方法。利用 Array.prototype.from 则可以把 类似数组 转化为 数组 。这个代码的巧妙之处在于用了 { length: 3 } 这样的对象来快速 生成数组 ,而 Array.prototype.from 的第二个参数会对刚生成的数组进行循环遍历相当于调用了 map

在循环遍历新生成 数组 时,使用了 Array.prototype.slice 的方法来实现了分割数据的效果,这个方法相当常用同学们可以记住它。

使用场景

假设现在有一个消息列表数组里面有一万条数据让你渲染到页面上,大部分人会直接遍历数组并拼接成 dom 一股脑的渲染到页面上,这样带来的后果是大量的 dom 操作会花费很多时间导致页面卡顿,且上下滑动页面时也会卡顿。

我们不妨换个角度来看这个问题 无论是手机屏幕还是电脑屏幕 用户可见的页面数据条目可能就十几条。那为什么我们要一次性渲染一万多条,而且用户也不见得会把所有数据都查看了。

那我们是否可以只渲染 十几条数据 ,其他数据等用户滚动了某个高度时再进行下一个 十几条数据 的渲染。在分页操作中, chunk 就可以帮助我们快速的进行分页。

样式

.news > div {
    text-align: center;
    height: 50px;
}

结构

<!-- 用于标识到页面顶部了 -->
<div class="news-header"></div>
<!-- 新闻数据 -->
<div class="news"></div>
<!-- 用于标识到页面底部了 -->
<div class="news-footer"></div>

脚本

// 模拟生成 1万条数据,这里就利用了 Array.from 来快速生成数据
const originNews = Array.from(
    { length: 10000 },
    (v, k) => ({ content: `新闻${k}` })
)

// 需要插入的容器
const element = document.querySelector('.news')[0]

// 创建视图监听
const loadObserver = new IntersectionObserver((entries) => {
    // 如果不可见,就返回
    if (entries[0].intersectionRatio <= 0) {
        return;
    }

    // 判断是否有上一页和下一页
    const hasPrePage = page != 0
    const hasNextPage = page != news.length - 1

    const now = news[page]
    const pre = hasPrePage ? news[page - 1] : []
    const next = hasNextPage ? news[page + 1] : []

    // 传递锚点的坐标 和 当前页面显示的数据
    render(pre.length, [ ...pre, ...now, ...next ])
    
    // 判断是否需要翻页,且防止数组越界
    page = entries[0].target.className == 'news-footer' || page === 0
        ? (hasNextPage ? page + 1 : page)
        : (hasPrePage ? page - 1 : page)
}, { threshold: [1] })

// 设置监听
loadObserver.observe(document.querySelector('.news-header'))
loadObserver.observe(document.querySelector('.news-footer'))

// 根据当前页面高度和新闻高度算出每一页可以放几条数据
let pageNum = Math.ceil(document.body.clientHeight / 50)
let page = 0 // 当前显示了第几页的数据
let news = chunk(originNews, pageNum) // 分页后的数据

// 渲染新闻 并 跳转到锚点
function render(last, data) {
    element.innerHTML = ''

    data.forEach((i, v) => element.innerHTML += v == last
        ? `<div id="news-herf">${i.content}</div>`
        : `<div>${i.content}</div>`
    )

    window.location.href = "#news-herf"
}
分享给小伙伴们:
本文标签: JavaScript

相关文章

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

CopyRight © 2015-2016 QingPingShan.com , All Rights Reserved.