原生JavaScript实现弹幕组件

2024-04-28 62

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 原生JavaScript实现弹幕组件

前言

如今几乎所有的视频网站都有弹幕功能，那么今天我们就自己用原生 JavaScript 封装一个弹幕类。这个类希望有如下属性和实例方法：

属性

el容器节点的选择器，容器节点应为绝对定位，设置好宽高
height 每条弹幕的高度
mode 弹幕模式，half则为一半容器高度，top为三分之一，full为占满
speed弹幕划过屏幕的时间
gapWidth后一条弹幕与前一条弹幕的距离

方法

pushData 添加弹幕元数据
addData持续加入弹幕
start开始调度弹幕
stop停止弹幕
restart 重新开始弹幕
clearData清空弹幕
close关闭
open重新显示弹幕

PS:有一些自封装的工具函数就不贴出来了，大概知道意思就好

初始化

引入JavaScript文件之后，我们希望如下使用，先采取默认配置。

let barrage = new Barrage({
    el: '#container'
})

参数初始化：

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 = []
}

先接受好参数然后初始化，下面看看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')))
    }
}

通过getComputedStyleapi计算出盒子的宽高，这里用来计算容器的宽高，之后也会用到。

function initRows(box, mode, height) {
    let divisor = getDivisor(mode)
    rows = Math.ceil(box.height * divisor / height)
    return rows
}

function getDivisor(mode) {
    let divisor = .5
    switch (mode) {
        case 'half':
            divisor = .5
            break
        case 'top':
            divisor = 1 / 3
            break;
        case 'full':
            divisor = 1;
            break
        default:
            break;
    }
    return divisor
}

根据高度算出弹幕应该有多少行，下面会有地方用到行数。

插入数据

有两种插入数据的方法，一种是添加源数据，一种是持续添加。先来看添加源数据的方法：

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节点
        for (let i = 0; i < this.rows; i++) {
            let div = document.createElement('div')
            div.classList = `barrage-list barrage-list-${i}`
            div.style.height = `${this.boxSize.height*getDivisor(this.mode)/this.rows}px`
            this.container.appendChild(div)
        }
    }
}

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

    }

    let leastRow = getLeastRow(this.list) //获取弹幕列表中最少的那一列，弹幕列表是一个二维数组
    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
        }
    })
}
//根据行数把一维的弹幕list切分成rows行的二维数组
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
}

持续加入数据的方法只是调用了添加源数据的方法，并且开始了调度而已

this.addData = function (data) {
    this.pushData(data)
    this.start()
}

发射弹幕

下面来看看发射弹幕的逻辑

this.start = function () {
    //开始调度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
    }
    //真正的调度从这里开始，用一个实例变量存储好当前调度的下标。
    if (row[this.indexs[i]]) {
        this.dispatchItem(row[this.indexs[i]], i, this.indexs[i])
    }
}

this.dispatchItem = function (item, i) {
    //调度过一次的某条弹幕下一次在调度就不需要了
    if (!item || this.idMap[item.id]) {
        return
    }
    let index = this.indexs[i]
    this.idMap[item.id] = item.id
    let div = document.createElement('div'),
        parent = document.querySelector(`${el} .barrage-list-${i}`),
        width,
        pastTime
    div.innerHTML = item.content
    div.className = 'barrage-item'
    parent.appendChild(div)
    width = getBoxSize(div).width
    div.style = `width:${width}px;display:none`
    pastTime = this.computeTime(width) //计算出下一条弹幕应该出现的时间
    //弹幕飞一会~
    this.run(div)
    if (index > this.list[i].length - 1) {
        return
    }
    let len = this.timeoutFuncs.length
    //记录好定时器，后面清空
    this.timeoutFuncs[len] = setTimeout(() => {
        this.indexs[i] = index + 1
        //递归调用下一条
        this.dispatchItem(this.list[i][index + 1], i, index + 1)
    }, pastTime);
}

//用css动画，整体还是比较流畅的
this.run = function (item) {
    item.classList += ' running'
    item.style.left = "left:100%"
    item.style.display = ''
    item.style.animation = `run ${this.speed/1000}s linear`
    //已完成的打一个标记
    setTimeout(() => {
        item.classList+=' done'
    }, this.speed);
}

//根据弹幕的宽度和gapWth，算出下一条弹幕应该出现的时间
this.computeTime = function (width) {
    let length = width + this.gapWidth
    let time = Math.round(length / this.boxSize.width * this.speed/2)
    return time
}

动画css具体如下

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

    50% {
        left: 0
    }

    100% {
        left: -100%;
    }
}
.run {
    animation-name: run;
}

其余方法

停止

利用动画的paused属性停止

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

.pause {
    animation-play-state: paused !important;
}

重新开始

移除pause类即可

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

打开关闭

做一个显示隐藏的逻辑即可

this.close = function () {
    this.container.style.display = 'none'
}
this.open = function () {
    this.container.style.display = ''
}

清理弹幕

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

最后用一个定时器定时清理过期的弹幕:

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

最后

感觉这个的实现还是有缺陷的，如果是你设计这么一个类，你会怎么设计呢？

原生JavaScript实现弹幕组件

前言

属性

方法

初始化

插入数据

发射弹幕

其余方法

停止

重新开始

打开关闭

清理弹幕

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

原生JavaScript实现弹幕组件

前言

属性

方法

初始化

插入数据

发射弹幕

其余方法

停止

重新开始

打开关闭

清理弹幕

最后

热门文章

最新文章

相关课程

相关电子书

相关实验场景