国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

ShevaKuilin / 899人閱讀

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

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

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

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

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

使用場景

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

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

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

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

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

// 創(chuàng)建視圖監(jiān)聽
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] : []

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

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

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

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

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

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

如果您想讓更多人看到文章可以點個 點贊。

如果您想激勵小二可以到 Github 給個 小星星。

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

本文原稿來自 PushMeTop

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102432.html

相關(guān)文章

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

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

    JohnLui 評論0 收藏0

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

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

    DevYK 評論0 收藏0

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

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

    huayeluoliuhen 評論0 收藏0

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

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

    gityuan 評論0 收藏0

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

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

    meteor199 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<