成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

每日 30 秒 ? 對(duì)海量數(shù)據(jù)進(jìn)行切割

ShevaKuilin / 898人閱讀

簡(jiǎn)介 
數(shù)據(jù)分割、分頁(yè)、異步操作、DOM優(yōu)化

把數(shù)組按指定大小進(jìn)行分組，可以用于分頁(yè)、數(shù)據(jù)切割、異步操作數(shù)據(jù)。

// 該源碼來(lái)自于 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 從一個(gè)類似數(shù)組或者可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例，類似數(shù)組 這個(gè)詞可能很多人都不是很清楚，類似數(shù)組是 javascript 中一個(gè)神奇的對(duì)象，只要擁有 length 就算是類似數(shù)組了。

最常見(jiàn)的類似數(shù)組是函數(shù)中的 arguments 有長(zhǎng)度和 arguments[0] 的調(diào)用方法，但是卻沒(méi)有數(shù)組的 push 等函數(shù)方法。利用 Array.prototype.from 則可以把 類似數(shù)組 轉(zhuǎn)化為 數(shù)組。這個(gè)代碼的巧妙之處在于用了 { length: 3 } 這樣的對(duì)象來(lái)快速 生成數(shù)組，而 Array.prototype.from 的第二個(gè)參數(shù)會(huì)對(duì)剛生成的數(shù)組進(jìn)行循環(huán)遍歷相當(dāng)于調(diào)用了 map。

在循環(huán)遍歷新生成數(shù)組時(shí)，使用了 Array.prototype.slice 的方法來(lái)實(shí)現(xiàn)了分割數(shù)據(jù)的效果，這個(gè)方法相當(dāng)常用同學(xué)們可以記住它。

使用場(chǎng)景

假設(shè)現(xiàn)在有一個(gè)消息列表數(shù)組里面有一萬(wàn)條數(shù)據(jù)讓你渲染到頁(yè)面上，大部分人會(huì)直接遍歷數(shù)組并拼接成 dom 一股腦的渲染到頁(yè)面上，這樣帶來(lái)的后果是大量的 dom 操作會(huì)花費(fèi)很多時(shí)間導(dǎo)致頁(yè)面卡頓，且上下滑動(dòng)頁(yè)面時(shí)也會(huì)卡頓。

我們不妨換個(gè)角度來(lái)看這個(gè)問(wèn)題無(wú)論是手機(jī)屏幕還是電腦屏幕用戶可見(jiàn)的頁(yè)面數(shù)據(jù)條目可能就十幾條。那為什么我們要一次性渲染一萬(wàn)多條，而且用戶也不見(jiàn)得會(huì)把所有數(shù)據(jù)都查看了。

那我們是否可以只渲染十幾條數(shù)據(jù)，其他數(shù)據(jù)等用戶滾動(dòng)了某個(gè)高度時(shí)再進(jìn)行下一個(gè)十幾條數(shù)據(jù)的渲染。在分頁(yè)操作中，chunk 就可以幫助我們快速的進(jìn)行分頁(yè)。

樣式
.news > div {
    text-align: center;
    height: 50px;
}
結(jié)構(gòu)
腳本
// 模擬生成 1萬(wàn)條數(shù)據(jù)，這里就利用了 Array.from 來(lái)快速生成數(shù)據(jù)
const originNews = Array.from(
    { length: 10000 },
    (v, k) => ({ content: `新聞${k}` })
)

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

// 創(chuàng)建視圖監(jiān)聽(tīng)
const loadObserver = new IntersectionObserver((entries) => {
    // 如果不可見(jiàn)，就返回
    if (entries[0].intersectionRatio <= 0) {
        return;
    }

    // 判斷是否有上一頁(yè)和下一頁(yè)
    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] : []

    // 傳遞錨點(diǎn)的坐標(biāo) 和 當(dāng)前頁(yè)面顯示的數(shù)據(jù)
    render(pre.length, [ ...pre, ...now, ...next ])
    
    // 判斷是否需要翻頁(yè)，且防止數(shù)組越界
    page = entries[0].target.className == "news-footer" || page === 0
        ? (hasNextPage ? page + 1 : page)
        : (hasPrePage ? page - 1 : page)
}, { threshold: [1] })

// 設(shè)置監(jiān)聽(tīng)
loadObserver.observe(document.querySelector(".news-header"))
loadObserver.observe(document.querySelector(".news-footer"))

