原生JavaScript如何實(shí)現(xiàn)彈幕組件de方法

原生JavaScript如何實(shí)現(xiàn)彈幕組件de方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

用原生 JavaScript 封裝一個(gè)彈幕類。這個(gè)類希望有如下屬性和實(shí)例方法：

屬性

• el容器節(jié)點(diǎn)的選擇器，容器節(jié)點(diǎn)應(yīng)為絕對(duì)定位，設(shè)置好寬高
• height 每條彈幕的高度
• mode 彈幕模式，half則為一半容器高度，top為三分之一，full為占滿
• speed彈幕劃過屏幕的時(shí)間
• gapWidth后一條彈幕與前一條彈幕的距離

方法

• pushData 添加彈幕元數(shù)據(jù)
• addData持續(xù)加入彈幕
• start開始調(diào)度彈幕
• stop停止彈幕
• restart 重新開始彈幕
• clearData清空彈幕
• close關(guān)閉
• open重新顯示彈幕

PS:有一些自封裝的工具函數(shù)就不貼出來了，大概知道意思就好

初始化

引入JavaScript文件之后，我們希望如下使用，先采取默認(rèn)配置。

let barrage = new Barrage({    el: '#container'})復(fù)制代碼

參數(shù)初始化：

function Barrage(options) {    let {
        el,
        height,
        mode,
        speed,
        gapWidth,
    } = options    this.container = document.querySelector(el)    this.height = height || 30
    this.speed = speed || 15000 //2000ms
    this.gapWidth = gapWidth || 20
    this.list = []    this.mode = mode || 'half'
    this.boxSize = getBoxSize(this.container)    this.perSpeed = Math.round(this.boxSize.width / this.speed)    this.rows = initRows(this.boxSize, this.mode, this.height)    this.timeoutFuncs = []    this.indexs = []    this.idMap = []
}復(fù)制代碼

先接受好參數(shù)然后初始化，下面看看getBoxSize和initRows

function getBoxSize(box) {    let {
        height,
        width
    } = window.getComputedStyle(box)    return {        height: px2num(height),        width: px2num(width)
    }    function px2num(str) {        return Number(str.substring(0, str.indexOf('p')))
    }
}復(fù)制代碼

通過getComputedStyleapi計(jì)算出盒子的寬高，這里用來計(jì)算容器的寬高，之后也會(huì)用到。

function initRows(box, mode, height) {    let pisor = getpisor(mode)
    rows = Math.ceil(box.height * pisor / height)    return rows
}function getpisor(mode) {    let pisor = .5
    switch (mode) {        case 'half':
            pisor = .5
            break
        case 'top':
            pisor = 1 / 3
            break;        case 'full':
            pisor = 1;            break
        default:            break;
    }    return pisor
}復(fù)制代碼

根據(jù)高度算出彈幕應(yīng)該有多少行，下面會(huì)有地方用到行數(shù)。

插入數(shù)據(jù)

有兩種插入數(shù)據(jù)的方法，一種是添加源數(shù)據(jù)，一種是持續(xù)添加。先來看添加源數(shù)據(jù)的方法：

this.pushData = function (data) {    this.initDom()    if (getType(data) == '[object Object]') {        //插入單條
        this.pushOne(data)
    }    if (getType(data) == '[object Array]') {        //插入多條
        this.pushArr(data)
    }
}this.initDom = function () {    if (!document.querySelector(`${el} .barrage-list`)) {        //注冊dom節(jié)點(diǎn)
        for (let i = 0; i < this.rows; i++) {            let p = document.createElement('p')
            p.classList = `barrage-list barrage-list-${i}`
            p.style.height = `${this.boxSize.height*getpisor(this.mode)/this.rows}px`
            this.container.appendChild(p)
        }
    }
}復(fù)制代碼

this.pushOne = function (data) {    for (let i = 0; i < this.rows; i++) {        if (!this.list[i]) this.list[i] = []

    }    let leastRow = getLeastRow(this.list) //獲取彈幕列表中最少的那一列，彈幕列表是一個(gè)二維數(shù)組
    this.list[leastRow].push(data)
}this.pushArr = function (data) {    let list = sliceRowList(this.rows, data)
    list.forEach((item, index) => {        if (this.list[index]) {            this.list[index] = this.list[index].concat(...item)
        } else {            this.list[index] = item
        }
    })
}//根據(jù)行數(shù)把一維的彈幕list切分成rows行的二維數(shù)組function sliceRowList(rows, list) {    let sliceList = [],
        perNum = Math.round(list.length / rows)    for (let i = 0; i < rows; i++) {        let arr = []        if (i == rows - 1) {
            arr = list.slice(i * perNum)
        } else {
            i == 0 ? arr = list.slice(0, perNum) : arr = list.slice(i * perNum, (i + 1) * perNum)
        }
        sliceList.push(arr)
    }    return sliceList
}復(fù)制代碼

