原生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 (da