// 根據(jù)當(dāng)前頁(yè)面高度和新聞高度算出每一頁(yè)可以放幾條數(shù)據(jù)
let pageNum = Math.ceil(document.body.clientHeight / 50)
let page = 0 // 當(dāng)前顯示了第幾頁(yè)的數(shù)據(jù)
let news = chunk(originNews, pageNum) // 分頁(yè)后的數(shù)據(jù)

// 渲染新聞 并 跳轉(zhuǎn)到錨點(diǎn)
function render(last, data) {
    element.innerHTML = ""

    data.forEach((i, v) => element.innerHTML += v == last
        ? `
${i.content}
`
        : `
${i.content}
`
    )

    window.location.href = "#news-herf"
}
一起成長(zhǎng) 
在困惑的城市里總少不了并肩同行的 伙伴 讓我們一起成長(zhǎng)。

如果您想讓更多人看到文章可以點(diǎn)個(gè) 點(diǎn)贊。

如果您想激勵(lì)小二可以到 Github 給個(gè) 小星星。

如果您想與小二更多交流添加微信 m353839115。

本文原稿來(lái)自 PushMeTop

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/102432.html

相關(guān)文章

  • 每日 30 秒 ? 該不該優(yōu)雅

    showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 簡(jiǎn)介 可讀性、性能、Spread、Reduce 在 優(yōu)雅三連擊 中有同學(xué)提到了 可讀性 這個(gè)關(guān)鍵詞，就小二個(gè)人的觀點(diǎn) 在某個(gè)范圍內(nèi)使用比較常用到的小技巧，可以提升一定的可讀性，文中提到的短路運(yùn)算在初始化變量是提升可讀性的，并且在很多提倡優(yōu)化if 語(yǔ)句...

    JohnLui 評(píng)論0 收藏0

  • 每日 30 秒 ? 巧用可視區(qū)域

    簡(jiǎn)介 可視區(qū)域、頁(yè)面優(yōu)化、DOM節(jié)點(diǎn)多、圖片懶加載、性能 可視區(qū)域是一個(gè)前端優(yōu)化經(jīng)常出現(xiàn)的名詞，不管是顯示器、手機(jī)、平板它們的可視區(qū)域范圍都是有限。在這個(gè) 有限可視區(qū)域 區(qū)域里做到完美顯示和響應(yīng)，而在這個(gè)區(qū)域外少做一些操作來(lái)減少渲染的壓力、網(wǎng)絡(luò)請(qǐng)求壓力。在 每日 30 秒之 對(duì)海量數(shù)據(jù)進(jìn)行切割 中的使用場(chǎng)景，我們就是利用了 有限可視區(qū)域 只渲染一部分 DOM 節(jié)點(diǎn)來(lái)減少頁(yè)面卡頓。 既然 可視區(qū)域 ...

    DevYK 評(píng)論0 收藏0

  • 每日 30 秒 ? 對(duì)數(shù)組項(xiàng)目進(jìn)行統(tǒng)計(jì)

    showImg(https://raw.githubusercontent.com/pushmetop/resource/master/30-seconds-for-everyday/count/poster.png); 簡(jiǎn)介 數(shù)組、統(tǒng)計(jì)、遍歷 根據(jù)指定的方法或者參數(shù)對(duì)數(shù)組中的項(xiàng)目進(jìn)行統(tǒng)計(jì)。 // 該源碼來(lái)自于 https://30secondsofcode.org const countBy =...

    huayeluoliuhen 評(píng)論0 收藏0

  • 每日 30 秒 ? 唯一數(shù)據(jù)集

    showImg(https://segmentfault.com/img/remote/1460000018795147?w=901&h=501); 簡(jiǎn)介 數(shù)組、對(duì)象、唯一、只出現(xiàn)一次、差集 取出兩個(gè)對(duì)象數(shù)組中唯一的數(shù)據(jù)集，即差集。 // 該源碼來(lái)自于 https://30secondsofcode.org const filterNonUniqueBy = (arr, fn) => arr....

    gityuan 評(píng)論0 收藏0

  • 每日 30 秒 ? 數(shù)據(jù)類型大亂燉

    showImg(https://segmentfault.com/img/remote/1460000018796041?w=900&h=500); 簡(jiǎn)介 字符串、數(shù)字、布爾值、Null、Undefined、對(duì)象、數(shù)組、函數(shù)、判斷方法 JavaScript 中有兩種數(shù)據(jù)類型，分別是基本數(shù)據(jù)類型和引用數(shù)據(jù)類型： 基本數(shù)據(jù)類型 引用數(shù)據(jù)類型 Number、String、Boolean、Null...

    meteor199 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<