持續(xù)加入數(shù)據(jù)的方法只是調(diào)用了添加源數(shù)據(jù)的方法，并且開始了調(diào)度而已

this.addData = function (data) {    this.pushData(data)    this.start()
}復(fù)制代碼

發(fā)射彈幕

下面來看看發(fā)射彈幕的邏輯

this.start = function () {    //開始調(diào)度list
    this.dispatchList(this.list)
}this.dispatchList = function (list) {    for (let i = 0; i < list.length; i++) {        this.dispatchRow(list[i], i)
    }
}this.dispatchRow = function (row, i) {    if (!this.indexs[i] && this.indexs[i] !== 0) {        this.indexs[i] = 0
    }    //真正的調(diào)度從這里開始，用一個(gè)實(shí)例變量存儲(chǔ)好當(dāng)前調(diào)度的下標(biāo)。
    if (row[this.indexs[i]]) {        this.dispatchItem(row[this.indexs[i]], i, this.indexs[i])
    }
}復(fù)制代碼

this.dispatchItem = function (item, i) {    //調(diào)度過一次的某條彈幕下一次在調(diào)度就不需要了
    if (!item || this.idMap[item.id]) {        return
    }    let index = this.indexs[i]    this.idMap[item.id] = item.id    let p = document.createElement('p'),
        parent = document.querySelector(`${el} .barrage-list-${i}`),
        width,
        pastTime
    p.innerHTML = item.content
    p.className = 'barrage-item'
    parent.appendChild(p)
    width = getBoxSize(p).width
    p.style = `width:${width}px;display:none`
    pastTime = this.computeTime(width) //計(jì)算出下一條彈幕應(yīng)該出現(xiàn)的時(shí)間
    //彈幕飛一會(huì)~
    this.run(p)    if (index > this.list[i].length - 1) {        return
    }    let len = this.timeoutFuncs.length    //記錄好定時(shí)器，后面清空
    this.timeoutFuncs[len] = setTimeout(() => {        this.indexs[i] = index + 1
        //遞歸調(diào)用下一條
        this.dispatchItem(this.list[i][index + 1], i, index + 1)
    }, pastTime);
}復(fù)制代碼

//用css動(dòng)畫，整體還是比較流暢的this.run = function (item) {
    item.classList += ' running'
    item.style.left = "left:100%"
    item.style.display = ''
    item.style.animation = `run ${this.speed/1000}s linear`
    //已完成的打一個(gè)標(biāo)記
    setTimeout(() => {
        item.classList+=' done'
    }, this.speed);
}復(fù)制代碼

//根據(jù)彈幕的寬度和gapWth，算出下一條彈幕應(yīng)該出現(xiàn)的時(shí)間this.computeTime = function (width) {    let length = width + this.gapWidth    let time = Math.round(length / this.boxSize.width * this.speed/2)    return time
}復(fù)制代碼

動(dòng)畫css具體如下

@keyframes run {
    0% {        left: 100%;
    }

    50% {        left: 0
    }

    100% {        left: -100%;
    }
}.run {    animation-name: run;
}復(fù)制代碼

其余方法

停止

利用動(dòng)畫的paused屬性停止

this.stop = function () {    let items = document.querySelectorAll(`${el} .barrage-item`);
    [...items].forEach(item => {
        item.className += ' pause'
    })
}復(fù)制代碼

.pause {    animation-play-state: paused !important;
}復(fù)制代碼

重新開始

移除pause類即可

this.restart = function () {    let items = document.querySelectorAll(`${el} .barrage-item`);
    [...items].forEach(item => {
        removeClassName(item, 'pause')
    })
}復(fù)制代碼

打開關(guān)閉

做一個(gè)顯示隱藏的邏輯即可

this.close = function () {    this.container.style.display = 'none'}this.open = function () {    this.container.style.display = ''}復(fù)制代碼

清理彈幕

this.clearData = function () {    //清除list
    this.list = []    //清除dom
    document.querySelector(`${el}`).innerHTML = ''
    //清除timeout
    this.timeoutFuncs.forEach(fun => clearTimeout(fun))
}復(fù)制代碼

最后用一個(gè)定時(shí)器定時(shí)清理過期的彈幕:

setInterval(() => {    let items = document.querySelectorAll(`${el} .done`);
    [...items].forEach(item=>{
        item.parentNode.removeChild(item)
    })
}, this.speed*5);復(fù)制代碼

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)原生JavaScript如何實(shí)現(xiàn)彈幕組件de方法大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。